리퀴드 메탈 셰이더 디자인

이미지 텍스처 없는 크롬 같은 표면

Liquid Metal은 전체 캔버스를 채우는 단일 셰이더 구성을 중심에 둔 OpenDesign 공식 그래픽 예제입니다. 작품에 쓰인 제목 “Molten chrome, zero textures.”는 핵심 제약을 드러냅니다. 이 표면은 이미지 에셋으로 만든 일러스트가 아니라 재질 스터디로 제시됩니다.

보조 문장은 금속처럼 셰이딩된 도메인 워핑 노이즈 필드, 훑고 지나가는 스페큘러 하이라이트, 무지갯빛 박막 팔레트를 설명합니다. 이 표현은 캡처에 보이는 모습과 그대로 일치합니다. 접히고 흐르는 밴드, 선명한 흰색 반사, 라벤더와 보라에서 시안, 초록, 마젠타로 이동하는 색입니다.

이 디자인이 어울리는 곳

이 작품은 더 큰 인터랙션 모델과 경쟁하지 않으면서 시각적 표면이 분위기를 이끌어야 할 때 가장 유용합니다. 끊김 없는 캔버스는 WebGL 히어로 표현, 제너러티브 아트 스터디, 모션 중심 비주얼 아이덴티티 작업의 레퍼런스로 활용할 수 있습니다.

별도로 제작한 컨트롤이 없어 렌더링된 필드에 주의가 집중됩니다. 그래서 살펴보기는 쉽지만, 제품에 적용하려면 이런 결정이 이미 해결되어 있다고 가정하지 말고 자체 인터랙션 모델, 접근성 처리, 콘텐츠와의 관계를 직접 정의해야 한다는 뜻이기도 합니다.

구성이 변하는 방식

세 프레임 모두 작은 초록색 LIQUID METAL 키커, 훨씬 큰 “Molten chrome, zero textures.” 제목, 보조 설명, 오른쪽 위의 WebGL2 배지를 유지합니다. 이 고정된 위계 아래에서 셰이더가 변합니다. 여섯 겹의 노이즈가 높이 필드를 만들고, 인접한 높이 샘플로 표면 법선을 추정하며, 움직이는 조명, 날카로운 스페큘러 항, 무지갯빛 팔레트가 크롬 같은 외관을 만듭니다.

view-1에서는 옅은 라벤더와 흰색이 지배적이고, 좁은 파랑과 보라 채널이 필드를 가로지릅니다. View-2는 더 어두운 초록과 파랑 밴드로 이동해 표면이 더 방향성 있고 길쭉하게 느껴집니다. View-3은 더 강한 마젠타, 올리브, 연기 같은 회색 영역을 도입합니다. 이들은 서로 다른 캡처 상태일 뿐이며, 사용자가 선택할 수 있는 팔레트나 측정된 성능 모드가 있다는 증거는 아닙니다.

01

View-1

라벤더와 보라가 지배적이며, 촘촘한 흰색 하이라이트가 부드러운 크롬 느낌을 만듭니다.

02

View-2

초록과 짙은 파랑 채널이 더 잘 보이며 길고 방향성 있는 밴드를 만듭니다.

03

View-3

마젠타, 올리브, 연기 같은 회색이 색채 변화의 감각을 높입니다.

고정된 타이포그래피, 변화하는 필드

큰 흰색 제목은 시각 필드의 하단에 겹쳐 놓이고, 짧은 초록색 LIQUID METAL 라벨이 그 앞에 옵니다. 이 순서 덕분에 보는 사람은 더 긴 재질 설명을 읽기 전에 주제를 파악할 수 있습니다. 대신 타이포그래피가 작품의 상당 부분을 차지해, 가려지지 않은 셰이더 표면을 살펴볼 수 있는 면적이 줄어듭니다.

반사 대비

밝고 좁은 하이라이트가 왜곡된 형태의 윤곽을 반복해서 따라갑니다. 이는 광택 있는 금속이라는 시각적 단서를 만들고, 더 어두운 채널은 하이라이트가 따라갈 경계를 제공합니다. 이 효과는 대비에 의존하므로, 더 차분한 팔레트나 낮은 하이라이트 강도는 일부 영역의 텍스트 대비를 개선하더라도 재질을 덜 읽히게 만들 가능성이 큽니다.

확인되는 동작과 한계

소스는 자동 WebGL2 렌더링, 경과 시간 기반 애니메이션, 캔버스 크기 조정을 구현합니다. 포인터, 클릭, 키보드 컨트롤은 등록하지 않습니다. 로컬 프레임 레이트 추정치는 WebGL2 배지에서 대략 반 초마다 갱신되며, 이는 이번 렌더링 세션을 설명할 뿐 GPU 성능을 보장하지 않습니다. 이 효과는 크롬을 절차적으로 근사한 시각 표현이며, 물리적인 용융 금속 시뮬레이션이 아닙니다.

정적 마크업에는 별도로 제작한 컨트롤이 보이지 않으며, 제공된 근거로는 연결된 서비스, 저장된 사용자 데이터, 프로덕션 배포, 인터랙션 입력, 원래 생성에 사용된 모델을 확인할 수 없습니다. 재현 작업에서 이런 기능을 제안할 수는 있지만, 이 디자인 자체가 검증하는 범위 밖입니다.

1. 캔버스를 로컬로 유지하기

   셰이더를 독립적으로 동작하는 시각 레이어로 보고, 외부 애플리케이션 동작은 별도로 정의하세요.

2. 캡처와 지표 분리하기

   세 프레임은 시각적 변화를 논의하는 데 사용하고, 런타임 성능은 의도한 환경에서 따로 측정하세요.