프로젝트 개요
리뉴얼 이후 화면을 지속적으로 다듬을 수 있도록 확장한 구현한 프로젝트입니다. 화면 요소를 배치하고 속성을 조정하는 캔버스 편집기, 디자인 토큰 관리, 온보딩 단계별 진행 현황 보드, 화면 설계서·결과보고서 자동 생성을 NestJS 기반 관리 도구로 구성합니다.
작업 범위
- 화면 구성 캔버스 편집기: 홈·온보딩·퀴즈 화면의 요소를 레이어 트리에서 선택하고 중앙 캔버스에서 배치와 속성을 조정하는 편집 화면입니다
- 디자인 토큰 관리: 색·간격·타이포·모서리 토큰을 한 화면에서 보고 수정하며 사용 중인 컴포넌트를 함께 확인하는 관리 화면입니다
- 온보딩 진행 현황 보드: 온보딩 단계별 진입 수와 완료 수, 단계별 소요 시간을 보여주는 현황 보드입니다. 광고 슬롯별 노출 상태도 함께 확인합니다
- 화면 설계서·결과보고서 생성: 편집기에 저장된 화면 정의와 캡처 이미지를 모아 화면 설계서와 결과보고서 초안을 문서로 만들어 내려받는 화면입니다
주요 업무
- 화면 구성 캔버스 편집기 화면: 좌측 레이어 트리, 중앙 모바일 캔버스, 우측 속성 인스펙터로 구성하며 변경 내용을 즉시 미리보기에 반영합니다
- 디자인 토큰 관리 화면: 토큰 값 변경 시 영향받는 컴포넌트 목록을 표시하고 앱에서 읽는 토큰 파일 형태로 내보냅니다
- 온보딩 진행 현황 보드 화면: 수집된 단계 이벤트를 집계하여 단계별 흐름 차트와 상세 표로 보여주고, 기간과 플랫폼으로 필터링합니다
- 화면 설계서·결과보고서 생성 화면: 화면별 설명, 요소 목록, 캡처 이미지, 작업 내역 표를 템플릿에 채워 PDF와 워드 문서로 출력합니다
프로젝트 핵심 과제
캔버스 편집 중 요소 선택·이동·속성 변경이 겹칠 때 상태 충돌 없이 실행 취소를 보장하는 히스토리 설계
토큰 참조 관계가 깊어질 때 영향 범위 계산 비용을 제어하는 그래프 탐색 전략
MySQL 집계와 MongoDB 원시 이벤트 사이 수치가 어긋나지 않
하는 집계 정합성 검증 방식 필요
화면 정의에서 생성한 문서의 레이아웃이 요소 수에 따라 깨지지 않
하는 페이지 분할 규칙 필요
핵심 기능 상세
화면 구성 캔버스 편집기
홈·온보딩·퀴즈 화면의 요소를 레이어 트리에서 선택하고 중앙 캔버스에서 배치와 속성을 조정하는 편집 화면입니다.
- React 컴포넌트 트리 기반 레이어 목록과 캔버스 선택 상태 양방향 동기화 구현
- Immer 기반 불변 상태 업데이트와 실행 취소·다시 실행 히스토리 스택 설계
- 속성 인스펙터를 JSON 스키마로 정의하여 요소 유형별 입력 폼 자동 생성
화면 정의를 JSON으로 저장하고 MongoDB 문서로 버전 관리하여 변경 이력 비교와 이전 버전 복원이 가능한 구조를 구현합니다.
디자인 토큰 관리
색·간격·타이포·모서리 토큰을 한 화면에서 보고 수정하며 사용 중인 컴포넌트를 함께 확인하는 관리 화면입니다. 토큰 값 변경 시 영향받는 컴포넌트 목록을 표시하고 앱에서 읽는 토큰 파일 형태로 내보냅니다.
- 토큰 참조 그래프를 만들어 값 변경 시 영향 컴포넌트 목록 계산
- MySQL 토큰 테이블과 변경 이력 테이블 분리 설계, TypeORM 마이그레이션 적용
- React Native 스타일 객체와 JSON 파일로 내보내는 변환기 구현
토큰 변경 전후를 나란히 비교하는 미리보기와 영향 범위 표시로 수정 위험을 사전에 확인하는 흐름을 설계합니다.
온보딩 진행 현황 보드
온보딩 단계별 진입 수와 완료 수, 단계별 소요 시간을 보여주는 현황 보드입니다. 광고 슬롯별 노출 상태도 함께 확인합니다.
- Redis 캐시와 집계 쿼리 분리로 기간별 단계 이벤트 조회 구조 설계
- Recharts 기반 단계 흐름 차트와 플랫폼·기간 필터 URL 상태 동기화
- MongoDB 이벤트 컬렉션 인덱스와 집계 파이프라인으로 단계별 카운트 산출
원시 이벤트는 MongoDB에, 일 단위 집계는 MySQL에 저장하는 이중 저장 구조로 조회 화면의 응답 구조를 단순하게 설계합니다.
화면 설계서·결과보고서 생성
편집기에 저장된 화면 정의와 캡처 이미지를 모아 화면 설계서와 결과보고서 초안을 문서로 만들어 내려받는 화면입니다.
- Puppeteer로 화면 정의를 이미지로 캡처하여 문서에 삽입
- docxtemplater 템플릿 기반 워드 문서 생성과 PDF 출력 경로 분리
- AWS S3에 생성 문서를 저장하고 만료형 다운로드 링크 발급
화면 정의 데이터에서 설계서 표와 이미지를 자동으로 채워 문서 작성 반복 작업을 줄이는 생성 파이프라인을 구현합니다.
프로젝트 진행 단계
화면 정의 JSON 스키마 및 데이터 모델 설계 · 2026.10
요소 유형별 속성 스키마 정의, MySQL 토큰 테이블과 MongoDB 화면 문서 구조 설계
캔버스 편집기와 속성 인스펙터 개발 · 2026.10
레이어 트리·캔버스·인스펙터 3분할 화면과 실행 취소 히스토리 구현
토큰 관리와 이벤트 집계 API 개발 · 2026.10
NestJS 토큰 CRUD·영향 범위 계산 API와 단계 이벤트 집계 파이프라인 구현
진행 현황 보드와 문서 생성 구현 · 2026.10
Recharts 단계 흐름 차트와 docxtemplater·Puppeteer 기반 설계서 생성 구현
개발 결과
기술적 주안점
- 화면 정의를 JSON으로 저장하고 MongoDB 문서로 버전 관리하여 변경 이력 비교와 이전 버전 복원이 가능한 구조를 구현합니다
- 토큰 변경 전후를 나란히 비교하는 미리보기와 영향 범위 표시로 수정 위험을 사전에 확인하는 흐름을 설계합니다
- 원시 이벤트는 MongoDB에, 일 단위 집계는 MySQL에 저장하는 이중 저장 구조로 조회 화면의 응답 구조를 단순하게 설계합니다
