시스템 가이드
시스템 가이드
Funeral Platform MVP — 운영자 매뉴얼 · 설계 근거 · 디자인 시스템 종합 문서
시작하기
intro
본 시스템 소개
Funeral Platform MVP는 위시켓 입찰 RFP 본문 분석을 토대로, 장례 도메인의 8개 핵심 화면과 그 데이터 흐름을 React/TypeScript 기반으로 구현한 시연 자산입니다.
단일 화면이 아닌 본사가 보유한 다섯 시스템(장례식장 오픈 API · 토스페이먼츠 · 카카오톡 · SMS · 본사 통합 DB)을 묶는 데이터 허브로 설계되었습니다.
본 가이드는 운영자가 시스템을 실제로 운영할 때 참조할 수 있는 매뉴얼이자, 위시켓 심사관이 본 프로토타입의 설계 근거를 빠르게 파악할 수 있도록 구성된 문서입니다.
시작하기
system-structure
시스템 구조도
본 다이어그램은 본 사업의 결과로 본사가 새로 보유하게 되는 통합 데이터 자산의 위치와, 외부 시스템과의 입출력 흐름을 시각화한 것입니다.
시작하기
screen-map
화면 구성 (9화면 — RFP 정합)
사이드바 메뉴 순서 그대로 화면 1~9가 배치되며, 각 화면은 RFP 섹션과 직접 매핑됩니다.
| # | 화면명 | RFP 매핑 | 역할 |
|---|---|---|---|
| 1 | 프로토타입 소개 | 전체 | 자가완결 1페이지 시연 자산 |
| 2 | 통합 대시보드 | 2-1 ④ | 5종 KPI · 6종 차트 · 위젯 2종 |
| 3 | LBS 시설 탐색 | 2-2 ① ② ③ | 1,100개 시설(5종) GPS 검색·1·2 순위 예약 |
| 4 | AI 장례지도사 + DIY | 2-3 ① ② ③ ⑤ | GPT 시나리오 + 견적 + 장지 추천 |
| 5 | 가족 분담 결제·할부 ★ | 2-4 ① ② ③ ④ | % 분담 + 할부 1~12개월 + 부의금 일시납 |
| 6 | 시각장애인 음성 ★ | 2-3 ④ | STT/TTS + 우선 모드 + 음성 명령 |
| 7 | 다채널 알림 | 2-4 ④ | 카카오톡 · SMS · MMS · 이메일 통합 |
| 8 | 외부 시스템 연동 | 2-6 ③ ④ | 5종 시스템 카탈로그 + API 키 관리 |
| 9 | 운영 알림 | 2-6 ⑤ | 감사 로그 + 운영자 대응 흐름 |
핵심 기능
ai-chatbot-safety
AI 챗봇 안전성 검증 (RFP 차별화 핵심)
GPT 기반 응답에 안전 점수 / 할루시네이션율 / 응답 시간 3축 평가를 적용하여, 임계 미달 시 자동 차단·운영자 검토 큐로 이관합니다.
본 시스템이 위시켓 RFP 2-3 ①의 안전성 요건을 직접 충족하는 결정적 차별 자산입니다. 단순히 GPT API를 호출하여 응답하는 수준이 아니라, 모든 응답을 사후 검증하여 위험 응답을 사전 차단합니다.
특히 법적 절차 카테고리(상속세 · 유언장 효력)는 안전 점수 임계를 더 높게 설정하여, 부정확한 법률 정보가 사용자에게 전달되지 않도록 보호합니다.
| 임계 구간 | 처리 | 운영자 액션 |
|---|---|---|
| 85점 이상 | 게시 (published) | 별도 검토 없이 응답 가능 |
| 78~84점 | 검토 큐 (review) | 운영자 사전 검토 후 게시 |
| 78점 미만 | 자동 차단 (blocked) | 시나리오 보강 후 재게시 |
핵심 기능
family-payment
가족 분담 결제 + 할부 + 부의금 일시납 (RFP 2-4 ★)
RFP 2-4 4개 항목을 모두 직접 시각화한 차별화 핵심 영역입니다. % 분담 비율 설정 + 할부 1~12개월 + 부의금 일시납 + 결제 실패 자동 재시도.
토스페이먼츠 결제 토큰을 가족 구성원별로 분리 발급하여, N분의 1 또는 비율 분담을 직접 지원합니다. 가족 4명 그룹 기준 약 4~5초 만에 분담 비율 설정 + 결제 링크 발송 완료.
할부 1~12개월 직접 선택 — 사용자가 본인 부담 구간을 명시적으로 선택해 부담 분산. 일시납 선택 시 할부 수수료 없음.
부의금 입금 자동 매칭 — 후불제 상조 방식으로 부의금이 들어온 계좌를 연동해 잔액을 확인하고, 현금 일시납 결제 자동 매칭.
결제 실패 시 10분·1시간·24시간 간격 자동 재시도 3회. 실패 지속 시 가족 구성원에게 SMS·푸시 알림 동시 발송.
핵심 기능
voice-access
시각장애인 음성 인터페이스 (RFP 2-3 ④ ★)
OpenAI Whisper(STT) + Google Cloud TTS 통합으로 식장 검색·DIY 설계·결제 요청까지 음성 명령만으로 완결.
RFP에서 명시적으로 차별화 기능으로 정의한 영역이며, 우대 사항에 STT/TTS 음성 인식·합성 기술 연동 경험이 명시되어 있습니다.
시각장애인 우선 모드 활성 시 음성 응답을 두 번 안내, 화면에 큰 글자·고대비 표시, 화면 전환 시 음성 알림 함께 제공.
한국어 Native 모델 사용으로 평균 STT 정확도 95% 이상, TTS 자연도 90점 이상 유지.
핵심 기능
lbs-search
LBS 시설 탐색 — 5종 통합 (RFP 2-2)
장례식장·화장장·납골당·자연장지·수목장 5종을 GPS 기반으로 통합 검색하고 1·2 순위 예약.
이하늘장사 시스템 API + 카카오맵·네이버맵 API 연동으로 1,100개 마스터 데이터를 통합 표시. 거리순·평점순·평균 비용순 정렬 지원.
본사가 직접 운영자와 계약한 시설은 가용성을 5분 단위로 추가 동기화하여 실시간 표시.
1·2 순위 예약 + 즐겨찾기(오프라인 캐싱) — 비교 트레이에 최대 3개까지 추가하여 상세 비교 가능.
설계 근거
data-hub-rationale
데이터 허브로 설계한 이유
본 사업의 결과로 본사가 새로 보유하게 되는 자산은 화면이 아니라, 다섯 시스템에서 흘러들어 온 통합 데이터입니다.
외부 시스템 5종(장례식장 오픈 API · 토스페이먼츠 · 카카오톡 · SMS · 본사 통합 DB)은 각자 다른 책임을 가지지만, 사용자에게는 하나의 일관된 경험으로 보여야 합니다.
본 플랫폼은 그 통합점 역할을 하며, 향후 R&D 정부지원사업(TIPS) 단계에서 본사의 핵심 차별화 자산이 됩니다. 단순한 화면 시스템이 아닌 데이터 자산 구축 사업이라는 관점이 핵심입니다.
설계 근거
tech-stack-rationale
기술 스택 선정 근거
RFP에 명시된 React / TypeScript / Next.js 옵션 / Node.js / PostgreSQL을 그대로 채택하되, 운영 안정성에 결정적인 라이브러리만 추가합니다.
| 계층 | 선택 기술 | 선정 이유 |
|---|---|---|
| 프런트엔드 | Next.js 16 + React 19 + TypeScript 5 | RFP 명시 · App Router · Turbopack 빌드 속도 |
| 스타일 | Tailwind CSS v4 + CSS Modules | 디자인 시스템 일관성 + 페이지 격리 |
| 차트 | Recharts 3.x | B2C UI에서도 가독성 확보된 모노톤 차트 구성 가능 |
| 애니메이션 | Framer Motion 12.x | 사이드바 호버·모달 페이드 등 미세 디테일 |
| 아이콘 | lucide-react 0.5.x | 이미지 아이콘 사용 금지 룰 준수 (라인 아이콘만) |
| 백엔드 | Node.js + NestJS (RFP 명시) | MSA 구조 · Postgres·MongoDB·Redis 조합 |
| 인프라 | AWS EKS / RDS / ElastiCache | RFP 2-7 ① 명시 클라우드 환경 |
디자인 시스템
design-tokens
디자인 토큰
본 시스템은 Calm Enterprise UI 룰을 따르며, 모노톤 + Primary Blue 단일 강조색을 절제하여 사용합니다.
| 토큰 | 값 | 용도 |
|---|---|---|
| Primary | #0d47a1 | 강조 텍스트 · 강조 보더 · prelabel |
| 본문 메인 | #1a1a1a | 본문 12px 메인 텍스트 |
| 본문 보조 | #4a5568 | 설명문·테이블 데이터 |
| 캡션 | #718096 | 캡션·메타 텍스트 |
| 보더 표준 | #e2e8f0 | 박스·카드 보더 |
| 섹션 배경 | #f8fafc | 섹션 박스 배경 |
| 라운드 | 6px | 모든 박스·버튼·카드 (배지만 5px 예외) |
| 폰트 | Pretendard / Noto Sans KR | 본문 표준 |
디자인 시스템
typography-rules
타이포그래피 룰
12px 본문 / 11px 메타 / 24px 페이지 타이틀 — 폰트 사이즈 변종을 만들지 않습니다.
| 크기 | 용도 | 예시 |
|---|---|---|
| 24px | 페이지 타이틀 (h1) | 각 화면의 제목 (반드시 PageHeader 사용) |
| 20px | 섹션 타이틀 (h2) | 가이드 섹션 제목 등 |
| 14px | 카드/박스 타이틀 | ChartCard / KpiCard 헤더 |
| 12px | 본문 표준 | 단락 · 테이블 데이터 · 라벨 |
| 11px | 메타 라벨 | uppercase + tracking-wider 라벨 |
디자인 시스템
color-philosophy
색감 철학 — 알록달록 금지
한 화면에 색이 많지 않도록 의미 색상(빨강·주황·초록)을 절제합니다.
위계는 색의 진하기가 아니라, 모노톤 + 단일 강조색의 사용 빈도와 위치로 잡습니다. 이는 장례 도메인의 차분한 정서를 해치지 않으면서도 정보 밀도를 확보하는 결정적 룰입니다.
solid 배지는 화면당 0~1개로 제한하며, 정상·완료 상태는 muted 배지로 회색 톤다운하여 시선 분산을 방지합니다.