오래 운영된 펀드관리 시스템의 핵심 모듈을 코드에서부터 역분석하고, 개편안을 지금 쓰는 화면과 같은 모양의 클릭되는 프로토타입으로 만들어 검토한 기획 과업입니다. [의뢰 배경] 미라파트너스는 자체 펀드관리 시스템을 오래 운영해 온 회사입니다. 시스템의 AI 전환을 검토하고 있었는데, 전환 이전에 현재 시스템이 정확히 어떻게 동작하는지 분석하는 것부터 막혀 있었습니다. 기능이 계속 얹힌 상태라 기준 하나를 바꾸면 어디까지 함께 움직이는지 전체를 아는 사람이 없었습니다. 문서로 개편안을 주고받는 방식도 원하지 않았고, 원하는 것을 실제 화면으로 그려 가며 눈으로 확인하면서 기획하고 싶다는 요구였습니다. [주요 기능] 1. 코드에서 거슬러 올라간 현행 분석 화면이 아니라 코드에서부터 되짚어 2개 도메인 22개 테이블 322개 항목의 구조도와 처리 흐름을 그렸습니다. 항목마다 어느 경로에서 값이 들어오고 갱신되는지까지 표시해, 발주처가 처음으로 자기 시스템의 전체 그림을 갖게 됐습니다. 2. 지금 쓰는 화면이 바뀐 모습으로 보이는 프로토타입 개편안을 새 디자인으로 그리면 검토자가 무엇이 달라졌는지 판단하기 어렵습니다. 레거시의 색과 버튼, 표 모양을 그대로 재현한 스타일 위에 개편안을 얹어, 검토자가 지금 쓰는 화면이 바뀐 모습을 직접 클릭해 보게 만들었습니다. 3. 레거시 화면 위에 영역을 그려 현행을 정리 이 과업을 수행할 도구를 앞단에서 직접 만들었습니다. 기존 화면 이미지 위에 영역을 박스로 그리고 그 영역이 지금 무엇을 하는지를 동작 단위로 붙입니다. 정리된 동작은 그대로 개편 요구사항으로 승격되어, 현행 정리와 요구사항이 끊기지 않고 이어집니다. 4. 요구사항을 구조화된 블록으로 요구사항을 문단이 아니라 화면 규격, 검증 규칙, 필수 규칙, 연동 항목 블록으로 나눠 씁니다. 건마다 유형과 상태 배지가 붙어 무엇이 승인됐고 무엇이 검토 중인지 목록에서 바로 갈리며, 각 건 아래에 댓글이 달려 논의가 그 요구사항에 남습니다. 5. 개발사가 그대로 집어 드는 핸드오프 화면 전후 비교, 데이터 모델, 업무 흐름, 요구사항별 코드 매핑, 작업 분할, 시작 전에 발주자가 결정해야 할 사항까지 한 문서에 담았습니다. 신규 테이블은 항목 단위까지 정의해 후속 팀이 해석할 여지를 남기지 않았습니다. 계약 산출물은 요구사항 정의서와 DB 설계안, API 명세서, 프론트엔드 소스 4종입니다. [사용 기술] Next.js 16 / React 19 / TypeScript / Tailwind CSS / Supabase(Postgres, Realtime) / TanStack Query / Zustand / React Flow / 레거시 CSS 스코핑 / Vercel