Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
MCP와 bge-m3를 활용해 구축한 지식 기반(Knowledge Base) 위에서, 자연어 대화로 컴포넌트 페이지를 생성하는 MVP 개발 사례를 소개합니다. 디자인과 개발 간의 간극을 줄이고, 프로젝트 고유의 문맥을 반영하여 생성 품질을 높이는 과정을 다룹니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기이전 2개의 기사에서는 MCP × bge-m3를 활용한 오프라인 지식 기반(Knowledge Base)과, 이를 제로 설정의 VSCode 플러그인으로 구현한 이야기를 작성했습니다. 이번에는 그 위에 구축한 「대화로 컴포넌트 페이지를 생성하는」 MVP(Minimum Viable Product)에 관한 이야기입니다. 플러그인부터 지식 기반까지의 일련의 과정을 1주일 만에 구축하여 데모가 가능한 상태까지 만들어냈습니다.
한마디로 말하면, 텍스트로 대화하면 컴포넌트 라이브러리를 사용한 표준 페이지가 생성됩니다.
• 자연어로 "이런 화면이 필요해"라고 작성
• 4분 후, 출력물은 컴포넌트 라이브러리에 준거한 1장의 표준 페이지
• 그대로 대화를 통해 스타일을 조정 가능 ("이 부분의 여백을 더 넓게", "이 열을 오른쪽 정렬로" 등)
고객의 요구사항을 그 자리에서 페이지로 구현할 수 있습니다. 대화하면서 눈에 보이는 형태의 페이지를 즉시 생성할 수 있으므로, "말했다/안 했다"의 조율을 화면 기반으로 진행할 수 있습니다. 또한 mock(모형) 상에서 조작도 가능하기 때문에, 정적인 모크보다 한 단계 더 리얼하게 합의 형성을 할 수 있습니다.
그리고 중요한 점은, 이 페이지를 그대로 개발 팀에 전달할 수 있다는 것입니다. 개발 팀은 그것을 토대로 API를 연결하기만 하면 되므로, 디자인과 구현 사이의 번역 손실(translation loss)이 줄어듭니다. - 디자인 팀
Figma MCP를 통합함으로써, 디자인 팀은 자신의 아이디어를 직관적으로 코드로 옮길 수 있습니다. 머릿속의 레이아웃을 규범에 따른 구현으로 변환하는 경로가 생깁니다. - 신규 컴포넌트 개발
어느 정도까지는 코드 규범에 따라 새로운 컴포넌트 라이브러리를 개발하는 데에도 사용할 수 있습니다. 기존 규범을 학습한 상태에서 생성하므로, 스타일의 일탈이 일어나기 어렵습니다.
솔직히 말하면, 효과는 모델에 대한 의존도가 높습니다.
• 현재의 MVP는 GPT-5 mini (low)를 사용하여, 텍스트 대화 → 규범 준수 페이지 생성을 돌리고 있습니다.
• 최신 Opus로 교체하면 생성 품질은 명확하게 좋아집니다. 다만 Token 비용이 높습니다.
즉 "품질"과 "비용"이 그대로 모델 선정의 트레이드오프(trade-off)가 되고 있으며, 이 부분은 용도에 따라 타협한다는 전제로 설계하고 있습니다.
다음 레이어: 이용 팀을 위한 KB
MVP 다음에 준비하고 있는 것이, 이용 팀 스스로가 동일한 프레임워크 위에서 자신의 프로젝트용 KB를 만들 수 있는 메커니즘입니다.
로컬 KB는 그 성질상 그대로 특정 프로젝트용 KB로 확장될 수 있습니다. 즉, 배포한 플러그인이 해당 프로젝트의 KB로 성장하는 설계입니다. 프로젝트 고유의 문맥을を取り込む(가져옴)으로써 정밀도가 올라가고, 환각(hallucination)이 줄어드는 것—이것이 목표입니다.
여기서부터 앞으로 남겨둔 논점들을 솔직하게 나열하겠습니다.
• 지식의 축적: KB는 내용이 성장해야 비로소 가치가 나옵니다.
• Skill / Agent의 튜닝: 생성의 질을 안정시키기 위한 조정
• 엔지니어링 거버넌스(Engineering Governance): hooks를 통한 문지기(gate), 정기 태스크 등의 운영 통제
"작동하는 MVP"와 "운영을 견딜 수 있는 도구" 사이에는 이러한 소소한 거버넌스(governance)가 남아 있습니다.
최초의 구상대로 층을 한 단계씩 쌓아 올려, 최종적으로는 회사 수준의 프로젝트 지식 기반으로 만들고 싶습니다.
개인적인 야심으로서, 풀 파라미터(full parameter)의 DeepSeek V4를 증류(distillation)의 핵심으로 삼은 FastAPI를 한 번 시도해보고 싶습니다. 이 부분은 아직 꿈의 단계이지만, 기대하고 있습니다.
지식 기반을 만든다 → 플러그인에서 사용되는 형태로 만든다 → 그 위에서 「대화로 규범 준수 페이지를 생성하는」 MVP를 얹는다. 1주일 동안 전체 과정을 구축하며 알게 된 것은, 생성 경험은 모델에 강하게 의존하는 반면, 가치의 본체는 "규범에 따른 출력을 그대로 하류(downstream)로 전달할 수 있다"는 연속성에 있다는 것이었습니다.
