NSNam Sena / Web Engineer
프로젝트 목록으로

CASE STUDY / 다국어 여행 플랫폼

TTR 天天楽

한국어·중국어·영어를 제공하는 여행 플랫폼입니다. 사용자 웹과 관리자 기능을 풀스택으로 개발하고, Capacitor를 활용해 Android Hybrid App으로 확장했습니다.

기간
2026.02 — 2026.07
담당
Full-Stack DevelopmentUI/UX
담당 범위
다국어 웹·관리자 시스템 / Android Hybrid App

다국어로 여행 상품을 탐색하는 웹 서비스

TTR 天天楽은 여행 상품 상세, 일정, 가격, 날짜·인원 선택과 예약 관련 UI를 제공하는 여행 플랫폼입니다. 사용자 웹과 관리자 기능을 구축했습니다.

UI/UX부터 웹·데이터·앱 빌드까지

UI/UX와 풀스택 개발을 담당했습니다. React·Meteor 기반 화면과 서비스 구현, MongoDB 데이터 관리, 외부 API·데이터 연동을 경험했습니다.

기존 웹 서비스를 Capacitor 기반 Android Hybrid App으로 확장하고 Android Studio·Gradle로 빌드했습니다.

TRAVEL PLATFORM

상품을 이해하고 조건을 선택하는 경험

  • 여행 상품 상세

    상품 정보, 일정과 가격을 확인하는 상세 화면을 구현했습니다.

  • 날짜·인원 선택

    여행 날짜와 참여 인원을 선택하는 UI를 구축했습니다.

  • 예약 관련 UI

    상품 정보와 선택 조건을 다루는 예약 관련 화면을 구현했습니다.

서비스의 지원 언어를 확장

한국어·중국어·영어 기반 여행 서비스를 제공했습니다. 다국어 상품 콘텐츠를 다루는 사용자 화면과 관리자 기능을 개발했습니다.

사용자 웹과 관리자 기능의 연결

여행 상품을 확인하고 선택하는 사용자 웹과 서비스 정보를 다루는 관리자 기능을 구현했습니다. MongoDB로 데이터를 관리하고 외부 API·데이터를 연동했습니다.

WEB → ANDROID HYBRID APP

웹 서비스를 Android 앱으로 확장

웹 구현을 출발점으로 Capacitor를 통해 Android 프로젝트를 구성하고 빌드한 흐름입니다.

  1. Web Service

    Meteor·React 기반의 기존 여행 웹 서비스를 출발점으로 삼았습니다.

  2. Capacitor

    웹 서비스를 Android Hybrid App으로 사용할 수 있는 형태로 확장했습니다.

  3. Android Project

    Capacitor를 사용해 Android 프로젝트를 구성했습니다.

  4. Android Studio / Gradle Build

    Android Studio와 Gradle을 활용해 Android 빌드를 진행했습니다.

Capacitor 기반 Android Hybrid App 구축 및 빌드 경험입니다. 웹 서비스를 기반으로 앱의 이용 환경을 확장했습니다.

TECH CONTEXT

웹과 Hybrid App을 지원하는 기술

Meteor / React / JavaScript
사용자 웹·관리자 기능 풀스택 구현
MongoDB
여행 서비스 데이터 관리
REST API
외부 API·데이터 연동
Capacitor / Android Studio / Gradle
Capacitor 확장과 Android Studio·Gradle 빌드

하나의 웹 구현에서 이용 환경을 확장

다국어 여행 상품 UI, 관리자 기능, 데이터·API 연동을 포함하는 웹 서비스를 구축했습니다.

웹 서비스를 Capacitor를 통해 Android Hybrid App으로 확장하는 과정을 경험하며 웹 구현과 앱 빌드 과정의 관계를 배웠습니다.