<aside>

🎯 프로젝트 개요 (Executive Summary)

프로젝트 명: “whale devs”

요약: "Flutter와 Spring Boot로 구현한 면접 질문 연습용 모바일 애플리케이션”

개발 기간: “2025. 09.14 ~ 10.27”

핵심 기술 스택: Flutter+Dart, Spring Boot, Java21, MongoDB, React, cloudflared

GitHub Repository: https://github.com/WhaleDevelopers

시연 영상 (40초) : https://youtube.com/shorts/42vOmymjEV8?feature=share

</aside>

<aside>

🗺️ 시스템 아키텍처 (Architecture)

아키택쳐_png.png

구성 요소 :

(DNS) Cloudflare : 로컬 운영 환경의 서버를 외부 인터넥망에 노출시키는 터널링 도구

(User) Flutter App : 사용자가 면접 질문을 보고 연습하는 클라이언트

(Admin) React Frontend : 관리자가 면접 질문 데이터를 CRUD하는 웹 페이지

(Database) MongoDB : 질문, 카테고리 데이터를 저장하는 DB

(Local DB) SQLite : 이전에 학습한 질문 데이터를 저장하는 로컬 DB

(API Server) Spring Boot : 앱과 웹 어드민의 API요청을 처리하는 서버 ( REST API )

구성 설명 : 1. 읽기 중심(Read-Heavy) 서비스에 최적화된 DB 선정 이 서비스는 관리자가 데이터를 등록/수정하는 작업보다, 사용자가 데이터를 '조회'하는 작업이 압도적으로 많은 특성을 가집니다.

따라서 관계형 데이터베이스(RDBMS)보다 유연한 스키마를 가지며 빠른 읽기 성능에 강점이 있는 NoSQL 데이터베이스, MongoDB를 메인 DB로 채택했습니다.

2. 효율과 확장을 고려한 시스템 아키텍처 i3 laptop의 리소스 한계라는 현실적 제약을 해결하기 위해, 사용자용(Flutter)과 관리자용(React) 클라이언트의 역할을 명확히 분리했습니다. 모든 통신은 Spring Boot 서버의 RESTful API를 통하도록 설계하여 개발 환경의 부담을 낮추고, 동시에 서비스 확장성까지 확보했습니다.

3. SQLite를 이용한 오프라인 학습 환경 지원 (Offline-first)

면접 준비는 이동 중(지하철 등)에도 할 수 있어야 한다고 생각했습니다. 이를 위해 SQLite를 Flutter 앱 내의 로컬 DB로 채택했습니다.

서버에서 받은 데이터를 사용자 디바이스에 저장함으로써, 네트워크 연결이 불안정하거나 끊긴 환경에서도 앱의 핵심 기능인 면접 연습을 원활하게 이용할 수 있도록 구현했습니다.

4**. cloudflared를 활용한 비용 효율적인 배포** AWS, GCP 등 상용 클라우드 환경에서 서버를 운영하는 대신, Cloudflare Tunnel(cloudflared)을 도입했습니다.

이를 통해 별도 배포 비용 없이 제 노트북에서 실행 중인 Spring 서버를 안전한 HTTPS를 통해 외부에 노출시켰습니다.

</aside>

<aside>

✨ 주요 기능 (Key Features)

[ Flutter App ]

All.png

[ React Web (Admin) ]

[ Server ]

<aside>

🛠️ 기술적 상세 (Technical Deep Dive)

1. Backend (Spring Boot)

2. Admin Frontend (React)

3. User App (Flutter)