🚀 서론
'AI 기반 개발을 시작하고 싶은데, 무엇을 준비해야 하고 어디서부터 손대야 할지 모르겠다'는 분들을 위해, 준비 단계부터 첫 번째 앱을 만드는 과정까지를 한 번에 정리했습니다. 위에서 아래 순서대로 진행하시면 바로 시작할 수 있는 구성입니다.
- 필요한 4가지 준비물 갖추기 (획득처 링크 포함)
- Claude Code 설치 및 로그인하기
- 한국어로 요청하고, 확인하며, 수정받기
💡 AI 기반 개발이란?
AI 기반 개발은 코드를 직접 작성하는 대신 '만들고 싶은 것'을 AI에게 맡기고 결과를 확인하는 개발 방식입니다. 본 글에서는 AI로 Claude Code를 사용합니다.
챗봇(Chat AI)에게 코드를 작성하게 하는 방법과의 차이점은 다음과 같습니다.
| 항목 | 챗봇 (브라우저 질문) | Claude Code (코딩 에이전트) |
|---|
| 코드 위치 | 직접 복사하여 파일에 붙여넣기 | AI가 파일을 직접 생성/수정함 |
| ... | | |
| 사람의 역할은 '무엇을 만들지 결정하는 것'과 '완성된 것을 확인하는 것'이 됩니다. | | |
🧰 준비물
필요한 것은 4가지입니다. 비용이 발생하는 것은 Claude 유료 플랜뿐입니다 (2026년 10월 27일 기준 공식 정보).
| # | 준비물 | 비용 | 획득처 |
|---|
| 1 | 컴퓨터 (Windows / Mac) | 보유한 것으로 OK | ― |
| ... | | | |
1. 컴퓨터
공식 문서의 동작 환경은 macOS 13.0 이상, Windows 10(1809 이상), Ubuntu 20.04 이상 등 메모리 4GB 이상입니다. 평소 사용하는 컴퓨터로 문제없습니다.
2. Claude 유료 플랜
👉 Claude의 요금 페이지에서 Pro를 선택하여 등록합니다.
Claude Code는 무료 플랜에서는 사용할 수 없습니다. Pro는 월 20달러(연간 결제 시 연 200달러)입니다. 상한에 도달하면 월 100달러부터 시작하는 Max를 고려할 수 있습니다.
3. VS Code
👉 VS Code 공식 사이트에서 설치합니다.
AI가 만든 파일의 내용이나 변경점을 볼 수 있는 도구입니다. 직접 코드를 작성하기 위함이라기보다는, AI의 작업 내용을 확인하는 용도로 사용합니다.
4. Claude Code
👉 절차는 공식 Quick Start에 있습니다. 명령어는 다음 장에서 소개하겠습니다.
선택 사항: Git
혼자 연습할 때는 필요하지 않습니다. 여러 명이 같은 코드를 다루게 되는 단계가 되면 도입합니다. Windows 환경에서 Git for Windows가 없어도 Claude Code는 PowerShell을 통해 명령어를 실행하여 작동합니다.
🔧 Claude Code 설치 및 로그인하기
터미널(Windows는 PowerShell, Mac은 터미널.app)을 열고 다음 중 하나를 실행합니다.
irm https://claude.ai/install.ps1 | iex
curl -fsSL https://claude.ai/install.sh | bash
연습용 폴더를 만들고 실행합니다. 처음에는 브라우저가 열리므로, 등록한 Claude 계정으로 로그인합니다.
mkdir my-first-ai-app
cd my-first-ai-app
claude
🛠️ 첫 번째 앱 만들기
주제로는 하나의 HTML 파일로 완성되는 ToDo 리스트를 추천합니다. 서버도 데이터베이스도 필요 없기 때문에, 만들자마자 브라우저에서 확인할 수 있습니다.
단계 1: 만들고 싶은 것을 요청하기
ToDo 리스트 웹페이지를 만들어 주세요.
- index.html 파일 하나만으로 작동하도록 할 것 (외부 라이브러리는 사용하지 않을 것)
- 할 일을 입력하고 '추가' 버튼으로 목록에 추가할 수 있게 할 것
...
파일 생성을 전에 허가를 요청하면, 내용을 확인하고 'Yes'를 선택합니다.
단계 2: 브라우저에서 확인하기
index.html
을 더블클릭하여 열고, 실제로 추가나 체크를 시도해봅니다. AI가 '완료했습니다'라고 한 말을 맹신하지 않고, 직접 작동시켜 확인하는 것이 가장 중요한 습관입니다.
단계 3: 수정받고 싶은 부분을 요청하기
추가 버튼을 누르지 않아도 Enter 키로 추가할 수 있게 해주세요.
그리고 완료된 것을 일괄 삭제하는 '완료 항목 삭제' 버튼도 붙여주세요.
단계 4: 잘 안 될 경우 되돌리기(Rewind)
Claude Code는 요청을 보낼 때마다 직전 파일 상태를 자동으로 기록합니다. 입력란이 비어 있는 상태에서 Esc를 두 번 누르거나 /rewind를 입력하고, 되돌리고 싶은 요청을 선택한 후 'Restore code'를 선택하면 해당 요청 이전으로 돌아갈 수 있습니다.
단계 5: 프로젝트 규칙 작성하기
익숙해지면 /init을 실행합니다. CLAUDE.md가 생성되며, 이후 Claude Code는 매번 이것을 읽고 작업을 진행합니다. 매번 전달해야 할 내용은 여기에 작성해 둡니다.
- 설명은 일본어로 한다
- 변경하면 브라우저에서 확인하는 절차를 마지막에 적는다
- 한 번에 크게 재작업하지 않고, 변경점을 설명한 후 수정한다
⚠️ 작동 오류가 발생하기 쉬운 지점 (Troubleshooting)
| 문제 상황 | 원인 | 해결 방법 |
|---|
claude가 '인식되지 않습니다' | 설치 전에 열었던 터미널을 사용하고 있음 | 터미널을 다시 열기 |
irm이 '인식되지 않습니다' | 명령 프롬프트에서 실행하고 있음 | PowerShell에서 재실행 |
| 로그인해도 사용할 수 없음 | 무료 플랜 상태임 | Pro 이상으로 등록하기 |
| 크게 재작업되어 곤란할 때 | 요청 내용이 너무 대략적이었음 | /rewind로 돌아가 범위를 좁혀 다시 요청하기 |
| 요청한 것과 다른 것이 나올 때 | 한 번에 너무 많이 요청함 | 1회 요청으로 확인 가능한 크기로 나누기 |
필자의 환경(Windows 11 + PowerShell)에서는 CLAUDE.md에 '변경할 때마다 Lint, 타입 체크, 빌드를 실행한다'고 적어두는 것이 특히 효과적이었습니다. Claude Code가 '완료했습니다'라고 보고하기 전에 스스로 오류를 찾아 수정하게 되어 확인 과정의 수고가 줄었습니다.
🎉 요약 (Summary)
- 준비물은 'PC', 'Claude 유료 플랜', 'VS Code', 'Claude Code' 4가지입니다. Git은 여러 명이 개발할 때 추가합니다.
- 설치 → 작업 폴더에서
claude → 일본어로 요청하기 → 브라우저로 확인 → 수정받기,를 반복합니다. 실패하면 /rewind를 사용하세요.
- 처음에는 한 화면으로 끝나는 작은 것부터 시작하며, '직접 눈으로 확인하는 습관'을 들이는 것이 중요합니다.
자사 블로그에서도 같은 내용을 초심자를 위해 정리했습니다.
📚 참고 (References)
- Quickstart - Claude Code Docs (2026년 10월 27일 조회)
- Advanced setup - Claude Code Docs (2026년 10월 27일 조회)
- Checkpointing - Claude Code Docs (2026년 10월 27일 조회)
- Pricing - Claude (2026년 10월 27일 조회)
Discussion
