장소 기록 앱
가보고 싶은 곳을 카드로 저장하고, 계획 → 방문 → 리뷰까지 실행하게 만드는 앱. 필드 암호화, 다국어, 지도 연동.
- 역할
- 기획 · UX/UI · 개발 / 리디자인
- 기간
- 2026
- 범위
- Android 우선 · 한/영
01 · Problem
무엇이 불편했나
가고 싶은 곳을 지도 앱 즐겨찾기, SNS 저장, 메모장에 흩어 저장하지만 '저장만 하고 실제로는 안 간다'. 저장과 실행 사이의 연결이 없다.
목표
- G1
저장만 하지 말고, 실행하자 — 카드에 상태(저장됨 → 계획 중 → 다녀왔어요 → 리뷰 완료)
- G2
사진 카드 / 메모 카드 두 방식
- G3
주소 등 민감 필드는 기기 키로 암호화
02 · UX
현행 분석 & 재설계
실제 운영 중인 제품의 구조를 뜯어보고, 막히는 지점을 찾아 흐름과 정보 구조를 다시 설계했습니다.
As-is 진단 → 리디자인 방향
AS-IS상태 4단계가 필터 바에만 있어 '다음에 뭘 해야 하는지' 드러나지 않음
TO-BE홈 상단에 '이번 주 계획' 섹션 — 계획 중 카드와 예정일 우선 노출
AS-IS탐색 화면이 구현돼 있지만 라우트에 연결되지 않아 진입 불가
TO-BE탐색을 지도 탭에 합쳐 '내 주변 저장한 곳'으로 재구성
AS-IS게스트 모드에서 저장 시점에 갑자기 로그인 요구
TO-BE첫 카드 작성 완료 직후 '저장하려면 로그인' 시트 — 입력 내용 유지
Persona
주말 카페 투어러 (27)
SNS에서 본 카페를 모아두는 편
- →사진 + 한 줄 메모
- →동네별로 지도에서 보기
데이트 코스 담당 (33)
가볼 곳 리스트를 계획으로 바꾸고 싶음
- →방문 예정일
- →다녀온 곳 기록
User flow
- 01
카드 만들기
사진(갤러리/카메라) · 제목 · 메모 · 장소 검색 · 상황 태그
- 02
계획 잡기
상태를 '계획 중'으로, 방문 예정일 지정 → 로컬 알림
- 03
다녀오기
방문일 기록, 상태 '다녀왔어요'
- 04
리뷰
후기 남기고 '리뷰 완료'
- 05
지도로 보기
위치 있는 카드를 지도 마커로
Information architecture
내 카드
- 이번 주 계획
- 상태 필터 4단계
- 검색
지도
- 카드 마커
- 내 주변 저장한 곳
프로필
- 저장 · 계획 · 방문 통계
- 언어
- CSV 내보내기
- 회원탈퇴
03 · UI
리디자인 와이어프레임
색과 스타일을 빼고, 재설계한 정보 위계와 레이아웃만으로 핵심 화면을 검증했습니다.
성수 블루보틀
토요일 방문 예정
연남동 소품샵
저장됨 · #친구랑
을지로 노포
다녀왔어요 · #저녁
제주 협재해변
저장됨 · #여행
북촌 한옥 카페
리뷰 완료 · #혼자
내 카드
이번 주 계획을 맨 위에. 상태가 곧 다음 행동.
제목
장소 검색
방문 예정일
새 카드
필수는 제목 하나. 나머지는 나중에.
성수 블루보틀
서울 성동구 · #데이트
카드 상세
상태 스텝을 카드 안에서 바로 진행.
04 · GUI
디자인 시스템 리뉴얼 & 최종 화면
코랄 + 웜 뉴트럴 — 사진, 여행, '가보자'는 동기
Before
코발트 블루 기반 뉴트럴 시스템. 정돈됐지만 '여행·추억' 감성이 약함
After · Color
Primary
#e8553d
Accent
#ffc56e
Text
#2a1a14
Muted
#8a7468
Surface
#ffffff
Background
#fffaf5
Typography
Components
radius 20px · spacing 4pt grid
Final screens
성수 블루보틀
토요일 방문 예정
연남동 소품샵
저장됨 · #친구랑
을지로 노포
다녀왔어요 · #저녁
제주 협재해변
저장됨 · #여행
북촌 한옥 카페
리뷰 완료 · #혼자
제목
장소 검색
방문 예정일
성수 블루보틀
서울 성동구 · #데이트
Design decisions
상태 = 진행 바
4단계 상태를 색 배지 대신 하나의 진행 바로. 다음 단계 버튼이 항상 프라이머리.
사진 카드 라운드 32 유지
기존 토큰 중 사진 카드 32px는 유지하고 나머지 컴포넌트를 20px로 통일.
한/영 여유 폭
영문 라벨 기준 버튼 폭 30% 여유, 상태 라벨은 2줄 허용.
05 · Outcome
결과와 배운 점
- 4단계
- 저장 → 리뷰 상태 흐름
- AES-256
- 민감 필드 암호화
- 2개
- 지원 언어 (한/영)
- ✦쿼리에 쓰는 필드와 민감 필드를 분리해야 암호화와 검색을 함께 가져갈 수 있음
- ✦'저장'보다 '다음 행동'을 보여주는 홈이 재방문을 만든다
* 실제 제품을 분석해 리디자인한 케이스 스터디. 제품명·코드는 비공개, 지표는 기획서·코드로 확인된 값만 표기. 화면 속 데이터는 예시입니다.
이런 걸 만들고 싶다면
30분 무료 진단 콜로 범위와 일정부터 같이 잡아요.
다른 프로젝트
다음: 카드뉴스 자동화 파이프라인 →
LIVEOCR 노트 앱
사진 한 장으로 가계부·오답노트·독서기록·문장수집 노트를 만드는 앱. 스토어 출시 후 운영 중.
Flutter / ML Kit OCR / GPT-4o / SQLite
LIVE실시간 환율 계산기
금액 한 번 입력으로 선택한 모든 통화를 동시 변환. 50개 통화, 7개 언어. 스토어 출시 후 운영 중.
Flutter / REST API / Decimal / AdMob
개발 중카드뉴스 자동화 파이프라인
인스타그램 카드뉴스 계정 2개를 소재 수집 → 스코어링 → 카드 렌더 → 게시까지 자동 운영. 사람은 텔레그램으로 주제만 고른다.
Node.js / Claude / Puppeteer / Supabase / GitHub Actions
개발 중해외 신상품 레이더
중국 커머스 신상품의 '순위가 아닌 변화'를 감지해 점수화하고 텔레그램으로 전달하는 사내 소싱 도구.
TypeScript / Python / Apify / Claude / Telegram
케이스 스터디블로그 자동 발행 파이프라인
키워드 리서치 → 글 생성 → 이미지·내부링크 → 발행까지 무인으로 돌아간 일일 SEO 발행 시스템. 2개 블로그 운영.
Python / Claude / Blogger API / launchd
케이스 스터디단체 커피 주문 취합 앱
총무가 주문방을 만들고 링크·6자리 코드를 공유하면, 팀원은 가입 없이 메뉴·옵션을 고르고 주문서가 자동 집계된다.
Flutter / Firestore / Riverpod
케이스 스터디주간 식단 & 장보기 리스트
알레르기·예산·요리 실력·아이 매운맛 단계를 반영해 7일 식단과 통합 장보기 목록을 만드는 AI 앱.
Flutter / Supabase / Claude