Mina Choi 013cdcfc9f [feat] solution/site,shared: 숙박 템플릿 8종 추가 — 라운드·시네마·빅타이포·부티크·일러스트·코랄·미니멀·솔숲

사장님이 고를 수 있는 숙박 템플릿이 고택 하나뿐이었다. 모두 stay2 콘텐츠(날씨·미니 블로그·
지역 이야기·객실·축제·일정·후기·엽서·노래)를 그대로 싣고 모양만 다르다.

- layouts/<id>/: 템플릿별 Frame·섹션·CSS. 데스크톱은 넓은 배치(1024px 이상), 모바일 우선
- layouts/kit/kit.css: 탭 전환·시트·예약 폼·접기 등 공통 구조
- shared templates.json · builder.ts · catalog.ts: 템플릿·LayoutId 등록
- seo/head.ts: 템플릿별 한글 웹폰트 — 서로 겹치지 않게 배정
- paper Frame·Intro: 같은 탭을 다시 눌러도 맨 위로, 미니 블로그를 글 여러 개로
- docs/TEMPLATES.md · TEMPLATE_DESIGN.md: 목록과 화면 규칙(간격·접기·✓ 표시·글꼴)

eslint·tsc 통과, vitest 123 passed, 템플릿 9개 굽기 성공 · 간격 검사 0건

2026-09-30 13:45:10 +09:00

6.0 KiB

Raw Blame History

템플릿 디자인 규칙

새 템플릿을 만들거나 기존 템플릿을 고칠 때 지키는 화면 규칙이다. 기준은 고택(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칸을 잡아 빈칸을 남기지 않는다

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. 값 보여주기

‘가능 · 있음’은 ✓, ‘불가 · 없음’은 ✕ 목록으로 쓴다. 주차 / 가능 같은 표로 쓰지 않는다
- 마크업: <ul class="amen"><li class="on">✓주차 가능</li>
- 색: ✓ #15803d, ✕ #c2410c. 가능한 것을 먼저 놓는다
- 판정: sections/EssentialInfoSection.tsx ON_VALUES(가능·있음)
사진 없는 항목(인물 등)에 빈 사진 칸을 두지 않는다. 글만 있는 카드로 줄인다
거리·이름처럼 붙어 나오는 글은 띄우거나 줄을 나눈다

7. 탭 · 버튼

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

8. 하지 않는 것

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

9. 검수 순서

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

6.0 KiB Raw Blame History