LEVEL 1

기본과정 — 만들 수 있게 된다

업무를 자동화하고, 내 서비스를 배포까지 끌고 간다. 선수 조건 없음 · 10차시 × 3시간(이론 60 + 실습 120) · VS Code + Claude Code 확장.

01기본과정
바이브 코딩 첫 경험
말로 만드는 30분

바이브 코딩의 정의와 한계 · 도구 지형도 · 이 과정이 VS Code+Claude Code로 가는 이유

산출물 — 대화만으로 만든 자기소개 웹페이지

/basic/session-01
02기본과정
환경 만들고 첫 배포까지
오늘 만든 걸 오늘 링크로 보낸다

폴더·파일 구조 읽기 · 에디터 설치 · Git/GitHub · GitHub Pages로 즉시 배포

산출물 — 인터넷에 공개된 내 첫 페이지 URL

/basic/session-02
03기본과정
AI와 일하는 법
같은 질문, 다른 결과

프롬프트 구성요소 · 반복 개선 · 프로젝트 규칙 파일 · AI가 헤맬 때 판단하기

산출물 — 프롬프트 비교 실험 노트 + 내 규칙 파일 초안

/basic/session-03
04기본과정
구글 시트로 업무 자동화
월요일 아침 30분을 되찾다

시트를 데이터베이스처럼 쓰기 · Apps Script · 자동 집계·리포트 · 시간 트리거 · 웹앱 배포

산출물 — 매주 자동 실행되는 업무 리포트 자동화

/basic/session-04
05기본과정
API 이해하고 연결하기
남이 만든 기능을 내 것처럼

API 개념 · 요청/응답과 JSON · 키 발급과 보관 · 외부 API 연동 · 에러와 사용량 한도

산출물 — 외부 데이터를 끌어와 시트에 쌓는 연동

/basic/session-05
06기본과정
화면 디자인 노하우
기능이 되는 것과 좋아 보이는 것은 다르다

레이아웃·여백·정렬 · 타이포와 컬러 · 참고 사례 수집법 · AI에게 디자인 지시하기

산출물 — 같은 화면의 before/after 리디자인

/basic/session-06
07기본과정
기획: 아이디어를 설계로
만들기 전에 정해야 하는 것들

요구사항 정리와 사용자 스토리 · Claude Code로 PRD 작성하기 · 화면 흐름 설계 · MVP 범위

산출물 — 한 페이지 PRD + 화면 흐름도

/basic/session-07
08기본과정
웹 서비스 만들기
머릿속 화면이 브라우저에 뜨는 순간

HTML/CSS/JS 역할 구분 · 반응형 · 컴포넌트로 생각하기 · 입력 폼과 유효성 검사

산출물 — 내 서비스의 동작하는 화면 2~3개

/basic/session-08
09기본과정
데이터베이스 붙이기
새로고침해도 사라지지 않게

시트와 DB의 차이 · 테이블 설계 기초 · Supabase 연동과 CRUD · 회원가입/로그인 · 접근 권한

산출물 — 데이터가 저장되고 로그인이 되는 서비스

/basic/session-09
10기본과정
제대로 배포하고 운영하기
주소가 생기면 진짜가 된다

배포 방식 선택 기준 · 무료 배포 서비스 비교 · 환경변수와 비밀 관리 · 커스텀 도메인 · 점검 체크리스트

산출물 — 커스텀 도메인이 붙은 공개 서비스 + 발표

/basic/session-10