클로드 & 클로드 코드로웹에서 앱까지

과정 소개

2시간 × 15회. 코딩을 처음 배우는 사람이 Claude와 Claude Code로 아이디어를 웹앱으로, 다시 휴대폰 앱으로 만드는 과정입니다.

이 과정을 마치면 아이디어 하나를 기획서와 목업으로 정리하고, Claude Code로 웹앱을 만들어 인터넷에 공개하고, 데이터베이스와 AI를 붙인 뒤, 휴대폰 앱으로까지 만들 수 있습니다. 코딩을 한 번도 해 본 적 없어도 괜찮습니다.

이 과정의 한 문장

코드를 외우는 대신, 무엇을 만들지 정하고 · 맡기고 · 확인하는 법을 배웁니다. 그것이 요즘 업계가 실제로 일하는 방식입니다.

누구를 위한 과정인가요

항목내용
대상코딩을 처음 배우는 누구나. 컴퓨터로 문서 작성과 인터넷 검색을 할 수 있으면 충분합니다
강의코그니랩스 정진수
시간한 회 2시간(중간 쉬는 시간 10분) × 15회
방식매 회 개념 설명 → 요즘 업계 이야기 → 시연 → 따라 하는 실습 → 정리와 퀴즈
결과물내가 기획한 “우리 모임” 서비스: 인터넷 주소로 열리는 웹앱 + 휴대폰에 설치되는 앱

왜 “웹에서 앱까지” 순서인가요

  • 웹앱이 가장 빠릅니다. 만들자마자 주소 하나로 누구에게나 보여 줄 수 있고, 고치면 바로 반영됩니다.
  • 웹에서 만든 것이 앱의 재료가 됩니다. 기획서, 목업, 데이터베이스, 로그인, AI 기능을 앱에서도 그대로 다시 씁니다.
  • 앱은 마지막에 “화면 하나 더”가 됩니다. 데이터는 웹과 앱이 함께 쓰고, 앱은 휴대폰에 맞는 화면을 하나 더 만드는 일이 됩니다.

왜 Claude와 Claude Code인가요

  • **Claude(채팅)**는 생각을 정리하는 동료입니다. 아이디어를 인터뷰해 기획서로, 기획서를 클릭되는 목업 화면으로 만들어 줍니다.
  • Claude Code는 내 컴퓨터에서 직접 일하는 동료입니다. 폴더를 열어 파일을 만들고, 프로그램을 실행해 확인하고, 에러를 고칩니다.
  • 하나의 계정, 하나의 앱 안에서 기획 문서와 코드 양쪽을 오갈 수 있고, 두 일 모두에서 최상위 성능을 보여 줍니다. 1회에서 자세히 다룹니다.

15회 로드맵

회주제오늘 만드는 것
1AI로 누구나 만드는 시대: 요즘 흐름과 첫 만남Claude 앱 설치, 첫 대화, AI가 만든 첫 파일
2Claude로 아이디어를 기획서와 목업으로우리 모임 기획서, 클릭되는 목업
3웹은 어떻게 움직일까: Claude Code로 첫 웹페이지모임 소개 웹페이지 한 장
4목업을 진짜 웹앱으로: Next.js 시작내 PC에서 돌아가는 웹앱
5Git과 GitHub: 실수해도 괜찮은 안전망GitHub 저장소
6Vercel로 세상에 공개하기내 주소로 열리는 웹앱
7데이터베이스 첫걸음: Supabase저장되는 모임 일정
8로그인과 보안: 내 글은 나만 고치게회원가입, 보안 규칙
9기능 완성하기: 참석 신청, 사진, 검색완성된 웹 서비스
10AI 기능 넣기: 내 서비스 안에서 일하는 Claude후기 요약, 안내문 초안
11앱의 세계: 웹·PWA·네이티브홈 화면에 설치되는 웹앱
12Expo로 첫 앱: 내 휴대폰에서 실행하기휴대폰에서 도는 앱 화면
13앱에 데이터 연결: 웹과 앱이 같은 데이터를데이터가 연결된 앱
14앱 빌드와 출시 준비: EAS와 스토어테스트 설치 파일, 출시 준비물
15운영과 다음 단계: 만든 것을 키우는 법3분 데모 발표, 다음 30일 계획

1–3회는 시작하기, 4–6회는 웹앱 만들기, 7–9회는 데이터와 로그인, 10회는 AI 기능, 11–14회는 앱으로, 15회는 마무리입니다. 모든 회가 지난 회의 결과물 위에 쌓이는 이어지는 실습입니다. 한 회를 놓쳤다면 그 회 페이지만 보고도 따라올 수 있도록 단계마다 예상 결과와 “막혔을 때” 도움말을 넣어 두었습니다.

비용은 얼마나 드나요

서비스쓰는 회비용
Claude1회부터Pro 이상 유료 플랜 (무료 플랜은 Claude Code 미포함) (2026-10-06 확인)
GitHub5회부터무료
Vercel6회부터무료, 프로젝트 200개, 하루 배포 100회, 비상업·개인 용도 (2026-10-06 확인)
Supabase7회부터무료: 활성 프로젝트 2개, DB 500MB, 1주일 미사용 시 일시정지 (2026-10-06 확인)
Claude API10회쓴 만큼 (실습 수준이면 아주 적음)
Expo12회부터무료로 시작
스토어 등록 (선택)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
4회 전에 준비할 것0 / 2
6회 전에 준비할 것0 / 1
7회 전에 준비할 것0 / 1
10회 전에 준비할 것0 / 1
12회 전에 준비할 것0 / 3
  • 휴대폰에 Expo Go 앱 설치 (앱스토어·플레이스토어에서 "Expo Go")
  • 노트북과 휴대폰을 같은 와이파이에 연결할 준비
14회 전에 확인할 것0 / 2
  • 스토어에 실제로 올릴지 결정 (등록비가 들어요. 실습은 테스트 설치까지만 해도 충분)
  • 앱 아이콘으로 쓸 이미지 아이디어

다음 단계

이 페이지 목차