합류!

기획과 개발의 만남

기획 의도가 코드에 살아 숨 쉴 때, 좋은 앱이 탄생합니다

핸드오프 문서 리뷰 — 기획자

기획 의도가 코드에 반영되었는가

  • [ ] 화면 구성이 와이어프레임과 일치하는가
  • [ ] 네비게이션 흐름이 기획대로 동작하는가
  • [ ] 색상과 폰트가 디자인 명세와 같은가
  • [ ] 버튼 레이블, 안내 문구가 정확한가
  • [ ] 빈 상태(Empty State) 화면이 있는가
  • [ ] 에러 발생 시 사용자 안내가 적절한가

핸드오프 문서 리뷰 — 개발자

기획 문서의 구현 가능성 확인

  • [ ] 기획 문서에 모호한 부분이 없는가
  • [ ] 구현 불가능한 요구사항은 없는가
  • [ ] API 스펙이 명확하게 정의되어 있는가
  • [ ] 우선순위(MVP vs 추가 기능)가 구분되어 있는가

리뷰는 비난이 아니라 더 좋은 결과물을 위한 과정입니다

기획 의도를 코드에 반영하기 (1)

색상 → CSS 변수 / StyleSheet 상수

// constants/colors.ts
export const Colors = {
  primary: '#FF6B35',    // 기획서: 주색상
  secondary: '#004E89',  // 기획서: 보조색상
  background: '#F7F7F7', // 기획서: 배경색
  text: '#1A1A1A',       // 기획서: 본문 텍스트
};

기획 의도를 코드에 반영하기 (2)

카피 → 텍스트 상수

// constants/strings.ts
export const Strings = {
  onboarding: {
    title: '환영합니다!',        // 기획서: 온보딩 1단계
    subtitle: '시작해볼까요?',   // 기획서: 온보딩 1단계
  },
  errors: {
    network: '인터넷 연결을 확인해주세요',
  },
};

플로우 → Expo Router 네비게이션

  • 기획서의 화면 흐름도 = app/ 디렉토리 구조

통합 실습 진행 가이드

30분 안에 앱 완성하기

시간 활동 담당
0~5분 핸드오프 문서 최종 확인 전체
5~15분 디자인 토큰 반영 + 핵심 화면 개발
15~25분 카피·UI 검수 + 수정 기획
25~30분 최종 테스트 전체

통합 실습 — 협업 팁

효과적인 30분을 위해

  1. 실시간 소통: 옆에서 바로 확인하고 피드백
  2. 작은 단위로 커밋: 기능 하나씩 완성 → PR
  3. 완벽보다 완성: MVP를 먼저 동작시킨 후 개선
  4. Claude 활용: 막히는 부분은 Claude에게 즉시 질문

30분은 짧지만, 집중하면 충분합니다!

최종 앱 체크리스트 — 동작

앱이 제대로 동작하는가

  • [ ] 앱이 크래시 없이 실행되는가
  • [ ] 모든 화면 간 이동이 정상 동작하는가
  • [ ] 데이터 생성/조회가 동작하는가
  • [ ] 에러 상황에서 앱이 멈추지 않는가

최종 앱 체크리스트 — 디자인 & 배포

시각적 완성도와 배포 상태

디자인 확인

  • [ ] 색상이 기획 명세와 일치하는가
  • [ ] 텍스트가 잘리거나 깨지지 않는가
  • [ ] 버튼·입력 필드가 터치 가능한 크기인가
  • [ ] 로딩 상태가 표시되는가

배포 확인

  • [ ] Worker가 정상 배포되었는가
  • [ ] 프로덕션 API URL이 올바른가
  • [ ] Expo Go에서 QR 스캔으로 접근 가능한가

쇼케이스 전 이 체크리스트를 팀 전체가 함께 확인하세요