LIQUID GLASS

ABOUT

본 페이지는 APPLE iOS 에서 지원하는 LIQUID GLASS 를 빛의 굴절까지 웹 브라우저에서 직접 구현하고, UI 에 적용하여 2026년 디자인 트렌드에 걸맞는 웹사이트를 디자인하기 위한 페이지 입니다.

해당 페이지에 사용된 LIQUID GLASS UI 는 실제 iOS 에서 사용되는 것이 아닌, 느낌을 구현하기 위해서 UI 뒤에 THREE.JS 의 3D 오브젝트와 라이브러리를 이용해 빛의 굴절을 유도한 UI 입니다.

현재까지 브라우저나 윈도우 OS 에서는 LIQUID GLASS의 정식 지원하지 않습니다.

* 해당 페이지는 높은 그래픽 연산량을 필요로 할 수 있으며, GPU의 성능에 따라 렉이 걸릴 수 있습니다.
* 본 페이지는 PC 전용 페이지 입니다.

IOS in WEB

Title

Description

9:41 AM

Placeholder

9:41

Monday, June 6

본 페이지는 APPLE IOS 에서 지원하는 LIQUID GLASS 를 빛의 굴절을 웹 브라우저에서 직접 제작하고,
UI 에 적용하여 2026년 디자인 트렌드에 걸맞는 웹사이트를 구현하기 위한 페이지 입니다.

GLASS MATERIAL CARD

제작한 카드들을 슬라이드 하면서 다양한 글래스 재질을 경험해보세요,
카드의 번호가 높을 수록 글래스의 두께, 흐림효과, 굴곡률이 달라집니다.

01

Clear

02

Frosted

03

Dense

04

Refractive

05

Thin

06

Deep

07

Smooth

08

Rough

09

Crystal

10

Blur

11

Solid

12

Liquid

01

Clear

02

Frosted

03

Dense

04

Refractive

05

Thin

06

Deep

07

Smooth

08

Rough

09

Crystal

10

Blur

11

Solid

12

Liquid

LIQUID GLASS 는 플랫폼 전체에 걸쳐 통합된 디자인이 콘텐츠 집중력을 높이고, 웹에 새로운 차원의 활력을 불어넣는다. 기존의 사용자의 시각적 피로도를 이유로 제한적이였던 UI 디자인과는 차별되어, 웹 전반에 걸쳐 새로운 수준의 생동감을 선사한다.

LIQUID GLASS는 FIGMA 에서 EFFECTS 를 통해 쉽게 구현할수있습니다. APPLE 에서는 iOS 26 Liquid Glass UI Kit 을 무료로 제공하고 있습니다.

하지만 Liquid Glass Effect 는 iOS 전용으로 제작되었기에 다른 OS 또는 웹 브라우저에서는 지원하지 않습니다. 지금까지는 그저 css 에서 background blur 기능을 이용하여 구현하였지만, 이는 배경의 굴곡까지 표현하기에 영부족입니다.

제작한 다양한 카드들을 드래그하면서 다양한 글래스 재질을 경험해보세요. 각 카드마다 글래스의 두께, 표면의 거침, 굴곡률이 달라집니다.

추가적인 LIQUID GLASS 스타일 및 컴포넌트 구성을 통해 다채로운 3D 인터랙션과 디자인을 웹 브라우저 전체 환경에서 매끄럽게 경험하실 수 있습니다.

디자인, 퍼블리싱, AI 활용 전부 가능한 스마트 디자이너

디자이너와 개발자의 협업이 가장 중요한 웹디자인,사용자의 경험구조를 설계하는데에 있어서 퍼블리싱 이해도는 필수적입니다. 디자인, 퍼블리싱, AI 활용 전부 가능한 스마트 디자이너 장성원입니다.

Name

JANG SEONGWON

Telephone

010-8620-8119

E-Mail

[email protected]

PortFolio