7장: 프로젝트 초기화와 Git
프로젝트 초기화
6장에서 아이디어와 기술 스택을 정했습니다. 이제 실제 코드를 만들 차례입니다.
프로젝트 초기화란 빈 폴더에서 시작해서 필요한 도구들을 설치하고 기본 구조를 잡는 것입니다. 전통적으로는 개발자가 직접 명령어를 입력하며 몇 시간이 걸리던 작업이지만, Claude Code에게 시키면 됩니다.
Next.js와 Supabase를 사용하는 프로젝트를 초기화해줘.
프로젝트 이름은 [이름]이야.
TypeScript를 사용하고, Tailwind CSS도 포함해줘.
바로 개발을 시작할 수 있게 세팅해줘.
Claude Code가 작업하는 동안 이런 것들이 자동으로 처리됩니다.
package.json— 이 프로젝트가 어떤 라이브러리를 쓰는지 기록하는 파일node_modules/— 실제 라이브러리 파일들이 설치되는 폴더next.config.js— Next.js 설정 파일src/또는app/— 실제 코드가 들어가는 폴더들
중간중간 "이 명령어를 실행해도 될까요?"라고 물어봅니다. 허용하면 됩니다. 매번 묻는 게 귀찮으면 "Always allow"를 선택합니다.
초기화가 끝나면 폴더 안에 여러 폴더와 파일이 생깁니다. 이 파일들이 뭔지 하나하나 이해할 필요 없습니다. AI가 관리합니다.
CLAUDE.md 작성
5장에서 배운 CLAUDE.md를 이 프로젝트에 만들 차례입니다.
/init
Claude Code가 방금 만든 프로젝트 구조를 분석해서 CLAUDE.md 초안을 작성합니다. 대화에 나온 파일 경로를 클릭해 확인하고, 빠진 규칙이 있으면 추가 요청합니다.
CLAUDE.md에 아래 내용도 추가해줘.
- 주석은 한국어로 작성
- 외부 라이브러리 추가 전 먼저 물어볼 것
- 컴포넌트 파일은 /components 폴더에
이제부터 새 대화를 시작할 때마다 Claude Code가 이 파일을 자동으로 읽습니다.
린트 — 코드 맞춤법 검사기
글을 쓸 때 맞춤법 검사기가 빨간 밑줄로 오타를 알려주듯, 코드에도 비슷한 도구가 있습니다. 린트(lint)라고 부릅니다.
린트는 코드를 실행하기 전에 문제를 잡아줍니다. 예를 들어:
- 만들어놓고 안 쓰는 변수
- 빠뜨린 설정
- 나중에 버그가 될 수 있는 위험한 패턴
Next.js로 프로젝트를 초기화하면 ESLint라는 린트 도구가 자동으로 포함됩니다. 별도로 설치할 필요 없습니다.
린트 결과 확인하기
터미널에서 npm run lint를 실행하면 걸린 항목이 파일과 줄 번호까지 나옵니다. 내용을 그대로 복사해서 AI에게 주면 됩니다.
CLAUDE.md에 린트 규칙 추가하기
커밋하기 전에 린트를 항상 통과시키고 싶다면 CLAUDE.md에 규칙을 넣어둡니다.
CLAUDE.md에 아래 규칙을 추가해줘.
- 코드를 수정한 뒤에는 npm run lint를 실행해서 경고가 없는지 확인할 것
이렇게 하면 Claude Code가 코드를 고친 뒤 스스로 린트를 돌려서 문제를 잡아줍니다.
개발 서버 실행하기
코드를 만들기 전에 개발 서버를 먼저 이해해야 합니다.
개발 서버는 내 컴퓨터에서만 돌아가는 임시 웹서버입니다. 인터넷에 올리지 않아도 브라우저에서 프로젝트를 볼 수 있게 해줍니다. 코드를 수정하면 브라우저가 자동으로 새로고침됩니다.
대부분은 Claude가 파일을 고친 뒤 알아서 개발 서버를 켜고 브라우저 패널에 화면을 띄웁니다. 안 뜨면 "개발 서버 켜고 화면 보여줘"라고 말하면 됩니다.
직접 켜고 싶으면 터미널을 열고(Ctrl+백틱):
npm run dev
터미널에 아래처럼 나옵니다.
▲ Next.js 16.0.0
- Local: http://localhost:3000
- Network: http://192.168.0.10:3000
✓ Ready in 1.2s
http://localhost:3000이 프로젝트 주소입니다. localhost는 "내 컴퓨터"라는 뜻입니다.
개발 서버는 작업하는 동안 계속 켜두면 됩니다. 서버를 끄려면 해당 터미널 탭에서 Ctrl+C를 누릅니다.
첫 페이지 만들기
개발 서버가 켜진 상태에서 첫 화면을 만듭니다.
메인 페이지를 만들어줘.
- 상단에 네비게이션 바 (로고, 메뉴)
- 가운데에 서비스 이름과 한 줄 설명
- 깔끔하고 모던한 디자인으로
코드가 수정되면 브라우저가 자동으로 새로고침됩니다. 직접 새로고침 버튼을 누르지 않아도 됩니다.
화면을 보고 수정하고 싶은 부분이 있으면 그대로 말합니다.
헤더 배경색을 짙은 남색으로 바꿔줘.
메뉴 항목이 너무 붙어 있어. 간격 넓혀줘.
화면을 캡처해서 붙여넣고 말하면 더 정확합니다.
[스크린샷 첨부]
이 레이아웃에서 버튼을 오른쪽 위로 옮겨줘.
Git과 GitHub
코드를 만들다 보면 실수가 납니다. AI가 코드를 잘못 수정해서 잘 되던 기능이 갑자기 안 될 때, "어제 잘 되던 버전으로 돌아가고 싶다"는 생각이 듭니다.
Git이 이걸 해줍니다. 게임의 세이브 포인트라고 생각하면 됩니다. 중요한 시점마다 저장해두면 언제든 그 시점으로 돌아갈 수 있습니다. 이 저장 행위를 커밋(commit)이라고 합니다.
GitHub는 이 커밋들을 인터넷에 올려두는 서비스입니다. 내 컴퓨터가 고장 나도 코드가 사라지지 않고, 나중에 배포할 때도 GitHub에서 가져다 씁니다.
GitHub 계정 만들기
아직 GitHub 계정이 없다면 https://github.com (새 탭에서 열림) 에서 먼저 만들어야 합니다. 이메일 주소로 무료로 가입할 수 있습니다.
Git 명령어는 외울 필요 없음
Claude Code에게 시키면 됩니다.
지금까지 만든 코드를 Git으로 저장하고 GitHub에 올려줘.
커밋 메시지는 "프로젝트 초기화 및 메인 페이지 생성"으로 해줘.
Claude Code가 변경 사항을 확인하고 커밋 후 GitHub에 올려줍니다.
언제 커밋할까
기능 하나를 완성했을 때, 배포하기 직전, 하루 작업을 마칠 때 커밋합니다. 자주 할수록 좋습니다. 세이브 포인트가 촘촘할수록 되돌아갈 지점이 많아집니다.
처음 GitHub에 올릴 때는 GitHub 계정 인증이 필요합니다. Claude Code가 단계별로 안내하는 대로 따라하면 됩니다.
.gitignore — 올리면 안 되는 파일
Git으로 코드를 저장할 때 올리면 절대 안 되는 파일이 있습니다.
.env 파일입니다. 이 파일에는 데이터베이스 비밀번호, API 키 같은 민감한 정보가 들어갑니다. GitHub에 올리는 순간 전 세계 누구나 볼 수 있게 됩니다. 실제로 이 실수로 해킹을 당하거나 엄청난 서비스 요금이 청구되는 사고가 매우 자주 일어납니다.
.gitignore 파일이 이 문제를 막아줍니다. 여기에 적힌 파일과 폴더는 Git이 무시해서 GitHub에 올라가지 않습니다.
프로젝트를 초기화할 때 AI가 .gitignore를 자동으로 만들어주지만, .env가 포함되어 있는지 반드시 확인하세요.
.gitignore에 .env 파일이 포함되어 있는지 확인해줘.
없으면 추가해줘.
이미 실수로 GitHub에 올렸다면 즉시 해당 API 키를 만료시키고 새로 발급해야 합니다. 올라간 것을 지운다고 해결되지 않습니다. GitHub 히스토리에 남기 때문입니다.
✏️ 실습: 프로젝트를 초기화하고 첫 페이지를 만들어 GitHub에 올리기
1단계: Code 탭에서 Select folder를 눌러 my-project라는 새 폴더를 만들고 선택합니다.
2단계: 프로젝트를 초기화합니다.
Next.js와 Supabase를 사용하는 프로젝트를 초기화해줘.
TypeScript와 Tailwind CSS를 포함하고, 바로 개발 시작할 수 있게 세팅해줘.
작업이 끝나면 폴더에 파일들이 생긴 것을 확인합니다.
3단계: CLAUDE.md를 만듭니다.
/init
4단계: .gitignore에 .env가 포함되어 있는지 확인합니다.
.gitignore에 .env가 포함되어 있는지 확인해줘.
5단계: 개발 서버를 켭니다.
개발 서버 켜고 화면 보여줘.
브라우저 패널에 기본 Next.js 화면이 보이면 성공입니다.
6단계: 메인 페이지를 만듭니다.
메인 페이지를 만들어줘.
내 프로젝트 이름과 간단한 소개, 시작하기 버튼이 있게.
깔끔한 디자인으로.
브라우저에서 변경된 화면을 확인합니다.
7단계: Git으로 저장하고 GitHub에 올립니다.
지금까지 작업한 내용을 커밋하고 GitHub에 올려줘.
이제 프로젝트의 기반이 완성됐습니다. 다음 장에서 핵심 기능을 하나씩 붙여나갑니다.
참고자료