project

도장깨기 · 함께 채우는 지하철 도장 지도

도장깨기 · 함께 채우는 지하철 도장 지도 대표 이미지
SKILLS
Expo
React Native
TypeScript
Supabase
Zod
TanStack Query
Zustand
Kakao Map SDK (Swift · Kotlin 네이티브 모듈)
Python
TOOLS
Claude Code
EAS Build
AWS S3 · CloudFront · Route53
GitHub
진행기간
2026.07.13 - 2026.07.31
개발인원
1명 (개발자 1명)
역할
기획
설계
개발
배포·운영
기여도
5/5
카테고리
iOS App
도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 화면

작품 설명

방(room) 하나에 최대 6명이 모여 수도권 지하철역을 사진·메모로 하나씩 채워 가는 기록 앱입니다. "도장깨기"는 무술 도장 격파(완주형 성취)와 인주 도장(방문 기록의 시각적 은유)을 함께 담은 이름입니다. 지도·현황·달력·방 4개 탭으로 구성했고, 앱(Expo)과 데이터 모델(Supabase), 역 데이터 파이프라인(Python), 카카오맵 네이티브 모듈까지 혼자 기획·개발했습니다.

기획 의도

개인용 "방문 역 체크리스트" 앱은 혼자 채우고 끝납니다. 도장깨기는 초대코드로 여러 명이 같은 지도를 함께 채우고, 기록 본문도 방 멤버가 공동으로 고칠 수 있게 했습니다(삭제만 작성자·방장으로 제한). 커플·친구·가족 등 관계 유형은 구분하지 않고 어떤 조합이든 같은 기능을 쓰도록 설계했습니다. 이동 중 찍은 직후 빠르게 남기는 경우와, 나중에 앉아서 사진을 정리하며 남기는 경우를 둘 다 고려했습니다.

주요 기능

도장 지도

∙

방문한 역은 노선 고유색 점과 글로우로 칠해져, 지도를 축소하면 함께 다닌 동선이 한눈에 보임

∙

역을 한 번 누르면 역 이름 배지 핀이 찍히고, 한 번 더 누르면 방문한 역은 기록 목록, 안 가 본 역은 탐색 시트가 열림

도장깨기 · 함께 채우는 지하철 도장 지도 도장 지도 화면도장깨기 · 함께 채우는 지하철 도장 지도 도장 지도 화면

역 단위 도장

∙

도장 카운트 단위는 노선이 아니라 물리적 역 — 환승역은 하나로 병합해, 한 번 방문하면 걸친 모든 노선 진행률이 함께 오름

∙

현황 탭에서 전체 951역 대비 진행률과 노선별 진행률을 실제 노선 고유색 링으로 표시하고, 노선을 누르면 역 순서대로 방문 여부를 보여 줌

도장깨기 · 함께 채우는 지하철 도장 지도 역 단위 도장 화면도장깨기 · 함께 채우는 지하철 도장 지도 역 단위 도장 화면도장깨기 · 함께 채우는 지하철 도장 지도 역 단위 도장 화면

사진으로 기록 자동 채우기

∙

사진 EXIF 시간을 방문 시간으로, EXIF 좌표의 최근접 역을 기본 역으로 채택(직접 변경 가능)

∙

사진 좌표로 주소와 반경 30m 안의 가게를 불러와 장소 후보로 제안하고, 같은 좌표 조회는 10분간 캐시

∙

좌표가 없으면 가게 이름을 카카오 로컬로 검색해 최근접 역을 찾음

∙

달력에서 날짜를 누르면 그날 찍은 사진을 추천하고, 사진을 고르면 그 시간·장소 기준으로 추천을 다시 좁히면서 사진 메타데이터로 채울 수 있는 정보를 채움

∙

사진을 모두 지우면 처음 추천 목록으로, 일부만 지우면 남은 사진 기준 추천으로 되돌림

도장깨기 · 함께 채우는 지하철 도장 지도 사진으로 기록 자동 채우기 화면도장깨기 · 함께 채우는 지하철 도장 지도 사진으로 기록 자동 채우기 화면도장깨기 · 함께 채우는 지하철 도장 지도 사진으로 기록 자동 채우기 화면

달력과 하루 타임라인

∙

기록 있는 날에 점을 찍고, 날짜를 누르면 그날의 기록을 시간순 타임라인으로 보여 줌

∙

오늘 날짜를 표시하고 미래 날짜는 고를 수 없게 막았으며, 고른 날짜로 바로 기록을 추가할 수 있음

∙

날짜 경계는 KST 기준으로 DB 함수에서 계산

도장깨기 · 함께 채우는 지하철 도장 지도 달력과 하루 타임라인 화면

안 가 본 역 탐색

∙

카카오 로컬(근처 맛집·카페), 네이버 블로그 검색, 인스타그램 해시태그 딥링크 3개 탭으로 다음 갈 곳을 고르게 함

∙

검색 API 키는 Supabase Edge Function 프록시 뒤에 두어 앱에 노출하지 않고, 결과는 DB에 24시간 캐시

∙

블로그 썸네일은 모바일 페이지의 og:image를 작은 크기로 받아 목록 로딩을 가볍게 함

도장깨기 · 함께 채우는 지하철 도장 지도 안 가 본 역 탐색 화면도장깨기 · 함께 채우는 지하철 도장 지도 안 가 본 역 탐색 화면도장깨기 · 함께 채우는 지하철 도장 지도 안 가 본 역 탐색 화면

개인별 지도 테마

∙

같은 방 데이터라도 멤버마다 지도 배경·팔레트를 다르게 고를 수 있음(라이트·다크 배경 프리셋, 기기에 저장)

∙

노선색은 실제 지하철 고유색을 그대로 쓰고, 배경과의 대비만 자동 보정

∙

다크 무채색(그래파이트)처럼 강조색이 밝아지는 테마에서는 강조 버튼 글자색을 어둡게 바꾸고, 비활성 버튼은 보조 글자색으로 낮춰 상태가 구분되게 함

도장깨기 · 함께 채우는 지하철 도장 지도 개인별 지도 테마 화면도장깨기 · 함께 채우는 지하철 도장 지도 개인별 지도 테마 화면도장깨기 · 함께 채우는 지하철 도장 지도 개인별 지도 테마 화면도장깨기 · 함께 채우는 지하철 도장 지도 개인별 지도 테마 화면도장깨기 · 함께 채우는 지하철 도장 지도 개인별 지도 테마 화면도장깨기 · 함께 채우는 지하철 도장 지도 개인별 지도 테마 화면

카카오맵 네이티브 모듈

Swift · Kotlin으로 직접 감싼 지도

∙

카카오맵 SDK를 Expo 네이티브 모듈로 감싸 iOS는 Swift, Android는 Kotlin으로 구현

∙

역 점, 방문 글로우, 내 위치, 검색 핀을 각각 별도 레이어로 그려 서로의 갱신이 영향을 주지 않게 함

선택 핀과 크래시 대응

∙

선택한 역의 이름 배지는 이름을 구워 넣은 이미지 한 장으로 만들어 전용 레이어에 그림

∙

탭할 때마다 기존 마커 스타일을 바꾸던 방식이 실기기 크래시의 유력한 원인이라 판단해 그 경로를 없앰

∙

JS에서 넘어오는 선택 역과 역 데이터의 적용 순서가 보장되지 않아 이름 없는 배지가 남던 문제를, 역 데이터가 바뀔 때 선택 레이어를 다시 그려 해결

노선별 실제 좌표

∙

같은 역이라도 노선마다 카카오 좌표로 따로 점을 찍어 노선별 실제 역 위치를 반영하고, 글로우는 역 단위로 하나만 그려 환승역을 중심 한 곳으로 통합

데이터와 권한 설계

규칙은 DB가 강제

∙

모든 테이블에 RLS를 적용하고, 방 멤버 여부는 is_room_member() 헬퍼로 일관되게 검사

∙

방 정원(6명)은 room_members INSERT 트리거로 강제 — 초대코드 참여든 방장의 직접 초대든 우회 불가

∙

진행률·지도 상태·달력 집계는 RPC로 서버에서 계산

역 데이터 파이프라인

∙

KRIC 전국도시철도 역사·노선 표준데이터를 Python 스크립트로 가공해 951개 물리적 역 시드를 생성(환승역 병합)

∙

1·3·4·7·8호선처럼 여러 운영기관 구간이 한 노선명으로 이어진 경우 역번호로 순서를 만들 수 없어, 노선정보 데이터셋에서 실제 순서를 추출해 덮어씀

∙

시드를 만들 때마다 노선 내 거리 이상치·좌표 충돌·과다 병합을 자동 검증