F&B
파인다이닝 '설재' — 코스 메뉴북·식이 필터
계절마다 바뀌는 코스를 런치·디너로 나눠 보여 주는 한식 파인다이닝 사이트입니다. 알레르기나 비건을 고르면 해당 코스 단계에 대체 구성 안내가 붙습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
파인다이닝은 사진이 브랜드지만, 정작 손님이 찾는 건 코스 구성과 예약 조건이다. 레퍼런스는 미니멀함을 택한 대신 정보가 부족하거나, 정보를 채운 대신 시각이 무거웠다. 게다가 알레르기·비건 대응은 예약 전에 확인돼야 하는데 대부분 전화로 넘긴다. 알레르기는 코스 단계마다 걸리는 재료가 달라 '문의 주세요' 한 줄로는 답이 되지 않고, 손님이 궁금한 건 내 조건에서 어느 접시가 어떻게 바뀌는지다. 코스도 낮과 밤이 단계 수부터 다르고 계절마다 다시 짜이므로 페이지를 코스별로 늘려 두면 갱신할 때마다 손이 두 배로 간다. 사진과 정보 어느 쪽도 버리지 않으면서 조건 안내까지 화면 안에서 끝내는 것이 과제였다.
해결
사진이 화면을 지배하되 코스는 또렷하게 읽히도록 메뉴북을 만들었다. 런치·디너를 전환하면 구성이 통째로 바뀌고, 알레르기(갑각류·견과·유제품)나 비건을 고르면 해당 단계에 대체 구성 안내가 그 자리에서 붙는다. 대체 안내가 붙은 단계는 접힌 채 지나치지 않도록 저절로 펼쳐지고 걸리는 재료가 없는 단계에는 그대로 나간다는 안내를 달아 빈 결과를 남기지 않았다. 무알콜 페어링을 고르면 음료 목록이 통째로 무알콜 구성으로 바뀐다. 코스 데이터는 한 벌로 모아 두어 계절 개편 때 그 데이터만 고치면 된다. 웜 차콜에 아이보리를 얹어 기존 다크 데모(딥네이비+골드, 먹빛+크림슨)와 톤을 갈랐고, 세리프는 코스명에만 써서 메뉴북 은유를 살렸다.
- 2
- 코스(런치·디너)
- 5
- 식이 필터
- 0
- 외부 전송
제작 노트
조건이 코스에 반영되는 흐름
메뉴북 상단에서 낮 코스와 밤 코스를 오가면 코스명·가격·소요 시간·입장 시간이 단계 목록과 함께 통째로 바뀝니다. 단계는 아코디언으로 접혀 있어도 번호·요리명·주재료가 요약으로 보여 펼치지 않고도 코스의 뼈대가 읽힙니다. 그 위에 갑각류·견과·유제품·비건·무알콜 다섯 개 칩을 두었습니다. 견과 알레르기를 고르면 잣 소스가 든 단계에 들깨 소스로 바꿔 낸다는 안내가 붙고 그 단계는 지나치지 않도록 저절로 펼쳐집니다. 걸리는 재료가 없는 단계에는 그대로 나간다고 적어 어느 쪽이든 답이 비지 않게 했습니다.
데이터 한 벌로 도는 메뉴북
코스는 페이지마다 따로 적지 않고 자바스크립트 데이터 한 벌에 모았습니다. 단계·재료·대체 구성·페어링이 전부 그 안에 있어 계절이 바뀌어 코스를 새로 짜도 데이터만 고치면 화면이 통째로 따라옵니다. 페이지는 정적 HTML이라 서버나 빌드 도구 없이 그대로 서빙되고, 단계 접기는 브라우저 기본 접기 요소로 만들어 위젯 코드를 따로 들이지 않았습니다. 필터 상태는 브라우저 메모리에만 있어 무엇을 골라도 밖으로 나가는 요청이 없습니다. 프레임워크 없이도 이 정도 인터랙션은 가볍게 돌고 고칠 곳이 한 곳이라 유지보수도 단순합니다.
사진과 정보의 자리 배분
첫 화면은 사진이 채우고 정보는 코스·공간·이용 안내 순으로 내려가며 자리를 잡습니다. 세리프는 코스명에만 써서 메뉴북을 넘기는 인상을 남기고 본문은 고딕으로 읽히게 했습니다. 예약 페이지는 날짜·시간·좌석·인원을 버튼으로 고르는 방식인데 고를 때마다 옆의 신청 내용 요약이 함께 바뀌어 무엇을 골랐는지 화면에서 확인됩니다. 마감된 날짜와 휴무일은 처음부터 눌리지 않게 잠갔습니다. 홀·셰프 카운터·별실 세 좌석의 성격과 예약금·취소 규정을 신청 화면 옆에 붙여 조건을 읽으러 다른 페이지로 오갈 일이 없습니다.
화면
