루미나 스튜디오 — 프리미엄 헤어 살롱 다크 에디토리얼 사이트

서울 성수동의 1:1 프라이빗 헤어 살롱을 위한 사이트입니다. 살롱 사이트는 예약 한 건이 곧 매출이라 목표가 단순합니다. 가격과 소요 시간을 숨기지 않고, 예약까지의 클릭을 최소화하는 것입니다.

과제

이 업종은 대부분 예약 플랫폼에 종속되어 자체 사이트가 인스타그램 링크 모음 수준에 머무릅니다. 자체 사이트에서만 할 수 있는 일은 브랜드의 톤을 온전히 전달하고, 시술 체계와 가격을 정직하게 펼쳐 첫 방문의 불확실성을 없애는 것입니다.

디자인 접근

잉크 블랙과 샴페인 골드 2색으로 다크 에디토리얼 톤을 잡고, 영문 세리프 디스플레이와 한글 산세리프를 대비시켜 화보의 리듬을 만들었습니다. 사진은 흑백·세피아 듀오톤과 골드 스크림, 그레인 오버레이를 거쳐 한 톤으로 묶었습니다.

이미지가 없을 때의 아트 디렉션

이 프로젝트에서 가장 실무적인 판단은 이미지 문제였습니다. 자유 이용 라이선스로 확보할 수 있는 헤어 사진은 스냅샷 품질이 대부분이라, 프리미엄 살롱의 룩북으로 쓰면 오히려 신뢰를 깎습니다. 그래서 룩북과 스타일리스트 카드는 이 프로젝트를 위해 직접 만든 제너레이티브 SVG 아트워크로 대체했습니다. 컬러별 팔레트를 달리한 헤어 스트랜드 라인 아트에 시그니처 컬러 이름과 세리프 넘버링을 얹어, 시술 메뉴를 시각적으로 구분되게 만들었습니다. 파일당 4KB 남짓이라 성능 부담도 없습니다.

핵심 인터랙션

• 시술 카테고리 탭 — 헤어·컬러·케어·스타일링을 키보드 조작 가능한 탭으로 나누고, 각 항목에 소요 시간과 가격대를 함께 노출합니다.
• 예약 프로세스 스티키 스텝 — 4단계 예약 절차가 스크롤 위치에 따라 현재 단계로 전환됩니다.
• 양방향 후기 마퀴 — 두 줄이 서로 반대 방향으로 흐르고, reduced-motion에서는 완전히 정지합니다.
• 룩북 라이트박스 — Esc·좌우 화살표 지원, 닫을 때 원래 포커스 복원.
• 예약 폼 — 희망 시술·희망 일시·연락처를 받는 구조에 인라인 검증을 붙였습니다(데모이므로 전송되지 않음을 명시).

기술 · 성능 · 접근성

• 빌드 없는 정적 사이트 — HTML · CSS · 바닐라 JS만으로 구성했습니다. 프레임워크·번들러가 없어 배포 산출물이 그대로 소스이고, 유지보수 시점에 의존성이 깨질 여지가 없습니다.
• Cloudflare Pages 배포 — 전 세계 엣지에서 서빙하며, _headers로 보안 헤더(X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Permissions-Policy)와 정적 에셋 1년 immutable 캐시를 적용했습니다. 존재하지 않는 경로는 브랜드 404 페이지가 올바른 404 상태로 응답합니다.
• 이미지 — 전량 WebP로 변환하고 모든 img에 width/height를 명시해 레이아웃 이동(CLS)을 제거했습니다. 히어로는 우선 로딩, 나머지는 지연 로딩입니다.
• 모션 — 애니메이션은 transform/opacity만 사용해 컴포지터에서 처리하고, prefers-reduced-motion에서는 모든 자동 재생 모션이 정지합니다.
• 접근성 — 본문 바로가기 링크, 시맨틱 랜드마크, 키보드로 조작 가능한 탭·라이트박스·모바일 내비, 포커스 링, 스크린리더용 라이브 영역, WCAG AA 명도 대비를 지켰습니다.
• SEO — 타이틀·설명·canonical·Open Graph·트위터 카드·업종별 JSON-LD 구조화 데이터를 포함합니다.

결과물

라이브 데모: ononc-lumina-salon.pages.dev

본 사이트는 ononc가 제작 역량을 보여주기 위해 만든 가상 브랜드 데모입니다. 실제 사업장이 아니며, 문의 폼은 전송되지 않습니다. 사진은 Wikimedia Commons의 자유 이용 라이선스 이미지를 사용했고 출처를 사이트 하단에 표기했습니다.