넷플릭스, 유튜브, ChatGPT 같은 구독을 여러 개 쓰면서도 얼마를 아낄 수 있는지는 아무도 모릅니다. 이 앱은 구독 80종의 가격을 공식 정가와 나란히 놓고, 내가 쓰는 것만 고르면 1년에 얼마가 남는지 계산해 줍니다. 기획과 화면 설계, 디자인, 프론트엔드와 백엔드까지 한 팀에서 만들었습니다. ㅡ풀어야 했던 문제 - 구독 요금이 서비스마다 흩어져 있어 비교 자체가 일이었습니다 - 가격은 외부 API에서 실시간으로 오고 정가는 공식 요금표라, 출처가 다른 두 숫자를 나란히 붙여야 했습니다 - 앱 심사 기준상 인터랙션 반응은 2초를 넘길 수 없어, 연출을 넣되 기준 안에 들어와야 했습니다 ㅡStudio Maestiq 수행 범위 - 기획, 정보구조 설계, UI 디자인, 프론트엔드 개발, 백엔드 개발, 배포 ㅡ기술 스택, 인프라 - 프론트엔드: React + TypeScript + Vite, 모바일 전용 레이아웃 - 백엔드: Cloudflare Workers + KV ㅡ 공식 정가 피드와 약관 페이지 서빙 - 가격 연동: 외부 상품 API 실시간 호출 ㅡ 통화가 접속 지역 기준이라 서버 대행이 불가해 앱에서 직접 호출 - 모션: Lottie 스플래시와 전환 연출, 보안 심사를 통과하는 eval-free 파이프라인으로 구성 - 라우팅: 딥링크 경로를 읽어 계산기, 카테고리 등 목적 화면으로 바로 착지 ㅡ핵심 기능 1. 구독 80종 가격 비교 ㅡ 공식 홈페이지 정가와 판매가를 나란히 놓고 할인율을 계산해 카드로 보여줍니다. 80종 전부 가격이 표시됩니다. 2. 절약액 계산기 ㅡ 쓰는 구독을 고르면 연간 절약액을 합산합니다. 3개만 골라도 연 50만 원대가 나오고, 절약액이 큰 순서로 정렬해 바로 이동할 수 있습니다. 3. 카테고리 카탈로그 ㅡ 영상, AI, 음악, 소프트웨어, 게임으로 나눈 그리드와 상단에 붙는 칩 내비게이션으로 80종을 훑습니다. 4. 서비스 상세 시트 ㅡ 기간별 가격, 이용 방법 3단계, 운영 주체와 환불 정책까지 한 장에 담아 결제 전 판단에 필요한 것만 남겼습니다. 5. 정직한 표기 ㅡ 정가를 확인하지 못한 서비스는 절약액을 지어내지 않고 판매가만 표시합니다. 확인된 것과 아닌 것을 화면에서 구분합니다. 6. 심사 기준에 맞춘 연출 ㅡ 스플래시와 이동 애니메이션을 배속으로 압축해 2초 기준 안에 넣고, 재생이 실패해도 진행이 멈추지 않도록 폴백을 뒀습니다. ㅡ품질 작업에서 잡은 것들 - 카테고리 칩이 390px 화면에서 오른쪽 80px가 잘려 마지막 칩이 안 보이던 문제를 실측으로 찾아 교정, 가로 오버플로 0으로 마감 - 이동 연출이 끝나기 전에 오버레이가 사라져 이전 화면이 한 프레임 비치던 깜빡임을 순서 교정으로 제거 - 번들 384KB, 압축 시 116KB로 유지해 초경량 기조를 지킴 ㅡ작업 규모 구독 서비스 80종 카탈로그, 화면 4종, 컴포넌트 10종 스크린샷은 실제 서버에 붙은 상태에서 촬영한 실데이터 화면입니다. 이 작업은 출시 심사 단계 산출물입니다. 의뢰 관계상 서비스명, 로고, 연동한 플랫폼과 제휴사 이름은 가렸습니다. 앱을 기획부터 디자인, 개발, 배포까지 한 번에 맡길 팀을 찾고 계시다면 편하게 상담 남겨주세요.