수업 프로젝트가 정말 제출 가능한 상태라면, 교수님이나 평가자, 팀원, 채용 담당자가 ZIP을 내려받고, 올바른 폴더를 찾고, 의존성을 설치하고, 어떤 파일을 열어야 하는지 추측할 필요가 없어야 합니다.
많은 학생 프로젝트에서 더 나은 제출물은 바로 열리는 링크입니다.
모든 과제에 완전한 클라우드 아키텍처가 필요한 것은 아닙니다. 대학, 부트캠프, 해커톤, 동아리 프로젝트 중에는 정적 파일만으로 공개할 수 있는 작업이 많습니다. HTML, CSS, JavaScript, Vite, React, Vue, Astro, 작은 브라우저 게임, UI 연습, 랜딩 페이지, 대시보드, 포트폴리오 실험 등이 그렇습니다. 최종 파일을 브라우저가 서버 프로세스 없이 실행할 수 있다면, 정적 사이트로 호스팅하기에 적합한 경우가 많습니다.
학생 프로젝트 호스팅이 해결해야 할 것
목표는 파일을 어딘가에 올리는 것만이 아닙니다. 실제 평가 상황에서 링크가 제대로 열려야 합니다.
| 필요 | 실제 의미 |
|---|---|
| 쉽게 열기 | 평가자는 ZIP 첨부파일이 아니라 URL을 클릭합니다. |
| 완전한 assets | CSS, 이미지, 폰트, JavaScript, JSON, 생성된 폴더가 공개 URL에서 로드됩니다. |
| 내 노트북 밖에서 테스트 | 휴대폰이나 다른 브라우저에서도 프로젝트가 열립니다. |
| 제출 맥락 | 홈페이지가 무엇을 봐야 하는지 설명합니다. |
| 포트폴리오 재사용 | 같은 링크를 이력서, 포트폴리오, GitHub README, 인턴 지원에 쓸 수 있습니다. |
| 복구 가능성 | 깨진 업데이트를 공개 링크를 바꾸지 않고 교체하거나 롤백할 수 있습니다. |
"내 컴퓨터에서는 돼요"는 충분하지 않습니다. 다른 사람의 환경에서도 열려야 합니다.
어떤 프로젝트가 잘 맞나
정적 호스팅은 최종 결과물이 브라우저에서 직접 로드할 수 있는 파일 묶음일 때 잘 맞습니다.
| 프로젝트 유형 | 업로드 대상 | 참고 |
|---|---|---|
| HTML/CSS 과제 | index.html이 들어 있는 폴더 | 이미지, 폰트, CSS 폴더도 포함합니다. |
| JavaScript 연습 | HTML, JS, CSS, assets 폴더 | 계산기, 게임, 퀴즈, todo 앱, 차트, UI 연습에 적합합니다. |
| Vite 프로젝트 | npm run build 후 dist | 공개 링크가 목적이라면 src를 올리지 않습니다. |
| React 프로젝트 | build 출력 폴더 | 공개 링크는 컴파일된 정적 파일을 제공해야 합니다. |
| Vue 프로젝트 | build 후 dist | 공개 후 route와 asset 경로를 확인합니다. |
| 정적 포트폴리오 | 포트폴리오 폴더 또는 build 출력 | 스크린샷만 두지 말고 프로젝트 설명도 둡니다. |
| 해커톤 frontend | 정적 build 출력 | API나 backend가 필요하면 별도로 호스팅합니다. |
정적 호스팅은 PHP, Java, Python, Ruby, 데이터베이스 서버, 백그라운드 작업, 인증 서버를 실행하지 않습니다. frontend는 정적으로 공개할 수 있지만 backend와 database는 다른 곳에서 실행해야 합니다.
많은 학생이 GitHub Pages부터 떠올리는 이유
수업에서 GitHub를 이미 사용한다면 GitHub Pages는 익숙합니다. GitHub 한국어 문서도 사용자, 조직, 프로젝트에 대한 웹사이트를 GitHub 리포지토리에서 직접 호스트할 수 있다고 설명합니다. 코드가 리포지토리에 잘 정리된 개발 프로젝트라면 좋은 선택일 수 있습니다.
하지만 repository-first 흐름이 항상 가장 빠른 제출 방식은 아닙니다.
- 프로젝트가 다운로드한 템플릿, AI export, 디자인 폴더에서 시작되었습니다.
- 리포지토리를 정리하기 전에 먼저 제출 링크가 필요합니다.
- 첫 데모에서는 commit history보다 작동 화면이 더 중요합니다.
- 최종 공개 폴더는 build 후 만들어지며 source 폴더와 다릅니다.
- 팀원이 repository 소유자가 아니어도 공개해야 합니다.
Cloudflare Pages도 미리 build된 assets와 로컬 컴퓨터 업로드를 Direct Upload로 안내합니다. Firebase Hosting은 빠르고 안전한 웹 앱 호스팅을 제공한다고 설명합니다. 학생 프로젝트에서는 먼저 열리는 URL을 만들고, 필요해질 때 운영 방식을 더 갖추는 순서가 자연스러운 경우가 많습니다.
과제 제출을 위한 깔끔한 흐름
신뢰할 수 있는 링크를 만드는 가장 작은 절차로 시작합니다.
- 프로젝트를 로컬에서 완성합니다.
- 실제로 공개할 폴더를 찾습니다.
- 전체 폴더나 ZIP을 업로드합니다.
- 생성된 HTTPS 링크를 시크릿 창에서 엽니다.
- 휴대폰이나 다른 브라우저에서 테스트합니다.
- 과제 제출란에 링크를 붙여 넣습니다.
- 보여줄 만한 프로젝트라면 나중에 포트폴리오에 재사용합니다.
가장 자주 틀리는 단계는 두 번째입니다. 잘못된 폴더를 올리면 대부분 어딘가가 깨집니다.
| Stack | 보통 공개할 것 | 보통 피할 것 |
|---|---|---|
| HTML/CSS/JS | index.html이 들어 있는 폴더 | assets 없는 index.html 하나만 |
| Vite | dist | src, node_modules |
| React static build | build 또는 framework 출력 | build 전 source 폴더 |
| Vue | dist | source만 있는 project root |
| Astro | dist | build 전 content/source 폴더 |
| Next static export | out | Node 프로세스가 필요한 앱 |
헷갈린다면 index.html과 컴파일된 assets가 있는 폴더를 찾으세요. 업로드하기 전에 정적 preview로 한 번 열어보는 것이 좋습니다.
홈페이지에 넣을 내용
프로젝트 링크를 연 사람이 맥락을 추측하게 만들면 안 됩니다.
상단에 짧은 설명을 둡니다.
| 항목 | 예시 |
|---|---|
| 프로젝트 이름 | Weather Dashboard |
| 수업 또는 이벤트 | Frontend final project, 2026 |
| 기술 스택 | HTML, CSS, JavaScript, OpenWeather API |
| 테스트할 것 | 도시 검색, 단위 변경, 반응형 레이아웃 확인 |
| 알려진 제한 | 데모 API key에 rate limit 있음. 계정 시스템 없음. |
이 설명은 평가자가 올바른 동작을 확인하는 데 도움이 되고, 나중에 채용 담당자가 프로젝트 의도를 빠르게 이해하는 데도 도움이 됩니다.
제출 전에 자주 생기는 문제
깨진 프로젝트 링크는 대부분 단순한 이유로 실패합니다.
| 증상 | 가능한 원인 | 해결 |
|---|---|---|
| 홈페이지가 404 | 공개 root에 index.html이 없음 | index.html을 직접 포함한 폴더를 업로드합니다. |
| CSS가 없음 | 로컬 또는 절대 파일 경로 사용 | 상대 경로를 쓰고 CSS 폴더를 포함합니다. |
| 이미지는 로컬에서만 보임 | 이미지 폴더 누락 또는 대소문자 차이 | 모든 assets를 포함하고 Logo.png와 logo.png를 확인합니다. |
| 버튼이 동작하지 않음 | JavaScript 파일을 찾지 못함 | 공개 URL에서 devtools를 열고 실패한 request를 확인합니다. |
| React/Vue route가 404 | 정적 routing 준비가 안 됨 | 필요하면 hash routing 또는 fallback 전략을 사용합니다. |
| API 호출 실패 | backend 미배포, CORS 차단, 또는 localhost가 남아 있음 | localhost를 실제 API URL로 바꾸고 backend는 별도로 호스팅합니다. |
가장 빠른 테스트는 단순합니다. 로컬 파일을 본 적 없는 기기에서 공개 링크를 여는 것입니다.
Backend가 있는 프로젝트라면
모든 과제가 순수 정적 프로젝트는 아닙니다. Express, Flask, Django, Spring Boot, PHP, Firebase, Supabase, database, login을 쓰는 경우도 있습니다.
그럴 때는 계층을 분리해서 설명합니다.
| 계층 | 위치 |
|---|---|
| 정적 frontend | DeployPages 또는 다른 static host |
| API server | backend host, serverless platform, 수업 지정 환경 |
| Database | managed database 또는 학교/수업 환경 |
| Secret | backend 환경 변수. 공개 frontend 파일에는 두지 않음. |
.env, private key, database credential, 수업에서 받은 secret을 공개 정적 사이트에 올리지 마세요. frontend 파일은 브라우저에서 볼 수 있습니다.
포트폴리오에 쓸 수 있는 링크로 만들기
수업 과제도 공개 페이지가 명확하면 작업 증거가 됩니다.
수업 밖에서 공유하기 전에 다음을 추가합니다.
- 어떤 문제를 풀었고 어떤 접근을 했는지 짧은 설명.
- 본인이 직접 만든 범위.
- 데모에 맥락이 필요할 때만 screenshot.
- 보여줄 수 있는 상태라면 source code 링크.
- demo data, 비활성화된 기능, API 제한 안내.
- 중요한 포트폴리오 프로젝트가 되면 나중에 custom domain.
과제를 완성된 SaaS처럼 포장할 필요는 없습니다. 구체적이고 정직한 설명이 더 신뢰를 줍니다.
DeployPages가 맞는 지점
DeployPages는 먼저 작동하는 HTTPS 링크가 필요할 때 유용합니다.
브라우저에서 정적 폴더, ZIP, HTML 프로젝트, frontend build 출력, AI 생성 페이지, PDF, 작은 게임, 이력서 페이지, 포트폴리오 실험을 공개할 수 있습니다. 프로젝트가 중요해지면 같은 흐름에서 custom domains, analytics, password protection, rollback, CLI deploys로 확장할 수 있습니다.
학생 프로젝트라면 student hosting에서 시작하세요. HTML 파일이나 작은 폴더라면 HTML deployment guide가 더 직접적입니다. 이력서와 포트폴리오 용도라면 resume hosting, portfolio hosting도 참고할 수 있습니다.
제출 전 체크리스트
Moodle, Canvas, Google Classroom, 이메일, 폼에 URL을 붙여 넣기 전에 확인합니다.
index.html또는 정적 entry point가 공개 root에 있습니다.- CSS, JavaScript, 이미지, 폰트, JSON, 생성된 assets가 포함되어 있습니다.
- 링크가 시크릿 창에서 열립니다.
- 링크가 휴대폰에서 열립니다.
- 홈페이지가 프로젝트, 수업, 기술 스택, 확인할 내용을 설명합니다.
- secret, token, private data, 개인 문서가 공개 파일에 없습니다.
- backend 의존성이 있다면 별도 호스팅이라고 설명되어 있습니다.
- 제출하는 URL은 공개 URL이며 로컬 경로나 dashboard URL이 아닙니다.
이 짧은 확인만으로 마감 직전에 시간을 잡아먹는 문제를 크게 줄일 수 있습니다.