코딩 처음이어도 괜찮아요 · 2시간 × 15회

클로드 & 클로드 코드로가장 효율적으로
웹에서 앱까지
가장 효율적으로 웹에서 앱까지

아이디어를 Claude와 대화로 기획하고, Claude Code로 웹앱을 만들고, 데이터베이스와 AI를 붙여 휴대폰 앱까지. 요즘 업계가 실제로 일하는 방식을 처음부터 차근차근 따라 합니다.

이 사이트 주소

https://claude-web-to-app.vercel.app/

휴대폰 카메라로 찍으면 열려요

강의 · 코그니랩스 정진수

서비스 하나가 웹에서 앱까지 자라는 15회

동네 독서 모임 “우리 모임” 서비스 하나를 처음부터 끝까지 키웁니다. 매 회가 지난 회의 결과물 위에 쌓여요.

  1. 1–2회

    기획

    Claude와 대화로 기획서와 목업

  2. 3–5회

    웹앱

    Claude Code가 목업을 진짜 웹앱으로

  3. 6회

    공개

    GitHub에 저장, Vercel로 내 주소

  4. 7–9회

    데이터

    Supabase로 저장, 로그인, 보안

  5. 10회

    AI 기능

    내 서비스 안에서 일하는 Claude

  6. 11–15회

    앱

    PWA와 Expo로 휴대폰 앱까지

우리 반 진행 현황

별명으로 참여하면 실습 체크가 여기에 모여요. 함께 가면 끝까지 갑니다.

15회 과정 지도

한 회는 2시간. 실습을 체크하면 진도가 차오릅니다.

사전 준비 체크리스트 →
  • 시작하기1–3회
  • 웹앱 만들기4–6회
  • 데이터와 로그인7–9회
  • AI 기능10회
  • 앱으로11–14회
  • 마무리15회

복사해서 바로

모든 프롬프트에 복사 버튼. 주황색 빈칸을 채우면 내 아이디어에 맞게 바뀝니다.

눌러 보며 이해

에이전트, 커밋, 배포, 보안을 시뮬레이터로 직접 체험합니다.

혼자서도 끝까지

단계마다 예상 결과와 "막혔을 때" 도움말. 진도는 브라우저에 저장돼요.

함께 보는 발표 모드

P 키 하나로 큰 글씨 슬라이드, 실습 타이머, 페이지 QR 코드.

바로 쓰는 프롬프트

101개 모두 보기 →
PROMPT인터뷰 받고 기획서 만들기

나는 동네 독서 모임의 일정을 알리고 참석을 받는 서비스을(를) 만들고 싶어. 기획자처럼 나에게 질문을 해서 누가 쓰는지, 꼭 필요한 기능, 없어도 되는 기능, 화면 구성을 정해줘. 질문은 한 번에 3개 이하로 하고, 다 정해지면 한 장짜리 기획서로 정리해줘.

PROMPT클릭되는 화면 목업 만들기

이 기획서로 휴대폰 화면 크기의 목업을 아티팩트로 만들어줘. 화면은 모임 목록, 모임 상세, 참석 신청 완료. 버튼을 누르면 화면이 바뀌게 하고, 데이터는 가짜로 넣어줘. 색은 따뜻하고 차분한 느낌으로.

PROMPT목업을 Next.js 웹앱으로 플랜 모드 권장

@기획서.md 와 목업 화면을 바탕으로 Next.js 웹앱을 만들어줘. 데이터는 일단 코드 안에 가짜로 넣고, 내 컴퓨터에서 실행해서 브라우저로 볼 수 있게 해줘. 먼저 만들 화면과 파일 구성을 계획으로 보여줘.

PROMPTExpo 앱 시작하기 플랜 모드 권장

새 폴더에 Expo 앱을 만들어줘. @기획서.md 와 목업 화면을 보고 모임 목록, 모임 상세, 내 정보 탭을 만들고, 데이터는 일단 가짜로. 내 휴대폰의 Expo Go로 볼 수 있게 실행 방법까지 알려줘.

클로드 & 클로드 코드로 가장 효율적으로 웹에서 앱까지 · 코그니랩스 정진수실습 자료는 모두 교육용 가상 데이터입니다.