DreamPath / InnoWorks

프로젝트 개요

DreamPath / InnoWorks는 사용자가 AI와 대화하며 시각화 결과를 확인할 수 있는 프로그램입니다. 기존 Django 중심 구조를 Django 백엔드와 React 프론트엔드로 분리하고, 프론트엔드 화면 구조와 상태 관리 흐름을 정리했습니다.

문제 정의

기존 구조에서는 서버 로직과 화면 로직이 한 프로젝트 안에 함께 있어 프론트엔드 화면을 독립적으로 수정하거나 확장하기 어려웠습니다. AI 응답, 로그인 상태, 진행도, 주차 상태처럼 UI에 즉시 반영되어야 하는 정보가 많았고, 다국어 사용자도 같은 흐름을 이해할 수 있어야 했습니다.

담당 역할

React 프론트엔드 분리, 화면 구조 설계, 상태 관리 기준 정리, 다국어 UI 적용, GitHub Actions 기반 배포 자동화 작업을 담당했습니다.

주요 구현

• 기존 Django 풀스택 구조를 Django 백엔드와 React 프론트엔드로 분리
• React 기반 화면 구조와 컴포넌트 구성 정리
• 로그인 상태, 진행도, 주차 상태 등 서버 데이터를 UI 상태로 연결
• 영어, 일본어, 중국어, 스페인어 다국어 리소스 구조 설계 및 화면 반영
• AI 응답을 서비스 UI에 맞게 HTML 형태로 렌더링
• GitHub Actions 기반 CI/CD 파이프라인 구성
• AI Agent를 활용해 기존 Python 서버 코드의 구조와 기능 단위 파악

기술적 판단

프론트엔드를 React로 분리하면서 화면 상태와 서버 데이터의 책임을 명확히 나누는 것을 우선했습니다. AI 응답은 단순 문서가 아니라 서비스 화면 안에서 사용자가 바로 이해해야 하는 결과였기 때문에, Markdown 렌더링보다 HTML 형태로 렌더링하는 방식이 더 적합하다고 판단했습니다.

기존 Python 서버 코드는 규모가 컸기 때문에 AI Agent를 활용해 구조와 기능 단위를 먼저 파악했습니다. 이후 실제 코드 흐름과 맞는지 검토하며 React로 옮길 화면 로직과 서버에 남길 로직을 구분했습니다.

결과 및 회고

DreamPath와 InnoWorks 모두 영어, 일본어, 중국어, 스페인어 다국어 지원을 적용했습니다. 프론트엔드와 백엔드가 분리되면서 화면 변경, 배포 자동화, 다국어 확장을 더 독립적으로 다룰 수 있는 기반을 만들었습니다.

이 프로젝트를 통해 프론트엔드 마이그레이션은 단순히 화면을 다시 구현하는 작업이 아니라, 기존 서비스의 흐름과 상태를 이해하고 다시 구조화하는 과정이라는 것을 배웠습니다.