■ 1. 문제점 및 기회
⁕ 기존 장례 서비스의 디지털화 부족
- 전통적인 오프라인 중심 장례 서비스로 인한 접근성 제한
- 부고 공유가 문자 메시지나 전화에 의존하여 전달 범위가 제한적
- 화환 주문을 전화나 방문으로만 가능하여 시간적 제약 존재
- 장례 정보 확인을 위해 반복적인 문의 전화 발생

⁕ 사용자 경험 개선의 필요성
- 긴급하고 민감한 상황에서 빠르고 편리한 서비스 제공 필요
- 다양한 연령층(20대~60대 이상)이 쉽게 사용할 수 있는 인터페이스 필요
- 모바일 환경에서 즉시 접근 가능한 서비스 수요 증가

■ 2. 라이브 바카라 목표
⁕ 주요 목표
1. 디지털 장례 서비스 플랫폼 프로토타입 구축
- 부고 작성부터 화환 주문까지 원스톱 서비스 제공
- 42개 화면으로 완전한 사용자 여정(User Journey) 구현

2. 모든 디바이스에서 최적화된 사용자 경험 제공
- 반응형 웹으로 모바일, 태블릿, 데스크톱 환경 완벽 지원
- Mobile First 접근으로 모바일 사용성 극대화

3. 효율적인 관리 시스템 구축
- 관리자 대시보드를 통한 실시간 통계 및 운영 관리
- 부고, 주문, 회원, 문의 통합 관리 시스템

4. 확장 가능한 아키텍처 설계
- React 컴포넌트 기반 모듈식 구조
- 추후 백엔드 연동 및 기능 확장 용이한 구조

■ 3. 핵심 전략
⁕ 사용자 중심 설계 (User-Centered Design)
- 다양한 연령층을 고려한 직관적인 UI/UX
- 명확한 정보 구조와 단계별 안내
- 감성적이면서도 전문적인 디자인 톤앤매너

⁕ 기술적 우수성
- 최신 React 생태계 활용 (React 18, React Router 6)
- Tailwind CSS로 일관된 디자인 시스템 구축
- Context API로 효율적인 전역 상태 관리

⁕ 빠른 프로토타이핑
- Mock 데이터 기반으로 백엔드 없이 완전한 플로우 시연
- 1주 이내 신속한 프로토타입 개발
- 실제 서비스 론칭 전 개념 검증 (Proof of Concept)

■ 1. 포트폴리오 소개

모바일 장례 서비스 플랫폼 - 장례 절차의 디지털 전환을 위한 웹 애플리케이션
장례를 준비하는 상주와 조문객, 그리고 장례식장 관리자를 위한 통합 플랫폼입니다. 부고 작성 및 공유, 화환 주문, 고객 지원 등 장례 서비스에 필요한 핵심 기능을 모바일과 데스크톱 환경에서 모두 제공합니다.
서비스 카테고리: 장례 서비스 플랫폼 (Life Event Service)

메인 타깃:
- 일반 사용자: 상주, 조문객 (20대~60대, 다양한 연령층)
- 관리자: 장례식장 운영자, 화환 판매 담당자

■ 2. 작업 범위
⁕ 담당 업무
- 화면 설계 및 기획: 사용자 플로우 설계, 42개 화면 구성
- UI/UX 디자인: 디자인 시스템 구축, 컬러 팔레트 및 컴포넌트 디자인
- Front-end 개발: React 기반 SPA 구축, 33개 사용자 화면 개발
- 관리자 페이지 개발: 9개 관리자 화면 및 대시보드 개발
⁕ 지원 환경
- 반응형 웹: Mobile First 접근으로 모바일(360px~), 태블릿(768px~), 데스크톱(1024px~) 완벽 지원
- 브라우저: Chrome, Safari, Firefox, Edge 최신 버전 호환
- 디바이스: 스마트폰, 태블릿, PC 모든 기기에서 최적화된 UX 제공

■ 3. 주요 업무
⁕ 핵심 기능
1. 부고 관리 시스템 (12개 화면)
- 모바일 3단계 부고 작성 폼 (고인 정보 → 장례 정보 → 상주 정보)
- PC 단일 페이지 부고 작성 폼
- 부고 목록/상세/검색/공유 기능
- 즐겨찾기 및 부고 수정/삭제 기능

2. 화환 주문 시스템 (6개 화면)
- 화환 상품 목록 및 상세 페이지
- 장바구니 및 실시간 수량 조절
- 주문/결제 페이지 및 배송지 입력
- 주문 완료 및 주문 조회 기능

3. 고객 지원 시스템 (6개 화면)
- 공지사항 목록/상세
- FAQ 페이지 및 검색 기능
- 1:1 문의 작성 및 조회
- 사용 설명서 및 답례 인사 템플릿

4. 마이페이지 (5개 화면)
- 회원 정보 관리
- 내 부고 관리
- 주문 내역 조회
- 즐겨찾기 관리

5. 관리자 시스템 (9개 화면)
- 통계 대시보드 (주문 현황, 부고 등록 추이)
- 부고/화환/주문/회원 관리
- 공지사항 및 1:1 문의 관리

⁕ 주요 페이지
- 홈페이지: 서비스 소개 및 주요 기능 접근
- 부고 작성: 반응형 다단계 폼 (모바일 3단계, PC 단일)
- 화환 주문: 장바구니부터 결제까지 완전한 e-커머스 플로우
- 관리자 대시보드: 실시간 통계 및 최근 주문 현황

■ 4. 주안점
⁕ 사용자 경험 (UX) 최적화
- 다양한 연령층 고려: 장례 서비스 특성상 20대부터 60대 이상까지 사용하는 점을 고려하여 직관적이고 명확한 인터페이스 설계
- 감성적 디자인: 차분한 차콜/아이보리/그레이 컬러 팔레트로 장례 서비스에 적합한 분위기 연출
- 단계별 안내: 부고 작성, 화환 주문 등 주요 프로세스를 단계별로 명확하게 안내

⁕ 반응형 디자인
- Mobile First 접근: 모바일 화면을 먼저 디자인하고 확장하는 전략으로 모든 디바이스에서 최적화
- 적응형 레이아웃: 화면 크기에 따라 다른 UX 제공 (예: 부고 작성 시 모바일은 3단계, PC는 단일 폼)
- Tailwind CSS 활용: 유틸리티 클래스 기반으로 빠르고 일관된 반응형 구현

⁕ 코드 품질 및 확장성
- 컴포넌트 재사용: 공통 UI 컴포넌트 설계로 개발 효율성 극대화
- Context API 활용: 인증, 장바구니, 토스트 등 전역 상태 효율적 관리
- Mock 데이터 시뮬레이션: 실제 백엔드 없이도 완전한 사용자 플로우 테스트 가능