Gwon Dongha - Software Engineer

Overview

AI 기반 육아 기록 플랫폼의 전체 스택을 담당했습니다. 프론트엔드에서는 Zustand + Custom Hooks로 상태를 관리하고, 백엔드에서는 Spring Boot와 Python Flask를 분리하여 AI 연산과 비즈니스 로직을 분리했습니다.

핵심 구현

마이크로서비스 아키텍처

Spring Boot(비즈니스 로직) + Python Flask(AI 연산) + React 프론트엔드 3개 서비스 구성

Docker Compose 오케스트레이션

FE, BE, AI, DB, Prometheus, Grafana 6개 컨테이너를 단일 명령으로 구동

Technical Challenges

3 Cases

Zustand + Custom Hooks

프론트엔드 상태 관리 구조화

Impact

Prop Drilling 제거

Challenge

다수의 useState와 prop drilling으로 인해 상태 흐름을 파악하기 어려웠습니다. 같은 데이터를 여러 컴포넌트에서 중복 관리하고 있었습니다.

Solution

Zustand 스토어 기반으로 전역 상태를 일원화하고, Custom Hooks로 비즈니스 로직을 View에서 분리했습니다.

Zustand 스토어로 전역 상태 중앙 관리

useCharacter.ts 등 도메인별 Custom Hooks로 로직 분리

Single Source of Truth 원칙 적용

Spring Boot + Python Flask

Hybrid AI Architecture

Impact

AI 연산 분리로 메인 서버 블로킹 방지

Challenge

AI 이미지 생성(DALL-E 3)은 30초 이상 소요되는 작업입니다. 이를 메인 서버에서 처리하면 다른 요청이 블로킹됩니다.

Solution

적재적소 원칙으로 서비스를 분리했습니다. Spring Boot는 비즈니스 로직과 인증, Python Flask는 AI/ML 라이브러리 활용에 집중합니다.

Spring Boot: 비즈니스 로직, 트랜잭션, 보안/인증

Python Flask: face-cli, OpenAI API 등 AI 연산

RestTemplate: 서비스 간 HTTP 통신

Face Analysis + DALL-E 3

AI Pipeline 구축

Impact

얼굴 특징 기반 프롬프트 자동 생성

Challenge

부모 사진으로 아이 얼굴을 예측하려면 단순 API 호출이 아닌 전처리 과정이 필요했습니다.

Solution

face-cli로 얼굴 특징점을 추출하고, 이를 자연어 프롬프트로 변환하여 DALL-E 3에 전달하는 파이프라인을 구축했습니다.

Input: 부모 사진 업로드

Preprocessing: face-cli로 얼굴 특징점 추출

Prompt Engineering: 특징 → 자연어 프롬프트 변환

Generation: DALL-E 3 API 호출

Key Results

3개 서비스

마이크로서비스 구성

Spring Boot + Python Flask + React 독립적인 서비스로 분리

6개 컨테이너

Docker Compose

FE, BE, AI, DB, Prometheus, Grafana 전체 인프라 구성

Zustand

상태 관리

Custom Hooks 패턴으로 전역 상태 관리 및 비즈니스 로직 분리

Tech Stack

Java 17Spring Boot 3.4Python 3.9FlaskReact 18TypeScriptZustandTailwindCSSMariaDBOpenAI API (DALL-E 3)face-cliDockerDocker ComposePrometheusGrafana

Next Project

StoLink

웹소설 작가용 에디터 프론트엔드