ONONC
프로젝트 문의
토연 TOYEON — 도자 스튜디오 다중 페이지 사이트

토연 TOYEON — 도자 스튜디오 다중 페이지 사이트

경기 여주의 도자 스튜디오 겸 갤러리를 위한 사이트입니다. 이전 데모들과 달리 한 장짜리 랜딩이 아니라 목적별로 나눈 6페이지 구조로 만들었습니다. 스튜디오는 보여줄 것이 여러 종류이기 때문입니다. 기물을 고르러 온 사람, 클래스를 알아보러 온 사람, 그냥 구경하러 온 사람의 동선이 각자 다릅니다.

과제

공예 스튜디오 사이트의 어려움은 사진이 곧 상품인데 사진이 많으면 무거워진다는 점입니다. 그리고 기물·공간·과정·수업이라는 서로 다른 성격의 콘텐츠를 한 화면에 밀어 넣으면 어느 것도 제대로 보이지 않습니다. 그래서 페이지를 나누고, 각 페이지가 하나의 질문에만 답하게 했습니다.

디자인 접근

갤러리 벽 같은 오프화이트(#f7f5f1) 바탕에 흙빛과 청자색만 강조로 쓰는 밝은 미니멀 에디토리얼입니다. 서체는 Pretendard 하나만 씁니다. 별도의 디스플레이 서체를 얹는 대신 굵기와 자간(제목 -0.035em, 아이브로우 +0.3em)으로 리듬을 만들었습니다. 국문과 영문이 같은 무게로 읽히고, 웹폰트 요청도 하나로 줄었습니다.

사진에는 스크림을 씌우지 않았습니다. 도자기의 유약 색이 정보이기 때문에 원본 밝기를 그대로 살리고, 대신 고정 비율 프레임으로 레이아웃 이동을 막았습니다.

토연 TOYEON — 필터와 라이트박스를 갖춘 작품 페이지

페이지 구성

  • 홈 — 히어로, 운영 방식 마퀴, 소개 스플릿, 대표 기물 4점, 카운트업 지표, 클래스 티저
  • 작품 — 기물 7점을 종류별로 걸러 보는 필터 그리드 + 라이트박스 + 구매 전 FAQ
  • 스튜디오 — 제작 6단계, 유약 시편 벽, 공간 3컷
  • 클래스 — 과정 3종 카드, 운영 안내 표, FAQ
  • 소개 — 이름의 유래, 여주에 자리 잡은 이유, 원칙 3가지, 연혁
  • 방문 — 관람·교통 안내, 데모 문의 폼

현재 위치는 상단 내비 aria-current, 본문 브레드크럼, 하단 페이저로 세 번 표시됩니다. 404 페이지와 사이트맵(6 URL)도 포함했습니다.

토연 TOYEON — 제작 과정을 6단계로 나눈 스튜디오 페이지

핵심 인터랙션

  • 공유 스크립트 하나 — 여섯 페이지가 같은 site.js를 씁니다. 각 초기화 함수는 해당 마크업이 없으면 아무 일도 하지 않으므로, 홈과 하위 페이지를 한 파일로 구동합니다.
  • 스크롤 리빌 — IntersectionObserver로 요소마다 지연을 달리 주고, 사진은 느린 푸시인으로 자리를 잡습니다. 관측자가 놓친 요소는 스크롤 스윕이 처리합니다.
  • 필터 그리드 — 사발·잔·화병으로 걸러 보고 표시 개수가 함께 갱신됩니다.
  • 라이트박스 — Esc 닫기, 좌우 방향키 이동, 포커스 트랩, 배경 클릭 닫기.
  • 전체화면 모바일 내비 · 무한 마퀴 · 카운트업 지표 · 헤더 축소 · FAQ 아코디언이 함께 붙습니다.
토연 TOYEON — 과정 3종을 비교하는 클래스 페이지

기술 구현

  • 빌드 없는 정적 사이트 — HTML 6장, CSS 2장, 네이티브 ES 모듈 1개. 프레임워크도 번들러도 의존성도 없습니다. 외부 리소스는 Pretendard 하나뿐입니다.
  • 이미지 — 22장 전량 WebP, 총 1.4MB. 모든 img에 width/height를 명시해 레이아웃 이동(CLS)을 제거했고 각 페이지 히어로만 우선 로딩합니다.
  • URL — Cloudflare Pages가 /work.html을 /work로 넘기기 때문에, 내부 링크·canonical·og:url·JSON-LD·사이트맵을 모두 확장자 없는 경로로 맞췄습니다. 덕분에 페이지 이동에 리다이렉트가 한 번도 끼지 않습니다.
  • 모션 — transform/opacity만 애니메이션하고 스크롤 핸들러는 rAF 안에서만 씁니다. prefers-reduced-motion에서 전부 무력화됩니다.
  • 접근성 — 페이지마다 본문 바로가기, 단일 h1, 시맨틱 랜드마크, 셀라돈 포커스 링. 키보드로 필터·라이트박스·아코디언·모바일 내비를 모두 조작할 수 있습니다. 제목 최악 픽셀 대비는 15.95로 WCAG AA(4.5)를 크게 넘겼습니다.
  • 보안·SEO — 보안 응답 헤더 4종, 정적 에셋 1년 immutable 캐시, 페이지별 JSON-LD(Organization · BreadcrumbList · LocalBusiness), Open Graph·트위터 카드.

결과물

라이브 데모: ononc-toyeon-ceramics.pages.dev

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

#공예#다중 페이지#미니멀리즘#Pretendard#AI 생성 이미지#Cloudflare Pages