프로젝트 1 · 서비스 앱

서비스 앱
구현

아이디어 하나를 골라 오늘 안에 쓸 수 있는 웹 서비스 앱을 만들어 배포하고 갤러리에 제출한다. 메인 실습 흐름(00_flow)의 여섯 단계를 처음부터 끝까지 실전으로 밟는 첫 프로젝트다.

GenAI 특강 · 실습 프로젝트 1기획 → 보드 → 구현 → 배포 → 제출정적 파일 완결프롬프트 복사 지원

목표와 완성 기준

무엇을 만드나

브라우저에서 바로 동작하는 한 화면짜리 서비스 앱. 백엔드 없이 정적 파일로 완결한다.

GOAL · 한 화면짜리 앱

백엔드 없이, 정적 파일 한 세트로 끝나는 앱

이 프로젝트의 목표는 브라우저에서 바로 동작하는 한 화면짜리 서비스 앱이다. 서버·데이터베이스 없이 정적 파일(HTML/CSS/JS 한 세트)만으로 완결한다. 작아 보여도 메인 흐름의 여섯 단계(설치 → 연결 → 기획 → 시각화하며 구현 → 배포 → 제출)를 전부 통과하는 것이 핵심이다.

어떤 앱을 만들지는 자유다. 아래는 장르 안내용 예시일 뿐이고, 자기 업무·관심사에서 고르는 것이 가장 좋다.

장르	예시
계산·변환기	환율 계산기, 연봉 실수령액, 단위 변환
추천·진단	점심 메뉴 추천, 성향 테스트
도구	뽀모도로 타이머, 회의 타이머, 랜덤 추첨기
미니게임	반응속도 테스트, 퀴즈

완성 기준

첫 화면만 봐도 용도를 알 수 있다
핵심 기능 3개 이내가 전부 동작한다
스마트폰에서도 깨지지 않는다

해설

"오늘 안에 배포"가 가능하려면 크기를 통제해야 한다. 기능이 많은 앱이 아니라 끝까지 간 앱이 이 실습의 성공이다. 갤러리에 올라간 배포 주소 하나가, 열 가지 기능이 담긴 미완성 폴더보다 낫다.

00_flow Step 3 적용

기획 — AI 인터뷰

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

STEP · 기획 인터뷰

아이디어 한 줄을 PLAN.md로 바꾼다

메인 흐름 Step 3(AI에게 물어보며 기획)의 기획 인터뷰 프롬프트를 이 프로젝트에 맞게 쓰는 예다. 바로 만들어 달라고 하지 않고, 먼저 질문을 받으며 기획을 좁히는 것이 요령이다.

나는 '점심 메뉴 추천기'를 만들고 싶어. 바로 만들지 말고 기획 인터뷰부터 해줘.
- 누가 어떤 상황에서 쓰는지 나에게 질문해
- 핵심 기능을 3개 이내로 좁혀줘 (예: 오늘 메뉴 뽑기, 카테고리 필터, 최근 결과 기억)
- 화면 구성을 텍스트로 스케치해줘
- PLAN.md로 저장해줘: 목표, 사용자, 핵심 기능, 화면 구성, 만들 순서 5단계

'점심 메뉴 추천기' 부분은 각자 자기 아이디어로 바꾼다. 인터뷰가 끝나면 PLAN.md 파일이 생기는데, 이 파일이 이후 모든 단계(진행 보드, 구현 루프)의 기준이 된다.

좋은 기획의 기준

핵심 기능이 3개 이내다
첫 화면에서 무엇을 하는 서비스인지 보인다
오늘 안에 배포 가능한 크기다

해설

인터뷰 도중 AI의 질문에 답하다 보면 아이디어가 저절로 구체화된다. 답이 막히는 질문이 있다면 그 부분이 기획의 빈칸이라는 신호다. 기능을 늘리자는 제안이 오면 거절하는 것도 기획의 일부다 — 3개 이내 원칙을 지킨다.

00_flow Step 4 적용

진행 보드 만들기

구현을 시작하기 전에 진행 상황 보드부터 만든다. 개발 과정 자체가 눈에 보이게.

STEP · progress.html

구현 전에 보드부터 — PLAN.md의 단계가 노드가 된다

메인 흐름 Step 4(진행과정을 웹 그래프로 시각화하며 구현)의 진행 보드 프롬프트를 그대로 적용한다. PLAN.md의 '만들 순서' 단계들이 노드로 연결된 그래프로 보이고, 상태(대기 회색 / 진행 중 파랑 / 완료 초록)가 색으로 표시되는 progress.html을 먼저 만들게 한다.

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

이후 매 단계가 끝날 때마다 이 파일의 상태를 갱신하게 한다. 갱신 프롬프트 패턴은 00_flow Step 4에 정리되어 있다.

해설

progress.html을 결과물과 같은 폴더에 두고 함께 배포하면, 제출물에서 개발 과정까지 보여줄 수 있다. 무엇을 계획했고 어디까지 왔는지가 한 장으로 보이는 포트폴리오가 된다.

지시 → 확인 → 보드 갱신

구현 루프

한 단계 지시하고, 브라우저로 확인하고, 보드를 갱신한다. 이 반복이 구현의 전부다.

STEP · 구현 시작

PLAN.md 1단계부터 — 뼈대를 세운다

단계별 지시 → 결과 확인 → 보드 갱신을 반복한다. 첫 지시는 앱 뼈대다.

PLAN.md 1단계부터 시작하자. index.html 하나로 동작하는 앱 뼈대를 만들어줘.
- 외부 라이브러리 없이 HTML/CSS/JS만
- 화면 구성은 PLAN.md의 스케치대로
- 스마트폰 화면에서도 깨지지 않게 반응형으로
완성되면 브라우저에서 확인할 방법을 알려주고, progress.html의 1단계를 완료로 갱신해줘.

중간 점검 포인트

매 단계 브라우저로 직접 확인한다 — AI의 "완성했습니다"를 그대로 믿지 않는다.
마음에 안 들면 코드가 아니라 말로 수정을 지시한다. 예: "버튼이 너무 작아. 모바일에서 엄지로 누르기 좋게 키워줘".
한 단계가 끝날 때마다 progress.html을 갱신하게 한다(00_flow Step 4의 갱신 패턴).

STEP · 마무리 다듬기

배포 전 마지막 점검

모든 단계가 끝났으면 배포 전에 한 번 더 전체 점검을 시킨다.

배포 전에 마지막 점검을 해줘.
- 제목과 설명이 화면 상단에 보이는지
- 모든 버튼이 동작하는지 하나씩 확인
- 모바일 화면(폭 375px)에서 깨지는 곳이 없는지
- progress.html의 모든 단계를 완료로 갱신
발견한 문제는 고치고, 무엇을 고쳤는지 알려줘.

해설

중간에 막히면 오류 메시지를 그대로 AI에게 붙여넣는다. 코드를 직접 고치지 않는 원칙은 여기서도 같다 — 무엇이 잘못됐는지 설명하는 것은 AI의 일이고, 결과를 확인하고 방향을 정하는 것이 내 일이다.

00_flow Step 5·6 적용

배포와 제출

배포 주소가 있어야 결과물이다. Pages에 올리고 갤러리에 제출한다.

STEP · Cloudflare Pages 배포

폴더째 올리면 주소가 나온다

배포 방법은 00_flow Step 2에서 택한 연결 방법에 따라 두 갈래다(00_flow Step 5·6 참조).

커넥터로 연결했다면 — 대화로 지시한다: "완성된 폴더를 Cloudflare Pages 프로젝트 [이름]으로 배포해줘".
커스텀 토큰으로 연결했다면 — 터미널에서 wrangler 명령을 쓴다.

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

배포가 끝나면 .pages.dev 주소가 나온다. 상세 절차와 문제 해결은 부록 11장 Cloudflare Pages 배포에 정리되어 있다.

STEP · 갤러리 제출

갤러리에 카드가 보이면 완료

실습과제 갤러리 cf-board.juhonov.workers.dev에 접속해 [과제 제출] 버튼으로 제출한다.

분반 선택 → 회차 선택
제목·작성자 입력
결과물 링크에 배포된 .pages.dev 주소 입력
설명에 "무엇을 만들었고, 어떤 기능이 핵심인지" 2~3줄
비밀번호(수정·삭제용) 입력 → 제출

확인

배포 주소가 열린다
스마트폰에서도 열린다
갤러리에 카드가 보인다

해설

"배포 주소가 있어야 제출이 된다 — 로컬에서만 도는 것은 결과물이 아니다"는 메인 흐름의 원칙이 여기서 처음 적용된다. 제출 후에는 동료들의 결과물을 구경하고 좋아요·의견을 남겨 보자.

정리와 다음 단계

핵심 정리

첫 프로젝트로 여섯 단계 흐름을 한 바퀴 완주했다.

WRAP-UP

이 프로젝트에서 한 것

핵심 정리

하나. 기획은 AI 인터뷰로 — 아이디어 한 줄을 질문에 답하며 PLAN.md로 구체화했다. 핵심 기능 3개 이내, 오늘 안에 배포 가능한 크기.

둘. 구현 전에 progress.html부터 — PLAN.md의 단계를 노드 그래프로 보이게 만들고, 매 단계 완료마다 갱신하며 구현 루프를 돌았다.

셋. 배포 주소가 곧 결과물 — Pages에 올려 .pages.dev 주소를 받고 갤러리에 제출했다. 이 여섯 단계(메인 실습 흐름)는 프로젝트 2·3에서도 그대로 반복된다.

더 나아가기

앱에 챗봇을 붙이고 싶으면 → 5장 나만의 AI 챗봇
배포 상세 절차와 문제 해결 → 부록 · Cloudflare Pages 배포

다음 프로젝트

프로젝트 1이 "기능" 중심의 앱이었다면, 다음은 "데이터" 중심이다. 관심 주제의 지식을 AI와 함께 수집·구조화해 여러 페이지가 링크로 연결된 위키 사이트를 만든다 → 프로젝트 2 · 데이터 수집 후 위키 구성.

한국외국어대학교 Global Business & Technology · GenAI 특강 실습 자료 · 프로젝트 1 서비스 앱 구현.
이 자료는 단일 HTML 파일로 배포되며, 프롬프트 블록의 [복사] 버튼으로 AI 도구에 바로 붙여넣을 수 있다.