기획자의 무기

스토리텔링과 디자인

좋은 앱은 좋은 기획에서 시작됩니다

앱 컨셉 도출 프레임워크

문제 — 해결 — 사용자 삼각형

        [문제]
       /      \
      /        \
  [사용자] — [해결]

세 가지가 명확하지 않으면 앱은 방향을 잃습니다

스토리텔링 구조

Hook → Problem → Solution → CTA

온보딩, 랜딩 페이지, 앱스토어 설명 모두 이 구조 적용 가능

와이어프레임 작성법

손그림 또는 Excalidraw

왜 와이어프레임인가?

• 코드 작성 전에 화면 흐름을 검증
• 팀원 간 공통 이해 형성
• 불필요한 개발 반복 방지

작성 원칙

1. Low-fidelity 우선: 색상·폰트 없이 구조만
2. 화면 흐름 표시: 화면 간 이동을 화살표로 연결
3. 핵심 인터랙션 명시: 탭, 스와이프, 입력 등
4. Excalidraw 추천: 무료, 협업 가능, 깔끔한 손그림 느낌

완벽한 디자인보다 빠른 검증이 중요합니다

디자인 명세 — 색상 팔레트

색상, 레이아웃, 컴포넌트 결정 (1/2)

디자인 명세 — 레이아웃 & 컴포넌트

색상, 레이아웃, 컴포넌트 결정 (2/2)

레이아웃 결정사항

• 탭 네비게이션 vs 스택 네비게이션
• 카드형 vs 리스트형
• 하단 탭 개수 (3~5개 권장)

컴포넌트 목록

• 버튼 (Primary / Secondary / Ghost)
• 입력 필드, 카드, 모달, 토스트 메시지

Claude로 카피라이팅

온보딩 텍스트, 버튼 레이블, 에러 메시지

우리 앱은 [앱 설명]입니다.
다음 UI 요소의 한국어 카피를 작성해주세요:
1. 온보딩 화면 3장의 제목과 설명
2. 주요 버튼 레이블 5개
3. 에러 메시지 3개
톤: 친근하지만 신뢰감 있게

카피라이팅 체크리스트

좋은 카피의 기준

• [ ] 사용자 행동을 유도하는 동사 사용
• [ ] 전문 용어 대신 일상 언어
• [ ] 에러 메시지에 해결 방법 포함
• [ ] 일관된 어투 (해요체 vs 합니다체)

핸드오프 문서 작성 실습

기획 → 개발 전달 문서

1. 앱 개요: 한 줄 설명 + 핵심 가치
2. 화면 목록: 와이어프레임 + 설명
3. 화면 흐름도: 네비게이션 구조
4. 디자인 토큰: 색상, 폰트, 간격
5. 컴포넌트 명세: 상태별 동작 설명
6. API 요구사항: 필요한 데이터 목록

템플릿: templates/design-handoff/ 폴더 참조

좋은 핸드오프 문서의 기준

개발자가 바로 작업할 수 있는가?

• [ ] 모든 화면이 빠짐없이 정의되어 있는가
• [ ] 화면 간 이동 경로가 명확한가
• [ ] 색상·폰트 등 디자인 토큰이 구체적인가
• [ ] 컴포넌트 상태(기본/호버/에러)가 정의되어 있는가

좋은 핸드오프 문서의 기준 (계속)

추가 확인 항목

• [ ] API에서 필요한 데이터가 명시되어 있는가
• [ ] 엣지 케이스(빈 상태, 로딩, 에러)가 고려되어 있는가
• [ ] 우선순위가 표시되어 있는가 (MVP vs Nice-to-have)