🌐
Week 1
진행 중
입문
나를 소개하는 단 하나의 페이지
기간: 이번 주 월요일 ~ 일요일 23:59
챌린지 개요
Section 01 — Overview
나의 이야기·경험·관심사를 담은 퍼스널 웹사이트를 만들고 인터넷에 직접 배포하세요. 기술 스택 제한 없음. 완벽함보다 완성이 먼저입니다. URL 하나를 세상에 내놓는 경험이 첫 주의 전부입니다.
학습 목표
Section 02 — Objectives
1
HTML/CSS 구조 이해 — 웹 페이지의 뼈대인 HTML과 스타일을 담당하는 CSS의 기본 구조를 익힙니다.
2
반응형 레이아웃 — Flexbox 또는 Grid를 활용해 모바일과 데스크톱 모두에서 깔끔하게 보이는 레이아웃을 구성합니다.
3
Cloudflare Pages 배포 경험 — HTML 파일을 Cloudflare Pages에 드래그&드롭하거나 CLI로 배포해 실제로 접근 가능한 URL을 발급받습니다.
필수 요구사항
Section 03 — Requirements
✓
단일 페이지 구성 — SPA 또는 단순 HTML 파일로 나를 소개하는 단일 페이지를 만드세요.
✓
Cloudflare Pages 배포 — Cloudflare Pages에 배포하여
*.pages.dev URL을 만드세요. 커스텀 도메인도 환영합니다.✓
최소 콘텐츠 포함 — 이름, 관심사, 한 줄 자기소개를 반드시 포함하세요.
✓
기본 반응형 — 모바일(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
파일을 브라우저에 던지기만 하면 됩니다. GitHub 없이도 가능한 가장 빠른 방법입니다.
1
2
Workers & Pages → Pages → Create a project 클릭
좌측 메뉴에서 "Workers & Pages" → 상단 "Pages" 탭 → 파란색 "Create a project" 버튼.
좌측 메뉴에서 "Workers & Pages" → 상단 "Pages" 탭 → 파란색 "Create a project" 버튼.
3
"Direct Upload" 탭 선택 → 프로젝트 이름 입력
프로젝트 이름이 곧 URL이 됩니다. 예:
프로젝트 이름이 곧 URL이 됩니다. 예:
my-portfolio → my-portfolio.pages.dev
4
HTML 파일 또는 폴더를 점선 영역에 드래그&드롭
index.html 파일 하나만 있어도 됩니다. CSS·이미지 파일이 있다면 폴더째로 올리세요.
5
"Deploy site" 클릭 → 30초 후 URL 발급 완료 🎉
이후 수정사항은 같은 프로젝트에서 "Deployments → Upload" 로 덮어쓸 수 있습니다.
이후 수정사항은 같은 프로젝트에서 "Deployments → Upload" 로 덮어쓸 수 있습니다.
도움이 되는 자료
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에서 운영진에게 요청해 주세요.