OCR 노트 앱
사진 한 장으로 가계부·오답노트·독서기록·문장수집 노트를 만드는 앱. 스토어 출시 후 운영 중.
- 역할
- 기획 · UX/UI · 개발 · 출시 / 리디자인
- 기간
- 2025 출시 · 2026 리디자인
- 범위
- Android · 한/영
01 · Problem
무엇이 불편했나
영수증, 시험지, 책 한 페이지를 찍어두지만 사진은 갤러리에 묻히고, 다시 손으로 옮겨 적어야 한다. 용도마다 가계부 앱, 오답노트 앱, 독서 앱을 따로 쓰는 것도 번거롭다.
목표
- G1
촬영 한 번으로 노트 종류 자동 추천
- G2
5가지 노트를 한 앱에서 기록·탐색
- G3
노트는 기기 안에만 저장 (개인정보 서버 미전송)
02 · UX
현행 분석 & 재설계
실제 운영 중인 제품의 구조를 뜯어보고, 막히는 지점을 찾아 흐름과 정보 구조를 다시 설계했습니다.
As-is 진단 → 리디자인 방향
AS-IS홈이 노트 타일 5개 + 촬영 카드 + 가이드가 한 화면에 모인 허브 구조. 기록이 쌓여도 '최근 노트'가 보이지 않음
TO-BE홈을 '최근 기록 피드'로 바꾸고 촬영은 하단 고정 FAB로 분리
AS-IS탭·라우트 없이 화면마다 push → 노트 종류 간 이동이 매번 홈 경유
TO-BE하단 탭 3개(기록 · 탐색 · 설정)로 평탄화
AS-ISOCR 후 노트 추천 화면에서 인식 텍스트를 확인하기 어려움
TO-BE추천 카드에 인식 텍스트 미리보기 + 신뢰도 낮은 경우 '다른 노트' 우선 노출
Persona
수험생 (19)
틀린 문제를 찍어 오답노트로 정리
- →과목·난이도로 모아보기
- →정답·핵심 개념 함께 저장
1인 가구 직장인 (31)
영수증으로 가계부 관리
- →영수증 촬영만으로 지출 입력
- →월별 지출 통계 · PDF
User flow
- 01
촬영 / 갤러리
문서 가이드 프레임이 있는 커스텀 카메라
- 02
텍스트 인식
온디바이스 ML Kit 1차 → 짧거나 불확실하면 GPT-4o 보정
- 03
노트 추천
영수증 · 교재·시험지 · 책 페이지 · 메모 중 자동 분류
- 04
자동 채움 & 저장
노트 양식에 인식 결과를 채워 확인 후 저장
- 05
탐색
월별 피드, 노트 종류 필터, 통계 · PDF 내보내기
Information architecture
기록 (홈)
- 최근 노트 피드
- 노트 종류 필터
- + 스캔
노트 5종
- 가계부
- 오답노트
- 책갈피
- 문장수집
- 노트커버
탐색
- 월별 피드
- 가계부 통계
- PDF 내보내기
설정
- 언어 (한/영)
- 버전 정보
- 버그 신고
03 · UI
리디자인 와이어프레임
색과 스타일을 빼고, 재설계한 정보 위계와 레이아웃만으로 핵심 화면을 검증했습니다.
편의점 영수증
가계부 · 오늘
수학 확률과 통계 21번
오답노트 · 어제
『데미안』 p.112
책갈피 · 10/24
"새는 알에서 나오려고 투쟁한다"
문장수집 · 10/24
홈 · 최근 기록
허브형 → 피드형. 노트 종류는 칩 필터로.
인식 & 노트 추천
인식 텍스트를 보여주고, 추천 노트를 한 번에 확정.
지출
₩842k
수입
₩2.9M
잔액
₩2.1M
식비
32건
교통
18건
가계부 통계
이번 달 수입·지출·잔액을 한눈에.
04 · GUI
디자인 시스템 리뉴얼 & 최종 화면
스캔 라인 블루 하나로 통일 — 노트 색은 칩 점(dot)으로만
Before
코발트 블루 + 블랙 히어로 + 노트별 5색. 노트 색이 강해 화면마다 톤이 흔들림
After · Color
Primary
#2a4bd7
Accent
#7aa2ff
Text
#111833
Muted
#68708c
Surface
#f4f6fb
Background
#ffffff
Typography
Components
radius 14px · spacing 4pt grid
Final screens
편의점 영수증
가계부 · 오늘
수학 확률과 통계 21번
오답노트 · 어제
『데미안』 p.112
책갈피 · 10/24
"새는 알에서 나오려고 투쟁한다"
문장수집 · 10/24
GS25 역삼점 2026-10-27 삼각김밥 1,500 바나나우유 1,700 … 합계 8,400
지출
₩842k
수입
₩2.9M
잔액
₩2.1M
식비
32건
교통
18건
Design decisions
컬러 1개로 수렴
기존 노트별 5색을 배경·버튼에서 빼고 칩의 작은 점으로만 사용. 화면 톤이 일정해짐.
블랙 히어로 → FAB
홈을 크게 차지하던 블랙 촬영 카드를 하단 고정 버튼으로. 기록 피드가 첫 화면의 주인공.
광고는 피드 하단만
촬영 → 저장 흐름에는 배너 노출 0. 기록 피드 끝에만 배치.
05 · Outcome
결과와 배운 점
- 5종
- 노트 템플릿
- 하이브리드
- 온디바이스 OCR + LLM 보정
- LIVE
- Android · 한/영
- ✦온디바이스 1차 처리 + LLM 보정으로 비용과 정확도 균형
- ✦기능이 늘수록 '허브형 홈'은 한계 — 기록 중심 피드로 전환
* 실제 제품을 분석해 리디자인한 케이스 스터디. 제품명·코드는 비공개, 지표는 기획서·코드로 확인된 값만 표기. 화면 속 데이터는 예시입니다.
이런 걸 만들고 싶다면
30분 무료 진단 콜로 범위와 일정부터 같이 잡아요.
다른 프로젝트
다음: 실시간 환율 계산기 →
LIVE실시간 환율 계산기
금액 한 번 입력으로 선택한 모든 통화를 동시 변환. 50개 통화, 7개 언어. 스토어 출시 후 운영 중.
Flutter / REST API / Decimal / AdMob
LIVE장소 기록 앱
가보고 싶은 곳을 카드로 저장하고, 계획 → 방문 → 리뷰까지 실행하게 만드는 앱. 필드 암호화, 다국어, 지도 연동.
Flutter / Firebase / Google Maps
개발 중카드뉴스 자동화 파이프라인
인스타그램 카드뉴스 계정 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