Android Jetpack
위젯, 생체 인증, Health Connect 등 안드로이드 네이티브 기능을 연동하기 위해 사용했습니다.
개인용 일기 앱
약 4년간 직접 사용하며 개선해 온 개인 일기 서비스.
Overview
2022년부터 현재까지 직접 사용하며 기능을 개선하고, 실제 사용 과정에서 발견한 요구사항에 맞춰 여러 차례 재설계한 일기 서비스입니다.
Motivation
2020년부터 카카오톡 나와의 채팅방에 일기를 작성했지만, 지난 기록을 찾아보거나 날짜별로 관리하기 어려웠습니다. 기록의 가독성과 접근성을 높이고 원하는 기능을 직접 추가하기 위해 일기 서비스를 개발했습니다.
Stack
기술 선택 이유
Next.js
웹과 안드로이드 WebView에서 하나의 UI를 재사용하고, 사용자 인증을 처리하기 위해 사용했습니다.
Spring Boot
일기와 미디어 데이터를 관리하는 REST API를 구현하고 저장소별 백업 로직을 운영하기 위해 사용했습니다.
React Query
일기 데이터를 캐싱하고 Optimistic 업데이트와 Infinite Scroll을 구현하기 위해 사용했습니다.
PostgreSQL
날짜별 일기 내용과 관련 데이터를 영속적으로 저장하기 위해 사용했습니다.
Key Features
- 텍스트, 사진, Spotify 음악을 조합한 일기 작성
- 캘린더와 검색을 통한 과거 일기 조회
- 홈 화면 위젯을 통한 일기 작성 화면 빠른 실행
- 생체 인증을 활용한 일기 암호화 키 보호
- Health Connect의 수면 시작·종료 기록 자동 반영
Architecture
- Next.js로 구현한 UI를 웹과 Android WebView에서 함께 사용하고, 네이티브 기능은 JavaScript Interface를 통해 연결했습니다.
- 웹과 백엔드 모두 presentation/application/domain/infrastructure 계층으로 나누고, 인터페이스와 의존성 주입을 활용해 구현체를 교체할 수 있도록 구성했습니다.
- Spring Boot REST API가 일기 데이터를 PostgreSQL에 저장하고, 사진은 로컬 파일 시스템과 Firebase Storage에 각각 저장하도록 구성했습니다.
- 일기 내용은 API 요청과 응답에서 AES로 암복호화하고, 안드로이드에서는 Android Keystore와 생체 인증을 이용해 암호화 키를 보호했습니다.
- React Query 캐시와 Optimistic 업데이트를 적용해 일기 작성 결과를 즉시 반영하고, 실패 시 이전 데이터로 복구하도록 구성했습니다.
- Health Connect에서 가져온 수면 기록은 네이티브 브리지를 통해 웹으로 전달하고, 서버에서 날짜별 일기에 중복 없이 반영했습니다.
Result
2022년부터 현재까지 실제 일기 기록에 사용하며, 장기간 운영 과정에서 생긴 요구사항을 반영해 웹·안드로이드·백엔드 구조와 기능을 지속적으로 개선했습니다.
Troubleshooting
문제와 해결
웹 UI를 안드로이드에서도 재사용하면서 생체 인증, 위젯, Health Connect 같은 네이티브 기능을 사용해야 했던 문제
Next.js 화면을 WebView로 제공하고 JavaScript Interface와 기능별 provider를 구현해 웹 코드와 안드로이드 네이티브 기능을 연결했습니다.
일기 암호화 키를 기기에 안전하게 저장하면서도 앱에서 편리하게 불러와야 했던 문제
Android Keystore에서 생성한 키로 일기 암호화 키를 보호하고, 생체 인증이나 기기 잠금 인증에 성공한 경우에만 복호화하도록 구현했습니다.
고용량 사진을 그대로 업로드하면 전송 시간이 길어지고 저장 공간을 많이 사용하는 문제
업로드 전에 브라우저에서 사진을 압축하고, 업로드 진행률과 실패 시 재시도 기능을 제공하도록 구현했습니다.
일기 작성 후 서버 응답을 기다리는 동안 새 기록이 바로 화면에 표시되지 않는 문제
React Query의 Optimistic 업데이트로 작성 내용을 즉시 캐시에 반영하고, 요청 실패 시 기존 데이터로 롤백하도록 구현했습니다.