ACE AI Startup Bootcamp · 자기주도 학습 교재

D4

서비스 기능 확장과
완성도 높이기

MVP를 넘어 완성도 높은 서비스로 발전시키기

🔑

Chapter 1

기능 확장 원칙

🎨

Chapter 2

UI/UX 개선

🗄️

Chapter 3

데이터 저장 기능

🧪

Chapter 4

테스트 & 품질 검증

교육 기관

ODA AI SW · ACE Program

과정

창업 지망생 AI 웹 개발

ACE AI Startup Bootcamp · Day 4 도입 및 기능 확장 원칙

ACE AI Startup Bootcamp · Day 4 자기주도 학습 교재

서비스 기능 확장과 완성도 높이기

📚 Day 3에서 만든 MVP를 기반으로 사용자 경험을 높이는 기능을 추가합니다.
완전히 새로운 서비스를 만들지 않습니다. 기존 PROJECT.md와 index.html에서 이어갑니다.

1. 오늘은 무엇을 하는가?

💡 Day 4 핵심 원칙: 기능 추가는 항상 "현재 상태 → 변경 목표 → 완료 기준" 순서로 요청한다.
AI에게 "이것도 추가해줘, 저것도 추가해줘" 하면 기존 코드가 무너집니다.

🔍

목표 1: UX 개선

검색, 필터, 정렬 기능으로 사용자가 원하는 것을 더 빠르게 찾게 합니다.

⚠️

목표 2: 오류 처리

빈 입력, 잘못된 값, 예외 상황에서 친절한 안내 메시지를 보여줍니다.

✨

목표 3: 완성도 향상

로딩 상태, 토스트 메시지, 부드러운 화면 전환 등 세련된 경험을 추가합니다.

2. 기능 확장 vs 새로운 서비스 만들기의 차이

오늘 중요한 원칙은 기존 파일에서 이어가는 것입니다. 왜 그럴까요?

❌ 새 파일에서 다시 시작

"처음부터 다시 만들어줘"

문제:
• Day 2~3에서 쌓은 설계가 사라짐
• 기존 기능이 새 코드에서 누락됨
• PROJECT.md와 실제 코드가 어긋남
• 시간 낭비

✅ 기존 파일에 기능 추가

"기존 index.html에 OOO 기능을 추가해줘"

장점:
• 기존 기능이 유지됨
• PROJECT.md 설계와 일치 유지
• 변경 범위가 명확함
• 오류가 나도 범위가 좁음

ACE AI Startup Bootcamp · Day 4 기능 선택 및 안전한 요청법

3. 오늘 내가 할 기능 선택하기

MVP 기본 기능이 완성된 상태에서, 아래 두 트랙 중 내 서비스에 맞는 것을 선택하세요.

🔵 트랙 A — 사용자 편의 기능 추가

검색 + 필터 + 즐겨찾기
목록에서 원하는 항목을 빠르게 찾고, 마음에 드는 항목을 저장하는 기능

텍스트 검색: 이름/제목으로 실시간 필터링
카테고리 필터: 버튼 클릭으로 분류 필터
즐겨찾기: 하트 버튼으로 저장/해제 (localStorage)

🟣 트랙 B — 오류 처리 + 데이터 관리

입력 검증 + 삭제/수정 + 통계
사용자가 잘못된 정보를 입력하거나 수정하려 할 때 안전하게 처리하는 기능

폼 입력 검증: 빈 칸, 잘못된 형식 오류 메시지
항목 삭제: 확인 팝업 후 삭제
요약 통계: 전체 개수, 완료 비율 등 수치 표시

4. 안전한 기능 추가 요청 방법

기능을 추가할 때 AI에게 요청하는 형식이 매우 중요합니다. 현재 상태 → 변경 목표 → 완료 기준 3가지를 반드시 포함하세요.

📝 예시 1: 검색 기능 추가

📌 Antigravity 요청: [현재 상태] index.html의 도우미 목록 화면에 더미 데이터 3개가 카드로 표시됨 [변경 목표] 목록 상단에 텍스트 검색 입력창을 추가하고, 사용자가 이름을 입력하면 해당 이름을 포함한 카드만 실시간 필터링 [조건] - 기존 카드 스타일을 변경하지 말 것 - 검색 결과가 없으면 "검색 결과가 없습니다" 메시지 표시 [완료 기준] 입력창에 "박"을 입력하면 "박산책"만 표시되고, "이이이"를 입력하면 Empty State 메시지가 나타나면 완료

📝 예시 2: 즐겨찾기 기능 추가

📌 Antigravity 요청: [현재 상태] 도우미 카드 목록이 표시되어 있고 카드 클릭 시 상세보기로 이동 [변경 목표] 각 카드 우측 상단에 하트 버튼(❤️) 추가 클릭 시 즐겨찾기 ON/OFF 토글 (localStorage 'favorites' 키에 저장) 목록 상단에 "즐겨찾기만 보기" 필터 버튼 추가 [조건] - 하트 버튼이 카드 클릭(상세이동)과 이벤트가 충돌하지 않도록 처리 - 즐겨찾기 ON 상태: ❤️ 빨간색, OFF 상태: 🤍 회색 [완료 기준] 하트 버튼 클릭 시 색상이 바뀌고, 페이지 새로고침 후에도 즐겨찾기 상태가 유지되면 완료

📝 예시 3: 폼 입력 검증

📌 Antigravity 요청: [현재 상태] 예약 신청 폼에 날짜와 시간 입력 필드가 있음 [변경 목표] 폼 제출 시 아래 검증을 추가: 1. 날짜 미입력 시 "날짜를 선택해주세요" 오류 표시 2. 선택한 날짜가 오늘보다 이전이면 "오늘 이후 날짜를 선택해주세요" 오류 표시 3. 모든 검증 통과 시에만 신청 완료 처리 [오류 표시 방식] 인풋 아래 빨간색 작은 텍스트로 오류 메시지 표시 [완료 기준] 날짜 미입력 → 오류 메시지 표시, 정상 입력 → 완료 화면으로 이동하면 완료

ACE AI Startup Bootcamp · Day 4 사용자 경험 개선: 오류·예외 처리

5. 사용자 경험 개선을 위한 오류·예외 처리 원칙

좋은 서비스는 "잘 동작하는 것"뿐 아니라 "잘못 사용해도 친절하게 안내하는 것"입니다.

상황	나쁜 처리 ❌	좋은 처리 ✅
필수 입력 누락	그냥 제출되거나 오류 없이 빈 값 저장	해당 입력창 아래 "이 항목은 필수입니다" 표시
결과 없음	빈 화면만 표시	"검색 결과가 없습니다. 조건을 변경해보세요" + 버튼
삭제 버튼 클릭	즉시 삭제	"정말 삭제하시겠습니까?" 확인 팝업 후 삭제
긴 텍스트 입력	화면이 깨짐	최대 글자 수 제한 + "OOO자 이내로 입력해주세요" 안내
처리 중	버튼이 반응 없음	버튼을 "처리 중..." 텍스트로 바꾸고 클릭 비활성화

ACE AI Startup Bootcamp · Day 4 실습: 기능 확장 4단계 따라하기

6. 오늘의 실습 — 기능 확장 단계별 따라하기

⚙️ 실습 1 — PROJECT.md 업데이트 (기능 확장 반영)

기능을 추가하기 전에 PROJECT.md에 먼저 추가할 기능을 기록합니다.

📌 Codex 요청: PROJECT.md의 ## 7. Features에 아래 기능을 Should 항목으로 추가해줘: [추가할 기능] - 텍스트 검색: 이름으로 실시간 목록 필터링 - 즐겨찾기: 하트 버튼으로 저장/해제 각 기능에 완료 기준을 함께 작성해줘. 기존 Must 기능 내용을 변경하지 마세요.

⚙️ 실습 2 — 검색 기능 구현

📌 Antigravity 요청: [현재 상태] 기존 index.html 목록 화면에 카드가 3개 표시됨 [변경 목표] 목록 화면 상단에 검색 입력창 추가. 입력값으로 카드를 실시간 필터링. [완료 기준] 검색창에 텍스트 입력 시 매칭 카드만 표시. 결과 없으면 Empty State 메시지 표시.

⚙️ 실습 3 — 입력 검증 강화

📌 Antigravity 요청: [현재 상태] 예약/신청 폼이 있고 제출 시 완료 화면으로 이동함 [변경 목표] 폼 제출 전 필수 필드 검증 추가: 1. 모든 필수 입력란이 비어 있으면 해당 필드 아래 오류 메시지 표시 2. 오류가 있으면 폼 제출 중단 3. 오류 없으면 기존 완료 처리 진행 [스타일] 오류 메시지: 빨간색, font-size 0.82rem, 인풋 아래 표시 [완료 기준] 빈 폼 제출 시 오류 메시지가 표시되고, 올바르게 입력 후 제출하면 완료 화면이 나타남

⚙️ 실습 4 — 토스트 메시지 추가

📌 Antigravity 요청: [현재 상태] 신청 완료 화면이 있음 [변경 목표] 신청 완료 시 화면 전환 대신 또는 추가로, 우측 하단에 3초간 나타났다 사라지는 토스트 메시지를 추가: "✅ 신청이 완료되었습니다!" [스타일] 배경: #16a34a (초록색), 텍스트: 흰색, border-radius: 10px position: fixed, bottom: 24px, right: 24px fadeIn/fadeOut 애니메이션 [완료 기준] 신청 버튼 클릭 시 우측 하단에 메시지가 나타났다 3초 후 사라지면 완료

ACE AI Startup Bootcamp · Day 4 자율 실습 및 체크리스트

7. 도전! 자율형 실습 주제 2종

🏆 [자율 주제 A] 정렬 기능 추가

목록 화면에 "이름순 / 평점순 / 가격 낮은 순" 정렬 버튼을 추가하세요.
버튼 클릭 시 카드 순서가 바뀌어야 합니다.

🚀 [자율 주제 B] 요약 대시보드 추가

홈 화면에 현재 상태를 요약하는 통계 카드를 추가하세요.
예: "등록된 도우미 수: 3명" / "내 예약 수: 2건" / "즐겨찾기: 1개"

8. Day 4 완료 셀프 체크리스트

기능 추가 전에 PROJECT.md에 Should 항목으로 먼저 기록했다
기능 추가 요청 시 "현재 상태 → 변경 목표 → 완료 기준" 형식을 사용했다
검색 기능이 동작하고 Empty State 메시지가 있다
폼에 입력 검증이 추가되었다
오류 메시지가 입력창 아래 표시된다
토스트 또는 완료 메시지가 사용자에게 명확하게 표시된다
기능 추가 후 기존 핵심 흐름이 여전히 정상 동작한다
VALIDATION.md를 업데이트했다

📌 다음 시간 예고 — Day 5: 최종 검증·배포·발표와 개선
오늘까지 완성한 서비스를 GitHub Pages에 배포하고, 5분 발표를 준비합니다.

서비스 기능 확장과완성도 높이기