Morning on a Banana Leaf: A South Indian Breakfast Still Life in CSS
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. ...
개요 #
캐나다에 머무는 개발자 Sushyam Nagallapati가 고향 남인도의 아침 밥상을 브라우저 안에 옮겼다. 바나나 잎 위에 놓인 이들리 세 개, 삼바르, 코코넛 처트니, 스테인리스 숟가락, 필터 커피가 담긴 다바라 텀블러까지. 전부 CSS로만 그렸다.
Dev.to의 Frontend Challenge — Comfort Food Edition, CSS Art 부문 출품작이다. 사진 한 장, SVG 한 줄, canvas 요소 하나 쓰지 않았다.
시작은 도시락통이었다 #
첫 버전은 뚜껑이 열리면 안의 식사가 드러나는 인터랙티브 티핀 박스였다. 동작 자체는 문제없이 굴러갔다. 그런데 작업하다 보니 뚜껑, 손잡이, 여닫는 메커니즘에 시간을 쏟고 정작 음식은 뒷전이 되어 있었다.
방향을 틀었다. 도시락통을 버리고 아침 식사 그 자체에 집중하기로 했다.
랜딩 페이지나 UI 콘셉트처럼 보이는 결과물은 원하지 않았다는 게 작성자의 설명이다. 음식과 재질, 공기가 대부분을 말해주는 정물화에 가까웠으면 했다.
그라디언트로 쌓아 올린 밥상 #
Photo by Quang Nguyen Vinh on Pexels
바나나 잎은 겹겹이 쌓은 그라디언트와 그림자, 중앙 잎맥, 그리고 잎맥에서 갈라지는 잔가지들로 만들었다. 이들리는 작은 radial gradient를 얹어 표면의 기공을 표현했다. 이 처리가 없었다면 그냥 흰 원 세 개로 보였을 것이다.
가장 애먹은 건 금속이었다. 스테인리스 그릇, 숟가락, 다바라와 텀블러가 그렇다. 회색 그라디언트만 쓰면 납작해 보이고, 하이라이트를 세게 주면 순식간에 크롬 도금처럼 번들거렸다. 결국 어두운 가장자리, 부드러운 반사, inset shadow, 주변 장면에서 끌어온 따뜻한 색조를 층층이 얹어서 해결했다.
디테일도 놓치지 않았다. 삼바르에는 기름 자국과 카레잎, 고추가 떠 있다. 처트니에는 머스터드 씨와 템퍼링 흔적이 남아 있다. 커피 거품, 나뭇결, 그리고 여기저기 작은 흠집까지 심었다. 너무 깨끗하고 기계적으로 보이지 않게 하려는 장치다.
움직임은 최소한으로 #
애니메이션은 일부러 절제했다. 아침상의 구성 요소들이 단계적으로 등장한 뒤 장면이 가라앉고, 그때부터는 김이 오르는 것만 계속 움직인다.
데스크톱에서는 포인터를 따라 살짝 시점이 바뀐다. JavaScript가 하는 일은 포인터 위치에 맞춰 CSS 커스텀 프로퍼티 두 개를 갱신하는 것뿐이고, 실제 perspective 변환은 CSS가 처리한다.
접근성도 챙겼다. 작품 전체를 설명 레이블이 붙은 figure로 감쌌고, 장식 요소는 보조 기술에서 숨겼다. prefers-reduced-motion이 켜져 있으면 등장 애니메이션과 포인터 움직임이 꺼진다.
CSS를 더 쓴다고 좋아지지 않는다 #
작성자가 이번 작업에서 가장 크게 배운 점이다. 코드를 덜어내고 구도, 겹침, 빛, 재질, 문화적 맥락에 더 신경 쓰기 시작했을 때 결과물이 눈에 띄게 나아졌다.
최종본은 처음 구상과 상당히 달라졌지만, 만들고 싶었던 것에는 훨씬 가까워졌다. 작성자는 이렇게 정리했다.
브라우저를 통해 기억해낸, 집의 작은 조각.
직접 보기 #
임베드가 열리지 않으면 CodePen에서 작품 보기 →
이 글은 위 출처를 바탕으로 한국 독자를 위해 재작성한 기사입니다. 원문의 사실과 수치에 근거하며, 별도의 견해를 포함하지 않습니다.