화면 목록 & 라우팅 설계

핵심 개념

만들어야 할 화면을 목록화하고 Next.js 라우팅 구조를 설계합니다. 화면 목록이 곧 폴더 구조가 됩니다.

본문

ROUTING DESIGNapp/├── (public)/ ← 공개 페이지│ ├── page.tsx / 랜딩│ └── about/ /about├── (auth)/ ← 인증 페이지│ ├── login/ /login│ └── signup/ /signup└── (dashboard)/ ← 로그인 후 ├── dashboard/ └── settings/

🛠️ 이 챕터의 실습 방법

실습 1: 사용자 스토리 작성

자신의 프로젝트에 대해 5개 사용자 스토리를 작성하세요: '[사용자]로서 [기능]을 하고 싶다, 왜냐하면 [가치]이기 때문이다' 각 스토리에 인수 조건(Given/When/Then)을 추가하세요.

실습 2: 와이어프레임 그리기

아래 도구 중 하나로 핵심 화면 3개의 와이어프레임을 그려보세요:

Figma (추천): https://figma.com (무료 계정, 3프로젝트)
Excalidraw: https://excalidraw.com (설치 없이 브라우저에서 바로)
종이+펜: 사진 찍어서 저장 (가장 빠른 방법)

실습 3: User Flow 그리기

시작(랜딩) → 회원가입 → 메인 기능 → 완료까지의 흐름을 Excalidraw 또는 Miro에서 화살표로 연결해보세요.

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.화면 목록만 있고 URL 설계가 없으면 라우트 구조가 즉흥적이 돼서 일관성이 무너집니다

2.화면별로 /경로를 매핑하고, 동적 라우트([id]), 중첩 레이아웃을 설계하면 코딩 시 라우팅 고민이 없어집니다

3.다음 챕터에서 데이터베이스 스키마를 정식으로 설계합니다

💬 이 챕터 질문 보기

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

→

진행도 11 / 34

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