공공기관의 생성형 AI 업무 플랫폼 프론트엔드 전반을 개발하는 프로젝트였습니다. AI 보도자료 작성·첨삭, 부정보도 모니터링, SNS 댓글 분석, 회의록 자동화(STT), 리포트·대시보드까지 화면 폭이 넓었는데, 그중 문서 작성은 “AI가 만든 초안을 사람이 다듬는” 흐름이라 단순 텍스트 입력으로는 부족했습니다. 서식·문서 구조를 유지하면서 AI 수정 요청과 사람의 편집이 한 화면에서 오가야 했습니다.

에디터를 상태 기계로 보고 설계했습니다. TipTap(ProseMirror) 기반으로 문서 모델을 구조화하고, AI 응답(마크다운)을 문서 모델로 안전하게 변환하는 계층을 뒀습니다. 읽기전용과 첨삭 모드를 분리해 서식 도구가 모드에 따라 활성화되게 했고, 번역은 원문·번역본을 오가는 토글로, 폼·응답 검증은 Zod 스키마로 처리했습니다.

작성→AI 첨삭→번역→미리보기→다운로드로 이어지는 문서 플로우가 출시되어 고객사에 납품됐습니다. 이 데모는 그 플랫폼의 여러 화면 중 에디터 화면 하나 — 모드 전환과 자연어 수정 요청 UX를 재현한 것입니다.

에디터는 기능 목록이 아니라 상태 기계라는 것 — 모드·selection·비동기 응답이 얽히는 지점을 명시적으로 관리해야 무너지지 않는다는 것을 배웠습니다. 툴바 클릭 시 포커스 유지 같은 디테일이 체감 품질을 결정한다는 것도요.