플러스프로젝트 배경
1) 문제점 - 영상 콘텐츠 제작 과정에서 사용하는 조건 데이터가 대분류 12개, 소분류 41개로 복잡하게 구성되어 있었습니다. - 기존 UI는 조건 분기와 중첩 관계를 직관적으로 파악하기 어려워, 데이터 설정·수정·디버깅 과정에서 불편함이 있었습니다. - AND/OR 조건 조합과 다중 중첩 구조가 늘어나면서, 조건 간 연결 관계와 데이터 흐름을 화면에서 명확히 확인하기 어려웠습니다. 2) 프로젝트
프로젝트 성과
다중 중첩 조건 데이터 시각화 UI 구현
대분류 12개, 소분류 41개 조건 데이터를 노드 기반 UI로 시각화하고, 최대 5중첩 조건 조합을 지원했습니다.
조건 데이터 설정 UI의 확장성 개선
기존 추상화된 UI를 데이터 구조에 맞춰 트리 기반 컴포넌트로 모듈화해 디버깅과 기능 확장이 쉬운 구조로 개선했습니다.
핵심 기능
노드 기반 조건 설정 에디터
React Flow를 활용해 AND/OR 조건을 노드 형태로 연결하고 조합할 수 있는 에디터를 개발했습니다.
진행 단계
요구사항 및 데이터 구조 분석
2024.05.
대분류 12개, 소분류 41개 조건 데이터와 AND/OR 중첩 구조를 분석하고 UI 구현 범위를 정리했습니다.
프로젝트 상세
1) 포트폴리오 소개 영상 콘텐츠 제작 및 운영 과정에서 사용되는 SaaS형 제작 도구입니다. 주요 사용자는 콘텐츠 운영자, 제작 관리자(PD)이며 복잡한 조건 데이터를 시각적으로 설정하고 관리할 수 있도록 지원하는 서비스입니다. 2) 작업 범위 React 기반 프론트엔드 개발을 담당했습니다. 주요 작업 범위는 노드 기반 조건 설정 에디터 개발, 다중 중첩 조건 데이터 처리, GraphQL 데이터
