Warm up before the wave

파도 타기 전, 준비운동부터.

바이브코딩도 같습니다. 처음엔 ChatGPT 하나를 기준으로 따라오세요. AI라는 파도에 올라타기 전, 기획, 디자인, 개발, 테스트, 보안, 배포, 모니터링을 4개의 준비운동 루틴과 16개의 드릴로 익힙니다. 모든 단계는 `공부 기록 앱`을 공통 예제로 이어갑니다.

첫 준비운동 시작 루틴 전체 보기

warm-up route

모래 위에서 시작해 첫 파도까지 갑니다

guided build

따라가면 완성되는 공부 기록 앱

따로 과제를 고르는 방식이 아닙니다. 첫 준비운동부터 순서대로 진행하면 기획, 화면, 데이터, 테스트, 배포 기록이 단계별로 자연스럽게 쌓입니다.

01
처음 열고 기준 잡기
첫 준비운동을 따라가면 ChatGPT를 열고 첫 요청을 쓰는 과정에서 기준이 잡힙니다.
02
얕은 물에서 설계하기
설계 루틴을 따라가며 질문에 답하다 보면 앱의 뼈대가 자연스럽게 정리됩니다.
03
한 기능씩 만들기
개발 루틴을 따라가며 한 번에 하나씩 요청하고 확인하면 첫 화면과 저장 습관이 같이 생깁니다.
04
공개 전 점검하기
공개 준비를 따라가며 직접 눌러보고 위험한 정보를 빼고 배포까지 이어갑니다.
05
첫 파도 이후 보기
운영 루틴을 따라가며 공개 후 상태를 보고 다음에 고칠 한 가지를 고릅니다.

4 drills

모래 위 몸풀기

파도에 들어가기 전, AI와 웹서비스의 기본 자세를 잡습니다.

01 바이브코딩 이해 AI가 코드를 써줘도 사람이 책임져야 하는 판단을 먼저 배웁니다.02 도구 고르기 처음엔 ChatGPT 하나로 시작하고, 코드 실행과 배포 도구는 역할별로 붙입니다.03 컴퓨터와 웹 구조 파일, 브라우저, 서버, URL, HTTP의 최소 개념을 연결합니다.04 AI 작업 방식 이해 AI에게 한 번에 전부 맡기지 않고 작은 단위로 요청하는 방식을 배웁니다.

4 drills

얕은 물 설계

바다에 들어가기 전, 기획, 요구사항, 디자인, 데이터 설계를 작게 정리합니다.

05 기획하기 누구를 위한 앱인지, 어떤 문제를 풀지, 성공 기준이 무엇인지 정합니다.06 요구사항 줄이기 하고 싶은 기능을 모두 적은 뒤 첫 버전에 필요한 것만 남깁니다.07 디자인 흐름 잡기 화면 순서, 와이어프레임, 컴포넌트 단위를 개발 전에 잡습니다.08 데이터/DB 설계 감 잡기 무엇을 저장할지, 어디에 저장할지, DB가 필요한지 판단합니다.

4 drills

라인업 패들링

파도 위치로 나아가듯 화면, API, 작은 구현, 저장 습관을 연결합니다.

09 HTML/CSS/JS 기초 화면 구조, 스타일, 상호작용을 아주 작은 예제로 익힙니다.10 프론트/백엔드/API 이해 화면, 서버, API가 어떤 역할로 나뉘는지 초보자 기준으로 정리합니다.11 작게 만들고 바로 확인하기 한 번에 큰 앱을 만들지 않고 작은 변경을 만들고 바로 눌러봅니다.12 Git/GitHub 기초 AI가 망친 작업도 되돌릴 수 있게 저장 습관을 만듭니다.

4 drills

첫 파도 이후

테스트, 보안, 인프라, 모니터링으로 공개 이후의 흔들림까지 준비합니다.

13 테스트하기 직접 눌러보는 수동 테스트와 간단한 자동 테스트의 차이를 배웁니다.14 보안 기본기 공개하면 안 되는 정보와 사용자 입력의 위험을 개발 전에 구분합니다.15 인프라와 배포 이해 호스팅, 환경변수, 도메인, 배포 로그가 무엇인지 연결합니다.16 모니터링과 운영하기 공개 후 에러, 사용 상태, 피드백을 보고 다음 수정을 정합니다.