20대에게 맞는 혜택 정보는 넘쳐나는데, 정작 “내가 받을 수 있는 혜택”을 한눈에 보기는 어렵다.
카드 캐시백, 청년 지원금, 대학생 할인, 군인 혜택 등 조건만 맞으면 바로 쓸 수 있는 혜택들을 영수증 스타일로 큐레이션하는 서비스를 만들었다.
핵심 컨셉
“몰랐던 혜택, 3초 만에 발견” — 복잡한 조건 설명 대신, 각 혜택의 핵심 금액과 실행 방법을 영수증처럼 한눈에 보여준다.
디자인 컨셉은 레트로 영수증이다. 크림 배경에 코랄/라임 액센트, 지그재그 모서리, 바코드까지 — 편의점에서 받은 영수증을 들여다보는 느낌으로 정보를 전달한다.
기술 스택
- Framework: Next.js 16 (App Router, Static Export)
- Language: TypeScript 5
- Styling: Tailwind CSS 4
- Content: MDX + gray-matter (DB 없이 파일 기반)
- Monorepo: Turborepo + pnpm
- Analytics: PostHog (page_view only) + GA4
- SEO: JSON-LD (Article, WebSite, ItemList), sitemap, OG meta
- Deploy: Vercel
아키텍처
Turborepo 모노레포 구조로 콘텐츠와 웹앱을 분리했다.
apps/web— Next.js 앱 (홈, 팁 상세, 카테고리 필터)packages/content— MDX 기반 콘텐츠 + 타입 정의tooling/tailwind— 영수증 디자인 시스템 (토큰, 프리미티브)
콘텐츠는 MDX 파일의 frontmatter로 메타데이터(금액, 카테고리, 출처, 태그)를 관리하고, gray-matter로 파싱하여 정적 페이지를 생성한다. DB 없이 Git만으로 콘텐츠를 버전 관리한다.
디자인 시스템
Claude Design으로 초기 컴포넌트를 설계하고, 영수증 프리미티브를 직접 구현했다.
- Receipt — 지그재그 상하단 모서리 + 대시 구분선
- Barcode — 시드 문자열 기반 CSS 바코드 생성
- LiveSignal — “지금 N명이 보고 있어” 실시간 시그널
- SavingsCounter — requestAnimationFrame 기반 카운트업 애니메이션
색상은 크림(#FAF6F1) 배경에 코랄(#E8573D) 강조, 라임(#D4E84F) 하이라이트를 사용하며, 폰트는 Pretendard(본문) + Archivo(디스플레이) + JetBrains Mono(수치)를 조합했다.
SEO와 AI 수집 최적화
검색엔진과 AI(ChatGPT, Perplexity, Google AI Overview)가 콘텐츠를 잘 수집할 수 있도록 구조화했다.
- 각 팁 페이지에
ArticleJSON-LD (image, author, keywords, inLanguage) - 홈페이지에
WebSite+ItemList스키마 (전체 팁 목록) - Google Search Console + Naver 서치어드바이저 등록
sitemap.xml+robots.txt자동 생성
결과
MDX 파일 기반 정적 생성으로 DB 없이 운영하며, 콘텐츠 추가는 MDX 파일 하나만 작성하면 빌드 시 자동으로 페이지가 생성된다. Vercel에 배포하여 한국 사용자에게 빠른 응답 속도를 제공한다.