AI 요약
GMO Connect의 Nagata 개발자는 기존 파워포인트 기반 제안서 작성 과정에서 발생하는 '복사-붙여넣기 지옥', 디자인 불일치, 버전 관리의 어려움을 해결하기 위해 Slidev와 Claude Opus 4.6을 결합한 새로운 워크플로우를 제시했습니다. Slidev는 Vue 3와 Vite를 기반으로 한 마크다운 프레젠테이션 프레임워크로, 이를 통해 제안서의 '디자인 시스템'을 구축한 것이 핵심입니다. Claude Opus 4.6은 과거 제안서 이미지를 분석해 15개의 전용 Vue 컴포넌트 코드를 생성하는 역할을 수행했으며, 작성자는 오직 slides.md 파일 하나만 수정하면 비즈니스 수준의 슬라이드를 완성할 수 있습니다. 이 방식은 텍스트 기반이기에 Git을 통한 코드 리뷰와 변경 사항(diff) 확인이 용이하며, Vite의 HMR(Hot Module Replacement) 기능을 통해 수정 사항을 실시간으로 미리 볼 수 있는 강력한 개발 경험(DX)을 제공합니다.
핵심 인사이트
- 디자인 시스템 구축: 15개의 Vue 컴포넌트와 6종의 레이아웃(표지, 섹션, 평가 기준 등)을 제작하여 제안서 디자인의 일관성을 확보함.
- 디자인 토큰 활용: 20개 이상의 CSS 변수(예:
--c-navy,--c-accent)를 통해 폰트와 색상을 한 곳에서 관리하며, 변수 수정 시 전체 슬라이드에 즉시 반영됨. - AI 협업: Claude Opus 4.6을 사용하여 기존 제안서 형식을 분석하고, Slidev에 최적화된 컴포넌트 구조를 자동 생성하여 구축 시간을 단축함.
주요 디테일
- 파일 단일화: 작성자는 HTML이나 CSS 지식 없이 오직
slides.md파일 하나만 작성하여 복잡한 슬라이드를 구성할 수 있음. - 주요 컴포넌트 구성: 69행의
DataTable.vue(배열 기반 테이블), 31행의CompareCards.vue(비교 카드) 등 데이터 기반의 효율적인 컴포넌트 구조를 가짐. - 버전 관리 혁신: 바이너리 파일인
.pptx와 달리 텍스트 기반 마크다운을 사용하므로 Git diff, Branch, PR 리뷰 기능을 완벽하게 활용 가능함. - 실시간 프리뷰: Vite의 HMR 기능을 활용해 마크다운을 저장하는 즉시 브라우저에서 결과물을 확인할 수 있음.
- 멀티 출력 지원: PDF, PNG, PPTX뿐만 아니라 웹에 배포 가능한 SPA(단일 페이지 애플리케이션) 형태로도 에스포트가 가능함.
향후 전망
- 비즈니스 문서의 코드화: LLM이 마크다운 생성에 최적화되어 있는 만큼, 제안서 작성 업무가 GUI 환경에서 AI 협업 기반의 텍스트 중심으로 빠르게 전환될 것으로 예상됨.
- 개발자 도구의 확장: Git과 마크다운 같은 개발 생산성 도구들이 일반 비즈니스 제안서 및 기획서 영역으로 더욱 깊숙이 침투할 것으로 보임.