메인 실습 흐름 · 모든 프로젝트 공통

설치에서 제출까지,
여섯 단계

세 프로젝트 모두 이 여섯 단계를 반복한다 — 설치 → 연결 → 기획 → 시각화하며 구현 → 배포 → 제출. 이 페이지 하나로 흐름을 익혀 두면, 이후의 모든 실습은 같은 길을 다시 걷는 일이 된다.

3개 프로젝트 공통6단계 플로우프롬프트 3개cf-board 갤러리 제출

여섯 단계 한눈에

전체 그림

이 특강의 실습은 세 개의 프로젝트로 진행되지만, 걷는 길은 하나다. 먼저 그 길 전체를 본다.

FLOW · 공통 여정

모든 프로젝트가 같은 여섯 단계를 지난다

이 특강의 실습은 3개 프로젝트로 진행된다: ① 서비스 앱 구현, ② 데이터 수집 후 위키 구성, ③ Cloudflare 무료 AI API로 챗봇을 연결해 LLM이 컨트롤하는 동적 대시보드. 프로젝트의 주제는 각각 다르지만, 시작부터 제출까지의 흐름은 셋 다 완전히 같다.

그림 1. 메인 실습 흐름. 1·2는 한 번만 하면 되는 준비 단계, 3·4는 프로젝트마다 반복하는 제작 단계, 5·6은 결과물을 공개하는 단계다.

단계	무엇을 하나	결과물
① 클로드 앱 설치	claude.ai 가입, 데스크톱/웹 앱과 Claude Code(터미널 에이전트) 준비	AI에게 말을 걸 수 있는 환경
② Cloudflare 연결	커넥터(클릭) 또는 커스텀 토큰(터미널) 중 하나로 배포 권한 연결	배포 가능한 계정 연결
③ AI와 기획	AI를 기획 파트너로 삼아 인터뷰로 아이디어를 구체화	PLAN.md 기획서
④ 그래프 보며 구현	진행 상황 보드(progress.html)를 먼저 만들고, 단계마다 갱신하며 구현	결과물 + 진행 그래프
⑤ Cloudflare 업로드	Pages(정적) 또는 Worker(서버)로 배포해 공개 주소를 얻는다	.pages.dev / .workers.dev 주소
⑥ 갤러리 제출	실습과제 갤러리(cf-board)에 결과물 링크와 설명을 올린다	제출 카드, 동료 피드백

이 흐름의 원칙

구현하는 동안에도 AI에게 물어보며 진행하고, 진행 상황은 항상 웹 그래프로 보이게 유지한다. 코드를 직접 고치는 대신 말로 지시하고, 지금 어디까지 왔는지는 progress 보드가 색으로 보여 준다.

왜 흐름을 먼저 배우는가. 세 프로젝트는 난이도가 점점 올라가지만(정적 앱 → 데이터 사이트 → LLM 연동 서비스), 각 프로젝트에서 새로 배우는 것은 내용물뿐이다. 설치·연결·기획·구현·배포·제출이라는 틀은 한 번 익히면 그대로 재사용된다. 실무에서도 마찬가지다 — 도구와 주제는 바뀌어도 "AI와 함께 만들고, 과정을 보이게 유지하고, 배포해서 공유한다"는 작업 방식 자체가 이 특강이 남기려는 근육이다.

STEP 1 · 준비

클로드 앱 설치

AI에게 말을 걸 수 있는 두 개의 창구를 연다. 대화용 앱 하나, 터미널 에이전트 하나.

STEP 1 · 두 가지 사용 형태

앱으로 대화하고, Claude Code로 만들게 한다

먼저 claude.ai에서 Claude에 가입한다. 가입 후에는 두 가지 형태로 쓴다. 하나는 데스크톱/웹 앱 — 대화를 나누고 커넥터를 연결하는 창구다. 다른 하나는 Claude Code — 터미널에서 파일을 만들고 코드를 쓰고 배포까지 수행하는 에이전트다. 이 특강의 실습 대부분은 Claude Code가 손을 움직이고, 우리는 말로 지시한다.

Claude Code 설치

터미널에서 전역 설치한다: npm install -g @anthropic-ai/claude-code
프로젝트 폴더로 이동해 claude를 실행한다.
안내에 따라 로그인한다(브라우저가 열리며 claude.ai 계정으로 인증).

npm install -g @anthropic-ai/claude-code
cd 프로젝트폴더
claude

안티그래비티(Antigravity) IDE를 쓰는 경우에도 IDE 안의 터미널에서 동일하게 동작한다. 터미널이 있는 곳이면 어디서든 같다.

확인

claude 명령이 실행된다
로그인이 완료되었다
한국어로 질문을 던져 응답이 오는 것을 확인했다

앱과 Claude Code의 역할 분담을 기억해 두면 좋다. 앱은 커넥터(Step 2의 방법 A)를 연결하는 곳이고, 아이디어를 굴리는 대화 상대다. Claude Code는 실제 파일 시스템 위에서 움직이는 실행자다. 같은 Claude이지만 서 있는 자리가 다르다 — 앱은 브라우저 안, Claude Code는 내 폴더 안. 이 차이가 Step 2에서 "연결 방법이 두 가지인 이유"로 이어진다.

STEP 2 · 준비

Cloudflare 연결

배포할 곳과 손을 잡는 단계. 클릭으로 끝나는 커넥터와, 터미널용 커스텀 토큰 — 둘 중 하나면 된다.

STEP 2 · 가입

먼저 Cloudflare에 가입한다

cloudflare.com에서 계정을 만든다. 무료 플랜으로 충분하다 — 이 특강의 모든 배포(Pages, Worker, Workers AI)는 무료 범위 안에서 이루어진다. 가입이 끝났으면 아래 두 방법 중 하나를 골라 Claude와 연결한다.

방법 A — 커넥터 (추천)클릭만으로 연결. 이후 대화에서 말로 배포를 지시한다. 앱 중심으로 실습할 사람에게 맞다.

방법 B — 커스텀 토큰터미널에서 wrangler로 직접 배포. Claude Code 중심으로 실습할 사람에게 맞다.

STEP 2 · 방법 A

커넥터 — 클릭만으로 연결한다

Claude 앱 설정 → 커넥터(Connectors)에서 Cloudflare를 연결한다. 브라우저가 열리면 Cloudflare에 로그인하고 승인하면 끝이다.

연결 후에는 대화에서 "이 폴더를 Cloudflare Pages에 배포해줘"처럼 말로 배포를 지시할 수 있다. 토큰을 만들거나 명령어를 외울 필요가 없다.

STEP 2 · 방법 B

커스텀 토큰 — 터미널 배포용 열쇠를 만든다

dash.cloudflare.com → My Profile → API Tokens → Create Token → 맨 아래 Create Custom Token. 템플릿을 쓰지 않고 권한(Permissions)을 직접 등록한다.

유형	권한 항목	수준	용도
Account	Cloudflare Pages	Edit	Pages 배포 — 필수
Account	Workers Scripts	Edit	Worker 배포 — 프로젝트 3 필수
Account	Workers AI	Read	Workers AI 호출 확인용 — 선택
User	User Details	Read	wrangler 로그인 확인 — 권장

권한 등록 후 Continue to summary → Create Token. 발급된 토큰을 복사한다 — 한 번만 표시되므로 이 순간을 놓치면 다시 만들어야 한다. 복사한 토큰은 터미널에서 환경변수로 등록한다.

export CLOUDFLARE_API_TOKEN=발급받은토큰

보안 주의

토큰은 비밀번호와 같다. 채팅창·공개 문서에 붙여넣지 않는다. 그리고 권한을 필요한 것만 등록하는 것이 커스텀 토큰을 쓰는 이유다 — 넓은 권한이 묶여 오는 템플릿 토큰보다 안전하다.

확인

npx wrangler whoami

계정 이메일과 Account ID가 표시되면 연결 성공이다.

두 방법의 차이는 결국 열쇠를 누가 들고 있는가다. 커넥터는 Claude 앱이 승인된 범위 안에서 대신 열쇠를 쓰는 방식이고, 커스텀 토큰은 내 터미널 환경에 열쇠를 직접 두는 방식이다. 어느 쪽이든 "필요한 만큼만 허용한다"는 최소 권한 원칙은 같다. 실무에서 API 키를 다루는 감각을 여기서 미리 연습해 두자.

STEP 3 · 제작

AI에게 물어보며 기획

기획을 혼자 하지 않는다. AI를 기획 파트너로 세워, 막연한 아이디어를 인터뷰로 구체화한다.

STEP 3 · 기획 인터뷰

"바로 만들지 말고, 먼저 물어봐 달라"고 시킨다

아이디어가 막연한 상태에서 "만들어줘"라고 하면 AI는 평범한 무언가를 만들어 온다. 순서를 뒤집는다 — 만들기 전에 AI가 나를 인터뷰하게 한다. 질문에 답하는 과정에서 아이디어가 구체화되고, 그 결과가 기획서 파일(PLAN.md)로 남는다.

나는 [아이디어 한 줄]을 만들고 싶어. 바로 만들지 말고, 먼저 기획 인터뷰를 해줘.
- 누가 쓰는 서비스인지, 어떤 문제를 풀는지 나에게 하나씩 질문해
- 내 답을 바탕으로 핵심 기능을 3개 이내로 좁혀줘
- 화면 구성(어떤 요소가 어디에 보이는지)을 텍스트로 스케치해줘
- 마지막에 PLAN.md 파일로 기획서를 저장해줘: 목표, 사용자, 핵심 기능 3개, 화면 구성, 만들 순서(단계 목록)

좋은 기획의 기준

핵심 기능 3개 이내 — 기능이 많을수록 완성은 멀어진다.
첫 화면에서 무엇을 하는 서비스인지 보인다 — 설명이 필요한 첫 화면은 다시 기획한다.
오늘 안에 배포 가능한 크기 — 이 기준을 넘는 아이디어는 잘라서 다음 기회로 남긴다.

PLAN.md의 마지막 항목 "만들 순서(단계 목록)"가 다음 단계의 재료가 된다. Step 4에서 이 단계 목록이 그대로 진행 그래프의 노드가 되기 때문이다. 기획서가 곧 진행표가 되는 구조 — 기획을 파일로 남기게 하는 이유가 여기에 있다.

생각해 볼 질문

지금 머릿속의 아이디어를 한 줄로 적어 보자. 그 한 줄에서 핵심 기능 3개를 바로 뽑을 수 있는가? 뽑기 어렵다면, 그것이 인터뷰가 필요한 이유다.

STEP 4 · 제작

진행과정을 웹 그래프로 시각화하며 구현

구현을 시작하기 전에, 진행 상황 보드부터 만들게 한다. 개발 과정 자체가 눈에 보이는 결과물이 된다.

STEP 4 · 진행 보드

코드보다 먼저, progress.html

PLAN.md의 단계들이 노드로 연결된 그래프로 보이고, 각 단계의 상태가 색으로 표시되는 한 장짜리 웹페이지 — progress.html을 먼저 만들게 한다. 대기는 회색, 진행 중은 파란색, 완료는 초록색. 지금 어디까지 왔는지가 항상 한눈에 보인다.

PLAN.md의 '만들 순서' 단계들을 진행 상황 보드로 시각화하는 progress.html을 만들어줘.
- 각 단계를 노드로, 순서를 화살표로 잇는 가로 흐름 그래프 (SVG 또는 CSS)
- 상태 3가지를 색으로 구분: 대기(회색) / 진행 중(파란색) / 완료(초록색)
- 각 노드 아래에 단계 이름과 한 줄 설명
- 상단에 프로젝트 이름과 전체 진행률(완료 단계 수 / 전체 단계 수)
- 외부 라이브러리 없이 파일 하나로 동작하게
지금은 모든 단계가 '대기' 상태다. 앞으로 단계가 끝날 때마다 이 파일의 상태를 갱신해달라고 할게.

구현 루프 — 한 단계씩, 보드와 함께

보드가 준비되면 구현은 단순한 반복이 된다: 한 단계 지시 → 결과 확인 → 보드 갱신 → 다음 단계. 단계가 끝날 때마다 이렇게 요청한다.

1단계가 끝났어. progress.html에서 1단계를 완료(초록), 2단계를 진행 중(파랑)으로 갱신해줘.
그리고 2단계 구현을 시작하자: [다음 단계 내용]

progress.html을 결과물과 같은 폴더에 두고 함께 배포하면, 제출물에서 개발 과정까지 보여줄 수 있다. 무엇을 만들었는지만이 아니라 어떤 단계를 거쳐 만들었는지가 함께 공개되는 것 — 개발 과정 자체가 포트폴리오가 된다.

중간에 막히면 오류 메시지를 그대로 AI에게 보여 준다. 코드를 직접 고치지 않는 원칙은 여기서도 같다. 오류를 해석하고 고치는 것도 AI의 일이고, 우리의 일은 결과를 확인하고 방향을 지시하는 것이다.

STEP 5·6 · 공개

Cloudflare 업로드와 갤러리 제출

배포 주소가 있어야 제출이 된다. 로컬에서만 도는 것은 아직 결과물이 아니다.

STEP 5 · 업로드

연결 방법에 따라, 두 갈래 배포

Step 2에서 고른 연결 방법에 따라 배포 방법도 갈린다. 어느 쪽이든 결과는 같다 — 누구나 접속할 수 있는 공개 주소.

커넥터로 연결했다면대화에서 지시한다: "완성된 폴더를 Cloudflare Pages 프로젝트 [이름]으로 배포해줘".

커스텀 토큰으로 연결했다면터미널에서 wrangler 명령으로 직접 배포한다. 아래 명령 참고.

npx wrangler pages deploy ./폴더 --project-name 프로젝트이름 --branch main

Worker로 배포하는 프로젝트 3은 npx wrangler deploy를 쓴다. 프로젝트 생성부터 커스텀 도메인까지의 상세 절차는 부록 Cloudflare Pages 배포에서 다룬다.

STEP 6 · 제출

실습과제 갤러리에 올린다

제출은 실습과제 갤러리(cf-board)에서 한다: cf-board.juhonov.workers.dev — 분반·회차별 제출 게시판이다.

갤러리 접속 → [과제 제출] 버튼
분반 선택 → 회차 선택
제목·작성자 입력
결과물 링크 입력 — 배포된 .pages.dev / .workers.dev 주소
설명 입력 — 무엇을 만들었는지, 어떤 점을 다뤘는지
비밀번호 입력(나중에 수정·삭제용) → 제출

제출 후에는 동료들의 결과물을 구경하고, 좋아요와 댓글로 의견을 남길 수 있다. 갤러리에는 실제 수강생 제출 사례들이 올라와 있다 — 퀀트 위키, RAM 가격 대시보드, 달러 환율 대시보드, 비트코인 감정분석 대시보드 등. 어떤 수준을 목표로 하면 되는지 감을 잡는 데 좋은 참고가 된다.

제출의 원칙

배포 주소가 있어야 제출이 된다 — 로컬에서만 도는 것은 결과물이 아니다. 내 컴퓨터를 벗어나 누구나 접속할 수 있는 주소를 얻는 것까지가 "만들었다"의 정의다.

정리

핵심 정리

여섯 단계를 다시 한 줄로. 이제 이 흐름을 세 번 반복한다.

정리

세 프로젝트, 하나의 흐름

핵심 정리

하나. 흐름은 여섯 단계다: 클로드 앱 설치 → Cloudflare 연결 → AI와 기획 → 진행 그래프 보며 구현 → Cloudflare 업로드 → 갤러리 제출. 1·2는 한 번, 3~6은 프로젝트마다 반복한다.

둘. 만들기 전에 인터뷰(PLAN.md), 구현 전에 진행 보드(progress.html). 순서를 지키면 개발 과정 자체가 보이는 결과물이 된다.

셋. 배포 주소까지가 결과물이다. 공개 주소를 얻고 갤러리에 제출해야 한 사이클이 끝난다.

세 프로젝트 — 프로젝트 1 서비스 앱, 프로젝트 2 위키, 프로젝트 3 LLM 대시보드 — 모두 이 흐름을 그대로 반복한다. 준비가 되었는지 아래에서 확인하고 첫 프로젝트로 넘어가자.

시작 전 체크리스트

클로드 앱 설치 완료 (앱 로그인 + Claude Code 실행 확인)
Cloudflare 연결 완료 (커넥터 또는 커스텀 토큰)
npx wrangler whoami로 계정 확인 (커스텀 토큰인 경우)
실습과제 갤러리(cf-board) 접속 확인

한국외국어대학교 Global Business & Technology · GenAI 특강 · 메인 실습 흐름.
이 자료는 단일 HTML 파일로 배포되며, 프롬프트 블록의 [복사] 버튼으로 실습 프롬프트를 바로 가져다 쓸 수 있다.