축하합니다!

설치된 도구

내 PC에 만들어진 프로젝트 구조

📁 ~/my-first-app/
├── 📂 public/                ← 이미지, 아이콘
├── 📂 src/
│   ├── 📂 app/               ← 페이지 (Next.js)
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── 📂 domain/            ← 비즈니스 로직
│   │   ├── models/
│   │   └── services/
│   ├── 📂 ports/             ← 인터페이스 정의
│   └── 📂 adapters/          ← 외부 연동
│       ├── api/
│       └── ui/
├── 📄 CLAUDE.md               ← AI 아키텍처 규칙
├── 📄 next.config.ts          ← Next.js 설정
├── 📄 tailwind.config.ts      ← 스타일 설정
├── 📄 tsconfig.json           ← TypeScript 설정
└── 📄 package.json

AI에 첫 마디 던지기

Claude Code 또는 Cursor 어느 쪽이든 OK. 한 번에 완벽하게 안 써도 괜찮아요. 대화를 이어가면서 고치면 돼요.

나는 ___ 웹사이트를 만들고 싶어.

어떤 서비스냐면:
___

주로 쓸 사람:
___

처음에 꼭 있어야 할 기능 3가지:
1. ___
2. ___
3. ___

지금 어디서부터 시작하면 좋을까?

나는 약속 날짜 잡기 웹사이트를 만들고 싶어.

어떤 서비스냐면:
친구들이 단톡방에서 "언제 돼?" 물어보는 게 너무 번거로워서,
링크 하나 공유하면 각자 되는 날짜에 투표할 수 있는 사이트야.

주로 쓸 사람:
20~30대 직장인. 회원가입 없이 링크만 받으면 바로 쓸 수 있어야 해.

처음에 꼭 있어야 할 기능 3가지:
1. 후보 날짜를 여러 개 올리면 참여자들이 되는 날짜에 체크
2. 회원가입 없이 이름만 입력하고 바로 참여
3. 투표 결과를 한눈에 볼 수 있는 화면

사이트 홍보하는 랜딩페이지부터 만들어줘.

그 다음엔 이렇게 이어가세요

첫 프롬프트를 보내면 AI가 코드를 만들어줘요. 그 뒤로는 짧게 대화하듯 요청하면 돼요.

잘못 말해도 괜찮아요. "아까 거 취소하고 다시 해줘"라고 하면 돼요.

💡 다음 단계에서 사이트를 인터넷에 올리시면 더 다양한 시도(텍스트·색상·새 섹션·그라디언트·폰트 5가지 카테고리)로 정리된 가이드가 또 나와요.

디자인이 막막하다면

Claude Design — AI로 화면을 먼저 만들고, 내 프로젝트에 바로 가져올 수 있어요.

1. 1claude.ai/design 에 들어가서 "로그인 페이지 만들어줘"처럼 원하는 화면을 설명하세요
2. 2마음에 들면 Export 메뉴에서 "Send to local coding agent"를 선택하고 Copy command를 누르세요
3. 3프로젝트 폴더를 연 Claude Code 터미널에 붙여넣기 — 디자인이 자동으로 적용돼요
4. 4다른 AI 에이전트(Cursor 등)를 쓸 땐 "Download zip instead"를 체크해 ZIP을 받고, 압축을 풀어 ~/my-first-app/ 폴더에 넣으세요

Claude Pro·Max·Team·Enterprise 구독자만 사용할 수 있어요. 리서치 프리뷰 단계라 자체 주간 한도가 있고, 여기서의 사용량은 다른 한도에 포함되지 않아요.