이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ Cursor 설치 → 첫 프롬프트 → 검증 1시간 안
• ▸✅ .cursorrules / CLAUDE.md 표준 템플릿
• ▸✅ 주요 단축키 + 인라인 편집 (Cmd+K)

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

다운로드

cursor.com → 운영체제별 다운로드:

• ▸macOS: .dmg 파일
• ▸Windows: .exe 설치 파일
• ▸Linux: .AppImage 또는 .deb

설치 후 첫 실행 시 무료 가입:
1. GitHub 또는 Google 로 로그인
2. Pro 14일 체험 자동 활성화 (체험 후 자동으로 무료 플랜)
3. VS Code 설정 import 옵션 — 기존 VS Code 사용자 면 OK 누르기

무료 플랜 제한

• ▸Tab 자동완성: 무제한 ✅
• ▸Cmd+K 인라인 편집: 월 50회
• ▸Composer 다파일 편집: 월 50회
• ▸Chat: 월 50회 (느린 모델), 빠른 모델 50회 추가

체험 14일 동안 Pro 무제한 → 학습 페이스에 맞게.

첫 설정 — Settings

Cmd+, (Mac) 또는 Ctrl+, (Windows) 로 설정 열기:

Cursor Settings

• ▸Models → 기본 모델 claude-sonnet-4-6 추천 (Pro 시)
• ▸Privacy Mode → 학습용이면 OFF, 회사 코드면 ON (전송 안 함)
• ▸Privacy Mode off 시 → 더 정확한 응답

Editor 환경

• ▸Theme: Dark+ 또는 Tokyo Night Storm (눈 편함)
• ▸Font: JetBrains Mono 또는 Fira Code (ligature 지원)
• ▸Font size: 14-15
• ▸Tab size: 2

한 번 정리

• ▸cursor.com 에서 다운로드 → GitHub 로그인 → 14일 Pro 체험
• ▸무료 플랜으로도 Tab 자동완성 무제한 사용 가능
• ▸학습용이면 Privacy Mode OFF

터미널 열기

Cursor 안에서 ` Ctrl+ ` (백틱) 또는 메뉴 Terminal > New Terminal.

Next.js 프로젝트 생성

npx create-next-app@latest myapp

질문에 답하기:

✔ TypeScript?           → Yes
✔ ESLint?               → Yes
✔ Tailwind CSS?         → Yes
✔ src/ directory?       → Yes
✔ App Router?           → Yes
✔ Turbopack?            → Yes (빠름)
✔ Import alias?         → No (기본 @/ 사용)

폴더 열기

cd myapp
cursor .

새 Cursor 창에 프로젝트가 열림.

실행

npm run dev

→ http://localhost:3000 접속. 기본 페이지 보이면 성공.

폴더 구조 최소 이해

myapp/
├── src/
│   ├── app/
│   │   ├── page.tsx        # 홈 페이지 (/)
│   │   ├── layout.tsx      # 전체 레이아웃
│   │   └── globals.css
│   └── components/         # (없으면 만들어서 컴포넌트 추가)
├── public/                  # 이미지·아이콘
├── package.json
└── tsconfig.json

page.tsx 가 URL 의 진입점. app/about/page.tsx 만들면 /about 페이지 자동 생성.

한 번 정리

• ▸npx create-next-app@latest myapp 한 줄
• ▸옵션 TypeScript + Tailwind + App Router + Turbopack 추천
• ▸npm run dev` → localhost:3000

왜 처음부터 필요한가

첫 프롬프트 부터 AI 가 내 프로젝트 컨벤션 알게 하기. 매번 설명 X.

프로젝트 루트에 파일 생성

Cursor 에서 myapp/ 폴더 우클릭 → New File → .cursorrules

복붙 템플릿 (Next.js 14+ 기준)

# 프로젝트: myapp

## 스택
- Next.js 15 (App Router, TypeScript strict)
- Tailwind CSS
- React 19

## 코딩 규칙
- 컴포넌트: function 선언 (arrow X)
- export: named (default 는 page.tsx·layout.tsx 만)
- 한국어 주석 OK
- any 금지
- var 금지

## 폴더 관습
- src/app/         페이지·API
- src/components/  재사용 컴포넌트
- src/lib/         유틸 함수
- src/types/       타입 정의

## 응답 스타일
- 코드 변경 시 *변경된 부분만* 보여줘
- 설명은 *간결하게*
- 한국어로 응답

효과 — 비교

❌ .cursorrules 없을 때:
> 나: "버튼 컴포넌트 만들어줘"
> AI: "어떤 스택이세요? Tailwind? Material UI? TypeScript? ..."
> 질문 4-5번

✅ .cursorrules 있을 때:
> 나: "버튼 컴포넌트 만들어줘"
> AI: (Next.js + TypeScript + Tailwind 로 named export · function 선언으로 정확히 작성)
> 0번 질문

한 번 정리

• ▸.cursorrules 한 파일이 모든 대화의 컨텍스트
• ▸토큰 5-10배 절약·정확도 ↑
• ▸한 번 작성 → 평생 사용

단순 "버튼 만들어" 대신 실용적인 첫 작업

Cmd+L (Mac) 또는 Ctrl+L (Windows) → Cursor Chat 열기.

첫 프롬프트 예시

src/app/page.tsx 를 다음으로 교체:
- 페이지 제목 "안녕, 바이브 코딩!"
- 카운터 컴포넌트 (useState 사용)
- 클릭마다 +1 / 0 으로 초기화 버튼
- Tailwind 로 다크 모드 스타일링
- 컴포넌트는 src/components/Counter.tsx 로 분리

코드만 보여줘. 설명 X.

→ Cursor 가 2개 파일 자동 생성:

• ▸src/app/page.tsx
• ▸src/components/Counter.tsx

각 파일에 체크 마크 클릭 → 자동 저장.

결과 확인

브라우저 새로고침 → 카운터 동작 확인.

• ▸버튼 클릭 → 숫자 증가? ✅
• ▸초기화 → 0? ✅
• ▸다크 모드 색상? ✅

두 번째 프롬프트 — 개선

@Counter.tsx 에 *최대 10까지만* 카운트되도록 제한. 10 도달 시 버튼 비활성화 + "최대 도달" 메시지.

기존 디자인 유지. 추가 로직만.

→ AI 가 변경된 부분만 보여주고 적용. 의도 명확하니 불필요한 변경 0.

한 번 정리

• ▸첫 프롬프트는 구체적 + 분리 명시
• ▸@파일명 으로 특정 파일 참조
• ▸"코드만 / 설명 X" 로 토큰 절약

AI 가 만든 코드도 내 책임

면접관은 묻습니다: "어떻게 검증했나요?". 검증 3가지 습관.

1. 콘솔 열기 — 항상

브라우저에서 F12 (또는 우클릭 → 검사) → Console 탭.

확인할 것:

• ▸빨간색 에러 — 반드시 해결
• ▸노란색 경고 — 가능하면 해결
• ▸React Hook 위반·key 누락 등

❌ "보이긴 하는데 콘솔에 에러" → 면접 떨어집니다.

2. TypeScript 에러 확인

# 터미널에서
npx tsc --noEmit

→ 타입 에러 모두 나열. 0건 이어야 함.

또는 VS Code 의 Problems 탭 (Cursor 도 같음): Ctrl+Shift+M

3. 실제 동작 확인 — Edge case 3가지

만든 카운터 예시:

✅ 정상 흐름: +1 9번 → 9 → 1번 더 → 10 → 버튼 비활성화 ✅

❓ Edge case 1: 페이지 새로고침 시 0 으로 돌아가나? (state 사라짐)
→ AI 에게 "localStorage 로 카운트 유지하도록" 요청 가능

❓ Edge case 2: 모바일에서도 보이나? Chrome DevTools 의 Device Toolbar 로 확인

❓ Edge case 3: 다크 모드 X / 라이트 모드 사용자한테도 잘 보이나?

체크리스트 — 항상

매 작업 후:

• ▸[ ] 콘솔 에러 0
• ▸[ ] TypeScript 에러 0
• ▸[ ] 의도한 동작 작동
• ▸[ ] Edge case 1개 이상 확인
• ▸[ ] 모바일 화면 확인

이 5가지 습관 이 작동하는 코드와 깨지는 코드 를 가릅니다.

git commit — 작동 확인되면 즉시

git add -A
git commit -m "feat(counter): max 10 limit + disable state"

작은 단위로 자주 commit. 다음에 망쳐도 직전으로 롤백.

한 번 정리

• ▸콘솔·TS 에러·동작 확인 = 기본
• ▸Edge case 1개라도 챙기기 = 중급
• ▸매 작업 git commit = 상급

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"Cursor 설치 + 첫 프롬프트 + CLAUDE.md 까지 1시간 안에 끝낼 단계 알려줘"
• ▸"이 .cursorrules 가 우리 코드 스타일을 정확히 표현하는지 검토해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.