o2o-site-AEO/docs/TEMPLATE_DESIGN.md

템플릿 디자인 규칙

새 템플릿을 만들거나 기존 템플릿을 고칠 때 지키는 화면 규칙이다. 기준은 고택(layouts/paper/)이다. 고택은 손으로 만든 시안 /s/stay2(solution/site/scripts/mockup/king-stay2/)를 옮긴 것이라 스크롤 길이·접기·글자 크기가 이미 검증돼 있다. 수치가 애매하면 layouts/paper/paper.css 를 연다.

템플릿 목록과 등록 방법은 TEMPLATES.md, 렌더링 흐름은 RENDERING.md.

1. 폭

화면	규칙
모바일 390px	먼저 맞춘다. 가로 넘침 0
700~1023px	640px 한 단, 가운데
1024px 이상	템플릿마다 정한다. 넓은 배치면 콘텐츠 최대 1080px, 첫 화면은 가로 전체

부티크처럼 모바일 한 단을 데스크톱에서도 그대로 쓰는 템플릿이 있다. 정한 방식은 TEMPLATES.md 에 적는다.

2. 글자

• 본문 16~17px, 줄 간격 1.7 이상. 고택은 17px/1.9. 본문 16px 미만 금지
• 보조 글씨 14~15px. 기능 글씨(버튼·메뉴) 12px 미만 금지
• 섹션 제목 22~30px. 고택은 19px 명조
• 첫 화면 문구: 모바일 28px 안팎, 데스크톱 48px 이하
• 상호를 크게 쓰는 템플릿(빅타이포)도 64px 이하
• vw 로 커지는 글자 크기 금지. 넓은 화면에서 끝없이 커진다
• 보조 글씨 대비 4.5:1 이상. #8b95a1 같은 연회색은 흰 바탕에서 2.9:1 이라 탈락한다

템플릿별 한글 글꼴 — 겹치지 않게 배정했다

템플릿	제목	본문
고택	Noto Serif KR	시스템 고딕
라운드	Noto Sans KR	Noto Sans KR
시네마	송명	Noto Sans KR
빅타이포	함렛	함렛 · IBM Plex Mono
부티크	Cormorant · 나눔명조	나눔명조
일러스트	주아	고운돋움
코랄	Gothic A1 · Aboreto	Gothic A1
미니멀	Diphylleia · Cinzel	Questrial · 나눔고딕
솔숲	IBM Plex Sans KR	IBM Plex Sans KR

새 템플릿은 이 표에 없는 글꼴을 쓴다. 웹폰트는 seo/head.ts WEB_FONTS 에 등록해야 받아 온다.

3. 간격

• 제목 위 여백 32px 이상. 제목 위가 아래보다 넓다
• 카드형 목록 사이 10px 이상(선으로 나누는 목록은 예외)
• 같은 목록의 카드는 같은 크기: 사진은 고정 비율 + object-fit:cover, 글은 줄 수 말줄임
• 칸 수는 항목 수에 맞춘다(repeat(auto-fit, minmax(…))). 3개인데 4칸을 잡아 빈칸을 남기지 않는다

사진 카드는 하나다 — layouts/kit/Card.tsx PhotoCard

• 주변 안내 · 축제 · 명소 · 인물(사진 있을 때)은 모두 PhotoCard 를 쓴다. 템플릿마다 카드를 새로 짓지 않는다
• 모양: 사진(3:2) 아래에 제목 1줄 · 거리나 날짜 1줄 · 설명 2줄. 템플릿별로 다른 것은 --kc-* 변수만 (--kc-r 사진 모서리, --kc-tf·--kc-tw 제목 글꼴·굵기, --kc-mc 거리 색, 상자형은 --kc-bg·--kc-box-r)
• 사진 없는 목록(맛집 · 홈 가까운 곳 목록)은 행(row)으로 쓴다. 한 섹션 안에서 카드와 행을 섞지 않는다
• 모바일 캐러셀 화살표는 숨긴다(카드 위를 가린다). 1024px 이상에서만 사진 가운데 높이에 둔다

4. 섹션 머리

• 제목은 위, 내용은 아래. 참고한 펜션 사이트들이 모두 이 방식이다
• 제목을 왼쪽, 내용을 오른쪽에 두는 좌우 분할은 쓰지 않는다. 내용이 한두 줄이면 왼쪽이 텅 빈다 (예외: 소개 글과 사진이 둘 다 충분할 때의 소개 섹션)
• 제목 위에 같은 뜻의 작은 라벨(‘객실’ 위 ‘객실 안내’)을 달지 않는다. 참고 사이트의 정체성인 영문 제목(코랄 Room View, 미니멀 Stay)은 예외

5. 스크롤 줄이기 — 몇 개 보이고 접나

<details> 로 접는다. 내용은 HTML 에 남아 크롤러가 읽는다. 빼지 않는다.

목록	처음 보이는 수	근거
첫 화면 사진	5장	paper/Hero.tsx MAX_SLIDES
홈 객실	4개(2열)	나머지는 이용안내 탭
홈 사진 갤러리	큰 1 + 4장	paper/Gallery.tsx FIRST
홈 주변 안내	3~4곳	나머지는 지역 탭
명소 · 맛집	8곳	paper/Around.tsx FIRST_ROWS (데스크톱 넓은 배치는 8, 모바일 6도 허용)
축제	가로 캐러셀	세로로 펼치지 않는다
추천 일정	4개	paper/Itinerary.tsx FIRST
노래	6곡	paper/Story.tsx
인물	4명	paper/Story.tsx
지역 읽기	3편, 본문 3줄 말줄임	paper/Story.tsx
자주 묻는 질문	8개, 질문은 접힌 상태	paper/Faq.tsx FIRST

6. 값 보여주기

• 첫 화면은 캐치프레이즈 한 줄(고정) → 그 아래 순환 문구. /s/stay 목업과 같다(sections/HeroCatchphrase.tsx)

  • 캐치프레이즈 = narrative.tagline. 없으면 공통 문구 10개 중 사이트마다 정해진 하나
  • 순환 = narrative.catchphrases, 일반 → 계절 → 일반 → 월 → 일반 → 날씨 순서, 6초. 없으면 줄을 두지 않는다
  • 두 값은 COPY 잡이 소개문과 함께 만든다(fact tagline · catchphrases, services/copy_steps.py)

• 첫 화면에 태그·칩(‘주차 가능’, 지역 말풍선)을 두지 않는다

• 부티크 첫 화면은 모바일도 문(아치) 모양이다. 전체화면 사진으로 되돌리지 않는다

• ‘가능 · 있음’은 ✓, ‘불가 · 없음’은 ✕ 목록으로 쓴다. 주차 / 가능 같은 표로 쓰지 않는다

  • 마크업: <ul class="amen"><li class="on"><i class="ic">✓</i><span><b>주차</b> 가능</span></li>
  • 색: ✓ #15803d, ✕ #c2410c. 가능한 것을 먼저 놓는다
  • 판정: sections/EssentialInfoSection.tsx ON_VALUES(가능·있음)

• 사진 없는 항목(인물 등)에 빈 사진 칸을 두지 않는다. 글만 있는 카드로 줄인다

• 거리·이름처럼 붙어 나오는 글은 띄우거나 줄을 나눈다

7. 탭 · 버튼

• 페이지 탭은 밑줄로 현재 위치를 표시한다. 회색 알약 배경 금지
• 탭·링크를 누르면 같은 탭이어도 맨 위로 바로 올라간다(behavior:'instant', 전역 scroll-behavior:smooth 를 이긴다)
• 같은 동작은 한 이름: 예약 시트를 여는 버튼은 모두 ‘예약하기’, 이용안내 탭으로 가는 버튼은 ‘이용안내 보기’
• 버튼 글자가 두 줄로 접히면 안 된다. 모바일에서 버튼이 3개 이상이면 2열 격자로, 남는 하나는 한 줄 전체
• 키보드 포커스와 글자 선택색은 템플릿 색으로(kit/kit.css)
• 상세·예약 창(paper/Sheet.tsx)은 모든 폭에서 화면 가운데 뜬다. 폭 560px 이하, 모서리는 템플릿의 --k-r

8. 하지 않는 것

• 영어 해외 사이트를 레퍼런스로 가져오지 않는다. 한국 사이트에서 UI(글자 크기·배치)로 고른다
• 디자인을 처음부터 손으로 짓지 않는다. 실물 사이트·시안을 받아 우리 콘텐츠에 맞게 옮긴다
• 섹션마다 똑같이 떠오르는 등장 효과, 모든 카드에 같은 그림자 — 생성형 기본값으로 읽힌다

9. 검수 순서

1. 해든스테이 테스트 데이터로 굽는다 (굽기 방법은 RENDERING.md)
2. 1440px · 390px 에서 네 탭(홈 · 지역 · 이용안내 · 이야기)을 캡처해 눈으로 본다. lazy 이미지는 스크롤해서 띄운 뒤 찍는다
3. 제목 위 여백 32px 미만, 가로 넘침, 대비 부족을 잰다
4. cd solution/site && npx eslint src/layouts && npx vitest run src/layouts