프로젝트 시작하기 — 아이디어에서 첫 화면까지

🌱 0에서 1이 가장 어렵다

기존 프로젝트에 기능을 추가하는 것과 완전히 새로운 프로젝트를 시작하는 것은 차원이 다릅니다. 빈 폴더 앞에서 "어디서부터 시작하지?"라는 질문에 막히는 경우가 많습니다. 하지만 AI와 함께라면 이 0→1 단계를 빠르게 넘어갈 수 있습니다. 이번 강의에서는 아이디어를 첫 실행 가능한 화면으로 바꾸는 과정을 단계별로 배웁니다.

📝 Step 1 — 아이디어를 한 문단으로 정의하기

먼저 만들려는 것을 한 문단으로 써봅니다. 화려한 기획서가 아니어도 됩니다. AI가 이해할 수 있는 수준의 설명이면 충분합니다:

프리랜서를 위한 간단한 시간 추적 앱을 만들려고 해. 클라이언트별로 프로젝트를 만들고, 작업 시작/종료 버튼을 누르면 시간이 기록돼. 하루 종료 시 클라이언트별 총 작업 시간을 볼 수 있어. 모바일에서도 쓸 수 있어야 해.

이 한 문단이 프로젝트의 북극성입니다. 방향을 잃을 때마다 돌아올 기준점입니다.

🔧 Step 2 — 기술 스택 추천받기

만들려는 것을 AI에게 설명하고 어떤 기술 스택이 맞는지 추천받습니다:

위에서 설명한 시간 추적 앱을 만들려고 해. 나는 JavaScript는 조금 알지만 프레임워크 경험은 없어. 빠르게 시작할 수 있고, 나중에 기능을 추가하기 쉬운 기술 스택을 추천해줘. 각 선택의 이유도 설명해줘.

AI가 여러 선택지를 제시하면, 그중 하나를 고릅니다. 정답은 없습니다 — 추천 이유를 이해하고 가장 단순한 것을 선택하면 됩니다. 입문자라면 복잡한 스택보다 단순한 스택이 항상 낫습니다.

🏗️ Step 3 — 프로젝트 초기 셋업

기술 스택을 결정했으면 프로젝트 초기 셋업을 AI에게 안내받습니다:

Next.js + Tailwind CSS로 시작하기로 했어. 새 프로젝트를 설치하고 초기 설정을 완료하는 명령어를 순서대로 알려줘. 각 명령어가 무엇을 하는지도 간단히 설명해줘.

AI가 준 명령어를 터미널에 하나씩 실행합니다. 중간에 오류가 나면 오류 메시지를 그대로 AI에게 붙여넣어 해결합니다.

npx create-next-app@latest time-tracker --typescript --tailwind
cd time-tracker
npm run dev

브라우저에 기본 화면이 뜨면 셋업 완료입니다.

🎨 Step 4 — 첫 화면 만들기

기본 화면에서 프로젝트의 첫 실제 화면을 만듭니다. 모든 기능을 한 번에 구현하려 하지 마세요. 가장 핵심적인 화면 하나만 먼저 만듭니다:

시간 추적 앱의 메인 화면을 만들어줘. 지금은 기능 없이 UI만. 상단에 타이머(00:00:00 형식), 가운데에 시작 버튼(크고 초록색), 하단에 오늘의 작업 기록 목록 영역(지금은 빈 상태). 심플하고 모던한 스타일로 만들어줘.

이 단계에서 데이터 저장, API 연결은 전혀 필요 없습니다. UI가 원하는 모습이면 성공입니다.

🚦 Step 5 — "동작하는 첫 기능" 추가

UI가 완성되면 가장 핵심적인 기능 하나를 동작하게 만듭니다. 시간 추적 앱이라면 타이머가 실제로 작동하게 만드는 것이 첫 기능입니다:

시작 버튼을 누르면 타이머가 동작하고, 다시 누르면 멈추게 해줘. 버튼 텍스트도 "시작"↔"정지"로 바뀌어야 해. 일단 데이터 저장은 나중에 하고 UI 동작만 먼저 만들어줘.

✅ 0→1 워크플로우 요약

1. 아이디어를 한 문단으로 정의
2. 기술 스택을 추천받아 결정
3. 프로젝트 초기 셋업 → 기본 화면 실행
4. 핵심 UI 먼저 만들기 (데이터 없이)
5. 가장 중요한 기능 하나를 동작하게 만들기

이 5단계가 완료되면 "동작하는 무언가"가 생깁니다. 여기서부터는 11강에서 배울 기능 반복(iteration)으로 키워나가면 됩니다.

💡 핵심 원칙: 완벽한 기획서보다 동작하는 첫 버전이 낫습니다. 직접 써보면서 무엇이 필요한지 명확해집니다.