앱인토스 미니앱

멍냥 성향 TEST·학군맵·학원비맵을 하나의 공통 플랫폼에서 설계·개발한 앱인토스 프로젝트 | 2026.08

멍냥 성향 TEST	학군맵	학원비맵

관련 링크

멍냥 성향 TEST	토스 링크
학군맵	토스 링크
학원비맵	토스 링크

프로젝트 개요

서로 다른 도메인의 세 미니앱을 pnpm 워크스페이스 모노레포로 구성했습니다. 앱별 도메인·데이터·화면은 분리하고, 앱 셸·광고·정책 문서·지도 동작·디자인 토큰·테스트 설정은 공통 패키지로 분리해 일관성과 재사용성을 높였습니다.

모든 앱은 React 18·TypeScript·Vite를 기반으로 하고, Apps in Toss Web Framework과 Web Bridge를 연결했습니다. 정적 데이터를 사용하는 지도 앱은 수집→정규화→검증→번들링 파이프라인을 갖추고, 서버 기능이 필요한 성향 검사는 Supabase Storage·Edge Function·RLS로 공유 카드를 처리합니다.

미니앱

멍냥 성향 TEST

보호자가 최근 행동을 22문항으로 답하면 활동성·민감성·친화성 등 6가지 성향과 돌봄 힌트를 보여주는 반려동물 성향 검사입니다.

• 강아지·고양이 검사, 22문항 채점, 대표 성향과 주의 신호 분리
• 사진 압축·업로드, 등급별 포토카드, 1200×600 OG 미리보기와 토스 딥링크 공유
• 선택 응답과 주의 신호는 서버에 저장하지 않고, 사용자가 공유할 때만 결과 스냅샷 생성
• Supabase RLS·비공개 Storage·signed upload·Edge Function·정기 cleanup 구성

학군맵

전국 고등학교 2,396개교의 위치와 공개된 진학 정보를 지도에서 탐색하는 서비스입니다.

• NAVER Maps·supercluster를 활용한 전국 학교 지도, 지역·학교명 검색과 필터
• 학교별 SKY·상위대학·의치한약수·4년제 진학 정보를 연도별로 표시
• 2,390개교·31,450건의 진학 레코드를 정규화하고, 출처 무결성·카테고리·이상치 검증 자동화
• 비교·순위 표현을 배제하고 한 학교의 공개 정보와 집계 기준을 중심으로 설계

학원비맵

교육청 공개자료를 기반으로 전국 학원·교습소의 신고 교습비와 연도별 추이를 보여주는 지도 서비스입니다.

• 105,250개 기관·1,013,623개 반 데이터를 전국 지도·검색·기관 상세로 제공
• 수업량 차이를 반영한 시간당 단가를 주요 지표로 사용하고 월 교습비·총 교습시간을 함께 표시
• 114건·약 1GB 원본 아카이브를 정규화해 772만 행을 파싱하고, 분류·좌표·표본 크기·번들 제한 검증
• 지역별·기관별 파일 분할 로딩으로 앱인토스 100MB 번들 제한 이내에서 대규모 정적 데이터 제공

공통 아키텍처

apps/*  ──────────▶  packages/core-*
  도메인·화면·데이터       UI·앱 셸·정책·지도·데이터 도구

• core-ui: 디자인 토큰과 앱인토스 화면에 맞춘 아토믹 컴포넌트
• core-ait: 광고, 뒤로가기·종료 확인, history 기반 라우팅, 익명 계측
• core-map: NAVER Maps SDK 로딩, 카메라 이동, 클러스터 확대 규칙
• core-data: CSV·JSON 정규화, 그룹별 파일 생성, 브라우저 로더, 100MB 번들 검증
• core-legal: 개인정보 처리방침·이용약관·데이터 안내 문서 셸
• config: ESLint·TypeScript·Vitest·Playwright 공통 설정과 의존성 방향 강제

품질과 운영

• 앱·공통 패키지별 lint, TypeScript, Vitest를 워크스페이스 단위로 실행
• Pixel 7 환경의 Playwright E2E로 토스 WebView 화면·핵심 흐름 검증
• 앱별 데이터 품질 게이트와 AIT 번들 크기 검사를 빌드 절차에 포함
• 정책 문서, 앱 등록 문구, 스크린샷, 홍보 자산, 번들 버전과 해시를 저장소에서 함께 관리