실시간 환율 계산기
금액 한 번 입력으로 선택한 모든 통화를 동시 변환. 50개 통화, 7개 언어. 스토어 출시 후 운영 중.
- 역할
- 기획 · UX/UI · 개발 · 출시 / 리디자인
- 기간
- 2025 출시 · v1.3
- 범위
- Android · 7개 언어
01 · Problem
무엇이 불편했나
여행·직구 중 환율 검색은 한 번에 한 통화 쌍만 보여주고, 금액을 바꿀 때마다 다시 입력해야 한다. 오프라인일 땐 아예 계산이 안 된다.
목표
- G1
카드 하나에 입력하면 모든 통화 동시 변환
- G2
24시간 캐시로 오프라인에서도 계산
- G3
소수점 오차 없는 정밀 계산
02 · UX
현행 분석 & 재설계
실제 운영 중인 제품의 구조를 뜯어보고, 막히는 지점을 찾아 흐름과 정보 구조를 다시 설계했습니다.
As-is 진단 → 리디자인 방향
AS-IS모든 통화 카드가 같은 크기 — 지금 입력 중인 기준 통화가 시각적으로 구분되지 않음
TO-BE기준 통화 카드를 상단 대형 카드로 승격, 나머지는 리스트
AS-IS통화 편집·언어·테마가 드로어 안에 숨어 있음
TO-BE편집은 리스트 상단 액션으로 노출, 드로어는 설정 전용
AS-IS환율 기준 시각·오프라인 배지가 앱바 아래 작게 표시
TO-BE기준 카드 하단에 '언제 기준 환율인지' 상태 행으로 고정
Persona
여행 준비 중인 직장인 (29)
일본·베트남 여행 전후로 환율 확인
- →자주 쓰는 통화만 고정
- →현지에서 오프라인 계산
해외 직구족 (37)
달러·유로 가격을 원화로 비교
- →여러 통화 한 번에 비교
- →금액 복사
User flow
- 01
첫 실행
표시할 통화 선택 (검색, 최소 2개)
- 02
카드 탭
탭한 통화가 기준 통화로 전환
- 03
금액 입력
교차환율로 모든 카드 즉시 재계산
- 04
복사 / 새로고침
금액 복사, 당겨서 새로고침 (쿨다운)
Information architecture
변환
- 기준 통화 카드
- 변환 리스트
- 환율 기준 시각
통화 편집
- 검색
- 추가 / 삭제
설정
- 언어 7종
- 테마
- 라이선스
03 · UI
리디자인 와이어프레임
색과 스타일을 빼고, 재설계한 정보 위계와 레이아웃만으로 핵심 화면을 검증했습니다.
🇰🇷 KRW · 기준
₩100,000
¥ 10,842
🇯🇵 JPY
$ 72.41
🇺🇸 USD
€ 66.90
🇪🇺 EUR
₫ 1,834,200
🇻🇳 VND
변환
기준 통화는 크게, 변환 결과는 리스트로.
통화 선택
온보딩과 편집을 같은 화면으로.
🇺🇸 USD · 기준
$ 50
₩ 69,050
🇰🇷 KRW
¥ 7,486
🇯🇵 JPY
오프라인
마지막 환율로 계속 계산, 상태는 분명하게.
04 · GUI
디자인 시스템 리뉴얼 & 최종 화면
틸 하나로 통일 — 돈, 안정감, 숫자 가독성
Before
라이트 네이비 / 다크 블루 / 그린 3테마. 테마마다 성격이 달라 브랜드 인상이 약함
After · Color
Primary
#0f766e
Accent
#5eead4
Text
#0b1f1d
Muted
#5b6f6c
Surface
#ffffff
Background
#f6faf9
Typography
Components
radius 16px · spacing 4pt grid
Final screens
🇰🇷 KRW · 기준
₩100,000
10:42 기준 환율 · 당겨서 새로고침
¥ 10,842
🇯🇵 JPY
$ 72.41
🇺🇸 USD
€ 66.90
🇪🇺 EUR
₫ 1,834,200
🇻🇳 VND
🇺🇸 USD · 기준
$ 50
₩ 69,050
🇰🇷 KRW
¥ 7,486
🇯🇵 JPY
Design decisions
3테마 → 1브랜드 + 다크
그린·네이비 테마를 틸 단일 브랜드로 정리하고 라이트/다크만 유지.
숫자 우선 타이포
tabular-nums로 자릿수 정렬. 기준 금액 32px, 리스트 18px.
기준 카드 = 프라이머리 면
입력 중인 통화만 컬러 면으로 칠해 '지금 무엇을 입력 중인지' 즉시 인지.
05 · Outcome
결과와 배운 점
- 50개
- 지원 통화
- 7개
- 지원 언어
- 24h
- 오프라인 캐시
- ✦Decimal 계산으로 교차환율 오차 제거
- ✦단순한 앱일수록 '지금 어떤 상태인지(기준·오프라인)' 표시가 신뢰를 만든다
* 실제 제품을 분석해 리디자인한 케이스 스터디. 제품명·코드는 비공개, 지표는 기획서·코드로 확인된 값만 표기. 화면 속 데이터는 예시입니다.
이런 걸 만들고 싶다면
30분 무료 진단 콜로 범위와 일정부터 같이 잡아요.
다른 프로젝트
다음: 장소 기록 앱 →
LIVEOCR 노트 앱
사진 한 장으로 가계부·오답노트·독서기록·문장수집 노트를 만드는 앱. 스토어 출시 후 운영 중.
Flutter / ML Kit OCR / GPT-4o / SQLite
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