MyDate

배경 & 목적

기존 캘린더 앱들은 일정 생성 과정이 번거롭고, 친구와의 약속 조율이나 할 일 공유 기능이 부재했다. 내가 원하는 간편한 캘린더가 없어서 직접 만들기로 했다. CatchTable의 예약/웨이팅 컨셉과 Planit의 직관적인 캘린더 UX를 결합하여, 최소한의 조작으로 일정을 생성하고 친구와 자연스럽게 약속을 잡을 수 있는 앱을 목표로 했다.

출시 상태

• ▶서비스명: MyDate
• ▶개발/리포지토리명: CalendarTable / calender-table-mono
• ▶배포 상태: 2026-05 기준 iOS App Store 출시 완료

내 역할과 기여도

• ▶팀 구성: 1인 사이드 프로젝트 (기획, 디자인, 풀스택 개발 전담)
• ▶담당 범위: 기획 → 디자인 시스템 → 프론트엔드/백엔드 → 모바일 앱 → 배포 전 과정
• ▶의사결정 참여: 기술 스택 선정, 아키텍처 설계, UI/UX 설계 등 모든 의사결정 주도

---

1. 간편 일정 생성

몇 번의 클릭만으로 빠르게 일정을 생성할 수 있는 UX 설계. 빠른 일정 추가 FAB 버튼으로 최소 입력(제목 + 날짜)만으로 일정 등록 가능. 월간/주간 뷰 전환, 카테고리별 색상 필터링, 종일/시간 일정 구분을 지원한다.

2. 약속 시스템 (Appointment)

친구에게 약속을 요청하고 수락/거절/대안 제안 흐름을 구현. 상태 머신 기반(pending → confirmed → completed/cancelled)으로 약속 생명주기를 관리하며, 최대 2회 미루기 기능과 다자간 약속(AppointmentMember)을 지원한다.

3. 친구 가용시간 조회

약속을 잡기 전에 친구의 공개 일정을 월간/일간 타임라인으로 확인할 수 있다. 비공개 일정은 "바쁨"으로만 표시되어 프라이버시를 보호하면서도 빈 시간대를 파악할 수 있다.

4. 투두 공유

개인 할 일 목록에 특정 친구 1명을 지정하여 투두를 공유할 수 있다. 공유된 투두는 양쪽 모두에서 완료 상태를 확인할 수 있어 함께 해야 할 일을 관리하기 좋다.

5. 푸시 알림 & 리마인더

Firebase Cloud Messaging으로 웹/iOS/Android 통합 알림을 지원한다. 약속 요청, 수락, 거절, 친구 요청 등 이벤트 기반 알림과 일정 전 사전 알림(10분~2일 전)을 GitHub Actions 크론으로 5분마다 실행한다.

6. 하이브리드 모바일 앱

Flutter WebView로 Next.js 웹앱을 래핑하여 iOS/Android 네이티브 앱을 구축. JavaScript Bridge를 통해 인증 토큰 동기화, FCM 토큰 전달, 테마 동기화, 햅틱 피드백 등 네이티브 기능을 연동한다.

7. Liquid Glass 디자인 시스템

Atomic Design 패턴 기반의 자체 Glass 디자인 시스템을 구축. CVA(Class Variance Authority)로 variant를 관리하고, 3단계 glass 레벨(subtle/standard/strong), oklch 색상 공간, backdrop-filter 블러 효과를 적용했다. 스타일가이드 페이지(/styleguide)에서 모든 컴포넌트를 확인할 수 있다.

---

정량적 성과

• ▶약 1개월 만에 풀스택 + 모바일 앱 MVP 완성 (80 커밋, 26,600+ LOC)
• ▶45개 REST API 엔드포인트 + 75개 UI 컴포넌트 구현
• ▶iOS App Store 출시 완료 및 서비스명 MyDate로 리브랜딩

정성적 성과

• ▶SSOT 원칙 기반 타입 안전한 풀스택 아키텍처 설계 경험
• ▶Liquid Glass 디자인 시스템을 처음부터 설계하고 스타일가이드까지 구축
• ▶Flutter WebView 하이브리드 앱의 네이티브 브릿지 구현 노하우 축적
• ▶1인 프로젝트에서 기획→디자인→개발→배포 전 프로세스 경험
• ▶개인 사이드 프로젝트를 실제 스토어 심사와 배포 단계까지 마무리한 경험 확보

---

[!important] 면접용 STAR 기법 가장 임팩트 있는 사례를 정리

사례 1: 간편 일정 생성 UX 최적화

상황 (Situation) 기존 캘린더 앱들은 일정 생성 시 제목, 날짜, 시간, 반복, 알림 등 다수의 필드를 순차적으로 입력해야 해서 사용자 피로도가 높았다.

과제 (Task) 최소한의 입력(2~3번 클릭)으로 일정을 생성하면서도, 필요 시 상세 설정을 할 수 있는 점진적 UI를 설계해야 했다.

행동 (Action)

• ▶FAB(Floating Action Button)으로 빠른 일정 추가 진입점 제공
• ▶날짜는 현재 선택된 캘린더 날짜를 기본값으로 자동 설정
• ▶제목만 입력하면 바로 생성 가능하도록 필수 필드 최소화
• ▶드럼롤 스크롤(usedrumrollScroll) 기반 시간 선택기로 직관적 시간 입력
• ▶상세 설정은 펼침(expand) 영역으로 분리하여 기본 흐름을 방해하지 않음

결과 (Result) 기존 57단계 → 23단계로 일정 생성 과정 단축. 일상적인 일정은 3초 이내 등록 가능.

사례 2: Flutter-Web 하이브리드 브릿지 구현

상황 (Situation) 웹 앱을 모바일로 확장하면서 인증(OAuth 콜백), 푸시 알림(FCM 토큰), 네이티브 기능(햅틱, 테마)을 웹-네이티브 간 동기화해야 했다.

과제 (Task) WebView 안의 Next.js와 Flutter 네이티브 레이어 간 양방향 통신 브릿지를 설계하고, OAuth 리다이렉트가 WebView 내에서 정상 동작하도록 해야 했다.

행동 (Action)

• ▶flutter-bridge.ts(웹)와 bridge_handler.dart(Flutter) 양방향 JS Bridge 구현
• ▶Flutter → Web: JavaScriptChannel로 FCM 토큰, 디바이스 정보, 인증 토큰 전달
• ▶Web → Flutter: webViewController.runJavaScript()로 테마 변경, 네비게이션 이벤트 전달
• ▶OAuth 콜백은 app_links로 딥링크 수신 후 WebView URL 갱신
• ▶flutter_secure_storage로 인증 토큰을 안전하게 저장하고 자동 로그인 구현

결과 (Result) 단일 코드베이스(Next.js)로 웹/iOS/Android 3개 플랫폼을 동시 지원하면서, 네이티브 수준의 푸시 알림과 자동 로그인 경험을 달성.

---