무연 MUYEON — 제철 한식 파인다이닝 다크 에디토리얼 사이트

서울 한남동의 12석 제철 한식 파인다이닝을 위한 사이트입니다. 파인다이닝 사이트가 흔히 실패하는 지점은 설명이 많아질수록 격이 떨어진다는 것입니다. 그래서 이 사이트의 설계 원칙은 하나였습니다. 문장을 줄이고 사진과 여백이 말하게 한다.

과제

단일 코스로만 운영하는 식당은 "메뉴를 보여줄 수 없다"는 제약을 안고 있습니다. 그 주의 재료가 그 주의 메뉴이기 때문입니다. 그렇다면 사이트가 팔아야 하는 것은 메뉴가 아니라 이 식당이 계절을 다루는 방식입니다. 동시에 예약제 운영이라 방문 조건(요일·시간·좌석·가격)은 오해 없이 정확히 전달돼야 합니다.

디자인 접근

차콜(#0c0b0a) 바탕에 웜 클레이 본문, 브론즈 강조만 쓰는 3색 팔레트로 톤을 잠갔습니다. 본문은 Pretendard, 헤드라인은 Cormorant Garamond 300으로 잡아 국문과 영문이 같은 무게로 읽히게 했습니다. 모든 사진에 동일한 그라디언트 스크림을 얹어, 광원이 다른 18장이 한 번의 촬영처럼 보이도록 통일했습니다. 카피는 한 화면에 한 문장 원칙을 지켰습니다.

핵심 인터랙션

• 핀 고정 가로 스크롤 코스 — 페이지를 세로로 스크롤하면 코스 접시가 가로로 흐릅니다. 트랙 높이를 뷰포트 + 가로 이동거리로 계산하고, JS는 진행률 하나만 CSS 변수로 넘겨 실제 이동은 GPU가 처리합니다. 진행 바가 함께 채워집니다.
• 3단 마스크 리빌 헤드라인 — 히어로 문장이 행 단위로 아래에서 올라옵니다.
• 필터 갤러리 + 라이트박스 — 접시·공간·손 세 분류로 걸러 보고, 확대 시 좌우 방향키 이동과 Esc 닫기, 포커스 트랩을 지원합니다.
• 패럴랙스 인용 밴드 — 배경 사진이 스크롤 위치에 따라 느리게 드리프트합니다.
• 스크롤 리빌 코레오그래피 — IntersectionObserver로 요소마다 지연을 달리 줘 순차 등장시킵니다. 사진은 아주 느린 푸시인으로 자리를 잡습니다.
• 무한 마퀴 · 카운트업 지표 · 마그네틱 CTA · 전체화면 모바일 내비 · 스티키 예약 바가 함께 붙습니다.

기술 구현

• 빌드 없는 정적 사이트 — HTML 하나, CSS 두 장, 네이티브 ES 모듈 하나. 프레임워크도 번들러도 의존성도 없습니다. Cloudflare Pages에 그대로 올라갑니다.
• 이미지 — 18장 전량 WebP, 총 800KB. 모든 img에 width/height를 명시해 레이아웃 이동(CLS)을 제거했고 히어로만 우선 로딩합니다.
• 모션 — transform/opacity만 애니메이션하고 스크롤 핸들러는 rAF 안에서만 씁니다. prefers-reduced-motion에서는 마퀴 정지, 핀 해제(가로 스냅 스크롤로 대체), 리빌 즉시 표시로 전부 무력화됩니다.
• 접근성 — 본문 바로가기, 시맨틱 랜드마크, 키보드로 조작되는 갤러리·라이트박스·아코디언·모바일 내비, 브론즈 포커스 링. 히어로 헤드라인 최악 픽셀 대비는 데스크톱 4.81 · 모바일 12.26으로 WCAG AA(4.5)를 넘겼습니다.
• 보안·SEO — 보안 응답 헤더 4종과 정적 에셋 1년 immutable 캐시, Restaurant JSON-LD, Open Graph·트위터 카드를 적용했습니다.

결과물

라이브 데모: ononc-muyeon-dining.pages.dev

본 사이트는 ononc가 제작 역량을 보여주기 위해 만든 가상 브랜드 데모입니다. 실제 사업장이 아니며, 예약 폼은 전송되지 않습니다. 사진은 이 데모 브랜드를 위해 생성형 AI로 만든 이미지이며, 실제 인물·장소가 아님을 사이트 하단에 표기했습니다.