처음 공방을 찾아갔던 날
경기도 안성의 한적한 골목 끝, 오롯 유기 공방의 문을 처음 열었을 때 가장 먼저 닿은 것은 망치 소리였다. 스무 해 가까이 방짜유기를 빚어 온 김명한 장인이 1300도의 불 앞에서 청동을 두드리고 있었다. 그릇 한 점에 들어가는 두드림은 적게 잡아도 수천 번이라고 했다.
“황금빛이 사진으로는 전해지지 않아요. 손에 쥐어야 알 수 있는 무게와 깊이가 있어요.” 첫 미팅에서 장인이 건넨 말이 사이트 설계의 출발점이 되었다. 인스타그램 사진으로는 도무지 전해지지 않는 그 깊이를, 우리는 어떻게 화면 위에 옮겨야 할까.
두드림의 시간을 어떻게 보여줄 것인가
오롯 공방 브랜드의 핵심은 결국 ‘시간’이었다. 한 그릇이 완성되기까지 일주일, 한 세트는 한 달. 우리는 사이트의 첫 화면에서 이 시간을 직접 체감하게 만들기로 했다.
스크롤 기반 영상 시퀀스를 첫 섹션에 배치했다. 사용자가 페이지를 내릴수록 청동 덩어리가 두드려지고 광택이 올라오며 마지막에 그릇 한 점이 완성되는 구성이다. CSS의 scroll-driven animations를 활용해 자바스크립트 의존을 최소화했고, 모바일에서도 끊김 없이 흐르도록 60장의 키프레임만 골라 썼다.
황금빛을 화면에 담는 컬러 시스템
방짜유기의 황금빛은 단일 색상이 아니다. 빛의 각도에 따라 노란빛, 적갈색, 검정에 가까운 그림자가 한꺼번에 살아난다. 우리는 메인 컬러를 #C8A05A로 잡되, 배경에 #2C1810의 깊은 적갈색을 깔아 그릇이 떠오르듯 보이게 했다. 보조 컬러는 한지의 결을 닮은 #F5EFE3로, 본문이 무거워지지 않도록 균형을 맞췄다.
사진 무게와 페이지 속도의 줄다리기
유기는 사진의 무게가 곧 브랜드의 무게다. RAW 한 장이 80MB를 넘는 고화질 원본을 받아 들고, 화질과 속도 사이에서 고민이 깊어졌다. 우리가 택한 절충안은 다음과 같다.
- 대표 컷은 AVIF로 변환해 원본 대비 75% 용량 절감
- 스크롤 시퀀스는 WebP 60장 + 프리로드 큐로 끊김 없이 재생
- 제품 상세는 LQIP(저화질 placeholder)로 첫 인상부터 자연스럽게
- 모바일에서는 prefers-reduced-motion을 존중해 시퀀스를 정지 컷으로 대체
그 결과 LCP 1.8초, CLS 0.03으로 모바일 Core Web Vitals 모두 그린을 받았다. 무거워 보이는 화면이 실제로는 가볍게 도착한다는 것이 이 사이트의 숨은 자랑이다.
장인의 시간을 사이트의 흐름으로
제품 페이지는 흔한 ‘카드 그리드’ 대신 제작 일지 형식을 택했다. 한 점 한 점이 언제 만들어졌는지, 그날의 메모와 함께 보여주는 구조다. 자연스럽게 한정 수량 마케팅으로 이어졌다. 만든 만큼만 판다는 정직함이 그대로 사이트의 매력이 된다.
주문 폼도 단순했다. 상품 선택, 각인 메시지, 배송지. 결제는 토스페이먼츠로 연결해 한 화면에서 끝낸다. 회원가입 없는 게스트 결제를 기본으로 두니 첫 달 전환율이 예상치를 30% 상회했다.
런칭 한 달, 공방에 닿은 손편지
사이트 오픈 한 달이 지났을 때, 장인에게서 메시지가 왔다. “어제 오랜 단골이 사이트를 보고 손편지를 보냈어요. 이 그릇을 만드는 사람이 보였다고요.” 우리가 만든 건 결국 이 한 줄을 위한 화면이었다는 생각이 들었다.
마치며
전통 공예 브랜드의 사이트는 화려한 인터랙션이나 트렌디한 컴포넌트가 답이 아니다. 만드는 사람의 시간과 손길이 화면 위에서 그대로 느껴지는 것, 그것이 전부다. CYAN은 작은 공방부터 큰 브랜드까지, ‘왜 이 일을 하는가’가 화면 위에 머무는 사이트를 만든다. 두드림의 시간을 가진 모든 분들의 이야기가 우리의 다음 작업이 되기를 기대한다.