Ambient CSS v3, 빛·두께·재질을 조절하는 물리 기반 CSS 데모

Ambient CSS v3는 포인터 이동으로 광원 방향을 바꾸고, elevation 0부터 3과 bounce, 두께 t0 sheet부터 t2 knob를 조절하는 인터랙티브 CSS 데모임
표면은 오목·평면·볼록, 재질은 무광·유광·유리·브러시드·스펀·블라스트 조합으로 선택 가능함
CSS 변수 --amb-albedo가 재질 색을 다시 칠하며, 유리는 지정한 색 대신 빛의 색조를 받음
모서리 처리로 chamfer, fillet, channel, inset을 고를 수 있고 React 전용 버튼과 수치 조절 컴포넌트도 시연함
사이트는 GitHub 저장소와 문서를 연결하며, Ambient CSS로 만든 Kubernetes 신시 랙 시각화 예제를 함께 링크함

Hacker News opinions

2000년대 중반 LiteStep 테마 분위기가 확 나네. 아직도 LiteStep은 마음속에 있음.

아이패드 AUv3 플러그인에서 이런 질감을 자주 보는데 난 좋음. OS가 밀어붙인 평면 UI보다 손으로 만지는 느낌이 나는 인터페이스가 낫더라.

멋있긴 한데 실제로 쓸 일은 없을 듯. 가독성이 낮고 버튼이 눌렸는지, 무엇이 선택됐는지 판단하기 어렵네.

모바일 Safari에서는 대부분 조작이 안 되는 수준이었음. 컨셉은 좋은데 사용성이 너무 떨어짐.

데스크톱에서도 노브가 클릭 후 세로 드래그에만 반응하더라. 좌우 이동은 안 먹고, 두 번째 노브의 손잡이 위치도 4시에서 6시 부근에만 이상하게 나타남.

몇 년 전 짧게 유행한 뉴모피즘 아닌가 싶었는데, 현실 물체의 형태와 조명을 디자인 시스템에 연결한 점은 더 나아간 듯.

elevation은 기준 평면과 원근을 잡고 Z축으로 translate3d하는 편이 자연스러울 것 같음. 지금 bounce 예제는 배경만 움직여서 어색하고, 텍스처도 CSS 필터보다는 그라데이션이나 내장 데이터처럼 보임.

Claude가 만든 Dribbble식 UI가 이미 너무 많이 보임. Kubernetes 3D 예제처럼 12px 글자에 장식용 장비와 상태표시를 잔뜩 붙이면 정보 밀도 흉내만 내고 읽기는 더 힘들어짐.

Web 2.0 때는 PNG, GIF, progid:DXImageTransform으로 이런 걸 억지로 만들었지. 표준 CSS만으로 가능해지니 정작 업계는 평면 UI로 넘어간 게 아이러니함.

VST GUI 같아서 보기에는 좋지만, 물리 장비를 흉내 낸 둥근 노브는 마우스와 터치패드로 조작하기 정말 별로임. 접근성도 나쁘고, 숨겨진 메뉴가 많은 오래된 하드웨어 UI까지 따라 할 이유는 없음.

스크롤 동작이 너무 나빴음. 다음 페이지 중간까지 스크롤시킨 뒤 멈추게 하고 다시 스크롤해야 넘어가게 해서 반쯤 보다 닫았음.

GUI 데모가 브라우저의 뒤로 가기, 스크롤, 위젯 조작 같은 익숙한 동작을 건드리면 그 설계를 신뢰하기 어려움. 아마 scroll-snap 같기는 한데 결과가 불쾌함.

물리적으로 돌리는 듯한 노브도 있고 커서의 세로 위치만 읽는 노브도 있어서 뭘 어떻게 조작해야 할지 모르겠더라. 모바일에서도 엉망이었음.

라디오 버튼의 키보드 조작은 시각적 배치 방향에 좌우되면 안 됨. 브라우저 기본 input type="radio"는 이걸 처리하는데, 여기는 그냥 버튼과 자바스크립트로 만들었고 다른 위젯도 비슷해 보였음.

입체적인 그림자와 모양으로 조작 가능성을 알리는 건 좋음. 하지만 평면 컴퓨터 UI에 가상 노브를 넣는 건 UX를 신경 쓰는 사람이 할 선택은 아니라고 봄.