옻은 시간이 다 만든다. 칠을 한 번 올리고 마른 뒤에 다시 올리는 일을 백 번 가까이 반복하면, 비로소 깊은 광이 도는 검정 한 면이 된다. 옻연(漆緣)은 충북 보은의 한 공방에서 그 일을 해온 부녀(父女) 장인이 운영하는 옻칠 브랜드다. 의뢰가 들어왔을 때 함께 받은 메모는 한 줄이었다. 검정 한 색만으로도 아름다운 사이트면 좋겠다.
화면이 가진 빛으로 옻의 광을 다시 만들기
옻칠한 면을 사진으로 옮기면 광이 사라진다. 디스플레이는 빛을 스스로 내지만, 사진 속 옻은 그 빛을 받아내야 비로소 깊은 검정으로 보인다. 그래서 옻연 사이트의 배경은 거의 검정에 가까운 #0E0C0A로 깔고, 그 위에 작품을 띄웠다. 화면이 어두워지자 작품의 광이 살아났다. 모니터마다 검정의 깊이가 다르므로, 배경과 작품 사이에 1퍼센트 더 어두운 점을 한 곳에 두어 그 점에서 빛이 퍼지듯 옻의 광이 도드라지게 했다.
한 가지 검정으로 짠 색의 위계
옻연은 작품도 패키지도 명함도 모두 검정 단색이다. 사이트도 같은 원칙으로 짰다. 다만 모든 검정이 같은 검정이면 위계가 사라지므로, 한 색을 단계로 쪼갰다.
- #0E0C0A — 배경, 옻의 깊이를 위한 가장 어두운 면
- #1A1612 — 카드와 섹션 구분, 손으로 짚으면 1mm 떠 있는 듯한 차이
- #3B3128 — 본문 보조 텍스트
- #C9B89A — 한 줌의 베이지, 옻을 닦는 모시천의 색에서 가져왔다
이 네 단계만으로 사이트 전체가 짜였다. 색이 적을수록 사진이 살아나는 일은, 작품 사이트에서는 거의 법칙에 가깝다.
작품 한 점이 한 페이지의 주인공이 되는 구조
옻연이 한 해에 만들어내는 작품은 굽다리, 합(盒), 함(函), 쟁반을 합쳐 30점 남짓이다. 흔한 쇼핑몰처럼 그리드로 죽 깔면 작품의 무게가 사라진다. 메인은 한 화면에 한 작품만 배치하는 풀스크린 가로 스크롤로 짰고, 작품 페이지에 들어가면 사진 한 장이 화면을 가득 채운다. 아래에 제목, 크기, 옻을 올린 횟수, 제작 기간을 적고, 가격은 가장 마지막에 둔다. 작품을 충분히 본 다음에 값을 만나도록 흐름을 짠 것이다.
마우스 위치를 따라 광이 흐르게
옻칠한 그릇은 보는 각도에 따라 광이 다르게 보인다. 정면에서는 검은 거울 같다가, 비스듬히 보면 깊은 갈색이 비친다. 그 인상을 화면에서도 만들고 싶었다. 작품 사진 위에 마우스를 올리면, 커서 위치를 따라 미세한 하이라이트가 사진 위를 흐른다. CSS의 radial-gradient와 mix-blend-mode: soft-light를 결합한 가벼운 효과로, 자바스크립트는 좌표만 넘긴다. 모바일에서는 가속도 센서를 받아 같은 효과를 만들었다. 손에 든 폰을 살짝 기울이면 작품 위로 광이 따라 흐른다.
옻이 마르는 속도로 페이지가 호흡하게
옻은 빨리 마르지 않는다. 한 칠을 올리고 다음 칠까지 며칠을 기다린다. 사이트의 전환도 그 호흡을 따랐다. 페이지를 넘길 때 0.6초의 페이드, 사진이 떠오를 때 0.8초의 천천한 줌인. View Transitions API를 쓰면 자바스크립트 없이도 이 호흡을 만들 수 있다. 속도가 느린 사이트는 보통 답답하지만, 옻연의 사이트에서는 그 느림이 브랜드의 일부가 된다. 모든 브랜드 사이트의 속도가 같이 빨라야 할 이유는 없다. 작품이 만들어지는 시간을 사이트가 기억할 때, 화면 너머의 손길이 비로소 전해진다.
시안 에이전시는 한 번 쓰고 마는 사이트가 아니라, 브랜드의 호흡을 함께 짜는 사이트를 만든다. 옻연처럼 시간을 가진 브랜드일수록, 그 시간을 화면이 어떻게 담아내느냐가 브랜드의 다음 10년을 결정한다.