로딩 중
목록으로
Projects
프로젝트 상세
MAIN QUEST#더큼만세력
DK Mobile
하이브리드 앱 전환 (Android · iOS)
기간
2024.10 - 2025.03
역할
Frontend
스택
React · TypeScript · React Query · MUI · NestJS · MongoDB · Firebase · Capacitor
Overview

모바일 사용자 비중이 높아 기존 더큼만세력 웹 서비스를 Capacitor를 활용해
Android/iOS 하이브리드 앱으로 전환하고, 모바일 전용 UI/UX와 기능을 개발하여 구글과 앱 스토어에 출시한 프로젝트입니다.

# 더큼만세력 모바일 앱
더큼만세력 모바일 앱 메인 화면
더큼만세력 모바일 만세력 분석 화면
더큼만세력 모바일 성격 분석 화면
더큼만세력 모바일 연애운 분석 화면

Capacitor를 활용하여 Vite React 기반 웹 서비스를 네이티브 환경으로 이식하고,
터치 인터페이스, 화면 크기, 모바일 동작 흐름을 고려하여 MUI 기반의 모바일 디자인 시스템을 구축했습니다.
기존 NestJS API를 수정 없이 그대로 활용하여 웹과 앱 간 데이터 일관성을 유지하고, 별도 모바일 백엔드 구축 없이 빠르게 앱을 출시했습니다.

# 더큼만세력 모바일 예약 기능
더큼만세력 모바일 예약 캘린더
더큼만세력 모바일 예약 등록 드로어
더큼만세력 모바일 예약 상태 관리

• 모바일 환경에서는 예약 기능을 주요 기능으로 선택하여, 예약 기능을 쉽게 할 수 있도록 하였습니다.
• 예약 등록은 드로어 형태로 제공하여, 예약 정보를 쉽게 입력할 수 있도록 하였습니다.
• 예약 상황을 캘린더에 색상이 다른 마크로 표시하여, 예약 상황을 쉽게 확인할 수 있도록 하였습니다.

# 그 외 추가 기능

# 테마, 한글 한자 변환 기능

• 테마 선택 기능을 추가하여, 다크모드와 라이트모드를 선택할 수 있도록 하였습니다.
• 만세력에 한글 한자 변환 기능을 추가하여, 한글을 한자로 변환할 수 있도록 하였습니다.

Retrospective

웹 서비스를 모바일 환경으로 옮기면서, 터치/화면 크기/동작 흐름을 기준으로 UI를 재설계하는 과정에서 플랫폼에 맞는 UX의 중요성을 크게 배웠습니다.
웹과 동일한 API를 재사용해 데이터 일관성을 유지하는 과정에서 코드 재사용성과 유지보수 용이성을 높일 수 있었습니다.
또한 Frontend를 전담하며 설계 · 구현 · 테스트 · 배포까지 전체 프로세스를 경험할 수 있었습니다.