챌린지 명세서

🌐

Week 1 진행 중 입문

나를 소개하는 단 하나의 페이지

기간: 이번 주 월요일 ~ 일요일 23:59

📋

챌린지 개요

Section 01 — Overview

나의 이야기·경험·관심사를 담은 퍼스널 웹사이트를 만들고 인터넷에 직접 배포하세요. 기술 스택 제한 없음. 완벽함보다 완성이 먼저입니다. URL 하나를 세상에 내놓는 경험이 첫 주의 전부입니다.

🎯

학습 목표

Section 02 — Objectives

HTML/CSS 구조 이해 — 웹 페이지의 뼈대인 HTML과 스타일을 담당하는 CSS의 기본 구조를 익힙니다.

반응형 레이아웃 — Flexbox 또는 Grid를 활용해 모바일과 데스크톱 모두에서 깔끔하게 보이는 레이아웃을 구성합니다.

Cloudflare Pages 배포 경험 — 파일을 배포하면 Cloudflare가 *.pages.dev URL을 자동으로 만들어 줍니다. 드래그&드롭, GitHub 자동 연동, AI 생성+배포 세 가지 방법 중 하나로 실제로 접근 가능한 나만의 URL을 발급받습니다. 직접 구매한 도메인이 있다면 커스텀 도메인 연결도 가능합니다.

✅

필수 요구사항

Section 03 — Requirements

✓

단일 페이지 구성 — SPA 또는 단순 HTML 파일로 나를 소개하는 단일 페이지를 만드세요.

✓

Cloudflare Pages 배포 — URL 발급
아래 방법 중 하나로 배포하면 Cloudflare가 URL을 자동으로 생성합니다. 별도 신청 없이 배포 완료와 동시에 발급됩니다.
☁️ 방법 A — 드래그&드롭 → URL 즉시 발급 🐙 방법 B — GitHub 연동 → Push마다 자동 배포 🤖 방법 C — AI 생성 → Cloudflare 자동 감지
발급되는 URL 형식: 내-프로젝트-이름.pages.dev
자신이 구매한 도메인이 있다면 커스텀 도메인 연결도 가능합니다. (예: myportfolio.com)

✓

최소 콘텐츠 포함 — 이름, 관심사, 한 줄 자기소개를 반드시 포함하세요.

✓

기본 반응형 — 모바일(375px 기준)에서도 레이아웃이 깨지지 않아야 합니다.

📤

제출 형식

Section 04 — Submission Format

항목	내용
프로젝트 제목	나의 사이트를 대표하는 한 줄 제목 (예: "김민준의 포트폴리오")
한 줄 설명	이 프로젝트가 무엇인지 한 문장으로 (최대 80자)
배포 URL	실제로 접근 가능한 HTTPS 링크 (필수)
기술 스택	사용한 언어·프레임워크·배포 플랫폼 (쉼표 구분)
프로젝트 소개	어떻게 만들었는지, 어떤 부분에서 고민했는지 (300자 이내)
한 줄 회고	이번 주에 배운 것 또는 아쉬운 점 한 문장

⚖️

평가 기준

Section 05 — Evaluation

🚀

완료 여부

배포된 URL이 실제로 존재하고 접근 가능한가

40%

✨

개성 표현

나만의 목소리·취향·스토리가 느껴지는가

30%

👥

커뮤니티 투표

익명 투표, 주차당 1인 최대 5표

30%

* 점수가 같을 경우 제출 시각이 빠른 순으로 정렬합니다.

🛠️

권장 기술 스택

Section 06 — Recommended Stack

🌐 HTML5 입문

🎨 CSS3 / Flexbox / Grid 입문

⚡ JavaScript (선택) 선택

☁️ Cloudflare Pages 배포 필수

🐙 GitHub (선택) 소스

React, Vue, Svelte 등 프레임워크를 사용해도 좋습니다. 단, 기술보다 완성에 집중하세요. Cloudflare Pages는 HTML 파일을 드래그&드롭만 해도 배포됩니다.

☁️

Cloudflare Pages 배포 가이드

Section 07 — Deployment Guide

배포(Deploy)란 내 컴퓨터에만 있던 파일을 인터넷 서버에 올려 전 세계 누구나 URL로 접근할 수 있게 만드는 과정입니다.
처음엔 낯설지만 한 번 해보면 정말 별거 아닙니다. 아래 세 가지 방법 중 편한 것을 선택하세요.

파일을 브라우저에 던지기만 하면 됩니다. 코드 한 줄 없이 가능한 가장 빠른 방법입니다.
단, 파일을 수정할 때마다 다시 올려야 합니다. 자동화를 원한다면 방법 B를 추천합니다.

Cloudflare 계정 만들기
dash.cloudflare.com 접속 → "Sign up" 버튼 → 이메일 주소 + 비밀번호 입력 → "Create Account" → 받은 편지함에서 인증 링크 클릭

💡 팁: 이미 계정이 있다면 "Log in"으로 바로 들어가세요. Google 계정으로 소셜 로그인도 됩니다.

✅ 성공: 대시보드 화면에 "Welcome to Cloudflare" 또는 계정 이름이 보이면 정상입니다.

Pages 메뉴 찾기
대시보드 왼쪽 메뉴에서 "Workers & Pages"를 클릭 → 화면 상단 "Pages" 탭 클릭 → 오른쪽 파란색 "Create a project" 버튼 클릭

⚠️ 주의: "Workers" 탭이 아니라 반드시 "Pages" 탭이어야 합니다. 메뉴 구조가 비슷해서 헷갈릴 수 있습니다.

Direct Upload 선택 & 프로젝트 이름 짓기
"Create a project" 화면에서 "Direct Upload" 탭 클릭 (기본은 Git 연동으로 되어 있습니다) → "Project name" 입력란에 이름 입력 → "Create Project" 클릭

💡 팁: 프로젝트 이름이 곧 URL이 됩니다. 예: my-portfolio → my-portfolio.pages.dev
영문 소문자·숫자·하이픈(-)만 사용 가능합니다. 한글, 특수문자, 공백은 안 됩니다.

파일 업로드
점선으로 된 업로드 영역에 내 컴퓨터의 HTML 파일 또는 프로젝트 폴더를 드래그해서 놓으세요.

⚠️ 주의: index.html 파일이 반드시 최상위에 있어야 합니다. "my-site" 폴더 안에 index.html이 있다면 my-site 폴더째로 올리세요. index.html이 두 단계 안에 들어가 있으면 페이지가 열리지 않습니다.

✅ 성공: 파일 목록이 나타나고 index.html이 보이면 준비된 것입니다.

배포 실행
파일 목록이 정상적으로 보이면 "Deploy site" 버튼을 클릭하세요. 20~40초 정도 기다려 주세요. 진행 바가 채워집니다.

✅ 성공: "Success" 또는 초록색 체크 표시와 함께 배포 완료 화면이 나타납니다.

내 사이트 방문하기
화면에 표시된 URL(예: my-portfolio.pages.dev)을 클릭하세요. 브라우저에서 내가 만든 페이지가 보이면 성공입니다! 이 URL을 복사해서 카카오톡·디스코드로 공유해 보세요.

💡 팁: 반영이 느릴 때는 브라우저에서 Ctrl+Shift+R (Mac: Cmd+Shift+R) 로 강제 새로고침하세요.

수정 후 재배포하는 방법
사이트를 수정한 뒤 다시 올리는 방법:
1. Cloudflare 대시보드 → Pages → 내 프로젝트 클릭
2. "Deployments" 탭 → "Create new deployment" 버튼
3. 수정된 파일을 다시 드래그&드롭 → "Deploy site"
→ 30초 후 변경사항이 반영됩니다.

처음 설정에 10분이 걸리지만, 이후로는 파일을 저장하고 업로드만 하면 자동으로 배포됩니다.
실제 개발자들이 사용하는 방식이며, W2~W4에서 계속 같은 환경을 쓸 수 있어 강력 권장합니다.

GitHub 계정 만들기
github.com 접속 → "Sign up" 클릭 → 이메일, 비밀번호, 사용자명(username) 입력 → 이메일 인증 완료

💡 팁: 사용자명은 공개됩니다. github.com/사용자명 형태로 내 페이지가 생깁니다. 실명보다는 닉네임이나 영문 이름 조합을 추천합니다.

✅ 성공: 로그인 후 대시보드가 보이면 준비 완료입니다.

새 저장소(Repository) 만들기
우측 상단 "+" 아이콘 → "New repository" 클릭 → Repository name 입력 (예: my-portfolio) → "Public" 선택 → "Create repository" 클릭

⚠️ 주의: "Private"으로 설정하면 Cloudflare가 코드를 읽을 수 없어 연동이 안 됩니다. 반드시 Public을 선택하세요.

✅ 성공: github.com/사용자명/my-portfolio 페이지가 열리면 저장소가 만들어진 것입니다.

파일 GitHub에 올리기
저장소 페이지에서 "Add file" → "Upload files" 클릭 → index.html과 CSS, 이미지 파일을 드래그해서 올리기 → "Commit changes" 버튼 클릭

💡 팁: 터미널(git 명령어)을 몰라도 됩니다! GitHub 웹사이트에서 직접 파일을 올릴 수 있습니다. GitHub Desktop 앱을 써도 좋습니다.

✅ 성공: 저장소 파일 목록에 index.html이 보이면 완료입니다.

Cloudflare Pages에서 GitHub 연동 시작
dash.cloudflare.com → 좌측 메뉴 "Workers & Pages" → "Pages" 탭 → "Create a project" → "Connect to Git" 탭 클릭 → "Connect GitHub" 버튼 클릭

GitHub 권한 허용 (처음 연동의 핵심 단계)
GitHub 로그인 팝업 창이 열립니다 → GitHub 계정 선택 후 "Authorize Cloudflare Pages" 초록색 버튼 클릭 → "Only select repositories" 선택 후 방금 만든 저장소만 선택하면 더 안전합니다.

⚠️ 팝업이 안 열릴 때: 브라우저 주소창 오른쪽에 팝업 차단 아이콘(🚫)이 있습니다. 클릭 후 "팝업 허용"을 선택하고 다시 시도하세요.

💡 팁: "Authorize"는 Cloudflare가 내 GitHub 저장소 코드를 읽을 수 있게 허용하는 것입니다. 코드를 수정하거나 삭제하는 권한이 아닙니다. 안전합니다.

✅ 성공: 팝업이 닫히고 Cloudflare 화면으로 돌아오면 연동된 것입니다.

저장소 선택
연동된 GitHub 계정이 보입니다. 방금 만든 저장소를 선택하세요 → "Begin setup" 버튼 클릭

빌드 설정 (중요!)
아래와 같이 설정하세요:
· Project name: 원하는 이름 (URL이 됩니다)
· Production branch: main (기본값 유지)
· Framework preset: None
· Build command: (완전히 비워두세요)
· Build output directory: (완전히 비워두세요)

⚠️ 주의: 빌드 설정을 채우면 "Build failed" 오류가 납니다. 순수 HTML/CSS 파일이라면 빌드 과정이 필요 없습니다. 모두 비워두는 것이 정답입니다.

💡 팁: React나 Next.js를 사용한다면 Framework preset에서 선택하면 자동으로 채워집니다.

배포 완료
"Save and Deploy" 버튼 클릭 → 1~2분 기다리면 배포가 완료됩니다.

✅ 성공: 초록색 체크와 함께 *.pages.dev URL이 표시됩니다. URL을 클릭해 내 사이트를 확인하세요!

💡 이제 수정할 때마다 자동으로 배포됩니다!
1. 내 컴퓨터에서 index.html 수정
2. GitHub에 업로드 (Upload files → Commit changes)
3. Cloudflare Pages가 감지 → 자동 배포 시작 (1~2분)
4. 사이트 새로고침 → 변경사항 반영 완료
→ 매번 Cloudflare 대시보드에 접속할 필요가 없습니다!

🤖 AI가 코드를 대신 만들고, GitHub에 올리고, Cloudflare가 자동 배포합니다.
Firebase Studio(브라우저 기반 IDE)에서 Gemini AI에게 "Vite + React 앱 만들어서 GitHub에 올려줘"라고 말하면 됩니다.
GitHub + Cloudflare Pages를 먼저 연결해 두면 Push 한 번으로 자동 배포까지 완성됩니다.

GitHub 저장소(Repo) 만들기
github.com 접속 → 우측 상단 "+" → "New repository" 클릭
· Repository name: 원하는 이름 입력 (예: my-ai-site)
· "Add a README file" 체크박스 ON ← 중요
· "Create repository" 버튼 클릭

💡 팁: README를 ON으로 해야 저장소에 파일이 생겨서 Firebase Studio에서 바로 불러올 수 있습니다.

✅ 성공: github.com/사용자명/my-ai-site 페이지가 열리고 README.md 파일이 보이면 완료입니다.

Cloudflare Pages에 GitHub 저장소 연결
dash.cloudflare.com → 좌측 메뉴 "Workers & Pages" → 하단 "Get started" 클릭
→ "Import an existing Git repository" → "Get started" 클릭
→ "Connect GitHub" 클릭 → GitHub 로그인 팝업이 열림
→ "Authorize Cloudflare Pages" 클릭
→ Repository access: "All repositories" 선택 → "Save" 클릭

⚠️ 이메일 인증이 필요할 수 있습니다: "Verify via email" 화면이 나오면 Cloudflare 가입 이메일에서 코드를 복사해 입력하세요.

⚠️ 팝업이 안 열릴 때: 주소창 오른쪽 팝업 차단 아이콘(🚫) 클릭 → "팝업 허용" 선택 후 다시 시도하세요.

💡 빌드 설정: Framework preset: None, Build command: npm run build, Output directory: dist
→ "Save and Deploy" 클릭 (아직 빌드 오류가 나도 괜찮습니다. 3단계에서 AI가 코드를 올리면 자동으로 재배포됩니다)

✅ 성공: Cloudflare Pages 프로젝트가 생성되면 완료입니다. (배포 실패해도 됩니다)

Firebase Studio에서 GitHub 저장소 열기
studio.firebase.google.com 접속 (Google 계정으로 로그인)
→ "Import / Open from GitHub" 클릭
→ 1단계에서 만든 저장소(예: my-ai-site) 선택 → 열기

💡 팁: Firebase Studio는 브라우저에서 실행되는 클라우드 IDE입니다. VS Code처럼 생겼지만 아무것도 설치할 필요가 없습니다.

✅ 성공: 브라우저에 에디터 화면이 열리고 README.md가 보이면 준비 완료입니다.

Gemini CLI 설치 & AI 프롬프트 실행
Firebase Studio 하단 터미널에 아래 명령어를 차례로 입력하세요:

                        # Gemini CLI 설치

                        npm install -g @google/gemini-cli

                        # Gemini AI 실행

                        gemini

Gemini가 실행되면 아래 프롬프트를 그대로 복사해서 붙여넣기하세요:

현재 저장소 루트에 Vite + React + TypeScript 앱을 비대화형으로 생성하고,
설치 → 빌드 → GitHub main/master 브랜치에 push까지 자동 수행하라.
조건:
- 절대 서브폴더 생성 금지 (루트에 생성)
- README.md가 있으면 삭제 가능
- create-vite는 --no-interactive 사용
- npm install 실행
- npm run build 실행하여 dist 생성 확인
- dist/out/.next 중 존재하는 폴더를 OUTPUT_DIR로 자동 감지
- git add → commit → push 자동 수행
- main 브랜치 없으면 master 사용
- 작업 중 멈추지 말 것
마지막에 아래만 출력:
PUSH=done
OUTPUT=dist
NEXT=Cloudflare will auto deploy

⚠️ 화면이 멈춘 것처럼 보일 때:
· "Interactive shell awaiting input..." 메시지가 나오면 Tab 키를 1번만 누르고 기다립니다.
· "Yes / Allow once / Allow for this session" 승인 메시지가 나오면 Allow 계열을 선택하세요.
· 이 외에는 건드리지 말고 기다리면 됩니다. AI가 알아서 진행합니다.

✅ 성공: 터미널에 PUSH=done이 출력되면 GitHub에 코드가 올라간 것입니다.

Cloudflare 자동 배포 확인
Push가 완료되면 Cloudflare Pages가 자동으로 변경을 감지하고 빌드를 시작합니다.
dash.cloudflare.com → Workers & Pages → 내 프로젝트 → "Deployments" 탭에서 진행 상황을 확인하세요.

💡 배포 흐름 요약:
Gemini가 코드 생성 → GitHub push → Cloudflare 자동 감지 → 빌드(npm run build) → dist 폴더 배포 → *.pages.dev URL 발급

✅ 성공: 초록색 체크와 함께 your-project.pages.dev URL이 생성되면 완료! 클릭해서 AI가 만든 내 사이트를 확인하세요 🎉

🎬 영상으로 따라하기 — 전체 과정 실시간 가이드

GitHub 레포 생성 → Cloudflare 연결 → Firebase Studio + Gemini CLI 실행 → 자동 배포까지 실시간으로 확인할 수 있습니다.
→ YouTube에서 보기

📚

도움이 되는 자료

Section 07 — Resources

📖

MDN — HTML 배우기

developer.mozilla.org/ko/docs/Learn/HTML

↗

🎨

MDN — CSS 배우기 (Flexbox, Grid 포함)

developer.mozilla.org/ko/docs/Learn/CSS

↗

☁️

Cloudflare Pages — 드래그&드롭 배포 (초급)

developers.cloudflare.com/pages/get-started/direct-upload

↗

🐙

Cloudflare Pages — GitHub 연동 자동 배포

developers.cloudflare.com/pages/get-started/git-integration

↗

❓

자주 묻는 질문

Section 08 — FAQ

완전 초보인데 첫 주부터 참여해도 될까요? ▾

네, W1은 입문 난이도로 설계되었습니다. HTML 파일 하나만 만들어도 충분합니다. 에디터(VS Code)를 설치하고 메모장처럼 작성한 HTML을 GitHub Pages에 올리는 것만으로 조건을 충족합니다.

기존에 만들어둔 포트폴리오를 제출해도 되나요? ▾

챌린지 기간 중 새로 만들거나, 기존 것을 이번 주 크게 개선한 경우라면 괜찮습니다. 하지만 변경 사항이 거의 없는 오래된 프로젝트 그대로 제출하는 것은 커뮤니티 정신에 맞지 않습니다.

React나 Next.js로 만들어도 입문 챌린지를 통과할 수 있나요? ▾

물론입니다. 기술 스택에는 제한이 없습니다. 다만 W1의 핵심은 "완성된 URL"이므로, 복잡한 스택 때문에 배포를 완료하지 못하는 상황을 피하세요.

마감 이후에 제출하면 어떻게 되나요? ▾

마감 후 제출은 리더보드 점수에 포함되지 않습니다. 하지만 커뮤니티 피드에는 올라가며 피드백을 받을 수 있습니다. 완성 자체가 가장 중요합니다.

배포 URL이 나중에 바뀌면 수정할 수 있나요? ▾

마감 전까지는 제출 페이지에서 수정 가능합니다. 마감 이후에는 커뮤니티 Discord에서 운영진에게 요청해 주세요.

⚡

Week 2 🔒 잠김 성장

인터랙션으로 차별화하라

기간: 2주차 월요일 ~ 일요일 23:59

📋

챌린지 개요

Section 01 — Overview

사용자와 '대화하는' 앱을 만드세요. Todo·메모·타이머·계산기 등 어떤 주제든 좋습니다. 중요한 건 당신만의 킥(Kick) 하나 — 한 문장으로 설명할 수 있는 차별화 포인트가 있어야 합니다.

🎯

학습 목표

Section 02 — Objectives

JavaScript 이벤트 처리 — 클릭·입력·키보드 이벤트를 다루는 패턴을 익힙니다.

상태 관리 — 앱의 데이터 흐름과 UI 동기화 원리를 이해합니다.

LocalStorage — 브라우저 저장소를 활용해 데이터를 영속화합니다.

컴포넌트 설계 — 재사용 가능한 UI 단위로 코드를 구조화합니다.

✅

필수 요구사항

Section 03 — Requirements

✓

상태가 있는 인터랙티브 앱 — 사용자 입력에 반응하는 UI를 구현하세요.

✓

LocalStorage 데이터 유지 — 새로고침 후에도 데이터가 남아있어야 합니다.

✓

모바일 반응형 — 모든 기능이 모바일에서도 작동해야 합니다.

✓

나만의 킥 — 한 문장으로 설명 가능한 차별화 포인트를 제출 폼에 명시하세요.

⚖️

평가 기준

Section 05 — Evaluation

⚡

동작 여부

핵심 기능이 에러 없이 작동하는가

30%

💡

킥의 창의성과 선명함

차별화 포인트가 명확하고 독창적인가

35%

💻

코드 완성도

가독성, 구조, 에러 처리

15%

👥

커뮤니티 투표

익명 투표, 주차당 1인 최대 5표

20%

🛠️

권장 기술 스택

Section 06 — Recommended Stack

⚡Vanilla JS입문

⚛️React중급

💚Vue 3중급

📤

제출 형식

Section 04 — Submission Format

항목	내용
프로젝트 제목	앱을 대표하는 한 줄 제목
한 줄 설명	이 앱이 무엇인지 한 문장으로 (최대 80자)
배포 URL	실제로 접근 가능한 HTTPS 링크 (필수)
나만의 킥(Kick)	한 문장으로 설명 가능한 차별화 포인트 (제출폼 "한 줄 소개"에 기입)
기술 스택	사용한 언어·프레임워크·배포 플랫폼
프로젝트 소개	어떤 문제를 해결하는지, 킥이 왜 특별한지 (300자 이내)
한 줄 회고	이번 주 배운 것 또는 아쉬운 점 한 문장

☁️

Cloudflare Pages 배포 가이드

Section 07 — Deployment Guide

배포(Deploy)란 내 컴퓨터에만 있던 파일을 인터넷 서버에 올려 전 세계 누구나 URL로 접근할 수 있게 만드는 과정입니다.
처음엔 낯설지만 한 번 해보면 정말 별거 아닙니다. 아래 두 가지 방법 중 편한 것을 선택하세요.

Cloudflare 계정 만들기
dash.cloudflare.com 접속 → "Sign up" 버튼 → 이메일 주소 + 비밀번호 입력 → "Create Account" → 받은 편지함에서 인증 링크 클릭

💡 팁: 이미 계정이 있다면 "Log in"으로 바로 들어가세요. Google 계정으로 소셜 로그인도 됩니다.

✅ 성공: 대시보드 화면에 "Welcome to Cloudflare" 또는 계정 이름이 보이면 정상입니다.

Pages 메뉴 찾기
대시보드 왼쪽 메뉴에서 "Workers & Pages"를 클릭 → 화면 상단 "Pages" 탭 클릭 → 오른쪽 파란색 "Create a project" 버튼 클릭

⚠️ 주의: "Workers" 탭이 아니라 반드시 "Pages" 탭이어야 합니다. 메뉴 구조가 비슷해서 헷갈릴 수 있습니다.

💡 팁: 프로젝트 이름이 곧 URL이 됩니다. 예: my-app → my-app.pages.dev
영문 소문자·숫자·하이픈(-)만 사용 가능합니다. 한글, 특수문자, 공백은 안 됩니다.

파일 업로드
점선으로 된 업로드 영역에 내 컴퓨터의 HTML 파일 또는 프로젝트 폴더를 드래그해서 놓으세요.

✅ 성공: 파일 목록이 나타나고 index.html이 보이면 준비된 것입니다.

배포 실행
파일 목록이 정상적으로 보이면 "Deploy site" 버튼을 클릭하세요. 20~40초 정도 기다려 주세요. 진행 바가 채워집니다.

✅ 성공: "Success" 또는 초록색 체크 표시와 함께 배포 완료 화면이 나타납니다.

내 사이트 방문하기
화면에 표시된 URL을 클릭하세요. 브라우저에서 내가 만든 페이지가 보이면 성공입니다! 이 URL을 복사해서 카카오톡·디스코드로 공유해 보세요.

💡 팁: 반영이 느릴 때는 브라우저에서 Ctrl+Shift+R (Mac: Cmd+Shift+R) 로 강제 새로고침하세요.

GitHub 계정 만들기
github.com 접속 → "Sign up" 클릭 → 이메일, 비밀번호, 사용자명 입력 → 이메일 인증 완료

✅ 성공: 로그인 후 대시보드가 보이면 준비 완료입니다.

새 저장소(Repository) 만들기
우측 상단 "+" 아이콘 → "New repository" 클릭 → Repository name 입력 → "Public" 선택 → "Create repository" 클릭

⚠️ 주의: "Private"으로 설정하면 Cloudflare가 코드를 읽을 수 없어 연동이 안 됩니다. 반드시 Public을 선택하세요.

파일 GitHub에 올리기
저장소 페이지에서 "Add file" → "Upload files" 클릭 → index.html과 관련 파일을 드래그해서 올리기 → "Commit changes" 버튼 클릭

💡 팁: 터미널(git 명령어)을 몰라도 됩니다! GitHub 웹사이트에서 직접 파일을 올릴 수 있습니다.

GitHub 권한 허용 (처음 연동의 핵심 단계)
GitHub 로그인 팝업 창이 열립니다 → GitHub 계정 선택 후 "Authorize Cloudflare Pages" 초록색 버튼 클릭

⚠️ 팝업이 안 열릴 때: 브라우저 주소창 오른쪽에 팝업 차단 아이콘(🚫)이 있습니다. 클릭 후 "팝업 허용"을 선택하고 다시 시도하세요.

✅ 성공: 팝업이 닫히고 Cloudflare 화면으로 돌아오면 연동된 것입니다.

저장소 선택
연동된 GitHub 계정이 보입니다. 방금 만든 저장소를 선택하세요 → "Begin setup" 버튼 클릭

빌드 설정 (중요!)
· Project name: 원하는 이름 (URL이 됩니다)
· Production branch: main (기본값 유지)
· Framework preset: None
· Build command: (완전히 비워두세요)
· Build output directory: (완전히 비워두세요)

⚠️ 주의: 빌드 설정을 채우면 "Build failed" 오류가 납니다. 순수 HTML/CSS 파일이라면 빌드 과정이 필요 없습니다. 모두 비워두는 것이 정답입니다.

배포 완료
"Save and Deploy" 버튼 클릭 → 1~2분 기다리면 배포가 완료됩니다.

✅ 성공: 초록색 체크와 함께 *.pages.dev URL이 표시됩니다. URL을 클릭해 내 사이트를 확인하세요!

📚

도움이 되는 자료

Section 08 — Resources

📖

MDN — 이벤트 처리 기초

developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events

↗

💾

MDN — Web Storage API (LocalStorage)

developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

CSS Transitions & Animations

developer.mozilla.org/ko/docs/Web/CSS/CSS_transitions

↗

❓

자주 묻는 질문

Section 09 — FAQ

LocalStorage와 sessionStorage의 차이가 뭔가요? ▾

LocalStorage는 브라우저를 닫아도 데이터가 남고, sessionStorage는 탭을 닫으면 사라집니다. W2에서는 새로고침 후 데이터가 유지되어야 하므로 LocalStorage를 사용하세요.

React 같은 프레임워크를 꼭 써야 하나요? ▾

아닙니다. Vanilla JS로도 충분히 훌륭한 인터랙티브 앱을 만들 수 있습니다. 오히려 프레임워크 없이 DOM 조작을 직접 경험하는 것이 학습에 더 좋을 수 있습니다.

"킥(Kick)"이 너무 평범한 것 같은데 괜찮을까요? ▾

괜찮습니다. 중요한 건 "한 문장으로 명확하게 설명할 수 있는가"입니다. "다크모드를 지원하는 Todo 앱"처럼 구체적이면 충분합니다.

기존에 만든 인터랙티브 앱을 제출해도 되나요? ▾

W1과 마찬가지로, 이번 주 새로 만들거나 크게 개선한 경우에만 인정됩니다.

🌍

Week 3 🔒 잠김 성장

외부 세계와 연결하기

기간: 3주차 월요일 ~ 일요일 23:59

📋

챌린지 개요

Section 01 — Overview

혼자 돌아가는 앱을 넘어 외부 API와 연결하세요. 날씨·지도·뉴스·AI·금융 등 어떤 외부 서비스를 연동하든 좋습니다.

🎯

학습 목표

Section 02 — Objectives

REST API 연동 — fetch 또는 axios로 외부 데이터를 가져옵니다.

비동기 처리 — Async/Await 패턴으로 비동기 코드를 깔끔하게 작성합니다.

에러 핸들링 — 네트워크 오류·로딩·빈 상태를 사용자 친화적으로 처리합니다.

환경변수 관리 — API 키를 코드에 노출하지 않고 안전하게 관리합니다.

✅

필수 요구사항

Section 03 — Requirements

✓

외부 API 1개 이상 — 오픈 API 또는 AI API와 실시간 연동하세요.

✓

3가지 UX 상태 처리 — 로딩, 에러, 빈 상태를 UI로 명확하게 표시하세요.

✓

HTTPS 배포 — 보안 연결을 통해 배포하세요.

🛠️

권장 기술 스택

Section 06 — Recommended Stack

🌐Fetch API / Axios기본

🤖OpenAI / GeminiAI

☁️OpenWeatherMap무료

🐙GitHub API무료

📤

제출 형식

Section 04 — Submission Format

항목	내용
프로젝트 제목	앱을 대표하는 한 줄 제목
한 줄 설명	이 앱이 무엇인지 한 문장으로 (최대 80자)
배포 URL	실제로 접근 가능한 HTTPS 링크 (필수)
연동한 API	사용한 외부 API 이름 및 서비스명
기술 스택	사용한 언어·프레임워크·배포 플랫폼
프로젝트 소개	어떤 외부 데이터를 어떻게 활용했는지 (300자 이내)
한 줄 회고	비동기 처리에서 겪은 경험 한 문장

⚖️

평가 기준

Section 05 — Evaluation

🌐

API 연동 완성도

실제 외부 데이터가 화면에 표시되는가

35%

⚡

3가지 UX 상태 처리

로딩·에러·빈 상태가 모두 구현되었는가

25%

🔒

API 키 보안

코드에 API 키가 노출되지 않았는가

20%

👥

커뮤니티 투표

익명 투표, 주차당 1인 최대 5표

20%

☁️

Cloudflare Pages 배포 가이드

Section 07 — Deployment Guide

Cloudflare 계정 만들기
dash.cloudflare.com 접속 → "Sign up" 버튼 → 이메일 주소 + 비밀번호 입력 → "Create Account" → 받은 편지함에서 인증 링크 클릭

✅ 성공: 대시보드 화면에 "Welcome to Cloudflare" 또는 계정 이름이 보이면 정상입니다.

Pages 메뉴 찾기
대시보드 왼쪽 메뉴에서 "Workers & Pages"를 클릭 → 화면 상단 "Pages" 탭 클릭 → 오른쪽 파란색 "Create a project" 버튼 클릭

⚠️ 주의: "Workers" 탭이 아니라 반드시 "Pages" 탭이어야 합니다.

Direct Upload 선택 & 프로젝트 이름 짓기
"Direct Upload" 탭 클릭 → "Project name" 입력 → "Create Project" 클릭

💡 팁: 프로젝트 이름이 곧 URL이 됩니다. 영문 소문자·숫자·하이픈(-)만 사용 가능합니다.

파일 업로드
점선으로 된 업로드 영역에 HTML 파일 또는 프로젝트 폴더를 드래그해서 놓으세요.

⚠️ 주의: index.html 파일이 반드시 최상위에 있어야 합니다. 폴더 안에 있다면 폴더째로 올리세요.

✅ 성공: 파일 목록이 나타나고 index.html이 보이면 준비된 것입니다.

배포 실행 & 내 사이트 확인
"Deploy site" 버튼 클릭 → 20~40초 대기 → 완료 후 표시된 URL 클릭하여 확인

✅ 성공: "Success" 또는 초록색 체크 표시와 함께 배포 완료 화면이 나타납니다.

수정 후 재배포하는 방법
1. Cloudflare 대시보드 → Pages → 내 프로젝트 클릭
2. "Deployments" 탭 → "Create new deployment" 버튼
3. 수정된 파일을 다시 드래그&드롭 → "Deploy site"
→ 30초 후 변경사항이 반영됩니다.

GitHub 계정 만들기
github.com 접속 → "Sign up" 클릭 → 이메일, 비밀번호, 사용자명 입력 → 이메일 인증 완료

✅ 성공: 로그인 후 대시보드가 보이면 준비 완료입니다.

새 저장소(Repository) 만들기
우측 상단 "+" 아이콘 → "New repository" 클릭 → Repository name 입력 → "Public" 선택 → "Create repository" 클릭

⚠️ 주의: "Private"으로 설정하면 Cloudflare가 코드를 읽을 수 없어 연동이 안 됩니다. 반드시 Public을 선택하세요.

파일 GitHub에 올리기
저장소 페이지에서 "Add file" → "Upload files" 클릭 → index.html과 관련 파일을 드래그해서 올리기 → "Commit changes" 버튼 클릭

💡 팁: 터미널(git 명령어)을 몰라도 됩니다! GitHub 웹사이트에서 직접 파일을 올릴 수 있습니다.

GitHub 권한 허용 (처음 연동의 핵심 단계)
GitHub 로그인 팝업 창이 열립니다 → GitHub 계정 선택 후 "Authorize Cloudflare Pages" 초록색 버튼 클릭

⚠️ 팝업이 안 열릴 때: 브라우저 주소창 오른쪽에 팝업 차단 아이콘(🚫)이 있습니다. 클릭 후 "팝업 허용"을 선택하고 다시 시도하세요.

✅ 성공: 팝업이 닫히고 Cloudflare 화면으로 돌아오면 연동된 것입니다.

저장소 선택 & 빌드 설정
방금 만든 저장소를 선택 → "Begin setup" 클릭 → 아래와 같이 설정:
· Framework preset: None
· Build command: (완전히 비워두세요)
· Build output directory: (완전히 비워두세요)

⚠️ 주의: 빌드 설정을 채우면 "Build failed" 오류가 납니다. 순수 HTML/CSS/JS 파일이라면 모두 비워두는 것이 정답입니다.

배포 완료
"Save and Deploy" 버튼 클릭 → 1~2분 기다리면 배포가 완료됩니다.

✅ 성공: 초록색 체크와 함께 *.pages.dev URL이 표시됩니다. URL을 클릭해 내 사이트를 확인하세요!

💡 이제 수정할 때마다 자동으로 배포됩니다!
1. 내 컴퓨터에서 파일 수정
2. GitHub에 업로드 (Upload files → Commit changes)
3. Cloudflare Pages가 감지 → 자동 배포 시작 (1~2분)
4. 사이트 새로고침 → 변경사항 반영 완료

💡 API 키 환경변수 설정 (Cloudflare Pages)
API 키를 코드에 직접 쓰지 않는 방법:
1. Pages 대시보드 → 내 프로젝트 → "Settings" → "Environment variables"
2. "Add variable" → 변수명: API_KEY / 값: 실제 API 키 입력
3. "Save" 클릭
단, 순수 HTML/JS에서는 환경변수를 직접 읽을 수 없습니다.
API 키가 필요한 서비스는 Cloudflare Workers/Functions를 프록시로 두거나, 인증 없이 쓸 수 있는 공개 API를 선택하는 것을 권장합니다.

📚

도움이 되는 자료

Section 08 — Resources

🌐

MDN — Fetch API 사용 가이드

developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

↗

🤖

OpenAI API 빠른 시작

platform.openai.com/docs/quickstart

↗

☁️

OpenWeatherMap 무료 API

openweathermap.org/api

↗

🐙

GitHub REST API

docs.github.com/ko/rest

↗

🔒

Cloudflare Workers — API 키 숨기기

developers.cloudflare.com/workers/examples/fetch-html

↗

❓

자주 묻는 질문

Section 09 — FAQ

API 키를 코드에 그냥 써도 될까요? ▾

절대 안 됩니다. GitHub에 올리는 순간 전 세계에 공개됩니다. 무료 티어도 악용되면 요금이 발생할 수 있습니다. Cloudflare Workers를 프록시로 사용하거나, 공개 API(키 불필요)를 선택하는 것이 이번 주 핵심 학습 포인트입니다.

무료로 쓸 수 있는 API를 추천해 주세요. ▾

OpenWeatherMap(날씨·무료티어), GitHub API(인증 없이 공개 레포 조회 가능), JSONPlaceholder(연습용 더미 데이터), REST Countries(국가 정보·완전 무료) 등이 좋습니다.

API 응답이 느려서 앱이 버벅거려요. 어떻게 하나요? ▾

로딩 스피너를 보여주고, 응답이 오면 교체하는 패턴을 사용하세요. 필요하다면 debounce로 API 호출 횟수를 줄이는 것도 좋은 경험입니다.

Cloudflare Workers를 써야 하나요? ▾

필수는 아닙니다. 공개 API나 클라이언트 측에서 키 없이 쓸 수 있는 API를 선택하면 Workers 없이도 됩니다. 다만 키가 필요한 API를 쓰려면 Workers 프록시가 필요합니다.

🏆

Week 4 🔒 잠김 마스터

파이널 — 나만의 서비스 출시

기간: 4주차 월요일 ~ 일요일 20:00 (데모데이 당일)

📋

챌린지 개요

Section 01 — Overview

4주간 익힌 모든 것을 쏟아내세요. 자유 주제, 자유 기술 스택. 실제로 사람들이 쓸 수 있는 서비스를 만들고 데모데이에서 발표합니다. 팀 프로젝트도 허용됩니다.

🎯

학습 목표

Section 02 — Objectives

풀스택 아키텍처 — 프론트엔드와 백엔드가 연결된 완전한 앱 구조를 설계합니다.

인증 & DB 연동 — 로그인 또는 데이터베이스를 실제로 붙여봅니다.

데모 발표 — 3분 안에 서비스의 가치를 전달하는 발표를 경험합니다.

✅

필수 요구사항

Section 03 — Requirements

✓

로그인 또는 데이터베이스 중 하나 이상 — 실제 사용자 데이터가 저장되어야 합니다.

✓

실사용 가능한 완성도 — 타인이 실제로 사용할 수 있는 수준이어야 합니다.

✓

데모데이 3분 발표 — 서비스 소개, 기술 스택, 회고를 포함하세요. 팀 프로젝트 허용.

🛠️

권장 기술 스택

Section 06 — Recommended Stack

▲Next.js풀스택

⚡SupabaseDB+Auth

☁️Cloudflare D1고급

▲Vercel배포

📤

제출 형식

Section 04 — Submission Format

항목	내용
프로젝트 제목	서비스 이름
한 줄 설명	"누가 왜 쓰는가" 한 문장 (최대 80자)
배포 URL	실제 서비스 HTTPS 주소 (필수)
GitHub URL	소스 코드 저장소 (선택, 공개 권장)
기술 스택	프론트·백엔드·DB·배포 플랫폼 전체
서비스 소개	어떤 문제를 해결하는지, 핵심 기능은 무엇인지 (500자 이내)
데모 영상/발표자료	3분 데모데이 발표 링크 (YouTube, Loom 등)
한 줄 회고	4주를 마치며 한 줄

⚖️

평가 기준

Section 05 — Evaluation

🚀

실사용 가능성

타인이 실제로 쓸 수 있는 완성도인가

30%

🛠️

기술 구현 수준

DB·인증·API 중 하나 이상 실제 동작

25%

🎤

데모 발표

3분 안에 서비스 가치를 명확하게 전달했는가

25%

👥

커뮤니티 투표

익명 투표, 주차당 1인 최대 5표

20%

☁️

Cloudflare Pages 배포 가이드

Section 07 — Deployment Guide

Cloudflare 계정 만들기
dash.cloudflare.com 접속 → "Sign up" 버튼 → 이메일 주소 + 비밀번호 입력 → "Create Account" → 받은 편지함에서 인증 링크 클릭

✅ 성공: 대시보드 화면에 "Welcome to Cloudflare" 또는 계정 이름이 보이면 정상입니다.

Pages 메뉴 찾기
대시보드 왼쪽 메뉴에서 "Workers & Pages"를 클릭 → 화면 상단 "Pages" 탭 클릭 → 오른쪽 파란색 "Create a project" 버튼 클릭

⚠️ 주의: "Workers" 탭이 아니라 반드시 "Pages" 탭이어야 합니다.

Direct Upload 선택 & 프로젝트 이름 짓기
"Direct Upload" 탭 클릭 → "Project name" 입력 → "Create Project" 클릭

💡 팁: 프로젝트 이름이 곧 URL이 됩니다. 영문 소문자·숫자·하이픈(-)만 사용 가능합니다.

파일 업로드
점선으로 된 업로드 영역에 빌드된 파일 폴더를 드래그해서 놓으세요.

💡 팁: Next.js 등 프레임워크는 빌드 후 나오는 out 폴더를 올리세요. (next export 후) 순수 HTML이라면 index.html이 있는 폴더째로 올리세요.

⚠️ 주의: index.html 파일이 반드시 최상위에 있어야 합니다.

✅ 성공: 파일 목록이 나타나고 index.html이 보이면 준비된 것입니다.

배포 실행 & 내 사이트 확인
"Deploy site" 버튼 클릭 → 20~40초 대기 → 완료 후 표시된 URL 클릭하여 확인

✅ 성공: "Success" 또는 초록색 체크 표시와 함께 배포 완료 화면이 나타납니다.

처음 설정에 10분이 걸리지만, 이후로는 파일을 저장하고 업로드만 하면 자동으로 배포됩니다.
실제 개발자들이 사용하는 방식이며, DB와 Functions까지 연동하는 W4에서 특히 강력 권장합니다.

GitHub 계정 만들기
github.com 접속 → "Sign up" 클릭 → 이메일, 비밀번호, 사용자명 입력 → 이메일 인증 완료

✅ 성공: 로그인 후 대시보드가 보이면 준비 완료입니다.

새 저장소(Repository) 만들기
우측 상단 "+" 아이콘 → "New repository" 클릭 → Repository name 입력 → "Public" 선택 → "Create repository" 클릭

⚠️ 주의: "Private"으로 설정하면 Cloudflare가 코드를 읽을 수 없어 연동이 안 됩니다. 반드시 Public을 선택하세요.

파일 GitHub에 올리기
저장소 페이지에서 "Add file" → "Upload files" 클릭 → 프로젝트 파일을 드래그해서 올리기 → "Commit changes" 버튼 클릭

💡 팁: 터미널(git 명령어)을 몰라도 됩니다! GitHub 웹사이트에서 직접 파일을 올릴 수 있습니다.

GitHub 권한 허용 (처음 연동의 핵심 단계)
GitHub 로그인 팝업 창이 열립니다 → GitHub 계정 선택 후 "Authorize Cloudflare Pages" 초록색 버튼 클릭

⚠️ 팝업이 안 열릴 때: 브라우저 주소창 오른쪽에 팝업 차단 아이콘(🚫)이 있습니다. 클릭 후 "팝업 허용"을 선택하고 다시 시도하세요.

✅ 성공: 팝업이 닫히고 Cloudflare 화면으로 돌아오면 연동된 것입니다.

저장소 선택 & 빌드 설정
방금 만든 저장소를 선택 → "Begin setup" 클릭 → 아래와 같이 설정:
· Framework preset: 사용한 프레임워크 선택 (Next.js, React 등) 또는 None
· Build command: npm run build (프레임워크 사용 시) 또는 비워두기
· Build output directory: 프레임워크에 따라 자동 입력되거나 비워두기

💡 팁: Framework preset에서 선택하면 빌드 설정이 자동으로 채워집니다. 순수 HTML이라면 모두 비워두세요.

배포 완료
"Save and Deploy" 버튼 클릭 → 1~2분 기다리면 배포가 완료됩니다.

✅ 성공: 초록색 체크와 함께 *.pages.dev URL이 표시됩니다. URL을 클릭해 내 사이트를 확인하세요!

💡 D1 데이터베이스 연결
데이터베이스가 필요하다면:
1. Workers & Pages → D1 → "Create database" → 이름 입력 → "Create"
2. SQL Editor에서 테이블 생성: CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT);
3. 내 Pages 프로젝트 → "Settings" → "Bindings" → "Add" → "D1 database"
4. Variable name: DB / D1 database: 방금 만든 DB 선택 → "Save"
5. functions/api/ 폴더의 JS 파일에서 env.DB.prepare("SELECT * FROM users").all() 로 쿼리
→ Cloudflare Pages Functions는 functions/ 폴더의 파일이 자동으로 API 엔드포인트가 됩니다.

📚

도움이 되는 자료

Section 08 — Resources

☁️

Cloudflare D1 시작하기

developers.cloudflare.com/d1/get-started

↗

☁️

Cloudflare Pages Functions

developers.cloudflare.com/pages/functions

↗

⚡