Don't Panic
in Etc ☕ 2분 읽기

AI 도구로 앱 기획서 만들기 — '구독 다이어트' 설계 작업노트

#기획#Figma Make#Gamma#프롬프트#마이데이터
목차

구독 다이어트 — 설계 작업노트 (도구 & 프롬프트)

앞선 설계 정리가 “무엇을 설계했나”라면, 이 글은 “어떻게 만들었나” — 쓴 도구와 실제 프롬프트를 남긴다.

1. 주제 선정 과정 (왜 이걸로)

  • ❌ 전세보증 서류 트래커 — 개인적/실무 무관으로 접음
  • ❌ 사내 실물 시스템 — 발표 시 내부구조·기밀 노출 부담
  • ✅ 구독 다이어트 (신규) — 세 조건 만족: 실무 도메인 연관 + 신규 설계(“베끼기” 아님) + 발표 안전(일반 핀테크)

핵심 원칙: “도메인은 실무에서, 시스템은 가상으로.”

2. 서비스 개요

한 줄 정의: 마이데이터로 카드·계좌에 흩어진 정기결제를 자동으로 찾아, 매달 새는 돈을 정리하는 구독·고정지출 관리 앱.

  • 화면(5개): S1 홈 · S2 구독 목록 · S3 구독 상세 · S4 해지 가이드 · S5 알림
  • 데이터 모델(7 엔티티): USER / LINKED_ACCOUNT / TRANSACTION / SUBSCRIPTION / TXN_MATCH(거래↔구독 매칭, confidence 포함) / MERCHANT_CATALOG / ALERT

3. 더 나은 결과물을 만드는 법 (권장 워크플로우)

직접 HTML로 짜기보다 전용 툴을 쓰면 훨씬 쉽고 예쁘다.

추천 조합

  1. 기획문서(PRD 본문) → Gamma (gamma.app) — 텍스트를 붙여넣으면 AI가 자동으로 디자인. 발표용 최적
  2. 앱 화면(목업) → Figma First Draft(편집 가능) 또는 v0.dev / Figma Make(실제 클릭되는 작동 프로토타입)
  3. ERD → dbdiagram.io / ERDCloud — DBML 코드 → 크로우풋 다이어그램 자동 생성
  4. 화면 이미지를 Gamma/Figma Slides에 얹어 하나의 발표자료로 완성

개선 포인트

  • 폰트가 8할 — 생성 후 Pretendard로 교체하면 완성도 급상승
  • 색 절제 — 무채색 베이스 + 포인트 1색. 테두리·배지 남발 금지
  • 여백 크게, 타이포로 승부 — 예쁜 기획서일수록 정보 밀도를 낮춘다
  • 스토리라인 — 현행 문제 → 해결 → 화면 → 데이터모델 순. 화면번호(S1~S5)로 흐름도·와이어프레임·PRD를 연결하면 정합성이 돋보임
  • 설계 어필 — ERD의 TXN_MATCH(거래→구독 탐지 근거, confidence)로 “패턴분석을 데이터로 어떻게 표현하나”를 보여주기

4. 구현/테스트 관점 (알아둘 것)

  • 기획·발표 단계에선 마켓 등록·빌드 불필요. 목업은 그림일 뿐
  • 사람 테스트는 “작동 프로토타입(더미 데이터) 웹앱 URL”이면 충분 → 폰으로 접속. 스토어·심사 0
  • 아키텍처는 웹뷰형 마이데이터 플러그인이 자연스럽다 — 기존 앱 안에 webview로 삽입. 마켓 심사 X, 마이데이터 인증 인프라 재활용
  • 마이데이터 실데이터는 허가·기관 계약 필요 → 테스트 단계는 더미 데이터로 UX 검증이 정석

5. 화면 생성 프롬프트 (그대로 복붙용)

프로토타입 도구(Figma Make / v0.dev 등)에 넣은 실제 프롬프트. 앱이든 웹뷰든 내용은 동일하다.

⓪ 공통 스타일 블록 (매 프롬프트 끝에 붙이기)

[스타일] 모던 핀테크 모바일 앱 화면(1개). 밝고 깔끔하며 여백이 넉넉함.
산세리프체(Pretendard 느낌), 둥근 카드(모서리 14~16px), 부드러운 그림자.
컬러 — 메인: 딥그린 #1D4D3A / 경고·유령구독: 코랄 #CF4826 /
주의·요금인상: 앰버 #A9781A / 정보: 블루 #3A6EA5 / 배경: 오프화이트 #F2F4F1.
금액 숫자는 굵게 강조. 하단 탭바 3개: 홈 · 구독 · 리포트.

① S1 — 홈 대시보드

'구독 다이어트'라는 앱의 홈 대시보드 화면을 디자인해줘.
마이데이터로 카드·계좌의 정기결제를 자동으로 찾아 관리하는 앱이야.
위에서 아래로 이렇게 구성해줘:
1) 상단 앱바 — 왼쪽에 타이틀 "구독 다이어트", 오른쪽에 알림 벨 아이콘(빨간 점 배지).
2) 히어로 카드(딥그린 그라데이션 배경) — 작은 라벨 "이번 달 구독비", 아주 큰 금액, 그 아래 "구독 12개 · 지난달 대비 +₩9,900".
3) 카테고리 도넛 차트 카드 — 가운데 "12개 구독", 범례 4개: 영상(그린)/음악(앰버)/멤버십·쇼핑(코랄)/통신·기타(블루).
4) 유령구독 경고 배너(연한 코랄 배경) — "유령구독 2건 발견 — 3개월째 미사용. 해지 시 월 ₩22,000 절약".
5) 하단 탭바에서 '홈' 활성화.
[여기에 ⓪ 공통 스타일 블록 붙이기]

② S2 — 구독 목록

'구독 다이어트' 앱의 구독 목록 화면을 디자인해줘.
1) 앱바 — 타이틀 "내 구독".
2) 카테고리 필터 칩 가로줄 — [전체](선택됨) / 영상 / 음악 / 멤버십.
3) 구독 카드 리스트(각 행: 왼쪽 앱 로고 원형, 가운데 이름+부가정보, 오른쪽 금액+상태):
   - 넷플릭스 / 영상 · 매월 10일 / 진행중
   - 유튜브 프리미엄 / "요금 인상"(앰버) / 매월 3일
   - 왓챠 / "유령구독 · 3개월 미사용"(코랄, 카드 테두리 코랄) / 매월 22일
   - 스포티파이 / 음악 · 매월 15일 / 진행중
4) 하단 탭바에서 '구독' 활성화.
[여기에 ⓪ 공통 스타일 블록 붙이기]

③ S3 — 구독 상세 (유령구독)

'구독 다이어트' 앱의 구독 상세 화면(왓챠)을 디자인해줘.
1) 앱바 — 뒤로가기 화살표, 가운데 "왓챠".
2) 상단 요약 카드 — 로고, "왓챠 베이직", "영상 스트리밍 · 매월 22일", 큰 금액.
3) 경고 박스(연한 코랄) — "3개월째 이용 기록이 없어요. 지금 해지하면 연 ₩154,800을 아낄 수 있어요."
4) '결제 이력' 카드 — 세로 타임라인(다음 결제 예정 + 지난 결제들).
5) 하단에 큰 딥그린 버튼 "해지 방법 보기".
[여기에 ⓪ 공통 스타일 블록 붙이기]

④ S4 — 해지 가이드

'구독 다이어트' 앱의 해지 가이드 화면을 디자인해줘.
1) 앱바 — 뒤로가기, "왓챠 해지 방법".
2) 안내 문구 — "앱에서 직접 해지되지 않아 서비스 페이지로 연결해 드립니다."
3) 번호 매긴 4단계 리스트(각 단계 앞 원형 번호 배지).
4) 외곽선 버튼 "왓챠 해지 페이지 열기 ↗".
5) 하단에 큰 딥그린 버튼 "해지 완료로 표시".
[여기에 ⓪ 공통 스타일 블록 붙이기]

⑤ S5 — 알림

'구독 다이어트' 앱의 알림 목록 화면을 디자인해줘.
1) 앱바 — 타이틀 "알림", 오른쪽에 "모두 읽음".
2) 알림 카드 리스트(왼쪽 색상 아이콘 배지, 제목 굵게 + 본문, 아래 회색 시간):
   - (코랄) 유령구독 발견 — 왓챠를 3개월째 안 쓰고 있어요.
   - (앰버) 요금 인상 — 유튜브 프리미엄이 올랐어요.
   - (블루) 무료체험 종료 D-2 — 곧 유료 전환돼요.
   - (그린) 이번 달 구독 2건 정리 완료 — 월 ₩22,000 아꼈어요.
[여기에 ⓪ 공통 스타일 블록 붙이기]

6. 정리

  • 프로토타입 도구(Figma Make)로 5개 화면 + 탭바 + 알림 연결이 실제로 작동하는 목업을 뽑았고, 이를 캡처해 발표자료에 넣었다.
  • “텍스트로 내용을 다 쓰고 → 디자인은 도구에 맡긴다” 는 흐름이 효율적. 내용(무엇을)과 디자인(어떻게 보일까)을 분리하니 각각에 집중할 수 있었다.
  • 다만 AI 도구는 “생성”에 맡기면 없는 내용을 지어내기도 해서, 사실에 충실하려면 원문(내용)을 내가 확정해 주는 쪽이 안전했다.

이 설계가 실제 배포된 서비스가 되기까지는 3주차 구현 정리 참고.

관련 글