designpaca/packages/skill/references/genre-conventions.md

# genre-conventions — 장르별 필수 블록과 흔한 실패

1단계 레퍼런스 실측과 2단계 방향 결정에서, **브리프가 커머스·SaaS·에디토리얼·포트폴리오·동네 가게·전시와 행사·B2B 서비스 소개 장르에 속할 때** 연다. 장르마다 "없으면 신뢰를 잃는 블록"이 있다. 그것을 모르면 레퍼런스를 재도 빠진 블록을 알아채지 못한다.

이 표는 레이아웃 템플릿이 아니다. **무엇이 있어야 하는지**만 정하고, 어디에 어떤 형태로 둘지는 방향·레퍼런스·브랜드가 정한다. 같은 순서로 쌓으면 그 자체가 제네릭 신호다([antipatterns.md](antipatterns.md)). 사용자가 주지 않은 가격·재고·리뷰 수치는 지어내지 않는다 — 시안에서는 예시임을 밝히는 규칙([trustworthy-showcases.md](trustworthy-showcases.md))을 따른다.

## 이 문서를 읽는 법

| 장르 | 읽을 곳 |
|---|---|
| 온라인 쇼핑 상품 상세(PDP) | §1 |
| 장바구니·주문서 | §2 |
| SaaS 요금제 페이지 | §3 |
| SaaS 대시보드·앱 홈 | §4 |
| 기사·블로그·매거진 | §5 |
| 포트폴리오·케이스 스터디 | §6 |
| 동네 가게·스튜디오(찾아가는 곳) | §8 |
| 전시·공연·행사 | §9 |
| B2B 서비스 소개(상담·견적) | §10 |
| 감사 직전 | §7 |

폼·표 자체의 규칙은 [component-systems.md](component-systems.md) §10·§11, 카피는 [product-copy.md](product-copy.md), 주요 행동의 강조 규칙은 [color.md](color.md)·[layout.md](layout.md)를 따른다.

---

## 1. 커머스 — 상품 상세(PDP)

**필수 블록**

- **가격**: 판매가를 가장 크게. 할인이면 정가(취소선)·할인율·판매가를 함께, 묶음·용량 상품이면 단위 가격(`100g당 3,200원`). 쿠폰·회원가는 "적용 조건"과 같이 둔다.
- **옵션 선택**: 선택 전·선택 후 상태가 분명해야 한다. 품절 옵션은 숨기지 말고 비활성 + "품절" 라벨. 옵션을 고르면 선택 목록(옵션·수량·금액)과 **합계**가 바로 갱신된다.
- **배송**: 배송비·무료배송 기준, 도착 예정일(또는 출고일), 지역 제한.
- **교환·반품**: 기간·비용·방법을 상세 하단 또는 탭에 둔다.
- **리뷰 요약**: 평점·리뷰 수·사진 리뷰 진입. 리뷰가 없으면 없다고 쓴다.
- **상품 정보 고시**: 한국 판매 페이지는 품목별 상품정보 제공 고시 항목(제조자·원산지·소재 등)을 둔다. 항목은 품목군마다 다르므로 실제 상품 데이터를 따른다.
- **이미지**: 정사각 또는 4:5로 비율 통일, 확대, 다각도·사용 장면·디테일 컷. 이미지 슬롯 계획은 [images.md](images.md) §2.
- **모바일 하단 고정 구매 바**: 가격 요약 + 장바구니/구매. 옵션 미선택이면 누를 때 옵션 시트를 연다.

**행동 지시**

- 구매와 장바구니가 둘 다 있으면 결과가 다른 두 행동이므로 병렬 두 버튼이 정당하다. 채운 버튼은 브리프의 목표 행동 하나에만 준다.
- 정기 구독/한 번 구매처럼 가격이 달라지는 경로는 세그먼트 선택 + 단일 버튼을 기본 후보로 두고, 선택에 따라 가격이 바뀌는 것을 즉시 보여 준다.

**흔한 실패**: 할인 전 가격만 크게 / 옵션 선택 전 합계 0원 노출 / 배송비를 결제 단계에서 처음 공개 / 품절 옵션을 선택해야 품절을 알게 됨 / 리뷰를 첫 화면에 몰아 가격이 접힘선 아래로 밀림.

## 2. 커머스 — 장바구니·주문서

- 항목마다 이미지·이름·옵션·수량 조절·금액·삭제. 전체 선택/선택 삭제.
- **주문 요약 블록**(상품 금액·할인·배송비·결제 예정 금액)은 데스크톱에서 옆에 고정, 모바일에서 하단 고정 바 + 펼치기.
- 무료배송까지 남은 금액이 기준에 걸리면 알려 준다.
- 수량·쿠폰 변경은 즉시 합계에 반영하고 상태 메시지로도 알린다([accessibility.md](accessibility.md) §7).
- 주문서는 배송지 → 결제 수단 → 동의 → 결제 순서. 저장된 배송지를 기본 선택하고, 폼 관례는 [component-systems.md](component-systems.md) §10-4를 따른다.
- 비회원 주문이 가능하면 로그인 강요보다 먼저 보인다.

**흔한 실패**: 최종 결제 금액이 버튼 근처에 없음 / 쿠폰 입력이 최상단에 있어 쿠폰이 없는 사람을 이탈시킴 / 동의 항목을 미리 체크.

## 3. SaaS — 요금제 페이지

- 요금제 열 3~4개. **추천 열 하나만** 강조(채운 버튼·배지), 나머지는 외곽선 버튼. 열마다 CTA가 있는 것은 정상이다.
- 연/월 토글은 연간 절감액을 금액이나 %로 표기하고, 토글하면 모든 가격이 함께 바뀐다. 기본 선택이 무엇인지 분명히 한다.
- 가격 표기: 통화, 과금 단위(`사용자당 / 월`), **부가세 포함 여부**(한국 B2B는 `VAT 별도` 표기가 흔하다)를 숫자 옆에 둔다.
- 요금제 카드 아래 **기능 비교표**: 머리글 고정, 같은 순서의 행, 포함은 체크 + 텍스트 대체, 미포함은 `—`. 표 규칙은 [component-systems.md](component-systems.md) §11.
- 기업 문의(맞춤 견적), 무료 체험 조건(카드 필요 여부), 해지·환불 정책, 요금 FAQ.
- 보안·규정 준수 신호(인증, 데이터 위치)는 실제로 보유한 것만.

**흔한 실패**: 모든 열이 같은 무게 / 토글 후 일부 가격만 바뀜 / 부가세·사용자 수 조건을 각주에 숨김 / 존재하지 않는 인증 배지.

## 4. SaaS — 대시보드·앱 홈

- 첫 화면에 **핵심 지표 3~5개**와 다음 행동 하나. 지표마다 기간과 비교 기준(`지난주 대비`)을 붙인다.
- 기간 선택기, 데이터 기준 시각(`10:30 갱신`), 로딩·오류·빈 상태를 모두 설계한다. 첫 사용자의 빈 상태는 온보딩 행동으로 이어진다.
- 차트의 형식·색·축은 데이터 시각화 스킬로 넘긴다. 이 스킬은 표면·상태·문구·게이트를 맡는다.
- 문서·변경 이력·도움말 진입은 같은 자리에 둔다(WCAG 3.2.6 도움말 위치 일관성).

**흔한 실패**: 지표 카드 8개 이상이 같은 무게 / 기간 없는 숫자 / 빈 상태에서 0으로 가득 찬 차트.

## 5. 에디토리얼 — 기사·블로그

- 제목·부제·**바이라인·발행일(수정일)**·읽는 시간. 수정했으면 수정일을 보인다.
- 본문 measure 고정([tokens.md](tokens.md) §1), 이미지 캡션과 출처·크레딧, 풀쿼트는 본문을 반복하지 않는 문장으로.
- 긴 글은 목차(현재 위치 표시), 각주·참고문헌, 관련 글, 공유.
- **광고·협찬 콘텐츠는 제목이나 첫머리에 "광고"·"협찬" 등으로 밝힌다**(추천·보증 표시 관련 지침). 본문 끝이나 접힌 영역에만 두지 않는다.
- 광고 슬롯이 있으면 본문 흐름을 끊는 위치·빈도를 먼저 정하고 콘텐츠와 시각적으로 구분한다.

**흔한 실패**: 날짜 없음 / 히어로 이미지가 첫 화면을 다 차지해 제목이 접힘선 아래 / 사진 출처 누락.

## 6. 포트폴리오·케이스 스터디

- 작업마다 **문제 → 과정 → 결과 → 내 역할** 구조. 결과 수치는 실제 값만, 기여 범위(팀 작업이면 맡은 부분)를 밝힌다.
- 목록은 대표 이미지 + 한 줄 요약 + 분야·연도로 훑을 수 있게. 연락 수단은 모든 작업 페이지 끝에 반복한다.

**흔한 실패**: 결과물 이미지만 있고 맥락이 없음 / 모든 작업을 같은 길이로 늘려 강약이 없음.

## 7. 체크리스트

- [ ] 브리프의 장르를 정했고, 해당 절의 필수 블록이 모두 있거나 빠진 이유를 `design.md`에 적었다
- [ ] 섹션 흐름을 방문자의 첫 질문에서 정했다. 장르 절의 흐름 예를 이유 없이 그대로 옮기지 않았고, 직전 산출물과 같은 흐름이 아니다
- [ ] 가격·배송·요금 조건·부가세처럼 결정을 바꾸는 정보가 행동 버튼 근처에 있다
- [ ] 사용자가 주지 않은 가격·리뷰·인증·수치를 만들지 않았다. 시안 예시는 예시임을 한 번 밝혔다
- [ ] 반복 모듈(상품 카드·요금제 열)의 CTA 위계를 결정 단위로 정했다 — 모듈마다 주요 액션은 하나, 요금제는 추천 열만 채운다([color.md](color.md) §7)
- [ ] 광고·협찬 콘텐츠, 광고성 메일은 법정 표기를 지켰다(메일은 [print-email.md](print-email.md))

## 8. 동네 가게·스튜디오 — 찾아가는 곳

§8~§10은 필수 블록과 함께 **섹션 흐름을 셋씩** 싣는다. 흐름이 하나만 적혀 있으면 그 하나가 매번 결과가 된다(쇼케이스 19종의 섹션 수가 중앙값 5에 "히어로 → 설명 → 색을 바꾼 띠의 표 → 문의"로 모였다). 셋의 순서에는 뜻이 없다. 방문자가 처음 묻는 것이 무엇인지가 고른다. 셋 다 맞지 않으면 필수 블록으로 새 흐름을 짠다. 같은 저장소의 직전 산출물과 흐름이 같으면 [art-direction.md](art-direction.md) §3-2 B-2에 걸린다.

**필수 블록**

- **지금 여는가**: 요일별 영업시간과 휴무일. 임시 휴무·재료 소진을 알릴 자리.
- **어디인가**: 주소(복사되는 글자), 지도 링크, 가까운 역·주차. 주소를 이미지 안에만 두지 않는다.
- **무엇을 얼마에**: 대표 상품·메뉴·서비스와 가격. 가격을 못 박으면 범위나 "상담 뒤 견적"이라고 쓴다.
- **연락·예약**: 전화(`tel:` 링크), 예약 방법, 답하는 데 걸리는 시간.
- **실제 사진**: 매장·사람·상품. 생성 이미지면 라벨을 붙인다([images.md](images.md) §2).
- 온라인으로 팔면 사업자 정보를 푸터에 둔다([layout.md](layout.md) §2-d). 사용자가 준 값만 쓴다.

**섹션 흐름 셋**

- 이미 아는 손님이 확인하러 온다: 오늘 영업시간과 위치 → 대표 상품과 가격 → 오는 길·주차
- 처음 보는 사람을 설득해야 한다: 대표 상품 한 점을 크게 → 만드는 과정 → 주문·예약
- 가격과 시간으로 고르는 업종이다(미용·수리·수업): 가격표 → 작업 사진 → 예약 가능한 시간

**흔한 실패**: 영업시간이 푸터의 작은 글씨에만 있음 / 분위기 사진만 있고 가격이 없음 / 전화번호가 링크가 아님 / 휴무일이 없음.

## 9. 전시·공연·행사

**필수 블록**

- **언제**: 시작일~종료일(연도·요일 포함), 관람 시간, 휴관일. 끝난 행사는 "종료"라고 밝히고 기록으로 바꾼다.
- **어디서**: 장소 이름·주소·오는 길.
- **얼마에, 어떻게**: 관람료(무료면 무료), 예매·사전 예약이 필요한지.
- **무엇을 보는가**: 작품·프로그램·출연자 목록. 작품 사진에는 제목·작가·연도·소장처 캡션.
- **접근성 안내**: 휠체어 동선, 수어 통역·자막 여부 — 실제로 제공하는 것만.
- **주최·후원·문의처**.

**섹션 흐름 셋**

- 작품이 설득한다: 대표 작품 한 점과 제목·기간 → 전시실별 구성 → 관람 안내·예매
- 일정으로 결정한다(공연·컨퍼런스·장터): 날짜·장소·예매 → 시간표 → 출연자·연사 → 오는 길
- 읽으러 오는 사람이 많다(연구·아카이브형): 기획 글 → 작품 목록(격자·색인) → 연계 프로그램 → 관람 안내

**흔한 실패**: 기간에 연도·요일이 없음 / 끝난 전시가 진행 중처럼 보임 / 예매 버튼이 페이지 끝에만 있음 / 작품 사진에 캡션·출처가 없음 / 생성 이미지를 실제 작품처럼 실음([trustworthy-showcases.md](trustworthy-showcases.md)).

## 10. B2B 서비스 소개 — 상담·견적이 목표

**필수 블록**

- **누구에게 무엇을 해 주는가** 한 문장. 업종과 규모가 들어간다.
- **범위**: 하는 일과 하지 않는 일.
- **절차와 기간**: 문의한 뒤 무슨 일이 어떤 순서로 일어나는가.
- **비용 방식**: 정액·건당·견적 중 무엇인지, 최소 금액이나 범위.
- **근거**: 실제 사례·고객·자격. 가진 것만 싣는다.
- **누가 하는가**: 담당자나 팀.
- **문의 수단**과 답하는 데 걸리는 시간. 폼 항목은 답하는 데 꼭 필요한 것만([component-systems.md](component-systems.md) §10).
- 사양서·소개서가 있으면 내려받기.

**섹션 흐름 셋**

- 사례가 있다: 한 문장 설명 → 사례 두세 건(문제·한 일·결과) → 절차와 기간 → 문의
- 가격이 첫 질문이다(청소·세무·번역): 조건을 고르면 나오는 견적 → 포함 항목 → 자주 묻는 질문 → 상담 예약
- 사양서를 읽고 결정한다(부품·장비·기술 제품): 사양·성능 표 → 시험·인증 근거 → 적용 분야 → 자료 요청

**흔한 실패**: 무엇을 하는 회사인지 첫 화면에 없음 / 고객사 로고·후기를 지어냄 / 문의 폼 항목이 열 개를 넘음 / 가격을 짐작할 단서가 없음 / 문의한 뒤 무슨 일이 일어나는지 없음.