AI 커리어 플래너

Frontend

React와 TypeScript를 기반으로 서비스의 핵심 UI/UX를 설계하고 구현했습니다.

ReactTypeScriptStyled-ComponentsJotaiReact-FlowDND-Kit

핵심 기여 사항

AI 멘토 채팅, 마인드맵, 간트차트 등 핵심 UI 모듈 90% 이상 개발
Jotai를 활용한 전역 상태 관리 아키텍처 설계 및 구현
react-flow, dnd-kit 등 라이브러리 커스터마이징을 통한 복잡한 인터랙션 구현
styled-components 기반 반응형 컴포넌트 시스템 구성

도전 과제: 복잡한 데이터 시각화와 상태 동기화

AI 커리어 플래너의 핵심은 사용자의 진로 계획 데이터를 마인드맵, 간트차트, 칸반보드라는 세 가지 다른 형태로 동시에 보여주는 것이었습니다. 사용자가 한 쪽 뷰에서 데이터를 수정하면, 나머지 뷰에도 즉시 일관되게 반영되어야 했습니다. 이 과정에서 발생할 수 있는 복잡한 상태 동기화 문제를 해결하는 것이 가장 큰 기술적 도전이었습니다.

해결 전략: Jotai를 활용한 원자적 상태 관리 아키텍처

전역 상태 관리의 복잡성을 줄이고, 컴포넌트 간의 불필요한 리렌더링을 최소화하기 위해 Jotai를 도입했습니다. Redux나 Context API와 달리, Jotai는 상태를 '원자(Atom)' 단위로 작게 나누어 관리할 수 있어 필요한 컴포넌트만 정밀하게 리렌더링하는 것이 가능했습니다.

상태 업데이트 흐름 (State Update Flow)

다이어그램을 불러오는 중...

데이터 구독 및 UI 렌더링 (UI Subscription & Rendering)

[그림 1] Jotai를 활용한 상태 관리 흐름도

위 구조처럼 커리어 데이터의 핵심 상태를 careerDataAtom으로 정의하고, 각 시각화 컴포넌트(마인드맵, 간트, 칸반)는 이 Atom을 구독하도록 설계했습니다. 사용자가 마인드맵에서 노드를 수정하면 careerDataAtom의 상태가 변경되고, 이 변경 사항은 즉시 간트차트와 칸반보드에 반영됩니다.

// 예시: 커리어 데이터 Atom 정의
import { atom } from 'jotai';

interface CareerNode {
  id: string;
  label: string;
  startDate?: Date;
  endDate?: Date;
  status?: 'todo' | 'in-progress' | 'done';
}

export const careerDataAtom = atom<CareerNode[]>([]);

// 파생 Atom을 사용하여 특정 뷰에 필요한 데이터만 계산
export const mindmapNodesAtom = atom((get) =>
  get(careerDataAtom).map(node => ({ id: node.id, data: { label: node.label } }))
);

결과 및 성과

Jotai 기반 아키텍처를 통해 상태 관리 로직을 중앙화하고 컴포넌트 간의 결합도를 낮춤으로써, 코드의 유지보수성을 크게 향상시켰습니다. 또한, 불필요한 렌더링을 방지하여 드래그 앤 드롭과 같은 복잡한 인터랙션에서도 부드러운 사용자 경험을 제공할 수 있었습니다.