무지갯빛 리퀴드 셰이더 디자인

수학으로 만든 물 위 기름막의 모습

Iridescent Liquid는 여러 애플리케이션 화면이 아니라 하나의 WebGL 프리뷰를 중심으로 구성된 공식 OpenDesign 예제입니다. 직접 작성한 제목 “LIQUID IRIDESCENCE”가 보라, 시안, 핑크, 로즈 형태가 흐르는 채도 높은 필드 위에 놓입니다. 캔버스를 주인공으로 삼으면서 설명 문구는 좌하단의 시선 경로 가까이에 둡니다.

보조 문구는 이 효과를 “living oil-on-water field”라고 부릅니다. 구현은 구체 메시나 사진 텍스처 대신 절차적 노이즈로 전체 화면 삼각형을 렌더링합니다. 덕분에 실제 사물을 그리지 않고도 유체 같은 재질을 암시할 수 있습니다. 이 재질 표현은 시각적 은유일 뿐, 물리적으로 정확한 기름 또는 물 시뮬레이션이라는 증거는 아닙니다.

상단의 “OPENDESIGN · WEBGL PREVIEW”는 맥락을 알려 주고 “REAL-TIME · GPU”는 렌더링 방식을 설명합니다. 이 라벨은 큰 타이틀을 읽기 전에 보는 사람의 방향을 잡아 주지만, 측정된 프레임 레이트나 프로덕션 성능의 증거가 아니라 설명용 인터페이스 문구로 봐야 합니다.

01

연속된 캔버스

시각적 필드가 구성 전체를 채우므로, 움직임이 별도 패널의 배경이 아니라 핵심 콘텐츠로 남습니다.

02

질감 있는 대비

큰 흰색 글자가 촘촘한 색상 필드로부터 에디토리얼 메시지를 분리하지만, 배경이 바뀌어도 배치는 안정적으로 유지되어야 합니다.

이 디자인이 어울리는 곳

이 작업은 인터랙티브 비주얼 배경, 제너러티브 아트 연구, 크리에이티브 코딩 데모의 레퍼런스로 가장 유용합니다. 짧은 설명, 큰 타이틀, 직접적인 인터랙션 안내만으로 시각 실험을 전달하는 방법을 보여 줍니다. 움직이는 표면이 작은 라벨과 상세한 콘텐츠와 경쟁하므로 정보가 많은 인터페이스에는 덜 적합합니다.

“MOVE THE CURSOR ↗”라는 문구는 보는 사람을 수동적인 관찰자에서 참여자로 바꿉니다. 제공된 상태들은 같은 캔버스에서 색 경계와 물결 배치만 다르게 보여 주고, 오버레이는 일관되게 유지됩니다. 이 짝 덕분에 상태 변화가 분명히 읽힙니다. 구성은 바뀌지만 읽기 프레임은 바뀌지 않습니다.

구성과 모션

이 디자인은 강한 세로 읽기 순서를 사용합니다. 상단의 맥락 라벨, 좌하단 근처의 큰 “LIQUID IRIDESCENCE” 제목, 그 아래 설명 문구, 우하단의 커서 안내가 이어집니다. 넓은 캔버스 전반에 시선을 분산하면서도 핵심 메시지는 하나의 읽기 쉬운 블록에 모읍니다.

캡처는 서로 독립된 화면이 아니라 같은 셰이더 캔버스의 세 가지 상태를 보여 줍니다. 세 상태에서 제목과 보조 문장은 제자리에 있고, 주변 흐름만 시안이 많은 영역에서 마젠타, 핑크, 틸, 황토색 구간 쪽으로 이동합니다. 안정된 오버레이는 모션의 기준점이 되지만, 그 대가로 배경이 일부 문구 뒤의 대비를 낮출 수 있습니다.

프래그먼트 셰이더는 두 개의 연쇄 워프 필드를 통해 6레이어 노이즈를 사용합니다. 포인터로부터의 거리 가중 당김이 샘플링 좌표를 휘게 하고, 코사인 팔레트와 밝은 능선 항이 무지갯빛 흐름을 만듭니다. 두 포인터 좌표는 매 프레임 현재값과 목표값의 차이에 0.06을 곱한 만큼 목표값에 가까워지며, 경과 시간은 계속 필드를 변화시킵니다. 우하단 안내는 클릭 가능한 컨트롤이 아니라 고정 텍스트입니다.

구조로서의 색

팔레트는 하나의 그라데이션이 아닙니다. 옅고 빛나는 윤곽으로 가장자리가 둘러진 넓은 색 흐름으로 구성됩니다. 시안과 틸은 지배적인 마젠타와 보라 필드 안에 서늘한 변화를 주고, 옅은 핑크 선은 흐름의 방향을 드러냅니다. 이런 변화 덕분에 실제 기하 형상을 더하지 않고도 캔버스에 입체감이 생깁니다.

안정적인 읽기 프레임

반복되는 오버레이는 실용적인 인터랙션 패턴을 보여 줍니다. 타이틀과 안내는 유지하고 작품만 달라지게 하는 것입니다. 재현할 때도 이 관계를 유지한 뒤, 선택한 팔레트가 텍스트 아래에서 충분한 대비를 확보하는지 테스트하세요.

기능의 경계

이 결과물은 디자인 및 렌더링 예제입니다. 제공된 근거는 눈에 보이는 WebGL 캔버스 상태, 로컬 포인터 반응 처리, 리사이즈, 애니메이션 루프를 뒷받침합니다. 연결된 서비스, 저장소, 프로덕션 배포, 측정된 프레임 레이트, 원본 생성 모델은 검증하지 않습니다. 따라서 세 장의 캡처는 하나의 구성이 보여 주는 시각적 상태로 읽어야 하며, 별개의 워크플로나 검증된 성능의 증거로 읽어서는 안 됩니다.

응용 방법

새 버전에서는 절차적 모션과 에디토리얼 프레임의 관계를 유지한 채 팔레트, 물결 크기, 타이틀 위치, 포인터 영향 중 한 번에 하나만 바꾸세요. 변화는 캔버스에서 눈으로 확인할 수 있게 하고, 제안하는 동작은 이미 존재하는 기능이 아니라 제안으로 설명합니다.