🎯 학습 목표
- 막연한 아이디어를 구체적인 요구사항으로 정리하는 법을 배운다.
- 요구사항을 Claude에게 효과적으로 전달하는 구조를 익힌다.
- 기획 → 구조 설계 → 구현으로 이어지는 단계적 흐름을 이해한다.
- 구현 전에 Claude와 함께 설계를 검토하는 습관을 들인다.
📖 개념 설명
좋은 코드는 좋은 기획에서 나옵니다. Vibe Coding에서도 마찬가지로, AI에게 곧바로 “앱 만들어줘”라고 하기보다 무엇을, 왜, 어떻게 만들지를 먼저 정리하는 것이 결과 품질을 좌우합니다. AI는 입력한 정보 안에서만 추론하므로, 요구사항이 모호하면 결과도 모호해집니다.
요구사항을 전달할 때는 (1) 목적과 사용자, (2) 핵심 기능 목록, (3) 제약 조건(기술 스택, 환경), (4) 완성 기준을 명확히 하는 것이 좋습니다. 이렇게 구조화해 전달하면 Claude는 빠진 부분을 되묻고, 합리적인 구조를 제안할 수 있습니다.
구현에 바로 들어가기 전에 ‘Plan(계획)’ 단계를 거치는 것이 매우 효과적입니다. Claude에게 먼저 구현 계획을 세우게 하고, 그 계획을 사람이 검토한 뒤 실행하면, 잘못된 방향으로 한참 가버리는 실수를 줄일 수 있습니다. 이는 측정 후 절단하는 목공의 원칙과 같습니다.
이 단계적 흐름(기획 → 설계 → 구현 → 검증)을 몸에 익히면, 단순한 스크립트부터 복잡한 풀스택 앱까지 동일한 리듬으로 만들 수 있습니다.
요구사항을 정리할 때 가장 흔한 실수는 머릿속에만 있는 가정을 적지 않는 것입니다. 예를 들어 “메모 앱”이라고만 하면, 데이터를 어디에 저장할지, 여러 기기에서 동기화가 필요한지, 로그인이 필요한지 같은 핵심 결정이 빠집니다. 이런 빈칸을 AI가 임의로 채우면 의도와 다른 결과가 나오기 쉽습니다. 그래서 기획 단계에서 ‘당연하다고 여긴 것’까지 명시적으로 적어 두는 것이 중요합니다.
좋은 방법은 Claude에게 먼저 ‘되묻게’ 하는 것입니다. “이 요구사항에서 모호하거나 빠진 부분이 있으면 먼저 질문해줘”라고 요청하면, AI가 결정이 필요한 지점을 짚어 줍니다. 이렇게 질문과 답을 주고받으며 요구사항을 다듬으면, 실제 구현에 들어가기 전에 대부분의 방향 오류를 잡아낼 수 있습니다. 기획에 들인 5분이 구현에서 한 시간의 헛수고를 막아 줍니다.
또한 설계 단계에서는 파일 구조와 데이터 흐름을 글로 먼저 그려 보는 것이 좋습니다. “어떤 파일이 무슨 역할을 하고, 데이터가 어디서 어디로 흐르는지” 한 문단으로 설명하게 하면, 코드를 한 줄도 쓰기 전에 구조의 합리성을 검토할 수 있습니다. 이 습관은 프로젝트가 커질수록 더 큰 가치를 발휘합니다.
💻 실습
간단한 메모 앱을 예로, 먼저 요구사항을 구조화해 전달합니다.
> 간단한 메모 웹앱을 만들고 싶어. 아래 요구사항을 보고
> 먼저 구현하지 말고 계획부터 세워줘.
>
> [목적] 개인용 빠른 메모 저장
> [사용자] 나 혼자, 데스크톱 브라우저
> [기능] 1) 메모 작성 2) 목록 보기 3) 삭제
> [제약] 외부 서버 없이 브라우저 localStorage 사용, 순수 HTML/CSS/JS
> [완성 기준] 새로고침해도 메모가 유지될 것
>
> 파일 구조와 구현 순서를 제안해줘.Claude가 계획을 제시하면, 사람이 검토하고 필요한 부분을 조정합니다.
> 좋아. 다만 삭제 시 확인 창을 추가하고, CSS는 별도 파일로 분리해줘.
> 이 수정사항을 반영한 최종 계획을 다시 보여줘.계획에 합의가 되면 비로소 구현을 지시합니다.
> 합의된 계획대로 index.html, style.css, app.js 를 만들어줘.
> 각 파일이 무슨 역할을 하는지 주석으로 설명도 넣어줘.⚠️ Windows 환경 주의사항
- 프로젝트 폴더는 OneDrive 동기화 폴더 밖(예:
C:dev)에 두는 것이 좋습니다. 동기화 중 파일 잠금으로 충돌이 날 수 있습니다. - 한글 파일명/폴더명은 일부 도구에서 문제를 일으킬 수 있으니 영문 경로를 권장합니다.
- 브라우저로 결과를 열 때
start index.html명령을 PowerShell에서 사용하면 기본 브라우저로 바로 열립니다.
💡 팁
- “구현하지 말고 계획부터 세워줘”는 가장 강력한 한마디입니다. 방향을 먼저 합의하세요.
- 요구사항에 ‘완성 기준’을 넣으면 Claude가 스스로 검증할 기준점이 생깁니다.
- 큰 기능은 작은 단계로 쪼개 하나씩 합의·구현하면 실패 비용이 줄어듭니다.
- 합의된 계획을
PLAN.md로 저장해 두면 다음 세션에서도 이어가기 좋습니다. - 기획 단계에서 화면 스케치를 글로 묘사해 달라고 하면, 구현 전에 UI 구조를 미리 합의할 수 있습니다.
- “이 기능을 나중에 확장한다면 어디를 고려해야 할까?”를 물으면 미래를 대비한 설계가 나옵니다.
- 처음에는 기능을 욕심내지 말고 핵심 한두 개로 좁혀, 완성의 성취감을 먼저 맛보세요.
- 계획서를 만들 때 ‘하지 않을 것’ 목록도 함께 적으면, 범위가 불필요하게 커지는 것을 막을 수 있습니다.