DAY 05바이브코딩 · 로그인 · 하네스 · 첫 배포

회원가입 · 로그인과 AI 작업 환경(하네스)

MELLOW BEAN 카페 사이트에 회원가입·로그인을 붙여 "서버가 누가 접속했는지 아는" 구조를 경험합니다. 이어서 Claude Code가 매번 같은 기준으로 일하도록 작업 환경(하네스)을 꾸미고, 카페24 AI SPACE로 사이트를 처음 인터넷에 올립니다.

1.수업 구성

수업 난이도

DAY 04의 Supabase 연결을 경험한 초급자 — 개념이 많은 날

수업방식

서버 개념 설명 + 로그인 만들기 + 작업 환경 꾸미기 + 첫 배포

실습 비중

전체 수업의 약 50%

핵심목표

로그인이 서버에서 어떻게 작동하는지 이해하고, 내 작업 환경을 꾸며 사이트를 인터넷에 올리기

2.오늘 배우는 내용 & 전체 흐름

오늘은 세 덩어리를 배웁니다

① 회원가입 · 로그인

인증과 권한의 차이를 알고, Supabase로 회원가입 · 로그인 · 로그아웃을 만들기

② AI 작업 환경(하네스)

CLAUDE.md와 스킬로 Claude Code가 매번 같은 규칙으로 일하게 만들기

③ 인터넷에 올리기

MCP · 도메인 · SSL을 이해하고 카페24 AI SPACE로 첫 배포하기

전체 흐름

1인증 · 권한 개념 이해하기

2Supabase 이메일 로그인 켜기

3회원가입 · 로그인 화면 만들기

4로그인 상태 표시 · 로그아웃

5하네스 이해 · CLAUDE.md 만들기

6점검 스킬 하나 만들어 쓰기

7MCP · 도메인 · SSL 이해하기

8AI SPACE로 카페 사이트 첫 배포

준비물 — DAY 04 프로젝트가 없어도 괜찮습니다

• DAY 04의 MELLOW BEAN 프로젝트가 있다면 그대로 이어서 사용합니다.
• 없다면 VS Code에서 새 폴더를 열고 Claude Code에 "MELLOW BEAN이라는 카페의 간단한 소개 페이지를 index.html, style.css, script.js로 만들어줘. Header에는 로고와 메뉴바를 넣어줘."라고 요청해서 시작하세요. 로그인은 메뉴 Database 없이도 만들 수 있습니다.
• Supabase 프로젝트가 없다면 STEP 01 전에 새로 만듭니다 (방법은 DAY 04의 Supabase 프로젝트 만들기 참고).
• 카페24 계정 (STEP 07에서 가입해도 됩니다)

3.인증 · 권한 — 출입증과 들어갈 수 있는 방

DAY 04에서는 "누구나 메뉴를 볼 수 있다"는 규칙(RLS)만 만들었습니다. 그런데 실제 서비스는 "회원만 주문할 수 있다", "내 주문 내역은 나만 볼 수 있다"처럼 사람마다 할 수 있는 일이 다릅니다. 이걸 가능하게 하는 두 개념이 인증과 권한입니다.

인증 (Authentication · 로그인)

"당신은 누구인가?"를 확인하는 것. 이메일과 비밀번호가 맞는지 확인해서 이 사람이 누구인지 알아냅니다.

비유 — 회사 입구에서 사원증을 찍는 것

권한 (Authorization)

"당신은 무엇을 할 수 있는가?"를 정하는 것. 누구인지 확인된 사람이 어떤 데이터를 보고, 쓰고, 지울 수 있는지 정합니다.

비유 — 사원증으로 열리는 방이 사람마다 다른 것

MELLOW BEAN에 적용하면

누가	메뉴 보기	단골 메뉴 저장	다른 사람의 단골 메뉴 보기
로그인 안 한 방문자	O	X	X
로그인한 회원	O	O (내 것만)	X

순서가 중요합니다. 인증이 먼저 있어야 권한을 정할 수 있습니다. 서버가 "이 요청은 김민지 님이 보낸 것"이라는 걸 알아야 "김민지 님의 데이터만 보여 준다"는 규칙을 적용할 수 있기 때문입니다.

핵심 — 인증 = 누구인지 확인(로그인), 권한 = 무엇을 할 수 있는지 결정(RLS 규칙)

4.로그인은 어떻게 작동할까? — 비밀번호 저장과 로그인 유지

로그인 버튼 하나 뒤에는 생각보다 많은 일이 숨어 있습니다. 이걸 직접 만들면 몇 주가 걸리지만, Supabase의 Auth(인증) 기능이 대신 처리해 줍니다. 그래도 무슨 일이 일어나는지 알아야 문제가 생겼을 때 AI에게 정확히 물어볼 수 있습니다.

① 회원 정보는 어디에 저장될까?

회원가입을 하면 Supabase 안의 회원 전용 표(auth.users)에 이메일과 가입 시간 등이 저장됩니다. 메뉴를 저장한 menus 표와는 따로 관리되고, Supabase 화면의 Authentication → Users에서 볼 수 있습니다.

② 비밀번호는 그대로 저장하지 않는다

비밀번호는 되돌릴 수 없는 암호문으로 바꿔서 저장합니다. 고기를 갈아 다짐육으로 만들면 다시 원래 고기 덩어리로 되돌릴 수 없는 것과 같습니다. 로그인할 때는 입력한 비밀번호를 똑같이 갈아 보고, 결과가 같으면 맞는 비밀번호로 판단합니다. 그래서 관리자도 회원의 비밀번호를 볼 수 없습니다.

③ 로그인 상태는 어떻게 유지될까? — 임시 출입증

로그인에 성공하면 서버가 임시 출입증을 발급하고, 브라우저가 이것을 보관합니다. 그 뒤로는 요청할 때마다 출입증을 함께 보내서 페이지를 옮겨도 다시 로그인하지 않아도 됩니다. 놀이공원 입구에서 받는 손목 밴드와 같습니다. 출입증에는 유효 시간이 있어서 시간이 지나면 자동으로 새로 발급되거나, 로그아웃하면 버려집니다.

이메일 · 비밀번호 입력

Supabase가 암호문끼리 비교

맞으면 임시 출입증 발급

브라우저가 출입증 보관

요청마다 출입증을 보여 주고 내 데이터 받기

Supabase Auth가 대신 해 주는 일

회원 표 관리, 비밀번호 암호화, 로그인 출입증 발급 · 갱신, 비밀번호 찾기 메일, 구글 · 카카오 로그인 연결

우리가 할 일

회원가입 · 로그인 화면 만들기, 로그인 상태에 따라 화면 바꾸기, "누가 무엇을 할 수 있는지" 규칙 정하기

5.STEP 01. Supabase에서 이메일 로그인 준비하기

Supabase Dashboard → 왼쪽 메뉴 Authentication

Sign In / Providers → Email이 켜져 있는지 확인

Confirm email(가입 확인 메일) 끄기 → Save

Users 메뉴를 열어 두기 (아직 비어 있음)

메뉴 이름과 위치는 Supabase 업데이트에 따라 조금 다를 수 있습니다. 찾기 어려우면 Claude Code에게 "Supabase에서 이메일 가입 확인(Confirm email)을 끄는 메뉴 위치를 알려줘"라고 물어보세요.

왜 가입 확인 메일을 끄나요?

실제 서비스에서는 "이 이메일이 진짜 내 것"임을 확인하려고 가입 확인 메일을 보냅니다. 그런데 Supabase의 기본 메일 발송은 시간당 보낼 수 있는 수가 아주 적어서, 반 전체가 동시에 가입하면 메일이 오지 않아 수업이 멈춥니다.

그래서 수업에서는 끄고 진행합니다. 실제로 서비스를 운영할 때는 다시 켜고, 별도 메일 발송 서비스를 연결해야 합니다.

6.STEP 02~03. 회원가입 · 로그인 화면 만들기

STEP 02

로그인 페이지 만들기

회원가입과 로그인을 한 페이지에서 할 수 있게 만듭니다. DAY 04에서 만든 Supabase 연결 파일(supabase-client.js)을 그대로 씁니다.

signUp — 회원가입 요청 signInWithPassword — 이메일·비밀번호로 로그인 요청 signOut — 로그아웃 getSession / onAuthStateChange — 지금 로그인되어 있는지 확인 / 로그인 상태가 바뀌면 알려 주기

STEP 03

직접 가입하고 Supabase에서 확인하기

1login.html을 브라우저로 열기

2내 이메일로 회원가입

3Supabase → Authentication → Users 새로고침

4내 이메일이 보이면 성공

Users 화면에서 확인할 것

내 이메일이 있는가? 비밀번호 칸이 보이는가? → 보이지 않는 것이 정상 (암호문으로 저장) 회원마다 붙은 긴 회원 번호(ID)가 있는가?

일부러 틀려 보기 — 실패도 확인해야 테스트입니다

비밀번호를 틀리게 입력 → 오류 메시지가 나오는가?

같은 이메일로 다시 가입 → 어떻게 되는가?

비밀번호 3자리로 가입 → 막히는가?

회원 번호(ID)는 회원마다 하나씩 붙는 고유 번호입니다. 다음에 "내 데이터만" 규칙을 만들 때 이 번호로 누구의 데이터인지 구분합니다.

7.STEP 04. 로그인 상태 표시 · 로그아웃

로그인했다는 것을 화면이 알아야 합니다. Header 오른쪽을 로그인 상태에 따라 다르게 보여 줍니다.

로그인 전

MELLOW BEAN로그인

로그인 후

MELLOW BEANminji@... 님 로그아웃

직접 확인하기

로그인 → Header에 내 이메일이 보이는가? 새로고침 → 그대로 로그인 상태인가? (출입증 덕분) 로그아웃 → [로그인] 버튼으로 돌아오는가?

세이브 포인트 — 로그인이 잘 되면 지금 Commit해 두세요 (메시지 예: "회원가입·로그인 기능 추가"). 방법이 기억나지 않으면 DAY 03의 Git 저장 과정을 참고하세요.

10분 휴식

8.하네스란? — AI 모델과 AI 작업 환경

2교시

하네스 (Harness · AI 작업 환경)

AI 모델을 둘러싸고 실제로 일을 할 수 있게 만들어 주는 작업 환경 전체입니다. 원래 말에 채워 수레를 끌게 하는 마구(馬具)를 뜻합니다. 아무리 힘센 말도 마구가 없으면 수레를 끌 수 없듯, 똑똑한 AI 모델도 파일을 읽고 고치고 명령을 실행할 수 있는 환경이 있어야 실제 일을 합니다.

모델 (Model) — 엔진

Claude Opus, Sonnet처럼 생각하고 글을 쓰는 AI 자체. 혼자서는 대화만 할 수 있습니다.

하네스 — 엔진을 얹은 자동차

Claude Code가 바로 하네스입니다. 모델에게 파일 읽기 · 쓰기, 명령 실행, 규칙 기억, 외부 서비스 연결 같은 "손과 발"을 달아 줍니다.

같은 모델이라도 하네스를 어떻게 꾸미느냐에 따라 결과가 달라집니다. 바이브코딩을 잘하는 사람은 프롬프트만 잘 쓰는 사람이 아니라, AI가 매번 같은 기준으로 일하도록 작업 환경을 꾸며 두는 사람입니다.

Claude Code에서 내가 꾸밀 수 있는 것

구성 요소	하는 일	비유	오늘
CLAUDE.md	프로젝트 규칙 파일. 대화를 시작할 때마다 항상 읽음	사내 규칙집	실습
스킬 (SKILL.md)	특정 작업의 설명서. 필요할 때만 꺼내 읽음	업무 매뉴얼 한 권	실습
MCP	카페24 · GitHub 같은 외부 서비스와 연결	업무용 전화선	실습 (11번)

실제 사례 — 이 강의 사이트도 이렇게 만들었습니다. 지금 보고 있는 강의자료는 디자인 · 색 · 용어 · 파일 위치 규칙을 적은 약 700줄짜리 규칙 문서를 AI가 먼저 읽고 만듭니다. 그래서 수십 개 페이지가 같은 모양과 말투로 나옵니다. 페이지마다 "제목은 이렇게, 색은 이렇게"를 다시 말하지 않아도 됩니다.

9.STEP 05. CLAUDE.md — 프로젝트 규칙 기억시키기

X CLAUDE.md가 없으면

새 대화를 열 때마다 "쉬운 말로 설명해줘", "다른 Section은 건드리지 마", "Secret Key는 쓰지 마"를 매번 다시 말해야 합니다. 깜빡하면 AI가 마음대로 고칩니다.

O CLAUDE.md가 있으면

프로젝트 폴더 맨 위의 CLAUDE.md를 Claude Code가 대화를 시작할 때마다 자동으로 읽습니다. 한 번 적어 두면 매번 지켜집니다.

① /init으로 기본 내용 만들기

Claude Code 입력창에 아래 명령을 입력하면, Claude Code가 프로젝트 파일을 살펴보고 CLAUDE.md 초안을 만들어 줍니다.

/init

② 내 작업 규칙 덧붙이기

초안에는 파일 구조 같은 설명만 있습니다. 내가 원하는 일하는 방식을 직접 적어 덧붙입니다. 아래 틀에서 필요 없는 줄은 빼고, 원하는 규칙은 더하세요.

③ 정말 기억하는지 확인하기

1CLAUDE.md 파일을 열어 내용 읽어 보기

2Claude Code에서 새 대화 열기

3"이 프로젝트에서 지켜야 할 규칙이 뭐야?"

새 대화인데도 내가 적은 규칙을 말한다면 성공입니다. CLAUDE.md는 그냥 글 파일이라 VS Code에서 직접 열어 고쳐도 됩니다. DAY 06에는 최종 프로젝트용 CLAUDE.md를 처음부터 만듭니다.

10.STEP 06. 스킬 맛보기 — 필요할 때 꺼내 쓰는 작업 설명서

스킬 (Skill)

자주 하는 작업 하나의 순서와 기준을 적어 둔 설명서입니다. .claude/skills/스킬이름/SKILL.md 위치에 두면, /스킬이름을 입력하거나 그 작업이 필요할 때 Claude Code가 꺼내 읽고 그대로 따릅니다.

	CLAUDE.md	스킬
언제 읽나	항상	필요할 때만
무엇을 적나	늘 지킬 짧은 규칙	특정 작업의 자세한 순서 · 기준
예	"쉬운 말로 설명하기"	"사이트 점검하는 법", "새 페이지 만드는 법"

긴 설명서를 CLAUDE.md에 모두 넣으면 매번 다 읽느라 AI가 중요한 규칙을 놓치기 쉽습니다. 그래서 늘 필요한 것은 CLAUDE.md에, 가끔 필요한 긴 설명은 스킬로 나눠 둡니다.

사이트 점검 스킬 만들어 보기

써 보기

/site-check

목록에 보이지 않으면 Claude Code를 껐다가 다시 켜 보세요.

이 스킬은 언제 또 쓰나요?

잠시 뒤 배포하기 전, 그리고 DAY 06~08 최종 프로젝트를 공개하기 전에 그대로 다시 씁니다. 한 번 만든 스킬은 다른 프로젝트 폴더로 복사해서 쓸 수도 있습니다.

점검 결과에 문제가 나오면 지금 고쳐도 되고, 시간이 부족하면 다음 STEP으로 넘어가도 됩니다. 오늘의 목표는 스킬이 어떻게 작동하는지 경험하는 것입니다.

11.MCP — AI와 외부 서비스를 잇는 연결 규격

MCP (Model Context Protocol)

AI 도구가 외부 서비스(카페24, GitHub, 구글 드라이브, Notion 등)와 연결할 때 쓰는 공통 규격입니다. 서비스 쪽에서 MCP 서버를 열어 두면, Claude Code · ChatGPT · Cursor 같은 여러 AI 도구가 같은 방식으로 그 서비스를 사용할 수 있습니다.

비유하자면 — USB-C 충전 단자와 같습니다. 예전에는 기기마다 충전기 모양이 달라서 기기 수만큼 충전기가 필요했지만, USB-C로 통일되자 하나의 케이블로 휴대폰 · 노트북 · 이어폰을 모두 충전합니다. MCP는 AI와 서비스 사이의 USB-C입니다.

MCP 연결 전

Claude Code는 내 컴퓨터의 파일만 다룰 수 있습니다. 서버에 올리려면 내가 직접 호스팅 업체 사이트에 들어가 메뉴를 찾아 누르고 파일을 올려야 합니다.

MCP 연결 후

"AI SPACE에 배포해줘"라고 말하면 Claude Code가 카페24의 MCP 서버에 직접 요청해서 서버 만들기 · 파일 올리기 · 주소 연결까지 처리합니다.

MCP를 연결할 때 주의할 점

• MCP를 연결하면 AI가 내 계정으로 그 서비스에서 행동할 수 있습니다. 회사에 출입증을 하나 더 만들어 주는 것과 같습니다.
• 공식 안내에 나온 MCP 서버만 연결합니다. 출처를 모르는 MCP 주소는 연결하지 않습니다.
• 연결하거나 중요한 작업을 할 때 뜨는 승인 창의 내용을 읽고 허용합니다.

12.도메인 · DNS · SSL — 주소와 자물쇠

배포를 하면 사이트 주소가 생기고, 주소 앞에 자물쇠 표시가 붙습니다. 이 둘이 무엇인지 알아봅니다.

도메인 (Domain)

서버마다 붙은 숫자 주소 대신 사람이 기억하기 쉽게 붙인 이름 주소. 예: mellowbean.com

비유 — 가게 상호

DNS (Domain Name System)

도메인을 입력하면 그 서버의 숫자 주소를 찾아 주는 시스템

비유 — 상호로 전화번호를 찾는 전화번호부

종류	예	특징
기본 주소	내사이트.업체주소	호스팅 업체가 무료로 주는 주소. 업체 이름 앞에 내 이름이 붙음. 오늘 받을 주소가 이것
내 도메인	mellowbean.com	도메인 판매 업체에서 1년 단위로 사서 연결. 보통 1년에 1~3만 원 정도

SSL · HTTPS — 주소창의 자물쇠

HTTPS는 브라우저와 서버가 주고받는 내용을 암호화해서 중간에 누가 엿봐도 알아볼 수 없게 하는 통신 방식입니다. 이 암호화 기술을 SSL이라고 부릅니다.

SSL 인증서는 "이 사이트가 이 도메인의 진짜 주인"이라는 것을 인증 기관이 확인해 준 증명서입니다. 가게에 걸린 사업자등록증과 같습니다. 유효 기간이 있어서 주기적으로 갱신해야 하고, 요즘 호스팅은 대부분 무료로 자동 발급 · 갱신해 줍니다.

http:// — 엽서

배달하는 사람 누구나 내용을 읽을 수 있습니다. 브라우저가 "주의 요함", "안전하지 않음" 경고를 띄웁니다. 로그인 비밀번호가 그대로 보일 수 있습니다.

https:// — 봉인된 편지

받는 사람만 열 수 있게 봉인되어 있습니다. 주소창에 자물쇠가 표시됩니다. 오늘 만든 로그인처럼 비밀번호를 입력받는 사이트는 반드시 HTTPS여야 합니다.

오늘 쓸 AI SPACE와 DAY 08에 쓸 GitHub Pages는 모두 SSL을 무료로 자동 적용해 줍니다. 배포한 뒤 주소창의 자물쇠를 직접 확인해 보세요.

13.STEP 07~09. 카페24 AI SPACE 무료 체험 · MCP 연결 · 첫 배포

카페24 AI SPACE

AI와 대화하며 만든 웹사이트를 말 한마디로 서버에 올려 주는 카페24의 호스팅 서비스입니다. MCP로 Claude Code와 연결하면 서버 만들기, 기본 주소 연결, SSL 적용까지 자동으로 처리합니다.

무료 체험 14일을 수업 마지막 2주에 맞춰 씁니다

• 오늘(DAY 05) 체험을 시작하면 DAY 08까지 수업 기간 내내 쓸 수 있습니다. 너무 일찍 시작하면 DAY 08 전에 끝납니다.
• 카드 등록이 없고 자동 결제도 되지 않습니다. 체험이 끝나면 서비스가 멈출 뿐 돈이 나가지 않습니다.
• 체험 환경: 메모리 256MB · 저장공간 500MB · 동시접속 25명 — DAY 04에서 배운 단어들입니다.
• 배포(빌드) 횟수에 하루 제한이 있다고 알려져 있습니다. 고칠 때마다 배포하지 말고, 수업 끝에 한 번만 배포합니다.
• 조건은 바뀔 수 있으니 신청 화면의 안내를 꼭 읽어 보세요.

STEP 07

AI SPACE 무료 체험 시작하기

카페24 호스팅(hosting.cafe24.com) → AI SPACE 상품 페이지

카페24 계정으로 로그인 (없으면 회원가입)

14일 무료 체험 신청

체험 시작 날짜를 메모해 두세요. 종료 며칠 전부터 알림이 옵니다.

STEP 08

Claude Code에 AI SPACE MCP 연결하기

VS Code 아래쪽 터미널(Terminal)에 아래 명령을 입력합니다. 뒤의 주소가 카페24 AI SPACE의 MCP 서버 주소입니다.

claude mcp add --transport http cafe24-aispace https://aih-proxy.cafe24.com/mcp

1Claude Code 입력창에 /mcp 입력

2cafe24-aispace 선택 → 인증(Authenticate)

3열린 브라우저에서 카페24 로그인 · 승인

4connected(연결됨) 표시 확인

명령어와 화면은 업데이트에 따라 바뀔 수 있습니다. 막히면 Claude Code에게 "카페24 AI SPACE MCP 서버(https://aih-proxy.cafe24.com/mcp)를 연결하고 싶어. 내가 할 일을 순서대로 알려줘."라고 물어보세요. 카페24 도움말의 "AI SPACE 빠른 가이드"에도 연결 방법이 있습니다.

STEP 09

점검하고 배포하기

배포 전에 STEP 06에서 만든 점검 스킬부터 실행합니다. 특히 4번(Secret Key)에 문제가 없어야 합니다.

/site-check

배포한 주소에서 확인하기

□ 주소가 https://로 시작하고 자물쇠가 보이는가?

□ 내 휴대폰으로 주소를 열어도 보이는가?

□ 메뉴 카드가 Supabase에서 잘 불러와지는가?

□ 배포한 사이트에서도 로그인 · 로그아웃이 되는가?

내 컴퓨터에서만 보이던 사이트가 이제 누구나 볼 수 있는 인터넷 사이트가 되었습니다. 주소를 메모해 두세요. "배포 완료"라고 나와도 주소가 바로 열리지 않으면 1~2분 기다린 뒤 다시 열어 보세요. 새 주소가 DNS에 퍼지는 데 시간이 걸릴 수 있습니다.

14.STEP 10. 로그인한 사람만 — 내 단골 메뉴 저장하기

확장 실습 · 시간이 되면

3번에서 본 표의 "단골 메뉴 저장 — 로그인한 회원만, 내 것만"을 실제로 만듭니다. 오늘 배운 인증(누구인지)과 권한(내 것만)이 한 번에 쓰이는 실습입니다.

"내 것만" 규칙 확인하기 — 계정 두 개로 테스트

계정 A로 로그인 → 단골 2개 추가 로그아웃 → 계정 B로 가입 · 로그인 계정 B에서는 A의 단골이 안 보이면 성공 Supabase Table Editor에서 user_id가 서로 다른지 확인

15.DAY 05 정리 & 다음 수업

오늘 작업 저장하기 — □ Stage → Commit(메시지 예: "로그인 · CLAUDE.md · 점검 스킬 추가") → Push까지 했나요? 방법이 기억나지 않으면 DAY 03의 Git 저장 과정을 참고하세요.

오늘의 핵심 용어

인증 / 권한 — 누구인지 확인(로그인) / 무엇을 할 수 있는지 결정(RLS)

비밀번호 암호문 저장 — 되돌릴 수 없는 암호문으로 바꿔 저장. 관리자도 비밀번호를 모름

임시 출입증 — 로그인하면 받아서 브라우저가 보관. 새로고침해도 로그인이 유지되는 이유

하네스 — AI 모델이 실제로 일하게 만드는 작업 환경 전체 (Claude Code)

CLAUDE.md / 스킬 — 항상 읽는 규칙집 / 필요할 때 꺼내 읽는 작업 설명서

MCP — AI 도구와 외부 서비스를 잇는 공통 연결 규격 (AI의 USB-C)

도메인 · DNS — 사람이 기억하는 이름 주소 / 이름을 서버의 숫자 주소로 바꿔 주는 전화번호부

SSL · HTTPS — 주고받는 내용을 암호화하는 기술 / 주소창의 자물쇠

다음 수업 예고 — DAY 06

최종 프로젝트 기획 + 제작 시작

오늘까지 배운 화면 만들기 · Database · 로그인 · 작업 환경 꾸미기 · 배포를 모아서, 각자 만들고 싶은 웹사이트를 기획하고 바로 만들기 시작합니다.

• 주제 · 꼭 필요한 기능 · 흐름 · 화면 설계도를 빠르게 정하기
• 제작 설명서(BUILD_SPEC.md)와 최종 프로젝트용 CLAUDE.md 만들기
• 기본 구조와 첫 화면 만들고 AI SPACE에 중간 배포하기

AI SPACE 무료 체험은 DAY 08까지 계속 씁니다 — 계정과 사이트 주소를 잊지 마세요

수강생 확인이 필요합니다