Mina Choi
013cdcfc9f
사장님이 고를 수 있는 숙박 템플릿이 고택 하나뿐이었다. 모두 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건
107 lines
6.0 KiB
Markdown
107 lines
6.0 KiB
Markdown
# 템플릿 디자인 규칙
|
|
|
|
새 템플릿을 만들거나 기존 템플릿을 고칠 때 지키는 화면 규칙이다. 기준은 고택(`layouts/paper/`)이다.
|
|
고택은 손으로 만든 시안 `/s/stay2`(`solution/site/scripts/mockup/king-stay2/`)를 옮긴 것이라
|
|
스크롤 길이·접기·글자 크기가 이미 검증돼 있다. 수치가 애매하면 `layouts/paper/paper.css` 를 연다.
|
|
|
|
템플릿 목록과 등록 방법은 [TEMPLATES.md](TEMPLATES.md), 렌더링 흐름은 [RENDERING.md](RENDERING.md).
|
|
|
|
## 1. 폭
|
|
|
|
| 화면 | 규칙 |
|
|
|---|---|
|
|
| 모바일 390px | 먼저 맞춘다. 가로 넘침 0 |
|
|
| 700~1023px | 640px 한 단, 가운데 |
|
|
| 1024px 이상 | 템플릿마다 정한다. 넓은 배치면 콘텐츠 최대 1080px, 첫 화면은 가로 전체 |
|
|
|
|
부티크처럼 모바일 한 단을 데스크톱에서도 그대로 쓰는 템플릿이 있다. 정한 방식은 [TEMPLATES.md](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"><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`)
|
|
|
|
## 8. 하지 않는 것
|
|
|
|
- 영어 해외 사이트를 레퍼런스로 가져오지 않는다. 한국 사이트에서 UI(글자 크기·배치)로 고른다
|
|
- 디자인을 처음부터 손으로 짓지 않는다. 실물 사이트·시안을 받아 우리 콘텐츠에 맞게 옮긴다
|
|
- 섹션마다 똑같이 떠오르는 등장 효과, 모든 카드에 같은 그림자 — 생성형 기본값으로 읽힌다
|
|
|
|
## 9. 검수 순서
|
|
|
|
1. 해든스테이 테스트 데이터로 굽는다 (굽기 방법은 [RENDERING.md](RENDERING.md))
|
|
2. 1440px · 390px 에서 네 탭(홈 · 지역 · 이용안내 · 이야기)을 캡처해 **눈으로** 본다. lazy 이미지는 스크롤해서 띄운 뒤 찍는다
|
|
3. 제목 위 여백 32px 미만, 가로 넘침, 대비 부족을 잰다
|
|
4. `cd solution/site && npx eslint src/layouts && npx vitest run src/layouts`
|