리액트로 애플 액체 유리 효과 만드는 방법

Apple은 항상 사용자 인터페이스 디자인의 선두에 있었으며, 최근 가장 매력적인 효과 중 하나는 "리퀴드 글래스(liquid glass)" 모양입니다. 이 효과는 유동적이고 젤리 같은 외관이 특징이며, UI 요소에 깊이와 상호작용성을 더합니다. 이는 애플리케이션을 더 역동적이고 매력적으로 만드는 미묘하지만 강력한 방법입니다.

이 글에서는 liquid-glass-react 라이브러리를 사용하여 React 애플리케이션에서 이 멋진 효과를 재현하는 방법을 살펴보겠습니다.

이 라이브러리는 효과의 복잡성을 캡슐화하는 고도로 사용자 정의 가능하고 사용하기 쉬운 컴포넌트를 제공하여 최소한의 노력으로 프로젝트에 Apple 디자인의 마법을 더할 수 있습니다.

💡

아름다운 API 문서를 생성하는 훌륭한 API 테스팅 도구를 원하시나요?

개발 팀이 최대의 생산성으로 함께 작업할 수 있는 통합적인 올인원 플랫폼을 원하시나요?

Apidog는 여러분의 모든 요구사항을 충족하며, Postman을 훨씬 저렴한 가격으로 대체합니다!

버튼

시작하기

리퀴드 글래스 효과의 복잡성에 대해 자세히 알아보기 전에, 프로젝트에 liquid-glass-react 라이브러리를 설정해 보겠습니다.

설치

라이브러리를 설치하려면 터미널에서 다음 명령을 실행하십시오.

npm install liquid-glass-react

또는 Yarn을 사용하는 경우:

yarn add liquid-glass-react

기본 사용법

라이브러리가 설치되면 React 애플리케이션에서 LiquidGlass 컴포넌트를 사용할 수 있습니다. 다음은 사용하는 방법에 대한 기본적인 예입니다.

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass>
        <div style={{ padding: '20px' }}>
          Hello, Liquid Glass!
        </div>
      </LiquidGlass>
    </div>
  );
}

export default App;

이렇게 하면 "Hello, Liquid Glass!" 텍스트 주위에 기본적인 리퀴드 글래스 컨테이너가 렌더링됩니다. 이것이 좋은 시작점이지만, 라이브러리의 진정한 힘은 광범위한 사용자 정의 옵션에 있습니다.

핵심 개념

liquid-glass-react 라이브러리를 완전히 이해하고 효과적으로 사용하려면 효과를 구동하는 핵심 개념을 이해하는 것이 도움이 됩니다. 리퀴드 글래스 효과는 주로 SVG 필터, 디스플레이스먼트 맵 및 색수차의 조합을 통해 달성됩니다.

SVG 필터

SVG(Scalable Vector Graphics) 필터는 그래픽에 다양한 효과를 적용할 수 있는 SVG의 강력한 기능입니다. 리퀴드 글래스 효과의 경우 SVG 필터는 컴포넌트에 특유의 모양을 부여하는 왜곡 및 블러를 생성하는 데 사용됩니다.

liquid-glass-react 라이브러리는 원하는 효과를 달성하기 위해 일련의 fe (필터 효과) 프리미티브를 사용합니다. 여기에는 다음이 포함됩니다.

feGaussianBlur: 이 프리미티브는 유리 효과의 핵심 구성 요소인 배경 블러를 생성하는 데 사용됩니다.
feImage: 이 프리미티브는 왜곡 생성에 필수적인 디스플레이스먼트 맵을 로드하는 데 사용됩니다.
feDisplacementMap: 이것이 핵심입니다. 디스플레이스먼트 맵의 픽셀 값을 사용하여 소스 그래픽을 왜곡합니다.
feColorMatrix: 이 프리미티브는 이미지의 색상 채널을 조작하는 데 사용되며, 색수차 효과가 생성되는 방식입니다.
feBlend: 이 프리미티브는 색수차를 위한 빨강, 초록, 파랑 채널과 같은 효과의 다른 레이어를 결합하는 데 사용됩니다.
feComposite: 이 프리미티브는 최종 효과를 원본 소스 그래픽과 결합하는 데 사용됩니다.

디스플레이스먼트 맵

디스플레이스먼트 맵은 다른 이미지를 왜곡하는 데 사용되는 회색조 이미지입니다. feDisplacementMap 필터는 디스플레이스먼트 맵의 색상 값을 사용하여 소스 그래픽의 픽셀을 이동시킵니다. 디스플레이스먼트 맵의 밝은 영역은 소스 그래픽의 픽셀을 한 방향으로 밀어내고, 어두운 영역은 반대 방향으로 밀어냅니다.

liquid-glass-react 라이브러리에는 세 가지 내장 디스플레이스먼트 맵이 포함되어 있습니다.

standard: 표준의 부드러운 디스플레이스먼트 맵.
polar: 극좌표 기반 왜곡이 있는 디스플레이스먼트 맵.
prominent: 더 두드러지고 "기포" 효과가 있는 디스플레이스먼트 맵.

자신만의 사용자 정의 디스플레이스먼트 맵을 제공하거나 셰이더를 사용하여 동적으로 생성할 수도 있습니다.

색수차

색수차는 렌즈가 모든 색상을 같은 지점에 초점을 맞추지 못할 때 발생하는 광학 효과입니다. 이로 인해 물체 가장자리에 색상 "번짐"이 발생합니다. 사진에서는 일반적으로 바람직하지 않은 효과로 간주되지만, 디지털 그래픽에서는 세련되고 미래적인 모양을 만드는 데 사용할 수 있습니다.

liquid-glass-react 라이브러리는 이미지를 빨강, 초록, 파랑 채널로 분할한 다음 각 채널을 약간 다른 양만큼 이동시켜 색수차를 시뮬레이션합니다. 이것은 컴포넌트의 전반적인 "유리 같은" 느낌을 더하는 미묘하지만 효과적인 색상 번짐 효과를 만듭니다.

LiquidGlass 컴포넌트

이제 리퀴드 글래스 효과 뒤에 있는 개념에 대한 기본적인 이해를 얻었으므로, LiquidGlass 컴포넌트와 해당 프롭에 대해 자세히 살펴보겠습니다.

LiquidGlass 컴포넌트는 라이브러리의 주요 컴포넌트입니다. 리퀴드 글래스 효과의 모든 측면을 제어할 수 있는 고도로 사용자 정의 가능한 컴포넌트입니다.

컴포넌트를 사용자 정의하는 데 사용할 수 있는 몇 가지 주요 프롭은 다음과 같습니다.

displacementScale: 왜곡 효과의 강도를 제어합니다. 값이 높을수록 더 왜곡되고 "흔들리는" 모양이 됩니다.
blurAmount: 배경에 적용되는 블러 양을 제어합니다.
saturation: 배경의 채도를 제어합니다.
aberrationIntensity: 색수차 효과의 강도를 제어합니다.
elasticity: 컴포넌트가 마우스 커서 쪽으로 "늘어나는" 정도를 제어합니다. 이것은 재미있는 상호작용 효과를 만듭니다.
cornerRadius: 컴포넌트의 모서리 반경을 제어합니다.
mode: 사용되는 디스플레이스먼트 맵을 제어합니다. standard, polar, prominent, shader 중에서 선택할 수 있습니다.
overLight: true일 때 밝은 배경에서 가시성을 높이기 위해 유리를 더 어둡게 만드는 불리언 값입니다.

사용자 정의

진정한 재미는 LiquidGlass 컴포넌트의 프롭을 가지고 놀기 시작할 때 시작됩니다. 다양한 프롭을 결합하여 광범위하고 독특하며 흥미로운 효과를 만들 수 있습니다.

다음은 더 사용자 정의된 LiquidGlass 컴포넌트의 예입니다.

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass
        displacementScale={100}
        blurAmount={0.5}
        saturation={140}
        aberrationIntensity={2}
        elasticity={0.35}
        cornerRadius={32}
        mode="polar"
        overLight={false}
      >
        <div style={{ padding: '20px' }}>
          Customized Liquid Glass
        </div>
      </LiquidGlass>
    </div&mgt;
  );
}

export default App;

이 예에서는 더 두드러진 왜곡을 만들기 위해 displacementScale을 늘렸고, 극좌표 디스플레이스먼트 맵을 사용하기 위해 mode를 polar로 설정했습니다. 또한 컴포넌트가 마우스 커서에 반응하도록 약간의 elasticity를 추가했습니다.

결론

liquid-glass-react 라이브러리는 React 애플리케이션에서 멋진 리퀴드 글래스 효과를 만드는 강력하고 사용하기 쉬운 도구입니다. 숙련된 디자이너이든 프로젝트에 약간의 멋을 더하려는 개발자이든 이 라이브러리는 제공할 것이 있습니다.

광범위한 사용자 정의 옵션과 고급 기능을 갖춘 liquid-glass-react 라이브러리는 차세대 사용자 인터페이스를 만드는 완벽한 도구입니다. 그러니 무엇을 기다리고 있나요? 사용해 보고 무엇을 만들 수 있는지 확인해 보세요!

💡

버튼