logit — Log of the Day

1. 앱 화면

아래 다섯 장은 App Store와 실제 앱에서 가져온 화면이다. 타임라인 → 활동 통계 → 감정 분석 → 입력 폼 → 설정/테마 순서로 한 사이클을 보여준다.

2. 문제 — 일기 작성의 심리적·시간적 마찰

전통적 일기는 시간과 에너지를 많이 요구한다. 그 결과 일기 앱의 이탈률은 매우 높다. 시간은 비가역적이고 기억은 휘발성이므로, 간단한 기록이라도 남길 수 있는 도구가 실제로는 없다. 목표는 "기록 습관화를 방해하는 마찰을 제거"하는 것.

• 글의 부담 — 긴 문장 대신 카드 한 줄.
• 앱 진입 비용 — iOS 위젯 우선(계획), 앱 내에서도 탭 한 번.
• 데이터 사일링 — 기록이 쌓여도 의미가 없으면 흥미를 잃는다 → 자동 통계로 동기부여.

3. 설계 — 카드 한 장이 로그 하나

모든 데이터는 LogCard 한 타입으로 정규화된다. 시점(createdAt)에 기분·이벤트·사진·코멘트가 묶이고, 그 묶음이 곧 카드다.

interface LogCard {
  id: string;            // uuid
  createdAt: number;     // epoch ms
  mood?: string[];       // 기분 태그 (복수 선택 가능)
  eventType?: EventType[]; // 이벤트 태그 (복수 선택 가능)
  comment?: string;      // 한 줄 메모 (선택)
  image?: string;        // 사진 URI (선택)
}

3.1 데이터 입력

사용자가 길게 쓰지 않아도 되도록 모든 필드는 탭으로 선택한다. 기분과 이벤트는 사용자가 설정에서 직접 추가·삭제·활성/비활성화할 수 있다.

• 기분(Mood) — 기본 6종(Satisfaction / Peace / Anxiety / Tired / Happy / Gratitude)에 valence, arousal 2차원 수치를 부여. 통계의 감정 좌표 계산에 그대로 쓰인다.
• 이벤트(Event Type) — 기본 6종(Bedtime / Go to Work / Wake Up / Meal / Meeting / Leave Work) + 사용자 추가. 시간대(아침/점심/저녁/늦은 밤)와 무관하게 같은 카드를 공유.
• 사진 — 카메라/갤러리에서 한 장 첨부.
• 코멘트 — 선택, 한 줄.

3.2 자동 타임라인

카드는 createdAt 내림차순, 즉 오늘이 가장 위로 정렬된다. 7개 칩의 요일 선택기는 date-fns로 주차 경계를 계산하고, 카드는 선택한 날짜에 해당하는 것만 필터링된다. react-native-calendars의 캘린더 모달로 임의 날짜 점프도 제공한다.

3.3 통계 / 감정 분석

누적된 LogCard에서 다음을 계산한다. 모든 차트는 react-native-chart-kit + react-native-svg로 렌더링.

• Overall — 첫 로그 / 평균 일일 / 총 로그 / 활성 일수 / Mood 태그 수 / Event 태그 수 / 가장 활발한 요일·시간대 / 연속 일수.
• Mood/Event 분포 — 사용 횟수 상위 N + "+N more items" 접기.
• Emotion Analysis (레이더) — Mood의 valence, arousal을 x/y로 환산, 평균 점과 일별 점을 같은 좌표계에 겹쳐 표시.
• Day of Week — 요일별 평균 valence/arousal 라인 차트.
• Monthly — 월별 추이.

3.4 다국어 · 테마

UI 문자열은 src/utils/translations.ts(20KB)에 영어/한국어 키-값으로 들어 있고 LanguageContext가 현재 언어와 t() 함수를 제공한다. 테마 프리셋이 도입되어 색·표면·강조를 테마 단위로 전환한다. 설정의 Mood 토글과 함께 나만의 작업 공간을 만든다.

4. 기술 스택과 결정

4.1 왜 React Native인가

iOS 1차 출시에 Android도 옵션 빌드로 가져가고 싶었다. 같은 TypeScript 코드 베이스로 iOS · Android · macOS(Apple Silicon) · visionOS를 한 번에 가져갈 수 있는 현실적 선택지는 RN 0.81 + New Architecture뿐이었다. 0.81은 React 19와 짝을 이루며 동작하고, Hermes 기본 활성화로 cold start가 짧다.

4.2 UI 라이브러리: react-native-paper (Material Design 3)

MD3로의 마이그레이션을 시작했다. PaperProvider에 paperTheme(primary / secondary / surface / onSurface / outline …)을 주입하면 Button, Text, IconButton이 일관된 표면·타이포로 자동 정렬된다. 테마 프리셋은 이 paperTheme 객체를 갈아끼우는 방식으로 구현.

4.3 데이터는 AsyncStorage

MVP는 로컬 우선이다. 서버 비용 없이 iOS 위젯·오프라인 환경에서도 작동한다. src/storage/index.ts(getAllLogs / saveLogs / migrateExistingLogs)는 키 하나("logs")에 JSON 배열로 직렬화하고, 시작 시 tagMigration으로 구버전 태그 키를 신버전으로 변환한다. 개인정보 처리방침에도 명시했듯 앱이 어떤 데이터도 수집하지 않는다.

4.4 비동기 데이터 처리

모든 화면은 두 훅(useLogs, usePreferences)을 통해 AsyncStorage와 통신한다. useAsync로 로딩/에러/성공 상태를 통합해, 화면마다 같은 fetch 패턴을 반복하지 않도록 했다.

4.5 디바이스 통합

• 위치 — react-native-geolocation-service. 권한 거부 시 좌표 없이 저장.
• 사진 — react-native-image-picker (카메라/갤러리).
• 날짜/시간 — @react-native-community/datetimepicker + date-fns로 로케일(ko/en) 처리.
• 아이콘 — react-native-feather (Calendar / Settings / BarChart / Plus …).

5. 디자인 — 미니멀과 콘텐츠 우선

본 프로젝트는 Material Design 3로의 디자인 시스템 재정비를 진행 중이다. 그 결과는 두 가지로 나타난다.

• 콘텐츠가 화면의 주인공 — 카드 위에는 기분/이벤트 칩과 짧은 코멘트, 그 아래에 시각. 장식 요소는 최소화.
• 체류 시간 최소화 — 입력은 한 탭에 끝. 통계는 항상 1탭 거리.

색상 결정도 미니멀리즘 원칙을 따른다. 기본 블루(CTA/링크)와 그린(이벤트 강조), 라이트 배경 + 옅은 회색 표면이 일관되게 반복된다. 테마 프리셋은 같은 구조를 다른 팔레트로 표현한 변주다.

6. 한계와 다음 단계

• 위젯(Widget) — M2 마일스톤으로 Swift + WidgetKit 타깃이 계획되어 있다. 홈 화면에서 한 번에 기록 시작하는 게 1차 출시 목표였지만, 시간 제약으로 앱 단독 출시가 먼저였다.
• 예약 로그 / 알림 — 반복 일과(취침/기상/출퇴근)를 자동 카드화하는 M3.
• 클라우드 동기화 — M5–M7 단계로 Apple/Google 계정 연동, Firebase/Supabase 백엔드, 오프라인-퍼스트 동기화. 데이터 모델은 이미 userId, syncMetadata(version / isDirty / deviceId) 필드를 갖고 있어 마이그레이션 가능.
• Android 빌드 — RN 코드 베이스는 이미 Android 타깃을 포함하나, 정식 배포는 미진.
• 접근성 등록 — App Store 손쉬운 사용 섹션은 아직 비어 있다. 다음 업데이트에서 정식 등록 예정.

7. 배포 & 링크