미쉐린 가이드 한국 2026에서 1스타를 받은 일식 레스토랑 하쿠시(白紙)의 브랜드 웹사이트를 기획부터 디자인, 개발까지 맡았다. 이름 그대로 "새하얀 도화지". 매일 비워진 캔버스 위에 셰프의 시간과 계절이 한 접시씩 그려진다는 이 한 문장을, 화면을 여는 순간 그대로 느끼게 만드는 것이 이 프로젝트의 전부였다.
그래서 사이트의 첫 문장도 똑같이 한 줄로 정리했다. The page is the plate.
개요
하쿠시는 가격을 공개하지 않는 1인 30만 원대의 파인다이닝이다. 화려한 연출보다 정적인 격조가 어울리는 자리였고, 갤러리 같은 화이트 공간과 카운터 오픈 주방이라는 실제 공간의 무드를 웹으로 옮기는 일이 핵심 과제였다.
클라이언트는 하쿠시, 분야는 파인다이닝 브랜딩과 웹, 역할은 기획·UX·아트디렉션·퍼블리싱·개발 전 과정이다. 결과물은 WordPress 커스텀 테마로 직접 구축했다.
정해진 그림은 없다. 계절이 닿는 자리마다, 한 접시를 그린다.
하쿠시 브랜드 스테이트먼트
기획
브랜드의 본질인 '백지(白紙)'를 디자인 모티프가 아니라 사이트 구조의 중심축으로 삼았다. 순백의 여백을 가장 비싼 자원으로 쓰고, 정보는 Hero(브랜드 선언) → 공간 → 철학 → 코스 → 저널 순으로, 손님이 가게에 들어와 자리에 앉기까지의 호흡을 그대로 따라가게 배치했다.
타깃도 분명히 했다. 데이트와 기념일, 특별한 날을 찾는 미식가. 그래서 '정보 전달'보다 '분위기와 몰입'을 우선했다. 더해서, 사람뿐 아니라 AI 검색에도 하쿠시가 제대로 소개되도록 llms.txt를 별도로 설계해 "30만 원대 파인다이닝", "데이트·기념일에 어울리는 곳" 같은 추천 맥락을 구조화해 노출했다.
디자인
팔레트는 순백과 딥 블랙, 그리고 절제해 쓴 미쉐린 레드 세 가지로 묶었다. 미쉐린 별조차 흔한 빨강 대신 블랙 락업으로 통일해 격을 낮추지 않았다. 타이포는 디스플레이에 Cormorant Garamond와 Noto Serif KR, 본문에 Pretendard를 짝지어 서양 세리프의 우아함과 한글의 정돈된 가독성을 함께 가져갔다.
'도화지'라는 은유는 스크롤에서 한 번 더 작동한다. 배경색이 섹션을 지날 때마다 순백 → 사진을 부각시키는 딥 블랙 → 따뜻한 그레이지로 천천히 번지면서, 빈 종이가 한 장씩 채워지는 감각을 만든다.
인터랙션
가장 공들인 영역이다. 모션이 장식이 아니라 '격조'를 만드는 언어가 되도록, 빠르고 화려한 대신 느리고 묵직하게 잡았다.
히어로의 HAKUSI 워드마크는 흐릿하게 맺혔다가 또렷해지며 등장하고, 마우스를 따라 미세하게 따라붙는다. 공간 사진은 사선으로 누운 띠 위를 자동으로 가로지르며, 스크롤 속도에 반응해 좌우로 살짝 찌그러지는 관성 효과를 준다. 사진을 누르면 풀스크린 라이트박스가 열리고(키보드·스와이프 지원), 코스 카드와 저널 글은 화면에 들어오는 순간 아래에서 차례로 떠오른다. 페이지를 옮길 때는 흰 오버레이가 한 번 덮였다 걷힌다.
모든 모션에는 prefers-reduced-motion 폴백을 넣어 동작을 줄이도록 설정한 사용자에게는 즉시 정지 화면을 보여주고, 터치 기기에서는 호버로 생기는 어색함을 따로 제거했다.
개발
WordPress 커스텀 테마로 구축하되, 속도와 안정성을 위해 군더더기를 걷어냈다. 폰트는 전부 self-host해 외부 CDN 의존을 없앴고, CSS·JS는 파일 수정 시각 기반으로 캐시를 자동 무효화한다.
검색 노출도 처음부터 설계에 포함했다. 페이지당 H1 하나 규칙을 지키고, FAQ 구조화 데이터(JSON-LD)와 Open Graph를 출력하며, 예약 버튼은 접속 언어에 따라 한국어·영어 캐치테이블로 자동 분기한다. JavaScript가 실패해도 본문과 글이 그대로 보이도록 안전장치를 둬, 접근성과 SEO를 동시에 지켰다.
결과
하쿠시 웹사이트는 미쉐린 1스타에 어울리는, 조용하지만 또렷한 브랜드 경험으로 완성됐다. 빈 도화지에서 시작해 계절이 한 접시씩 채워지는 흐름을, 방문자가 스크롤 한 번으로 따라 읽게 된다.
라이브 사이트는 hakusi.kr 에서 볼 수 있다.
