코딩 처음이어도 괜찮아요 · 2시간 × 15회
클로드 & 클로드 코드로가장 효율적으로
웹에서 앱까지가장 효율적으로 웹에서 앱까지
아이디어를 Claude와 대화로 기획하고, Claude Code로 웹앱을 만들고, 데이터베이스와 AI를 붙여 휴대폰 앱까지. 요즘 업계가 실제로 일하는 방식을 처음부터 차근차근 따라 합니다.
이 사이트 주소
https://
휴대폰 카메라로 찍으면 열려요
강의 · 코그니랩스 정진수
서비스 하나가 웹에서 앱까지 자라는 15회
동네 독서 모임 “우리 모임” 서비스 하나를 처음부터 끝까지 키웁니다. 매 회가 지난 회의 결과물 위에 쌓여요.
- 1–2회
기획
Claude와 대화로 기획서와 목업
- 3–5회
웹앱
Claude Code가 목업을 진짜 웹앱으로
- 6회
공개
GitHub에 저장, Vercel로 내 주소
- 7–9회
데이터
Supabase로 저장, 로그인, 보안
- 10회
AI 기능
내 서비스 안에서 일하는 Claude
- 11–15회
앱
PWA와 Expo로 휴대폰 앱까지
우리 반 진행 현황
별명으로 참여하면 실습 체크가 여기에 모여요. 함께 가면 끝까지 갑니다.
15회 과정 지도
한 회는 2시간. 실습을 체크하면 진도가 차오릅니다.
- 시작하기1–3회
- 웹앱 만들기4–6회
- 데이터와 로그인7–9회
- AI 기능10회
- 앱으로11–14회
- 마무리15회
복사해서 바로
모든 프롬프트에 복사 버튼. 주황색 빈칸을 채우면 내 아이디어에 맞게 바뀝니다.
눌러 보며 이해
에이전트, 커밋, 배포, 보안을 시뮬레이터로 직접 체험합니다.
혼자서도 끝까지
단계마다 예상 결과와 "막혔을 때" 도움말. 진도는 브라우저에 저장돼요.
함께 보는 발표 모드
P 키 하나로 큰 글씨 슬라이드, 실습 타이머, 페이지 QR 코드.
바로 쓰는 프롬프트
101개 모두 보기 →나는 동네 독서 모임의 일정을 알리고 참석을 받는 서비스을(를) 만들고 싶어. 기획자처럼 나에게 질문을 해서 누가 쓰는지, 꼭 필요한 기능, 없어도 되는 기능, 화면 구성을 정해줘. 질문은 한 번에 3개 이하로 하고, 다 정해지면 한 장짜리 기획서로 정리해줘.
이 기획서로 휴대폰 화면 크기의 목업을 아티팩트로 만들어줘. 화면은 모임 목록, 모임 상세, 참석 신청 완료. 버튼을 누르면 화면이 바뀌게 하고, 데이터는 가짜로 넣어줘. 색은 따뜻하고 차분한 느낌으로.
@기획서.md 와 목업 화면을 바탕으로 Next.js 웹앱을 만들어줘. 데이터는 일단 코드 안에 가짜로 넣고, 내 컴퓨터에서 실행해서 브라우저로 볼 수 있게 해줘. 먼저 만들 화면과 파일 구성을 계획으로 보여줘.
새 폴더에 Expo 앱을 만들어줘. @기획서.md 와 목업 화면을 보고 모임 목록, 모임 상세, 내 정보 탭을 만들고, 데이터는 일단 가짜로. 내 휴대폰의 Expo Go로 볼 수 있게 실행 방법까지 알려줘.
이런 것도 만들 수 있어요
모임, 가게, 생활, 배움, 가족, 일 — 과정에서 배운 것으로 바로 만들어 볼 아이디어
모임 일정·참석 관리 서비스 (이 과정의 메인 실습)
모임 일정을 대화방에 올리면 묻히고, 참석 인원은 손으로 센다. 일정·참석·사진을 한곳에서 보고 싶다.
가게·소상공인 · 웹페이지 · 3회, 5회, 6회, 11회동네 카페 메뉴판과 오늘의 메뉴
메뉴가 자주 바뀌는데 종이 메뉴판을 매번 다시 뽑는다. QR로 여는 웹 메뉴판이 있으면 좋겠다.
생활·가계 · 웹페이지 · 1회, 3회가계부 엑셀 정리와 차트
카드 내역을 엑셀로 받지만 어디에 많이 썼는지 한눈에 안 보인다.
가족·건강 · DB 앱 · 7회, 11회, 12회, 14회부모님 약 복용 체크
멀리 사는 부모님이 약을 드셨는지 매번 전화로 확인한다.
배움·취미 · AI 기능 · 1회, 10회, 15회공부한 내용으로 퀴즈 만들기
자격증 공부 중인데 복습할 문제가 부족하다.
가족·건강 · 모바일 앱 · 12회, 13회, 14회가족 걷기 챌린지
가족끼리 하루 걸음 수를 겨루면 재미있겠다는 이야기가 나왔다.