"공장에서 찍어내는 도자기와는 다른 결을 보여주고 싶어요." 온시(溫詩) 공방의 첫 미팅에서 들은 한 줄이 사이트 전체의 방향을 정했다. 작가가 직접 흙을 빚고, 가마에서 굽고, 매장에서 직접 손님을 맞는 작은 공방. 같은 크기의 잔이 두 개로 나오지 않는다는 점이, 단점이 아니라 가장 큰 강점이었다.
1. 첫 미팅 — 다른 결을 어떻게 화면에 담을까
대표님은 인스타그램으로 손님이 꾸준히 들어오지만, 정작 작품을 진지하게 살펴볼 공간이 없다고 했다. 피드는 흘러가버리고, DM은 매번 같은 답변을 반복하게 만든다. 사이트는 매장의 정적인 분위기를 그대로 옮기는 동시에, 작품 한 점 한 점에 이름과 사연을 붙여줄 공간이어야 했다.
2. 콘셉트 — 손의 흔적을 지우지 않는다
대량 생산 도자기 쇼핑몰의 깔끔한 정렬과 새하얀 배경은 의도적으로 피했다. 대신 흙빛 베이지와 가마 안 잿빛을 메인 컬러로 잡고, 사진 속 그릇이 가진 미세한 비대칭과 표면 결이 그대로 살도록 가이드를 짰다. 가지런하지 않은 것을 가지런하지 않게 보여주는 사이트가 콘셉트가 됐다.
3. 디자인 — 여백이 전시장이 되도록
작품 사진은 모두 동일한 자연광 환경에서 촬영했다. 격자에 강제로 맞추는 그리드 대신, 작품의 비례에 따라 한 줄에 두 점이 들어가기도 하고 한 점만 크게 자리를 잡기도 한다. 폰트는 본명조와 프리텐다드 두 종을 골랐다. 작가의 손글씨를 닮은 본명조는 작품명에, 가독성이 좋은 프리텐다드는 본문과 가격에 사용해 정보가 흐트러지지 않게 했다.
4. 핵심 페이지 — 한 점에 이름이 있다
가장 공들인 부분은 작품 상세 페이지였다. 이름, 작업 시기, 사용한 흙의 종류, 가마에서 구운 시간, 작가의 한 줄 노트가 함께 들어간다. 같은 잔이라도 이름이 다르면 다른 작품이라는 점을 페이지에서 분명하게 보여줬다. 구매 버튼은 하단에 차분하게 놓이지만, 결제로 바로 이어지지 않고 작가에게 문의로 연결된다. 대량 생산이 아닌 만큼, 한 점 한 점이 대화로 시작된다는 공방의 철학을 그대로 옮겼다.
5. 기술 — 가벼우면서도 정성이 묻어나도록
도자기 사진은 결과 빛이 살아야 해서 압축에 민감했다. 원본은 R2에 올리고, 화면 크기에 맞춰 WebP로 자동 변환되도록 파이프라인을 구성했다. 첫 화면 LCP를 1.5초 이내로 잡기 위해 메인 비주얼은 lazy 로드를 끄고 우선순위를 높였고, 작품 목록은 스크롤 위치에 따라 추가 이미지를 불러오도록 했다. 모바일에서 한 손으로 잡고 천천히 스크롤하는 동선을 가장 먼저 고려했다.
6. 런칭 후 — 사이트가 매장보다 먼저 손님을 맞는다
오픈 한 달, 인스타그램에서 사이트로 넘어온 방문자의 평균 체류 시간은 3분을 넘겼다. 작품 상세 페이지의 '작가 노트' 영역이 가장 많이 읽혔고, 문의 폼으로 들어온 메시지의 90% 이상이 매장 방문 예약이었다. 매장보다 먼저 사이트에서 손님을 만난 기분이라는 대표님의 말이 그대로 사이트의 성과 지표가 됐다.
마치며
작은 공방의 사이트일수록 효율보다 정서가 먼저다. 같은 그릇이 두 개로 만들어지지 않는 작업의 결을, 화면에서도 그대로 느낄 수 있어야 한다. CYAN은 한지, 우리차, 막걸리, 원목 가구에 이어 도자까지, 한국적인 결을 가진 브랜드 사이트를 가장 잘 만드는 팀이 되어가고 있다. 우리만의 결을 가진 브랜드 사이트가 필요하다면, 언제든 문의 주시길.