플러스프로젝트 배경
구독 결제·주기 관리·헬스케어 상품 카탈로그 등 반려동물 헬스케어 커머스 핵심 업무 흐름을 먼저 파악하고, 랜딩부터 구독 결제·마이페이지·포토 후기까지 27개 화면을 사전 구현했습니다. 구독 주기 변경·일시 정지·해지, 소셜 로그인·장바구니·결제 완료 등 실제 운영 시나리오 10가지를 사전에 검증해둔 덕분에, 즉시 착수해 현장에서 바로 쓸 수 있는 헬스케어 구독 커머스를 안정적으로 납품할 수 있습니다.
프로젝트 성과
27개 화면 배포 즉시 오류 없이 정상 동작
랜딩·구독·스토어·마이페이지·커뮤니티 등 27개 화면 Cloudflare Pages 배포 완료. 전 화면 화면 깨짐·JS 오류 없이 정상 동작 확인
구독 관리 4가지 액션 단일 페이지 완결
날짜 조정·주기 변경(1/2/3개월)·일시 정지·해지 4종 모달 UI 완성. 화면 이탈 없이 전체 구독 관리 흐름 처리
실제 사용 흐름 10가지 직접 검증
소셜 로그인·구독 결제·주기 변경·일시 정지·해지·장바구니·상품 구매·후기 탐색 등 10가지 운영 시나리오 직접 검증
모바일 전 화면 반응형 + 하단 고정 CTA
모바일·태블릿·데스크톱 3종 레이아웃 최적화. StickyCTA 하단 고정 바로 구독 유입 경로 단축. 햄버거 메뉴 터치 최적화
3단계 할인 구독 플랜 비교표 구현
1개월(정가)·2개월(5% 할인)·3개월(10% 할인) 플랜을 한 화면에서 비교. 배지·체크리스트로 플랜 선택 전환 유도
핵심 기능
건강체크 패드 정기구독 결제 플로우
1·2·3개월 주기 선택 시 할인율 자동 계산. 구독 전용 배지로 단품과 구별. 결제 완료 후 마이페이지 구독 내역 자동 반영
진행 단계
기획 · 디자인 시스템 설계
2026.05.
브랜드 컬러(포레스트 그린·아이보리·테라코타) 정의, 타입 시스템·공통 컴포넌트 라이브러리 구조 설계
프로젝트 상세
반려동물 건강체크 패드 정기 구독과 펫 용품 단품 구매를 하나의 플랫폼에서 제공하는 헬스케어 커머스 사이트입니다. 구독 주기 선택·자동 할인 계산·마이페이지 관리·포토 후기 커뮤니티까지 실제 서비스 수준으로 구현했습니다. [구독 서비스] 1·2·3개월 주기를 선택하면 할인율(0·5·10%)이 자동 계산됩니다. 건강체크 패드 상품 페이지에는 이미지 갤러리, 사양 표, 플랜 비교표를 제공하며 구독 전환을
