과제 프로젝트 1에서 기획한 서비스를 실제로 만들어 인터넷에 공개한다. 이 과제의 결과물은 슬라이드 속 아이디어가 아니라, 주소를 입력하면 실제로 열리는 서비스다.
npm run build 결과 폴더가 배포 대상이 된다.프로젝트명.pages.dev 주소를 연다. 이 주소가 제출물이다. 수정 후 같은 프로젝트에 다시 업로드하면 즉시 갱신된다.| 방법 | 설명 | 알맞은 경우 |
|---|---|---|
| 브라우저 내 모델 | Transformers.js 등으로 모델을 브라우저에서 직접 실행. 서버와 API 키가 아예 필요 없다 | 분류·임베딩·소형 모델로 충분한 서비스 |
| Workers 프록시 + 상용 API | Cloudflare Workers(무료 티어)에 API 키를 환경변수로 숨기고, 프런트는 Workers만 호출. Workers AI의 무료 모델도 같은 방식으로 쓸 수 있다 | LLM 생성·대화가 핵심인 서비스 |
| 외부 데모 연동 | Hugging Face Spaces(Gradio)에 모델을 올리고 페이지에서 연결 | 파이썬 모델(실습 노트북 산출물)을 그대로 살리고 싶을 때 |
브라우저에서 실행되는 JS에 적힌 키는 소스 보기로 누구나 꺼내 갈 수 있고, 유출된 키는 과금 폭탄으로 돌아온다. 상용 API를 쓴다면 반드시 Workers 같은 서버 측에 키를 두고 프록시로 호출할 것. 제출물에 키가 노출되어 있으면 감점한다.
| 항목 | 내용 | 배점 |
|---|---|---|
| 배포 동작 | 제출한 URL이 실제로 열리고 핵심 기능이 동작하는가 | 25 |
| AI 기능 구현 | 핵심 AI 기능의 구현 품질(프롬프트 설계, 모델 활용의 적절성 포함) | 30 |
| 기획 충실도 | 과제 1 기획 대비 구현 범위, 변경했다면 그 사유가 타당한가 | 15 |
| UI·UX | 처음 온 사용자가 설명 없이 쓸 수 있는가 | 15 |
| 보고서·시연 | 결과 보고서의 완성도와 시연 준비 | 15 |
LLM 호출 코드는 실습 02c(Claude API)와 실습 02b(로컬 모델 + Gradio)가 그대로 출발점이 된다. 프롬프트 설계와 환각 대응은 모듈 02를 다시 볼 것.
배포가 안 될 때는 브라우저 개발자 도구(F12)의 Console 탭 에러부터 읽는 습관을 들이자. 에러 메시지를 그대로 검색하거나 AI에게 물으면 대부분 풀린다.