# FeatPaper Design Strategy

## Purpose

이 문서는 PR0에서 v1 웹사이트의 디자인 목적, 정보 구조, 페이지 패턴, 컴포넌트 기준, 트래킹 기준을 고정하기 위한 기준 문서다. PR1 이후 Astro 스캐폴딩과 화면 구현은 이 문서를 시각·구조 판단의 source of truth로 사용한다.

v1의 목표는 예쁜 랜딩페이지를 한 번 만드는 것이 아니다. FeatPaper의 콘텐츠, 제품 업데이트, 로드맵, 피드백, 트래킹, 전환이 연결되는 외부 제품 운영 시스템을 만드는 것이다.

## Design Decision Summary

- `FeatPaper-디자인핸드오프byClaude.md`와 `featpaper-mockup.html`을 v1의 primary visual reference로 둔다.
- 배포된 HTML reference는 `docs/visual/claude-mockup.html`에서 확인한다.
- 기존 A/B/C 방향성 mockup artifact는 `/artifacts/mockups/`에서 함께 참조한다.
- IA와 운영 루프는 기존 공사 계획의 `Home / Use Cases / Product / Plugins / Magazine / Roadmap / About` 구조를 유지한다.
- 시각 표현은 Claude 쪽의 compact dashboard, dense card layout, Use Case detail flow, Roadmap board 표현을 우선한다.
- Home은 problem-first 구조로 설계하고, 제품 설명은 하단 Product value 모듈과 Use Case 상세 안에서 흡수한다.
- Roadmap은 홈의 주인공이 아니라 독립 페이지와 홈 preview 모듈로 운영한다.
- 보라색 단색 과의존, 가짜 수치, placeholder metric, 과밀한 첫 화면은 금지한다.
- 기존 사이트의 명확한 제품 메시지와 testimonial은 유지하되, problem-first 흐름 안에서 재조립한다.

## Existing Site Assets to Preserve

기존 사이트는 버릴 대상이 아니라 재정렬할 자산이다.

- 명확한 제품 가치 제안: 문서를 링크로 공유하고, 열람 반응을 확인하며, 다음 액션으로 연결한다.
- testimonial, 고객 로고, FAQ 등 신뢰 요소: Salesforce, AWS, Cheil 계열의 신뢰 축은 확인 가능한 범위에서 유지한다.
- Help Center의 깊은 기능 가치: 문서 업데이트, Motion PDF, 방문자 추적, 열람 기간 설정, 공유 옵션, 리드폼 이후 자동 재공유, 플러그인 연동 등을 Product와 Use Case 언어로 번역한다.
- 기존 제품 메시지: feature-first 문장을 그대로 반복하지 않고, 고객 문제와 업무 흐름 중심으로 재배치한다.

## Existing Site Gaps to Fix

- 독립적인 Use Case 허브가 부족하다.
- Roadmap, Release Notes, Feedback Loop가 공개 제품 운영면으로 묶여 있지 않다.
- Blog, note, Studio, Help Center 등 콘텐츠 표면이 분산되어 최신성과 역할이 흐려질 수 있다.
- 사이트 운영 분석을 위한 tracking schema가 부족하다.
- `+0%`, `-0%` 같은 placeholder metric은 외부 화면에 남기지 않는다.
- Plugin / Studio 표면은 설치 가능 여부, 상태, 목적, CTA, 제품 허브와의 관계를 더 명확히 해야 한다.

## Audience and Traffic Paths

- SEO 방문자: Magazine 또는 Use Case로 유입되어 관련 기능과 인라인 CTA를 거쳐 `무료로 시작하기`로 이동한다.
- 마켓플레이스 방문자: Plugin landing에서 사용 중인 도구, 공유 방식, 분석 가치를 확인한 뒤 설치 또는 무료 시작으로 이동한다.
- 기업/세일즈 방문자: Use Cases와 Product를 통해 도입 상황을 이해하고 `도입 문의` 또는 무료 시작으로 이동한다.
- 기존 고객: Magazine, Release Notes, Roadmap을 통해 제품 변화와 다음 출시 방향을 확인하고 업데이트 구독 또는 피드백으로 이동한다.

## Canonical IA

v1의 상위 IA는 다음 구조로 고정한다.

- Home
- Use Cases
- Product
- Plugins
- Magazine
- Roadmap
- About

세부 페이지 패턴은 다음을 포함한다.

- Use Case detail
- Plugin detail
- Article detail
- Release note detail if needed

## Home Module Strategy

Home은 problem-first로 시작하고, 콘텐츠·제품·플러그인·로드맵·신뢰 요소를 하나의 운영 루프로 연결한다.

1. Hero
   - 핵심 질문: 제안서를 보낸 뒤 상대방이 읽었는지 알 수 있다면?
   - 메시지: 문서를 링크로 공유하고, 누가 어떤 페이지에서 멈췄는지 확인해 다음 액션으로 연결한다.
   - 비주얼: Claude mockup의 열람 분석 대시보드 표현을 참고하되, 검증되지 않은 수치와 과밀한 첫 화면은 피한다.
2. Trust strip
   - 확인 가능한 고객 로고, testimonial 출처, 사용 신뢰 신호를 배치한다.
   - 실측 데이터가 없으면 숫자 대신 로고와 인용을 우선한다.
3. Use Case / Magazine cards
   - `proposal-view-tracking`, `figma-pdf-share`, `sales-deck-analytics` 같은 문제 중심 콘텐츠를 카드로 노출한다.
4. Product value tabs/cards
   - Viewer Tracking, Engagement Insights, Video-Enhanced PDF, Document Update를 먼저 다룬다.
   - Help Center의 기능 깊이를 마케팅 언어로 번역한다.
5. Plugin entry
   - Figma, PowerPoint, Adobe Express, Gmail을 사용 중인 도구에서 시작하는 진입점으로 표현한다.
6. Roadmap preview
   - Now / Next / Later 보드의 축약형과 피드백 CTA를 배치한다.
7. Testimonials
   - 기존 testimonial과 신뢰 요소를 problem-first 메시지 뒤에 배치한다.
8. Final CTA
   - `무료로 시작하기`를 primary로, `도입 문의`를 secondary로 둔다.

## Key Page Patterns

### Use Case Detail

Use Case 상세는 SEO와 전환의 중심 페이지다. 기본 흐름은 다음과 같다.

1. 문제 상황
2. 기존 방식의 마찰
3. FeatPaper로 바뀌는 흐름
4. 관련 기능
5. 관련 플러그인
6. CTA

각 상세는 본문 중간과 하단에 `InlineCtaBlock`을 두고, 관련 기능과 플러그인 카드를 연결한다.

### Product

Product는 기능 덤프가 아니라 Help Center의 깊은 기능을 마케팅 언어로 번역하는 허브다. 기능명보다 고객 업무 결과를 먼저 설명하고, 필요할 때 기능 설명으로 내려간다.

우선 기능 축은 다음이다.

- Viewer Tracking
- Engagement Insights
- Video-Enhanced PDF
- Document Update
- Lead Form / CTA
- Access Control

### Plugins

Plugin 페이지는 다음 3단 흐름을 따른다.

1. 어디서 만들고
2. 어떻게 공유하고
3. 무엇을 분석하는지

각 페이지에는 설치 또는 마켓플레이스 링크, 관련 Use Case, FAQ, 무료 시작 CTA를 둔다. 설치 가능, 대기 등록, 문의 필요 같은 상태도 명확히 표기한다.

### Magazine

Magazine은 콘텐츠 허브의 기준 표면이다. 카테고리는 다음으로 둔다.

- Use Case
- Guide
- Update
- Roadmap

각 글은 관련 기능, 관련 플러그인, 인라인 CTA를 포함해야 한다.

### Roadmap

Roadmap은 공개 제품 운영면이다.

- Now / Next / Later 보드
- release notes 목록 또는 링크
- Tally feedback
- 업데이트 구독
- 기능 요청 또는 관심 등록 CTA

## Design Tokens

v1의 baseline token은 다음으로 둔다.

```css
:root {
  --color-brand: #1A1A2E;
  --color-accent: #4F46E5;
  --color-accent-light: #EEF2FF;
  --color-gray-100: #F8F9FA;
  --color-gray-700: #495057;
  --color-white: #FFFFFF;
}
```

스타일 방향은 restrained SaaS/product-operations palette다. Claude mockup의 컴팩트함은 유지하되, 보라색 계열만으로 화면 전체를 지배하지 않게 한다.

타이포그래피 가정은 다음이다.

- English: Inter
- Korean: Pretendard
- Japanese: Noto Sans JP

## Component Inventory

- `HeroSection`
- `LogoStrip`
- `ContentCardGrid`
- `FeatureTabs`
- `PluginCard`
- `TestimonialSlider` 또는 static testimonial cards
- `CtaBanner`
- `RoadmapBoard`
- `InlineCtaBlock`
- `TallyEmbed`

이 컴포넌트들은 PR2 이후 실제 구현 시 공통 module contract를 갖춰야 한다. 카드, CTA, 플러그인 링크, 로드맵 피드백 링크는 트래킹 속성을 받을 수 있어야 한다.

## Tracking Standards

모든 주요 내비게이션, CTA, 카드, 플러그인 링크, 로드맵 피드백 링크에는 다음 속성을 표준으로 둔다.

- `data-track-event`
- `data-content-id`
- `data-category`
- `data-locale`
- `data-position`

예상 이벤트 범주는 다음과 같다.

- `nav_click`
- `cta_click`
- `content_card_click`
- `plugin_link_click`
- `roadmap_feedback_click`
- `form_embed_view`

PR0에서는 analytics SDK를 도입하지 않는다. PR3 이후 schema와 helper를 만들고, 실제 수집 도구는 v1 이후 필요에 따라 연결한다.

## Responsive and QA Notes

- 모바일은 카드 1열 스택을 기본으로 한다.
- Hero 첫 화면은 문제 메시지, primary CTA, 핵심 비주얼이 과밀하지 않게 보여야 한다.
- 일본어와 영어의 긴 제목, CTA, 카드 텍스트가 버튼과 카드 경계를 넘지 않아야 한다.
- Roadmap 보드는 모바일에서 세로 컬럼으로 읽히되 Now / Next / Later 순서를 유지한다.
- 레이아웃 PR은 desktop/mobile screenshot smoke check를 수행한다.
- placeholder metric, 임의 고객명, 검증되지 않은 사용량 수치는 공개 화면에 노출하지 않는다.