화면 목록 & 플로우 설계

핵심 개념

만들어야 할 화면을 먼저 목록화하고 사용자 플로우를 설계한다. 화면 목록이 곧 Next.js 라우팅 구조가 되고, 플로우가 컴포넌트 설계의 기준이 된다.

본문

화면 목록 → Next.js 라우팅공통 페이지:/ 랜딩/login 로그인/signup 회원가입인증 후 페이지:/dashboard 대시보드/profile 프로필/settings 설정사용자 플로우:방문 → 회원가입 → 인증→ 온보딩 → 대시보드

🛠️ 이 챕터의 실습 방법

이 트랙은 코딩 실습이 아닌 기획 도구 활용 실습입니다.

실습 1: 1페이지 기획서 작성

아래 템플릿을 노션(https://notion.so) 또는 구글 독스에 작성하세요:

📋 코드 (22줄)

프로젝트명:
한 줄 소개:

1. 문제 (3줄)
   - 누구의 어떤 문제인가?
   
2. 타겟 사용자 (1줄)
   - 구체적 페르소나

3. 핵심 기능 (3~5개)
   - Must: 
   - Should: 
   - Could: 

4. 기술 스택
   - 프론트: 
   - 백엔드: 
   - DB: 

5. 일정 (2주 MVP)
   - 1주차: 
   - 2주차:

실습 2: 경쟁 서비스 분석

자신의 아이디어와 비슷한 서비스 3개를 찾아서 비교표를 만들어보세요: | 기능 | 내 서비스 | 경쟁 A | 경쟁 B | → 차별화 포인트를 발견합니다.

사용할 도구 (무료)

Notion: https://notion.so (문서/기획)
Google Docs: https://docs.google.com (문서)
Miro: https://miro.com (브레인스토밍)

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

무료 모델

Gemini 2.5 Flash(무료) + Claude Sonnet 4.6(무료) + Grok 4.1(무료)

'화면 목록 & 플로우' 기획을 0원으로 시작하고 싶어.
ChatGPT(아이디어) → Gemini(경쟁 분석) → Claude(기획서 구조화) 순서로
Notion+Figma+GitHub Projects만 사용하는 워크플로우를 설계해줘.

소자본 모델

Claude API + Cursor $20/mo + Make.com — 월 10~30만원

'화면 목록 & 플로우' 기획에 AI를 활용해서 시간을 단축하고 싶어.
Perplexity API(시장조사) + Claude API(문서 작성) + Cursor(프로토타입) 조합으로
1주일 안에 기획→MVP까지 끝내는 월 20만원 플랜을 짜줘.

프로덕션 모델

Claude Opus + CrewAI + LangGraph — 월 100만원+

'화면 목록 & 플로우'를 팀 프로젝트로 확장하려 해.
AI PM(Claude Opus) + AI 리서처(Perplexity) + AI 개발(Cursor+Copilot)
에이전트 팀과 AGENTS.md 협업 프로토콜을 월 100만원 예산으로 설계해줘.

스택 프롬프트

0원→$20/mo→$100/mo 단계별 스택 비교

'화면 목록 & 플로우' 기획에 최적화된 AI 도구 조합을 단계별로 알려줘.
무료(Notion+Figma+ChatGPT) → 소자본(Cursor+Perplexity API) → 프로덕션(CrewAI+LangGraph)
각 단계별 도구·결과물·전환 시점을 비교해줘.

⭐ 이것만 기억하세요

화면 목록 & 플로우 설계는 이 3가지만 확실히 잡으세요

1.화면 설계 없이 코딩하면 페이지 간 이동이 꼬이고, 빠진 화면을 나중에 발견합니다

2.화면 목록을 전부 나열하고, 사용자 동선(회원가입→로그인→대시보드→설정)을 플로우차트로 연결합니다

3.다음 챕터에서 데이터 구조와 API를 설계합니다

💬 이 챕터 질문 보기

PROJECT-PLAN · CH.7 — 질문하거나 답변을 확인하세요

→

진행도 7 / 34

← 커리큘럼으로 ← 목록으로 (프로젝트 기획)