의뢰: 부채보다 결을 먼저 만드는 사람
의뢰주는 전주에서 3대째 합죽선(合竹扇)을 만드는 장인이었다. 첫 미팅에서 그는 "부채는 바람을 만들기 전에 결을 먼저 만든다"고 말했다. 댓살의 결, 종이의 결, 손목의 결. 그 세 가지 결이 맞아야 한 자루의 합죽선이 된다는 말이었다. 그 한 문장이 사이트 전체의 컨셉을 정했다. 우리는 부채를 자랑하는 카탈로그가 아니라, 결이 만들어지는 과정을 천천히 따라가는 호흡을 만들기로 했다.
접힌 화면과 펼쳐진 화면 사이
일반적인 세로 스크롤은 합죽선의 움직임과 결이 맞지 않았다. 합죽선은 위에서 아래로가 아니라 한 점에서 부채꼴로 펼쳐진다. 그래서 사이트 곳곳에 가로 흐름과 펼침의 리듬을 숨겼다.
- 히어로: 검정 합죽 손잡이 한 점에서 시작해 종이 면이 좌우로 펼쳐지는 무음 영상
- 제품 상세: 한 줄짜리 가로 카드로 부채의 옆모습을 그대로 보여주는 레이아웃
- 섹션 분리: 살의 마디처럼 가는 가로선 한 줄로만 구분, 박스나 음영은 쓰지 않음
스크롤이 끝까지 내려갔을 때 마지막 섹션에서 펴진 부채가 다시 한 점으로 접히는 짧은 마무리 영상이 재생되도록 했다. 사이트를 다 보고 나면 부채가 한 번 펴졌다 닫히는 셈이다.
댓살의 베이지와 합죽의 검정
컬러는 단 세 가지로 잡았다. 댓살이 마른 뒤의 옅은 베이지(#E8DFCB), 손잡이 합죽 끝의 검정(#1A1A1A), 종이의 흰(#FAFAF7). 강조색은 단 한 군데, 의뢰 폼의 버튼에만 쓰는 진한 옻색(#3A2415)으로 두었다. 색을 줄이자 사진 속 부채의 결이 비로소 보이기 시작했다. 타이포는 본문에 산돌고딕네오, 제품명과 인용에는 산돌명조네오를 썼다. 부채살의 가는 선과 합죽 손잡이의 굵은 마감이 글자 안에서 한 번 더 재생되기를 바랐다.
펴는 순간과 닫는 순간을 함께 담는 일
제품 사진은 펴진 상태만 찍어 올리는 곳이 많지만, 우리는 펴지는 과정의 중간 컷을 같은 비중으로 실었다. 합죽선의 결은 펴진 결과보다 펴지는 과정 안에 있기 때문이다. 손이 들어간 동영상은 모두 무음으로 처리하고, 자막 대신 손목의 각도와 살의 펼침만 보이게 했다. 모바일에서는 자동재생을 막고, 사용자가 직접 한 번 탭해야 부채가 펴지는 인터랙션을 넣었다. 부채를 펴는 행위 자체를 사용자에게 한 번 양보한 셈이다.
제작 이후
오픈 한 달 만에 사이트 문의는 두 배 가까이 늘었고, 평균 체류 시간은 4분을 넘겼다. 더 인상적이었던 건 의뢰 메일의 톤이 달라졌다는 점이다. 가격을 먼저 묻는 메일은 줄었고, "어떤 결의 부채를 만들고 싶다"는 식으로 결을 먼저 말하는 문의가 늘었다. 사이트가 결을 먼저 보여주자, 고객도 결을 먼저 말했다.
손의 결을 화면으로 옮기는 일
CYAN은 작은 공방과 브랜드의 사이트를 만들 때, 제품 사진보다 손의 흔적을 먼저 살핀다. 손의 결은 코드 구조와 레이아웃의 호흡, 컬러의 절제, 영상의 침묵으로도 옮길 수 있다고 믿기 때문이다. 다음 글에서는 또 다른 공방의 결을 이어가려 한다.