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

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

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

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

이 문서를 읽는 법

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

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

---

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

필수 블록

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

행동 지시

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

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

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

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

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

3. SaaS — 요금제 페이지

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

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

4. SaaS — 대시보드·앱 홈

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

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

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

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

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

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

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

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

7. 체크리스트

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

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

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

필수 블록

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

섹션 흐름 셋

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

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

9. 전시·공연·행사

필수 블록

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

섹션 흐름 셋

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

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

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

필수 블록

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

섹션 흐름 셋

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

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