과정 소개
2시간 × 15회. 코딩을 처음 배우는 사람이 Claude와 Claude Code로 아이디어를 웹앱으로, 다시 휴대폰 앱으로 만드는 과정입니다.
이 과정을 마치면 아이디어 하나를 기획서와 목업으로 정리하고, Claude Code로 웹앱을 만들어 인터넷에 공개하고, 데이터베이스와 AI를 붙인 뒤, 휴대폰 앱으로까지 만들 수 있습니다. 코딩을 한 번도 해 본 적 없어도 괜찮습니다.
이 과정의 한 문장
코드를 외우는 대신, 무엇을 만들지 정하고 · 맡기고 · 확인하는 법을 배웁니다. 그것이 요즘 업계가 실제로 일하는 방식입니다.
누구를 위한 과정인가요
| 항목 | 내용 |
|---|---|
| 대상 | 코딩을 처음 배우는 누구나. 컴퓨터로 문서 작성과 인터넷 검색을 할 수 있으면 충분합니다 |
| 강의 | 코그니랩스 정진수 |
| 시간 | 한 회 2시간(중간 쉬는 시간 10분) × 15회 |
| 방식 | 매 회 개념 설명 → 요즘 업계 이야기 → 시연 → 따라 하는 실습 → 정리와 퀴즈 |
| 결과물 | 내가 기획한 “우리 모임” 서비스: 인터넷 주소로 열리는 웹앱 + 휴대폰에 설치되는 앱 |
왜 “웹에서 앱까지” 순서인가요
- 웹앱이 가장 빠릅니다. 만들자마자 주소 하나로 누구에게나 보여 줄 수 있고, 고치면 바로 반영됩니다.
- 웹에서 만든 것이 앱의 재료가 됩니다. 기획서, 목업, 데이터베이스, 로그인, AI 기능을 앱에서도 그대로 다시 씁니다.
- 앱은 마지막에 “화면 하나 더”가 됩니다. 데이터는 웹과 앱이 함께 쓰고, 앱은 휴대폰에 맞는 화면을 하나 더 만드는 일이 됩니다.
왜 Claude와 Claude Code인가요
- **Claude(채팅)**는 생각을 정리하는 동료입니다. 아이디어를 인터뷰해 기획서로, 기획서를 클릭되는 목업 화면으로 만들어 줍니다.
- Claude Code는 내 컴퓨터에서 직접 일하는 동료입니다. 폴더를 열어 파일을 만들고, 프로그램을 실행해 확인하고, 에러를 고칩니다.
- 하나의 계정, 하나의 앱 안에서 기획 문서와 코드 양쪽을 오갈 수 있고, 두 일 모두에서 최상위 성능을 보여 줍니다. 1회에서 자세히 다룹니다.
15회 로드맵
| 회 | 주제 | 오늘 만드는 것 |
|---|---|---|
| 1 | AI로 누구나 만드는 시대: 요즘 흐름과 첫 만남 | Claude 앱 설치, 첫 대화, AI가 만든 첫 파일 |
| 2 | Claude로 아이디어를 기획서와 목업으로 | 우리 모임 기획서, 클릭되는 목업 |
| 3 | 웹은 어떻게 움직일까: Claude Code로 첫 웹페이지 | 모임 소개 웹페이지 한 장 |
| 4 | 목업을 진짜 웹앱으로: Next.js 시작 | 내 PC에서 돌아가는 웹앱 |
| 5 | Git과 GitHub: 실수해도 괜찮은 안전망 | GitHub 저장소 |
| 6 | Vercel로 세상에 공개하기 | 내 주소로 열리는 웹앱 |
| 7 | 데이터베이스 첫걸음: Supabase | 저장되는 모임 일정 |
| 8 | 로그인과 보안: 내 글은 나만 고치게 | 회원가입, 보안 규칙 |
| 9 | 기능 완성하기: 참석 신청, 사진, 검색 | 완성된 웹 서비스 |
| 10 | AI 기능 넣기: 내 서비스 안에서 일하는 Claude | 후기 요약, 안내문 초안 |
| 11 | 앱의 세계: 웹·PWA·네이티브 | 홈 화면에 설치되는 웹앱 |
| 12 | Expo로 첫 앱: 내 휴대폰에서 실행하기 | 휴대폰에서 도는 앱 화면 |
| 13 | 앱에 데이터 연결: 웹과 앱이 같은 데이터를 | 데이터가 연결된 앱 |
| 14 | 앱 빌드와 출시 준비: EAS와 스토어 | 테스트 설치 파일, 출시 준비물 |
| 15 | 운영과 다음 단계: 만든 것을 키우는 법 | 3분 데모 발표, 다음 30일 계획 |
1–3회는 시작하기, 4–6회는 웹앱 만들기, 7–9회는 데이터와 로그인, 10회는 AI 기능, 11–14회는 앱으로, 15회는 마무리입니다. 모든 회가 지난 회의 결과물 위에 쌓이는 이어지는 실습입니다. 한 회를 놓쳤다면 그 회 페이지만 보고도 따라올 수 있도록 단계마다 예상 결과와 “막혔을 때” 도움말을 넣어 두었습니다.
비용은 얼마나 드나요
| 서비스 | 쓰는 회 | 비용 |
|---|---|---|
| Claude | 1회부터 | Pro 이상 유료 플랜 (무료 플랜은 Claude Code 미포함) (2026-10-06 확인) |
| GitHub | 5회부터 | 무료 |
| Vercel | 6회부터 | 무료, 프로젝트 200개, 하루 배포 100회, 비상업·개인 용도 (2026-10-06 확인) |
| Supabase | 7회부터 | 무료: 활성 프로젝트 2개, DB 500MB, 1주일 미사용 시 일시정지 (2026-10-06 확인) |
| Claude API | 10회 | 쓴 만큼 (실습 수준이면 아주 적음) |
| Expo | 12회부터 | 무료로 시작 |
| 스토어 등록 (선택) | 14회 | 구글 플레이 개발자 등록 1회 25달러 (2026-10-22 확인), 애플 개발자 프로그램 연 99달러 (2026-10-22 확인) |
스토어에 실제로 올리지 않아도 과정은 끝까지 따라올 수 있습니다. 14회에서는 테스트 설치 파일을 만들어 내 휴대폰과 지인 휴대폰에 설치해 보는 데까지 합니다.
사전 준비
회별로 미리 해 둘 일입니다. 체크하면 이 브라우저에 저장돼요.
1회 전에 준비할 것0 / 4
- 노트북 (Windows 10 이상 또는 macOS 13 이상)
메모리 8GB 이상이면 넉넉해요. 태블릿·크롬북은 어려워요.
- 자주 쓰는 이메일 주소
여러 서비스에 같은 이메일로 가입하면 관리가 편해요.
- Claude 유료 플랜(Pro 이상)
Claude Code는 유료 플랜에 포함돼요. 1회차에 함께 가입해도 됩니다.
- 휴대폰 (11회부터 앱 실습에 사용)
3회 전에 준비할 것0 / 2
- 실습용 폴더 하나 만들어 두기 (예: 문서/claude-practice)
4회 전에 준비할 것0 / 2
- 2회차에 만든 기획서와 목업 화면을 찾아 두기
5회 전에 준비할 것0 / 2
6회 전에 준비할 것0 / 1
7회 전에 준비할 것0 / 1
10회 전에 준비할 것0 / 1
- Claude Console 가입, 크레딧, 월 사용 한도 설정
강사가 실습용 키를 나눠 주면 생략해도 돼요.
12회 전에 준비할 것0 / 3
- 휴대폰에 Expo Go 앱 설치 (앱스토어·플레이스토어에서 "Expo Go")
- 노트북과 휴대폰을 같은 와이파이에 연결할 준비
14회 전에 확인할 것0 / 2
- 스토어에 실제로 올릴지 결정 (등록비가 들어요. 실습은 테스트 설치까지만 해도 충분)
- 앱 아이콘으로 쓸 이미지 아이디어