제 1강

꿀팁 — 이것만 알면 시킬 수 있다

Claude Code 설치는 한 줄이다.

터미널(검은 화면)을 열고 아래 한 줄을 붙여넣는다. 끝이다.

에이전트에게: “curl -fsSL https://claude.ai/install.sh | bash”

Windows 사용자는 WSL(Linux 환경)을 먼저 설치해야 한다. PowerShell에서 “wsl –install” 실행 후 재부팅.

시킬 때 쓰는 핵심 키워드 5개

  1. API — 프로그램끼리 대화하는 규격. “API 만들어”
  2. 프론트엔드 — 눈에 보이는 화면. “React로 화면 만들어”
  3. 데이터베이스(DB) — 데이터를 저장하는 곳. “DB에 저장해”
  4. 커밋 — 현재 상태를 저장하는 세이브 포인트. “커밋해”
  5. 배포 — 인터넷에 올리는 것. “배포해”

이 다섯 단어면 방향을 가리킬 수 있다. AI가 나머지를 알아듣는다.

AI의 기억은 파일 3개로 관리한다

  • CLAUDE.md — 프로젝트 규칙. AI가 매 세션 시작 시 자동으로 읽는다. “우리 팀은 이렇게 일해"를 적는다
  • 요구사항.md — 당신이 내린 결정의 기록. “VIP 할인율 10%” 같은 비즈니스 결정을 날짜와 함께 적는다
  • 진행상황.md — 어디까지 했는지. 새 세션에서 “이어서 해"가 통하게 한다

세 파일 모두 마크다운이다. 코드를 모르는 사람도 읽고 쓸 수 있다.

시킬 때 대화 팁

  • 한 번에 하나씩 시킨다. “로그인이랑 회원가입이랑 대시보드 다 만들어"보다 “로그인 API 먼저 만들어"가 낫다
  • 에러가 나면 Claude Code가 알아서 확인하고 수정한다. 직접 복사할 필요 없다
  • 대화가 100턴을 넘기면 AI 품질이 떨어진다. 새 세션을 시작하되, 위 파일 3개를 갱신해둔다

찍먹 체험

Claude Code를 설치하고 첫 대화를 해본다. 5분이면 된다.

  1. 터미널에서 프로젝트 폴더를 만들고 Claude Code를 실행한다

에이전트에게: “mkdir -p ~/projects/my-first-app && cd ~/projects/my-first-app && claude”

  1. 브라우저에서 로그인한다 (처음 한 번만)

  2. 첫 대화를 시작한다

에이전트에게: “이 폴더에 Go Gin 서버를 만들어. 포트 8080으로 Hello, World를 반환하는 API 하나.”

AI가 파일을 만들고, 서버를 띄우고, 확인까지 해준다. 브라우저에서 http://localhost:8080 을 열어본다.


왜 이렇게 시켜야 하는가

당신은 이미 AI에게 말로 시켜서 무언가를 만들어봤다. 화면이 나왔고, 버튼이 동작했고, 데이터가 저장됐다. 그런데 한 가지 질문이 남았을 것이다.

“이걸 계속 키워도 괜찮은 건가?”

이 질문에 답하려면, 먼저 우리가 지금 서 있는 곳을 정확히 봐야 한다. 어떤 도구가 있고, 어떤 단어들이 오가며, 어떤 패턴으로 일하고 있는지. 1강은 지도를 펼치는 시간이다. 2강부터는 이 지도 위에 길을 낸다.

AI 코딩 도구의 지형

말로 시키면 코드를 짜주는 도구가 여럿 있다. 크게 두 갈래로 나뉜다.

에디터 기반 도구 — 코드 편집기 안에 AI가 붙어 있다.

도구특징
CursorVS Code를 기반으로 만든 AI 에디터. 코드를 보면서 AI에게 수정을 시킨다
GitHub CopilotVS Code/JetBrains 플러그인. 자동완성과 채팅
WindsurfCursor와 유사한 AI 에디터

에디터 기반 도구는 코드를 눈으로 보면서 고치는 데 최적화되어 있다. 프로그래머에게는 좋다. 하지만 코드를 읽지 않는 사람에게는 화면에 떠 있는 코드가 의미 없는 글자다.

터미널 에이전트 — 터미널(검은 화면)에서 AI가 혼자 판단하고 실행한다.

도구특징
Claude CodeAnthropic이 만든 터미널 에이전트. Claude 모델 사용
Codex CLIOpenAI가 만든 터미널 에이전트. GPT/o 모델 사용

터미널 에이전트는 코드 편집뿐 아니라 명령어 실행, 테스트 확인, 파일 생성을 스스로 판단한다. “화면을 만들어"라고 시키면 파일을 만들고, 서버를 띄우고, 에러가 나면 고치고, 다시 확인한다. 이 자율적 검증 루프가 에디터 기반 도구와의 결정적 차이다.

왜 Claude Code인가

이 과정은 Claude Code를 기준으로 진행한다.

Claude Code는 현재 터미널 에이전트 중 가장 복잡한 다중 파일 작업을 자율적으로 처리하는 능력이 뛰어나다. 토큰은 AI가 읽는 글자 덩어리 단위다. 200K(20만)이면 소설 한 권, 1M(100만)이면 소설 다섯 권 분량이다. Claude Code는 200K 토큰 기본 컨텍스트에 Opus 4.6 모델은 1M 토큰까지 지원하여, 프로젝트 전체를 한 번에 파악하고 여러 파일을 동시에 수정할 수 있다. “이 기능 만들어"라고 시키면 관련 파일을 찾고, 코드를 작성하고, 테스트를 돌리고, 에러를 고치는 루프를 스스로 반복한다. Cursor 같은 에디터의 에이전트 모드도 비슷한 시도를 하지만, 파일 탐색 범위와 자율 판단의 깊이에서 터미널 에이전트가 한 단계 앞선다.

Codex CLI는? OpenAI의 터미널 에이전트로 개념은 Claude Code와 같다. 프로그램 자체가 빠르게 만들어져 있고, ChatGPT 구독에 포함되어 접근성이 좋다. 다만 필자가 프로덕션에서 써본 경험이 없어 이 과정에서 다루지는 않는다. Claude Code의 원리를 익히면 Codex CLI에도 동일하게 적용할 수 있다. 도구는 달라도 방법론은 같다.

Claude Code 설치하기

이 과정은 Ubuntu(또는 WSL) 환경을 기준으로 한다. Mac 사용자도 동일한 명령어가 대부분 통한다.

사전 준비

  1. Anthropic 계정: https://console.anthropic.com 에서 가입
  2. 구독 플랜: Claude Pro($20/월), Max($100/월 또는 $200/월) 중 선택. Max가 사용량 제한이 넉넉하다
  3. Ubuntu 또는 WSL: Windows 사용자는 WSL(Windows Subsystem for Linux)을 먼저 설치한다

Windows 사용자: WSL 설치

Windows PowerShell을 관리자 권한으로 열고 다음을 실행한다.

wsl --install

이 한 줄이 WSL 기능 활성화, Linux 커널 다운로드, Ubuntu 설치를 전부 처리한다. 재부팅 후 Ubuntu가 자동으로 열리면서 사용자 이름과 비밀번호를 물어본다. 소문자로 된 짧은 이름을 입력한다.

주의: 앞으로의 모든 작업은 Ubuntu 터미널 안에서 한다. PowerShell이나 CMD에서 Claude Code를 설치하면 “Windows is not supported” 에러가 난다.

방법 1: 네이티브 설치 (권장)

Node.js가 필요 없는 가장 간단한 방법이다.

curl -fsSL https://claude.ai/install.sh | bash

설치가 끝나면 확인한다.

claude --version

버전 번호가 뜨면 성공이다.

방법 2: npm으로 설치

이미 Node.js 경험이 있는 사람을 위한 방법이다. 처음이라면 방법 1을 쓴다.

이미 Node.js를 쓰고 있거나, 버전 관리가 필요할 때 쓴다.

1단계 — Node.js 설치 (18 이상 필요)

# nvm(Node Version Manager) 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# 터미널을 껐다 켜거나 아래 실행
source ~/.bashrc

# Node.js LTS 설치
nvm install --lts

# 확인
node --version   # v22.x.x 이상이면 OK
npm --version    # 10.x.x 이상이면 OK

2단계 — Claude Code 설치

npm install -g @anthropic-ai/claude-code

주의: sudo npm install -g는 쓰지 않는다. 권한 문제와 보안 위험이 생긴다.

최초 실행과 인증

# 프로젝트 폴더로 이동 (없으면 만든다)
mkdir -p ~/projects/my-first-app
cd ~/projects/my-first-app

# Claude Code 실행
claude

처음 실행하면 브라우저가 열리면서 Anthropic 로그인을 요청한다. 로그인하면 인증이 완료되고, 다음부터는 자동으로 연결된다.

WSL 팁: 프로젝트를 반드시 Linux 파일 시스템(/home/사용자명/)에 둔다. Windows 쪽(/mnt/c/)에 두면 파일 읽기가 극심하게 느려진다.

설치 확인 체크리스트

  • claude --version이 버전 번호를 출력하는가
  • claude를 실행하면 프롬프트가 뜨는가
  • 인증이 완료되었는가 (브라우저 로그인 성공)

시킬 때 쓰는 키워드 — 전체 사전

코드를 읽지 않아도 AI에게 시키려면 최소한의 키워드를 알아야 한다. 프로그래밍 용어를 전부 배울 필요는 없다. 방향을 가리킬 수 있을 만큼만 알면 된다.

지금 외울 필요 없다. 아래 표는 사전이다. 한 번 훑어보고, 나중에 AI가 모르는 말을 할 때 돌아와서 찾아보면 된다.

백엔드 — 보이지 않는 엔진

사용자 눈에 보이지 않는 서버 쪽 프로그램이다. 데이터를 받고, 처리하고, 저장하고, 돌려주는 일을 한다.

"Go Gin으로 API 만들어"
"FastAPI로 백엔드 만들어"
"Node.js Express 서버 만들어"
용어비유
API프로그램끼리 대화하는 규격식당의 주문서 양식
엔드포인트API의 각 기능 주소주문서의 각 메뉴 항목
서버24시간 켜져서 요청을 처리하는 프로그램주방
GoGoogle이 만든 프로그래밍 언어. 빠르고 단순하다
GinGo로 API를 만드는 도구(프레임워크)
FastAPIPython으로 API를 만드는 도구. 배우기 쉽다
Node.jsJavaScript로 서버를 만드는 환경

프론트엔드 — 눈에 보이는 화면

사용자가 보고 클릭하는 화면이다. 브라우저에서 돌아간다.

"React로 화면 만들어"
"로그인 페이지 만들어"
"목록을 테이블로 보여줘"
용어비유
React화면을 만드는 JavaScript 도구. 현재 가장 널리 쓰인다
컴포넌트화면의 조각 (버튼, 입력칸, 목록 등)레고 블록
SPA페이지 전환 없이 화면이 바뀌는 앱. 카카오톡 채팅방처럼, 페이지가 새로 뜨지 않고 화면 안에서 내용만 바뀌는 앱
CSS화면의 모양(색, 크기, 배치)을 정하는 언어인테리어

데이터베이스 — 기억 장치

데이터를 영구적으로 저장하는 곳이다. 서버를 꺼도 데이터는 남아 있다.

"PostgreSQL 데이터베이스 만들어"
"사용자 테이블 만들어"
"DB에 저장해"
용어비유
PostgreSQL가장 신뢰받는 오픈소스 데이터베이스금고
테이블데이터를 행과 열로 정리한 것엑셀 시트
DDL테이블의 구조를 정의하는 언어엑셀의 열 머리글 설정
CRUD생성(Create), 조회(Read), 수정(Update), 삭제(Delete)엑셀의 행 추가/보기/고치기/지우기
SQL데이터베이스에 명령하는 언어

배포 — 세상에 내놓기

만든 것을 인터넷에 올려서 다른 사람이 접속할 수 있게 하는 과정이다.

"Docker로 배포해"
"AWS에 올려"
"도메인 연결해"
용어비유
Docker프로그램을 상자에 넣어서 어디서든 똑같이 실행하는 도구이삿짐 컨테이너
AWSAmazon의 클라우드 서비스. 서버, 저장소, 도메인 등임대 건물
배포(deploy)코드를 서버에 올려서 실행하는 것매장 오픈
CI/CD코드가 바뀌면 자동으로 테스트하고 배포하는 파이프라인자동 배송 시스템

기타 자주 나오는 용어

용어비유
Git코드의 버전을 관리하는 도구. 세이브 포인트게임 저장
커밋(commit)현재 상태를 저장하는 행위세이브 버튼 누르기
GitHubGit 저장소를 인터넷에 올려두는 서비스클라우드 세이브
터미널텍스트로 컴퓨터에 명령하는 검은 화면문자 메시지로 비서에게 시키기
디렉토리/폴더파일을 분류하는 상자파일 캐비닛 서랍
JSON데이터를 주고받는 표준 형식. { } 안에 이름:값으로 적는다택배 송장 양식
환경변수비밀번호나 설정값을 코드 밖에 보관하는 방법금고에 넣어둔 열쇠

이 용어들을 외울 필요는 없다. AI에게 시킬 때 “그거 있잖아, 데이터 저장하는 거"라고 해도 알아듣는다. 하지만 AI가 돌려주는 말을 이해하려면 이 정도는 눈에 익혀두는 것이 좋다.

키워드를 알았으니 이제 다음 질문은 이것이다: AI에게 시킬 때마다 매번 이 내용을 설명해야 하는가? 프로젝트가 커지면 AI가 이전에 한 일을 기억하는가? 여기서 컨텍스트 관리가 등장한다.

컨텍스트 관리 — AI의 기억을 다루는 법

AI에게 가장 중요한 것이 무엇이냐고 물으면, 대부분 “똑똑한 모델"을 꼽는다. 틀렸다. 컨텍스트다.

컨텍스트(context)는 AI가 현재 기억하고 있는 모든 정보를 말한다. 당신이 한 말, AI가 한 말, 프로젝트 파일, 규칙 — 이 모든 것이 컨텍스트다. 문제는 이 기억에 한계가 있다는 것이다.

AI는 잊는다

대화가 길어지면 AI는 앞에서 한 말을 잊는다. “아까 만든 로그인 기능 있잖아"라고 했는데 “어떤 로그인 기능이요?“라고 되물으면, 컨텍스트가 소멸한 것이다.

새 세션을 열면 완전한 백지 상태다. 어제 밤새 나눈 대화는 증발한다. “이어서 해"가 안 통하는 이유다.

그러면 어떻게 해야 하는가? 기억을 파일로 외부화한다.

CLAUDE.md — 프로젝트의 헌법

CLAUDE.md는 프로젝트 폴더에 놓는 특별한 파일이다. Claude Code는 매 세션이 시작될 때 이 파일을 자동으로 읽는다. 당신이 매번 설명하지 않아도, AI가 프로젝트의 규칙을 처음부터 알고 있게 된다.

새로 합류한 팀원에게 첫날 아침 브리핑하는 문서라고 생각하면 된다. “우리 팀은 이렇게 일하고, 이건 하면 안 되고, 중요한 건 여기 있어.”

아래는 CLAUDE.md에 적어놓는 내용의 예시다. 지금 실행하는 것이 아니라, 파일에 적어두면 AI가 매번 읽는다.

# CLAUDE.md

## 프로젝트 개요
할 일 목록 앱. Go Gin 백엔드 + React 프론트엔드 + SQLite.

## 명령어
- `go run main.go` — 서버 실행 (8080 포트)
- `cd frontend && npm run dev` — 프론트엔드 실행

## 규칙
- API 응답은 항상 JSON
- 에러 메시지는 한국어
- 새 기능 추가 시 기존 기능이 깨지지 않는지 확인할 것

## 구조
- `main.go` — 서버 진입점
- `internal/handler/` — API 핸들러
- `internal/model/` — 데이터 모델
- `frontend/src/pages/` — 화면 파일

이 파일의 가장 중요한 특성: 코드를 모르는 사람도 읽고 쓸 수 있다. 마크다운(Markdown)은 #로 제목, -로 목록을 만드는 간단한 글쓰기 형식이다. 이 형식으로 되어 있고, 내용은 자연어다.

요구사항.md — 결정의 기록

AI에게 “사용자가 로그인하면 대시보드를 보여줘"라고 시켰고, AI가 만들었다. 일주일 뒤 “로그인 후 첫 화면을 설정 페이지로 바꿔"라고 시키면? AI는 원래 결정이 무엇이었는지 모른다. 당신도 잊었을 수 있다.

결정을 파일로 남겨라.

# 요구사항.md

## 인증
- 네이버 OAuth 로그인만 지원
- 로그인 성공 시 대시보드로 이동 (2026-05-20 결정)
- 비밀번호 찾기 기능 없음 (OAuth이므로)

## 할 일 관리
- 할 일은 제목, 내용, 마감일, 우선순위를 가진다
- 완료된 할 일은 삭제하지 않고 완료 표시 (2026-05-21 결정)
- 우선순위는 높음/보통/낮음 3단계 (2026-05-21 결정)

날짜를 붙이는 이유는, 나중에 “왜 이렇게 했지?“를 추적하기 위해서다.

진행상황.md — 현재 위치 표시

# 진행상황.md

## 완료
- [x] 프로젝트 초기 설정
- [x] 사용자 테이블 생성
- [x] 로그인 API
- [x] 할 일 CRUD API

## 진행 중
- [ ] 프론트엔드 할 일 목록 화면

## 예정
- [ ] 우선순위 필터
- [ ] 마감일 알림

AI에게 “이어서 해"라고 말할 때, 이 파일이 있으면 어디까지 했는지 정확히 안다.

왜 파일인가

코드를 모르는 사람이 AI를 장기 프로젝트에서 통제하는 핵심이 여기 있다. 코드는 못 읽어도, 문서는 읽을 수 있다. CLAUDE.md를 열어서 “이 규칙 맞아?“를 확인하고, 요구사항.md에 새로운 결정을 추가하고, 진행상황.md에서 현재 위치를 파악한다.

AI의 기억을 AI에게 맡기지 마라. 파일로 꺼내서 당신이 들고 있어라.

바이브 코딩 패턴

바이브 코딩(vibe coding)이라는 말을 처음 쓴 사람은 Andrej Karpathy다. 느낌(vibe)으로 코딩한다. 코드를 읽지 않는다. 화면에서 클릭하고 입력해서 확인한다. 에러가 나면 에러 메시지를 복사해서 AI에게 던진다. (Claude Code는 이 과정을 자동으로 한다 — 에러를 감지하고 수정까지 스스로 시도한다.)

당신이 이미 하고 있는 것이 바이브 코딩이다. 체계적으로 정리하면 이렇다.

기본 흐름

아이디어 → AI에게 시킴 → 결과 확인 → 수정 요청 → 반복

실제 대화는 이런 식이다.

1단계: 데이터 구조부터

"이 엑셀 파일을 봐. 이 데이터를 저장할 DB 테이블을 설계해."

AI가 테이블 구조를 제안한다. “이 열은 필요 없어”, “날짜 형식은 이렇게 해"라고 수정을 시킨다.

2단계: API 만들기

"이 테이블에 대한 CRUD API를 만들어."

API가 생긴다. 데이터를 저장하고 조회하는 기능이다. 이 시점에서 화면은 없다. 하지만 AI가 터미널에서 직접 테스트해본다.

3단계: 화면 만들기

"이 API를 호출하는 React 화면을 만들어. 목록, 추가, 수정, 삭제가 가능하게."

브라우저에서 확인한다. 목록이 보이고, 추가 버튼이 있고, 입력하면 저장된다.

4단계: 기능 추가

"검색 기능 추가해."
"완료된 것만 필터링하는 버튼 넣어."
"우선순위별로 정렬해."

여기까지가 바이브 코딩의 황금시간이다. 3개 기능까지는 마법처럼 빠르다.

확인하는 법

코드를 읽지 않으니, 결과를 확인하는 방법은 하나다: 직접 써본다.

  • 브라우저에서 화면을 열고 클릭해본다
  • 데이터를 입력하고 저장되는지 확인한다
  • 목록에서 다시 조회해본다
  • 수정하고 삭제해본다

에러가 나면? Claude Code가 에러를 자동으로 감지하고 수정을 시도한다. 직접 복사-붙여넣기할 필요 없다.

AI가 알아서 고친다.

이 패턴의 한계

바이브 코딩은 놀라울 만큼 빠르다. 하지만 5개 기능을 넘기면 이상한 일이 벌어지기 시작한다. 새 기능을 추가했는데 기존 기능이 깨진다. AI에게 고치라고 하면 다른 곳이 깨진다. 두더지 잡기 게임이 시작된다.

왜 그런가? 그 답은 2강에서 다룬다. 지금은 이 패턴이 작동한다는 것, 그리고 한계가 있다는 것만 기억하면 된다.

Claude Code 사용법 — 실전 가이드

설치했으니 써보자. 기본적인 사용법을 익힌다.

시작과 종료

# 프로젝트 폴더에서 시작
cd ~/projects/my-first-app
claude

# Claude Code 안에서 대화한다
# 종료하려면:
/exit

기본 대화

Claude Code 안에서 자연어로 말하면 된다.

> 이 폴더에 Go Gin 서버를 만들어. 포트 8080으로 "Hello, World"를 반환하는 API 하나.

AI가 파일을 만들고, 필요한 패키지를 설치하고, 코드를 작성한다. 중간중간 “이 파일을 만들어도 될까요?”, “이 명령어를 실행해도 될까요?“라고 물어본다. 허용하면 진행한다.

유용한 명령어

Claude Code 안에서 슬래시(/)로 시작하는 명령어를 쓸 수 있다.

명령어기능
/exitClaude Code 종료
/clear대화 기록 초기화 (컨텍스트 리셋)
/compact대화를 요약해서 컨텍스트 절약
/help도움말

대화 팁

  1. 한 번에 하나씩 시킨다. “로그인이랑 회원가입이랑 대시보드 다 만들어"보다 “로그인 API 먼저 만들어"가 결과가 좋다.

  2. 구체적으로 시킨다. “더 좋게 만들어"보다 “에러 발생 시 사용자에게 빨간색 메시지를 보여줘"가 낫다.

  3. 에러는 Claude Code가 알아서 잡는다. 에러가 발생하면 Claude Code가 자동으로 감지하고 수정을 시도한다. 직접 복사-붙여넣기할 필요 없다.

  4. 중간에 확인한다. 10가지를 한 번에 시키고 마지막에 확인하는 것보다, 2-3개마다 브라우저에서 확인하는 것이 안전하다.

  5. 컨텍스트가 길어지면 새로 시작한다. 대화가 100턴을 넘기면 AI의 응답 품질이 떨어진다. /clear로 초기화하거나 새 터미널에서 claude를 다시 실행한다.

실습: 할 일 목록 앱 만들기

이론은 충분하다. 직접 만들어보자.

목표

Claude Code 한 세션에서 할 일 목록 앱을 만들고, 기능 3개를 추가한다. 총 소요 시간 30-60분.

사전 준비

실습을 시작하기 전에 아래가 설치되어 있어야 한다. 아직 없다면 Claude Code에게 시키면 된다.

  • Go 설치: Claude Code에게 "Go를 설치해줘" 라고 시킨다
  • Node.js 설치: Claude Code에게 "Node.js LTS를 설치해줘" 라고 시킨다
  • Claude Code 실행 확인: claude --version이 동작하는가

팁: 설치 과정에서 모르는 게 나와도 당황하지 않는다. Claude Code에게 “이거 어떻게 해?” 하면 알아서 해준다.

준비

# 프로젝트 폴더 생성
mkdir -p ~/projects/todo-app
cd ~/projects/todo-app

# Claude Code 실행
claude

Step 1: 기본 앱 만들기

Claude Code에 다음을 입력한다.

할 일 목록 웹 앱을 만들어.

기술 스택:
- 백엔드: Go + Gin
- 프론트엔드: React
- 데이터베이스: SQLite (파일 DB, 설치 없이 쓸 수 있도록)

기능:
- 할 일 추가 (제목, 내용)
- 할 일 목록 보기
- 할 일 완료 표시
- 할 일 삭제

프론트엔드는 심플하게. 한 페이지에 다 보이게.
백엔드 서버 하나로 화면까지 같이 보여줘.

AI가 작업을 시작한다. 파일 생성, 패키지 설치, 코드 작성을 자율적으로 진행한다. 중간에 허용을 묻는 프롬프트가 뜨면 승인한다.

완료되면 서버를 실행하고 브라우저에서 확인한다.

서버 실행해. 그리고 접속 주소 알려줘.

브라우저에서 http://localhost:8080을 열어본다. 할 일을 추가하고, 완료 표시하고, 삭제해본다.

Step 2: 기능 추가 — 우선순위

할 일에 우선순위를 추가해. 높음/보통/낮음 3단계.
- 추가할 때 우선순위를 선택할 수 있게
- 목록에서 우선순위가 보이게
- 높음은 빨간색, 보통은 파란색, 낮음은 회색으로 표시

브라우저에서 확인한다. 우선순위를 선택해서 할 일을 추가해본다.

Step 3: 기능 추가 — 마감일

할 일에 마감일을 추가해.
- 추가할 때 달력에서 날짜를 선택
- 목록에서 마감일이 보이게
- 마감일이 지나면 빨간 배경으로 강조

브라우저에서 확인한다. 마감일을 어제로 설정한 할 일이 빨간 배경으로 표시되는지 본다.

Step 4: 기능 추가 — 검색

할 일을 검색하는 기능을 추가해.
- 목록 위에 검색 입력칸
- 제목이나 내용에 검색어가 포함된 할 일만 필터링
- 타이핑할 때마다 실시간으로 필터링

브라우저에서 확인한다. 여러 할 일을 추가한 뒤 검색어를 입력해서 필터링이 되는지 본다.

Step 5: CLAUDE.md 만들기

지금 만든 프로젝트의 상태를 기록한다.

이 프로젝트의 CLAUDE.md 파일을 만들어. 프로젝트 개요, 실행 명령어, 디렉토리 구조, 기능 목록을 포함해.

생성된 CLAUDE.md를 열어서 읽어본다. 내일 새 세션에서 “이어서 해"를 할 때 이 파일이 AI의 기억이 된다.

Step 6: 요구사항.md 만들기

직접 만들어본다. Claude Code에 시키지 말고, 텍스트 편집기로 요구사항.md를 열어서 다음을 적는다.

편집기 안내 (WSL 사용자):

  • 터미널에서 바로 편집: nano 요구사항.md (저장: Ctrl+O → Enter, 종료: Ctrl+X)
  • VS Code로 편집: code 요구사항.md (VS Code가 설치되어 있으면 WSL에서 자동 연결된다)
# 요구사항.md

## 할 일 관리
- 할 일은 제목, 내용, 우선순위(높음/보통/낮음), 마감일을 가진다
- 완료된 할 일은 삭제하지 않고 완료 표시
- 마감일이 지나면 빨간 배경으로 강조

## 검색
- 제목과 내용에서 검색
- 실시간 필터링

## 기술
- 데이터베이스는 SQLite 파일 DB
- 백엔드가 프론트엔드를 함께 서빙

이 파일은 AI가 아니라 당신이 쓴 것이다. 이것이 중요하다. 결정은 당신이 하고, 기록도 당신이 한다.


1강 정리

이번 강의에서 다룬 것들:

  1. 도구 지형: 에디터 기반(Cursor, Copilot)과 터미널 에이전트(Claude Code, Codex CLI)로 나뉜다
  2. Claude Code: 자율적 검증 루프, 대규모 컨텍스트, 다중 파일 편집에서 현재 가장 강력한 터미널 에이전트
  3. 설치: curl -fsSL https://claude.ai/install.sh | bash 한 줄이면 된다
  4. 키워드: 백엔드, 프론트엔드, DB, 배포 — 방향을 가리킬 수 있을 만큼만 알면 된다
  5. 컨텍스트 관리: CLAUDE.md(규칙), 요구사항.md(결정), 진행상황.md(상태)로 AI의 기억을 외부화한다
  6. 바이브 코딩 패턴: 엑셀 → DB 설계 → API → 화면 → 기능 추가. 3개까지는 마법, 5개부터 균열

다음 강의 예고: “왜 5개 기능에서 무너지는가.” 1강에서 만든 앱에 기능을 5개 연달아 추가한다. 3번째쯤에서 기존 기능이 깨지는 순간을 직접 목격한다. 그리고 그 원인을 구조적으로 파헤친다.


과제

1강의 실습을 완료한 뒤, 다음을 추가로 해본다.

  1. 기능 2개 더 추가해보기: 무엇이든 좋다. 카테고리 분류, 다크 모드, 할 일 정렬 등. 어디까지 순조롭게 되는지, 어디서부터 이상해지는지 관찰한다.

  2. CLAUDE.md 다듬기: AI가 만들어준 CLAUDE.md를 직접 열어서 읽어본다. 이해되지 않는 부분은 없는가? 빠진 정보는 없는가? 직접 수정해본다.

  3. 새 세션에서 이어서 해보기: Claude Code를 종료하고 다시 실행한다. “진행 중인 기능 이어서 해"라고 말해본다. CLAUDE.md가 있을 때와 없을 때의 차이를 관찰한다.


Reins Engineering 전체 강의

제목
제 1강AI에게 시키는 법
제 2강AI를 못 믿는 법
제 3강깨지지 않는 앱
제 4강결정을 코드 밖으로
제 5강고삐 있는 AI
제 6강통과하면 잠근다
제 7강아첨을 뒤집는 법
제 8강에이전트의 공장
제 9강코드 너머의 자동화
제 10강데이터의 법