mcp

GitLab Duo 에이전 (새 탭에서 열림)

GitLab Duo Agent Platform이 MCP(Model Context Protocol)를 지원함에 따라, 이제 개발자들은 Jira와 같은 외부 도구를 AI 개발 환경에 직접 연결하여 사용할 수 있게 되었습니다. 이를 통해 IDE를 벗어나지 않고도 자연어 대화만으로 Jira 이슈를 조회, 생성 및 업데이트하며 프로젝트 관리와 코드 작성을 통합할 수 있습니다. 결과적으로 도구 간의 빈번한 맥락 전환(Context Switching)을 줄여 개발 생산성을 극대화하고 워크플로우를 단순화할 수 있는 강력한 환경을 제공합니다. ### MCP 연동 아키텍처 및 보안 설정 * GitLab Duo Agent Platform은 MCP 클라이언트 역할을 수행하며, Atlassian MCP 서버와 통신하여 Jira 데이터에 접근합니다. * 보안 인증을 위해 Atlassian 개발자 콘솔에서 OAuth 2.0 애플리케이션을 생성해야 하며, `read:jira-work`, `write:jira-work`, `read:jira-user`와 같은 구체적인 API 권한(Scope) 설정이 필요합니다. * 인증 과정에서 콜백 URL(`https://gitlab.com/oauth/callback`)을 등록하고 발급된 Client ID와 Secret을 안전하게 관리해야 합니다. ### GitLab Duo MCP 클라이언트 구성 및 검증 * 프로젝트의 `.gitlab/duo/mcp.json` 경로에 MCP 서버 설정 파일을 생성합니다. 이 파일에는 서버 URL과 앞서 발급받은 OAuth 인증 정보가 포함됩니다. * GitLab 그룹 설정의 'GitLab Duo' 메뉴에서 외부 MCP 도구 허용 옵션(`Allow external MCP tools`)을 활성화해야 정상적으로 작동합니다. * VS Code 내 'GitLab: Show MCP Dashboard' 기능을 통해 연결 상태를 모니터링할 수 있으며, `jira_get_issue`, `jira_create_issue` 등 사용 가능한 도구 목록과 실시간 서버 로그를 확인할 수 있습니다. ### 실무 적용을 위한 주요 활용 사례 * **기획 및 관리 보조:** "할당되지 않은 이슈 목록 보여줘", "우선순위가 높은 이슈 2개를 요약하고 나에게 할당해줘"와 같은 프롬프트를 통해 스프린트 계획을 IDE 내에서 즉시 처리할 수 있습니다. * **코드 맥락 기반 이슈 생성:** 코드 리뷰 중 버그를 발견했을 때, 별도의 브라우저 실행 없이 현재 코드의 맥락을 포함하여 Jira 티켓을 즉시 생성하고 관련 브랜치와 연결할 수 있습니다. * **워크플로우 자동화:** 자연어 요청을 통해 Jira의 복잡한 필드를 자동으로 채우거나, 코드 분석 결과에 따라 관련 블로커(Blocker)를 검색하는 등 지능적인 협업이 가능해집니다. 개발팀은 MCP를 활용해 Jira뿐만 아니라 MCP 규격을 지원하는 다양한 외부 도구를 GitLab Duo에 통합함으로써 커스텀 AI 에이전트 환경을 구축할 수 있습니다. 툴 간 전환 비용을 줄이고 개발 집중도를 높이고 싶다면, 가이드에 따라 `.gitlab/duo/mcp.json` 설정을 완료하고 첫 번째 MCP 워크플로우를 시작해 보시기 바랍니다.

Software 3.0 시대, Harness를 통한 조직 생산성 저점 높이기 (새 탭에서 열림)

현재 많은 개발팀이 LLM을 도입하고 있지만, 실제 생산성은 엔지니어 개개인의 'LLM 리터러시'에 따라 극심한 격차를 보이고 있습니다. 이러한 '각자도생'의 한계를 극복하기 위해서는 LLM을 개인의 도구가 아닌 팀 차원의 시스템으로 편입시켜 전체적인 생산성의 저점(Floor)을 높이는 전략이 필요합니다. Claude Code와 같은 생태계를 활용해 팀의 노하우를 '실행 가능한 지식(Executable SSOT)'으로 자산화하는 것이 Software 3.0 시대의 핵심 경쟁력이 될 것입니다. **컨텍스트 엔지니어링과 LLM 리터러시의 격차** * 단순 질문을 반복하는 방식과 작업 전 팀의 가이드라인, 린트 규칙, 코드 패턴 등 '컨텍스트'를 먼저 주입하는 방식은 결과물에서 큰 차이를 만듭니다. * 이러한 생산성 격차는 코딩 실력이 아닌 LLM을 제어하는 노하우의 차이이며, 이를 개인의 센스에만 맡기는 것은 조직적 손실입니다. * 팀 전체의 역량을 상향 평준화하기 위해서는 누구나 최적의 맥락 위에서 작업할 수 있도록 돕는 시스템적 장치(Harness)가 필요합니다. **Claude Code와 마찰 없는 워크플로우 이식** * 브라우저 기반 챗봇으로 코드를 복사·붙여넣기 하는 과정에서 발생하는 문맥 교환(Context Switching) 비용을 최소화해야 합니다. * Claude Code가 제공하는 TUI(Terminal User Interface) 환경은 터미널 안에서 자연어와 코드가 끊김 없이 섞이는 매끄러운 경험을 제공합니다. * 이러한 낮은 진입 장벽은 설계된 AI 워크플로우를 팀원들에게 저항감 없이 전파할 수 있는 기반이 됩니다. **실행 가능한 진실의 원천(Executable SSOT)** * 기존의 위키나 노션 문서는 작성 즉시 낡은 정보가 되지만, 플러그인 형태의 지식은 사람이 읽는 매뉴얼인 동시에 LLM이 즉시 실행하는 시스템 프롬프트가 됩니다. * RAG(검색 증강 생성) 방식은 내부 로직의 불투명성으로 인해 어떤 컨텍스트가 주입될지 예측하기 어렵다는 단점이 있습니다. * 반면 플러그인 방식은 명시적인 코드로서 개발자가 주입되는 맥락을 100% 통제할 수 있어 높은 예측 가능성과 신뢰성을 제공합니다. **계층화된 아키텍처를 통한 거버넌스와 전파** * 지식을 전사 공통(Global), 팀/비즈니스 도메인(Domain), 특정 프로젝트(Local)의 3단계 레이어로 계층화하여 관리함으로써 지식의 파편화를 방지합니다. * `/new-feature`와 같은 슬래시 커맨드를 통해 숙련된 엔지니어의 노하우(이슈 발급, 브랜치 생성, 구현 계획 수립 등)를 모든 팀원에게 즉시 배포할 수 있습니다. * 단순한 린터를 넘어, 메인 브랜치 커밋 시도를 감지하고 정책에 맞는 브랜치 생성을 가이드하는 등 AI 에이전트 기반의 강력한 거버넌스 구현이 가능합니다. **엔지니어링의 본질: 플랫폼 엔지니어링과 데이터 플라이휠** * Software 1.0 시대에 공통 라이브러리로 중복 작업을 줄였듯, Software 3.0에서는 AI 워크플로우 플러그인을 통해 팀의 생산성을 최적화해야 합니다. * 규격화된 플러그인을 통해 축적된 양질의 데이터는 향후 도메인 특화 모델(sLLM)을 파인튜닝하고 평가하는 기반이 됩니다. * 사용자가 많아질수록 데이터가 쌓이고 모델이 정교해지는 '데이터 플라이휠' 구조를 구축하는 것이 AI-Native 조직의 최종 목표입니다. 이제 LLM 활용 능력은 개인의 역량을 넘어 팀이 설계하고 배포해야 할 시스템의 영역입니다. Claude Code의 마켓플레이스와 같은 도구를 활용해 팀 내에 흩어진 암묵지를 명시적인 워크플로우로 엮어내고, 우리 조직에 최적화된 '시스템 하네스'를 구축하는 것부터 시작해 보기를 추천합니다.

Claude Code에서 Figma로: 프로덕 (새 탭에서 열림)

피그마가 AI 모델과 디자인 데이터를 긴밀하게 연결하기 위해 'Model Context Protocol(MCP)' 서버를 공식 출시했습니다. 이 기술을 통해 개발자는 클로드(Claude)와 같은 AI 어시스턴트에게 피그마 디자인에 대한 직접적인 접근 권한을 부여하고, 디자인 스펙을 바탕으로 코드를 생성하거나 자산을 추출하는 작업을 자동화할 수 있습니다. 결과적으로 디자인과 개발 간의 핸드오프 과정을 획기적으로 단축하고, AI가 디자인 맥락을 정확히 이해한 상태에서 협업할 수 있는 환경을 구축했습니다. ### MCP를 통한 디자인 데이터의 개방 * **표준화된 연결성**: MCP는 디자인 도구와 LLM(대형 언어 모델) 사이의 가교 역할을 하는 오픈 소스 프로토콜로, AI가 복잡한 설정 없이도 피그마의 라이브 데이터에 접근할 수 있게 합니다. * **맥락 유지**: 개발자가 디자인 파일을 일일이 캡처하거나 수동으로 수치를 입력할 필요 없이, AI 에이전트가 직접 피그마 API를 호출하여 최신 디자인 상태를 파악합니다. * **도구 간 장벽 완화**: 디자인 도구에 익숙하지 않은 개발자도 채팅 인터페이스만으로 필요한 디자인 정보(색상값, 간격, 텍스트 스타일 등)를 실시간으로 가져올 수 있습니다. ### Figma MCP 서버의 핵심 기능 * **파일 탐색 및 검색**: 파일 이름, 프로젝트, 팀 정보를 바탕으로 필요한 디자인 파일을 AI가 스스로 검색하고 식별할 수 있습니다. * **레이어 및 속성 검사**: 특정 레이어를 선택하여 속성을 확인하거나, 구성 요소의 계층 구조와 CSS 스타일 정보를 추출하여 코드 구현에 즉시 활용합니다. * **이미지 및 자산 내보내기**: 디자인 파일 내의 이미지를 AI가 직접 렌더링하거나 내보내기(Export) 기능을 수행하여 개발 환경으로 가져올 수 있습니다. * **데브 모드(Dev Mode) 연동**: 피그마 데브 모드와의 연결을 지원하여, AI가 생성한 코드와 실제 디자인 스펙 간의 일관성을 검증하는 데 도움을 줍니다. ### AI 기반 개발 워크플로우의 변화 * **정확한 코드 생성**: 디자인의 세부 수치와 제약 조건을 AI가 직접 읽기 때문에, 환각 현상(Hallucination)을 줄이고 정밀한 UI 컴포넌트 코드를 작성할 수 있습니다. * **반복 작업 자동화**: 아이콘 추출, 스타일 가이드 문서화, 반복적인 CSS 작성 등 단순 작업을 AI에게 맡겨 개발 생산성을 높입니다. * **실시간 피드백 루프**: 디자인이 변경되었을 때 AI에게 "최신 디자인에 맞춰 코드를 수정해줘"라고 요청하는 것만으로 변경 사항을 반영할 수 있는 유연한 워크플로우가 가능해집니다. 현재 이 기능은 오픈 소스로 공개되어 있으며, 클로드 데스크톱(Claude Desktop) 사용자는 피그마에서 제공하는 MCP 서버 설정 값을 통해 즉시 자신의 워크플로우에 통합할 수 있습니다. 디자인 시스템을 효율적으로 관리하고 디자인-투-코드(Design-to-Code) 자동화를 구현하고자 하는 팀에게 이 MCP 서버는 매우 유용한 도구가 될 것입니다.

엔지니어링 VP 조 (새 탭에서 열림)

Dropbox Dash는 파편화된 기업 내 데이터를 통합하여 사용자에게 최적화된 답변을 제공하기 위해 인덱스 기반의 '컨텍스트 엔진(Context Engine)'과 지식 그래프를 핵심 기술로 활용합니다. 단순히 데이터를 검색하는 것을 넘어 멀티모달 이해와 데이터 간의 관계 모델링을 통해 고도화된 업무 맥락을 파악하며, MCP(Model Context Protocol)가 가진 성능적 한계를 독자적인 최적화 기법으로 해결했습니다. 이를 통해 보안과 권한 관리를 유지하면서도 매우 빠르고 정확한 에이전트 경험을 제공하는 것이 기술적 결론입니다. ### 컨텍스트 엔진의 구조와 데이터 처리 * **커넥터와 정규화**: 수많은 서드파티 앱의 API 제약과 권한 체계(ACL)를 처리하는 맞춤형 크롤러를 통해 데이터를 수집하고, 이를 마크다운 형식으로 정규화하여 관리합니다. * **멀티모달 콘텐츠 이해**: 단순 텍스트 추출을 넘어 이미지(CLIP 및 멀티모달 모델), 오디오(전사), 비디오(장면 추출 및 이해)에 대한 심층 분석을 수행하여 인덱싱합니다. * **지식 그래프 모델링**: 문서, 회의, 인물 간의 관계를 그래프 형태로 연결하여 단순 검색 이상의 맥락 정보를 생성하며, 이를 통해 앱 간 경계를 넘나드는 지능형 정보를 제공합니다. * **하이브리드 검색**: 어휘 검색을 위한 BM25와 의미론적 검색을 위한 밀집 벡터(Dense Vector) 저장소를 동시에 사용하여 검색 품질을 극대화하고, 최종 결과에 대해 개인화된 랭킹을 적용합니다. ### 인덱스 기반 검색(Indexed Retrieval)의 채택 이유 * **페더레이션 방식과의 차이**: 실시간으로 외부 API를 호출하는 페더레이션 방식은 구현이 쉽고 데이터가 신선하지만, 속도가 느리고 회사 전체 공유 데이터에 접근하기 어렵다는 단점이 있습니다. * **성능과 실험 가능성**: 인덱스 기반 방식은 데이터를 미리 처리해두기 때문에 응답 속도가 매우 빠르며, 오프라인 환경에서 다양한 랭킹 실험을 통해 검색 정확도(Recall)를 지속적으로 개선할 수 있습니다. * **구축 비용 감수**: 높은 저장 비용과 맞춤형 커넥터 개발의 복잡성에도 불구하고, 풍부한 데이터 세트 구축과 정교한 검색 품질을 위해 인덱스 기반 접근법을 선택했습니다. ### MCP의 한계 극복과 에이전트 최적화 * **컨텍스트 부패 방지**: MCP 도구 정의가 컨텍스트 창(Context Window)을 과도하게 점유하여 발생하는 성능 저하 문제를 해결하기 위해 약 10만 토큰 수준으로 컨텍스트를 제한하고 관리합니다. * **응답 속도 개선**: 일반적인 MCP 에이전트가 여러 도구를 호출할 때 발생하는 지연 시간(최대 45초)을 줄이기 위해, 원본 인덱스에 직접 접근하여 수 초 내에 결과를 반환하도록 설계했습니다. * **슈퍼 툴(Super Tool) 개념**: 개별 앱마다 도구를 정의하는 대신, 전체 인덱스를 아우르는 '슈퍼 툴' 인터페이스를 구축하여 모델이 추론해야 할 도구의 개수를 줄이고 효율성을 높였습니다. 기업용 AI 에이전트를 구축할 때는 실시간 API 호출 방식보다는 비용이 들더라도 데이터를 직접 인덱싱하고 지식 그래프화하는 것이 검색 품질과 속도 면에서 유리합니다. 특히 MCP와 같은 최신 프로토콜을 도입할 때는 도구 정의가 컨텍스트 창을 잠식하지 않도록 '슈퍼 툴' 형태의 추상화 계층을 고려하는 것이 실무적으로 권장됩니다.

LLM을 이용한 서비스 취약점 분석 자동화 #1 (새 탭에서 열림)

토스 보안 연구팀은 구글의 'Project Naptime'에서 영감을 얻어 LLM 기반의 취약점 분석 자동화 시스템을 구축했습니다. 대용량 코드 처리, 결과의 불확실성, 운영 비용 등 실무 적용 과정에서 마주한 네 가지 핵심 기술적 난제를 단계별로 해결하며 최종적으로 95% 이상의 분석 정확도를 달성했습니다. 기술적 가능성을 넘어 실제 수백 개의 서비스에 지속적으로 적용 가능한 수준의 보안 자동화 환경을 마련했다는 점에 의의가 있습니다. **대용량 소스코드 분석을 위한 MCP 도입** * 단순히 소스코드 전체를 LLM에 입력하는 방식은 토큰 한계와 환각(Hallucination) 문제로 인해 대규모 프로젝트 분석에는 부적합했습니다. * 대안으로 RAG(검색 증강 생성)를 시도했으나 코드 간의 복잡한 연관 관계를 파악하는 데 한계가 있었습니다. * 최종적으로 MCP(Model Context Protocol)를 구축하여 LLM 에이전트가 필요할 때마다 함수 정의나 변수 사용처를 도구 호출(Tool Calling) 방식으로 자유롭게 탐색하도록 설계했습니다. **SAST 결합을 통한 분석 일관성 확보** * 동일한 코드에 대해서도 분석 결과가 매번 달라지는 LLM의 비결정성 문제를 해결하기 위해 정적 분석 도구(SAST)를 결합했습니다. * 빌드 과정이 복잡하고 무거운 CodeQL 대신, 가볍고 빠른 오픈소스 도구인 Semgrep을 활용하여 모든 입력 경로(Source)에서 위험 지점(Sink)까지의 경로를 먼저 수집했습니다. * SAST가 추출한 잠재적 취약 경로를 LLM이 집중 분석하게 함으로써 탐지 누락을 방지하고 분석의 신뢰도를 높였습니다. **멀티 에이전트 체계를 통한 비용 최적화** * 모든 코드 경로를 심층 분석할 경우 발생하는 막대한 토큰 비용을 줄이기 위해 역할을 분담한 세 가지 에이전트를 도입했습니다. * **Discovery 에이전트:** 수집된 경로 중 실제 취약점 가능성이 높은 경로를 1차로 선별하는 거름망 역할을 수행합니다. * **Analysis 에이전트:** 선별된 경로를 심층 분석하여 실제 취약 여부를 판별합니다. * **Review 에이전트:** 최종 결과를 검토하여 오탐(False Positive)을 제거함으로써 분석의 정교함을 더했습니다. **지속 가능한 운영을 위한 오픈 모델 전환** * 상용 클라우드 모델(Claude 등)의 높은 비용 문제를 해결하기 위해 직접 호스팅 가능한 오픈 모델(Open Model)로 전환했습니다. * Qwen3:30B, gpt-oss:20B, llama3.1:8B 등 다양한 모델의 ROI를 비교 분석한 결과, 취약점 분석 정확도와 도구 호출 성능이 가장 우수한 'Qwen3:30B'를 최종 선택했습니다. * 오픈 모델의 성능을 보완하기 위해 프롬프트 엔지니어링과 퓨샷 러닝(Few-shot Learning)을 적용하여 클라우드 모델 못지않은 성능을 구현했습니다. 단순히 최신 기술을 도입하는 것에 그치지 않고, 기업 환경에서 실제 운영 가능한 수준의 '비용 대비 성능'을 확보하는 것이 중요합니다. LLM 취약점 분석 시스템을 구축할 때는 모든 판단을 모델에 맡기기보다 Semgrep과 같은 전통적인 보안 도구로 분석 범위를 좁혀주고, 멀티 에이전트 구조로 단계별 필터링을 거치는 설계가 실무적으로 가장 효과적입니다.

사내 AI 리터러시를 향상하기 위한 AI Campus Day를 개최했습니다 (새 탭에서 열림)

LY Corporation은 전 직군의 AI 리터러시를 높이고 실무 적용을 독려하기 위해 사내 실습 행사 'AI Campus Day'를 개최했습니다. 외부 강사 대신 사내 전문가인 'AI 멘토'를 활용하고 실습 중심의 핸즈온 세션을 구성함으로써, 보안 가이드라인과 사내 업무 환경에 최적화된 실질적인 AI 활용 노하우를 성공적으로 전파했습니다. 이번 행사는 단순한 교육을 넘어 축제 형태의 운영 방식을 도입하여 임직원들이 자발적으로 AI 기술을 탐색하고 업무 생산성을 높이는 계기를 마련했습니다. **실무 역량 강화를 위한 수준별 핸즈온 세션** * **직군별 맞춤 트랙 운영:** 'Common', 'Creative', 'Engineering'의 3개 트랙으로 나누어, 기초 프롬프팅부터 MCP(Model Context Protocol) 서버 구축과 같은 심화 주제까지 총 10개의 세션을 제공했습니다. * **단계별 난이도 설계:** 참가자의 AI 활용 수준에 맞춰 3단계 레벨을 설정하여, 비개발 직군부터 엔지니어까지 누구나 자신의 수준에 맞는 학습이 가능하도록 했습니다. * **철저한 실습 지원 체계:** 흐름을 놓치지 않도록 상세한 '세션 가이드'를 제작 배포하고, 세션마다 2~3명의 조교(총 26명)를 배치하여 현장에서 발생하는 기술적 문제를 즉각 해결했습니다. * **Slack 기반의 소통:** 각 세션별 채널을 통해 실습 결과물을 실시간으로 공유하고 질의응답을 진행하여 참여도를 높였습니다. **사내 콘텍스트를 반영한 AI 멘토링** * **내부 전문가 활용:** 외부 강사 대신 사내에서 이미 AI를 적극적으로 활용 중인 동료 10명을 멘토로 선발하여 현장감 있는 지식을 공유했습니다. * **최적화된 도구 활용:** ChatGPT Enterprise, Gemini, Claude Code 등 사내에서 허용된 도구와 보안 수칙을 100% 반영하여, 배운 내용을 즉시 업무에 적용할 수 있는 환경을 구축했습니다. * **체계적인 콘텐츠 검토:** 운영진은 멘토 가이드를 제공하고, '주제 검토 - 최종 자료 리뷰 - 리허설'로 이어지는 다단계 프로세스를 통해 교육 콘텐츠의 완성도를 확보했습니다. **자발적 참여를 유도하는 축제형 운영** * **캠퍼스 테마 도입:** 수강 신청, 등교, 스탬프 랠리 등 대학교 캠퍼스 컨셉을 활용하여 학습에 대한 심리적 장벽을 낮추고 즐거운 분위기를 조성했습니다. * **몰입형 이벤트 부스:** Gemini를 활용한 AI 포토존, 자체 개발 AI 업무 지원 솔루션 체험, AI 에이전트 콘테스트 홍보 등 다채로운 부스를 운영하여 AI의 효용성을 직접 경험하게 했습니다. * **리더십의 전폭적 지지:** 경영진의 축전 영상을 통해 '업무 대신 AI와 함께 노는 하루'라는 메시지를 전달함으로써, 임직원들이 심리적 부담 없이 행사에 몰입할 수 있는 환경을 만들었습니다. 성공적인 사내 AI 전환(AX)을 위해서는 단순한 도구 보급을 넘어, 사내 보안 가이드와 업무 맥락을 정확히 이해하는 내부 전문가 중심의 실습 교육이 필수적입니다. AI Campus Day와 같이 학습을 '숙제'가 아닌 '축제'로 인식하게 만드는 운영 전략은 구성원들의 자발적인 기술 수용도를 높이는 데 매우 효과적인 접근 방식이 될 것입니다.

디자인 맥락, 제품을 (새 탭에서 열림)

Figma가 Anthropic에서 공개한 오픈 표준인 MCP(Model Context Protocol)를 지원하는 서버를 출시하며, 디자인 데이터를 AI 워크플로우에 직접 통합할 수 있는 길을 열었습니다. 이제 개발자는 AI 어시스턴트에게 Figma 파일의 링크를 제공하는 것만으로 디자인의 구체적인 맥락을 파악하게 하거나, 이를 기반으로 코드를 생성하도록 요청할 수 있습니다. 결과적으로 디자인과 개발 사이의 간극을 줄이고, 디자인 시스템을 코드 구현 과정에서 실시간으로 참조할 수 있는 환경이 구축되었습니다. ### MCP(Model Context Protocol)를 통한 디자인 맥락의 통합 * MCP는 LLM(거대언어모델)이 로컬이나 원격의 데이터 소스 및 도구에 안전하고 쉽게 접근할 수 있도록 돕는 오픈 표준 프로토콜입니다. * Figma MCP 서버는 AI 에이전트(예: Claude Desktop)가 Figma의 API를 통해 디자인 레이어, 속성, 구성 요소 등에 직접 접근할 수 있는 통로 역할을 합니다. * 이를 통해 개발자는 수동으로 디자인 수치를 복사해서 붙여넣는 대신, AI가 직접 디자인의 '진실의 원천(Source of Truth)'을 읽고 이해하도록 설정할 수 있습니다. ### Figma MCP 서버의 주요 기능 및 데이터 처리 * **컴포넌트 및 레이어 탐색:** AI가 특정 Figma 파일 내의 노드 구조를 탐색하고, 각 레이어의 시각적 속성(색상, 타이포그래피, 간격 등)을 추출할 수 있습니다. * **디자인 속성 읽기:** 텍스트 내용, 사용된 스타일 이름, 라이브러리 컴포넌트 정보 등을 정밀하게 파악하여 코드 생성 시 정확도를 높입니다. * **보안 및 인증:** 사용자의 Figma 개인 액세스 토큰(Personal Access Token)을 기반으로 작동하며, 명시적으로 허용된 범위 내에서만 AI가 데이터에 접근하도록 제어합니다. ### 개발 워크플로우의 실질적인 변화 * **디자인-투-코드 가속화:** "이 버튼 컴포넌트의 CSS를 추출해줘" 또는 "이 레이아웃을 React 컴포넌트로 만들어줘"와 같은 명령을 내릴 때, AI가 실제 디자인 데이터를 바탕으로 정확한 코드를 작성합니다. * **디자인 시스템 준수:** AI가 Figma에 정의된 디자인 토큰과 시스템 컴포넌트를 직접 참조하므로, 개발자가 가이드라인을 이탈하는 실수를 방지할 수 있습니다. * **피드백 루프 단축:** 개발자는 별도의 툴 전환 없이 AI 채팅창 내에서 디자인 사양을 즉시 확인하고 구현 전략을 논의할 수 있어 협업 효율이 극대화됩니다. 이 기능을 활용하려면 Figma MCP 서버를 로컬 환경에 설치하고 Claude Desktop과 같은 MCP 호환 클라이언트에 연결해야 합니다. 디자인 데이터를 프롬프트의 강력한 컨텍스트로 활용하고자 하는 개발팀이라면, 이를 통해 수동 작업을 줄이고 코드의 일관성을 획기적으로 높일 수 있을 것입니다.

디자인 시스템과 AI: MCP 서버 (새 탭에서 열림)

피그마(Figma)는 Anthropic의 Model Context Protocol(MCP)을 기반으로 한 전용 서버를 출시하여, AI 모델이 디자인 데이터에 직접 접근하고 이를 개발 워크플로우에 통합할 수 있는 환경을 마련했습니다. 이 MCP 서버를 통해 Claude와 같은 AI 에이전트는 피그마 파일의 레이어 구조, 스타일, 컴포넌트 속성을 실시간으로 조회하고 분석할 수 있게 됩니다. 이는 디자인과 개발 사이의 정보 단절을 해소하고, AI가 디자인 맥락을 완벽히 이해한 상태에서 코드를 생성하거나 문서를 작성하도록 돕는 중요한 기술적 진보입니다. ### MCP 서버를 통한 디자인 데이터의 개방 * **오픈 프로토콜 활용:** Anthropic이 발표한 MCP(Model Context Protocol)를 채택하여, 서로 다른 AI 모델과 데이터 소스가 표준화된 방식으로 통신할 수 있는 가교를 마련했습니다. * **실시간 데이터 접근:** 개발자가 별도로 스크린샷을 찍거나 속성을 복사해서 전달할 필요 없이, AI가 직접 피그마 API를 통해 최신 디자인 명세(Spec)를 읽어옵니다. * **풍부한 컨텍스트 제공:** 레이어 이름, 색상 값(Hex), 간격(Padding/Margin), 텍스트 스타일 등 피그마 내부의 상세한 속성 데이터를 AI에게 노출하여 코드 생성의 정확도를 높입니다. ### 개발자 워크플로우의 혁신적 변화 * **컨텍스트 스위칭 감소:** 개발자가 피그마 탭과 코드 에디터를 번거롭게 오가는 대신, AI 채팅 인터페이스 내에서 디자인 관련 질문을 던지고 즉각적인 답변을 받을 수 있습니다. * **디자인-투-코드(Design-to-Code) 최적화:** AI가 디자인 파일의 구조를 정확히 파악하고 있으므로, 프로젝트의 컴포넌트 라이브러리에 맞춘 더욱 정교한 프런트엔드 코드를 생성할 수 있습니다. * **검수 및 피드백 자동화:** 특정 디자인 요소가 시스템 가이드라인을 준수하고 있는지 AI가 체크하거나, 변경된 사항을 요약하여 개발 문서에 반영하는 작업이 가능해집니다. ### 설치 및 활용 방안 * **즉시 실행 가능한 도구:** 피그마 MCP 서버는 오픈 소스로 제공되며, Claude Desktop 환경에서 간단한 설정만으로 즉시 연동하여 사용할 수 있습니다. * **보안 및 권한 관리:** 사용자의 Figma personal access token을 기반으로 작동하여, 권한이 있는 파일에 대해서만 AI가 데이터에 접근할 수 있도록 설계되었습니다. * **확장 가능성:** 향후 다양한 IDE 플러그인이나 커스텀 AI 도구와 결합하여, 기업별 사내 디자인 시스템에 최적화된 맞춤형 개발 환경을 구축하는 데 기여할 것으로 보입니다. 피그마 MCP 서버는 AI가 단순한 텍스트 생성기를 넘어 실제 디자인 자산과 상호작용하는 ‘지능형 협업자’로 진화했음을 보여줍니다. 디자인 시스템의 일관성을 유지하면서 개발 속도를 높이고 싶은 팀이라면, 이 서버를 Claude Desktop에 연동하여 AI가 디자인 가이드를 직접 읽고 코드를 작성하게 하는 워크플로우를 먼저 도입해 보길 권장합니다.

AI와 글쟁이의 동행: 코드 주면 API 레퍼런스 써드려요 (새 탭에서 열림)

기술 문서 부족 문제를 해결하기 위해 엔지니어링 관점에서 접근한 이 글은, 생성형 AI를 활용해 사내 기술 컨텍스트와 스타일 가이드가 반영된 API 레퍼런스를 자동 생성하는 프로젝트 과정을 소개합니다. 일반적인 코딩 어시스턴트의 한계를 극복하기 위해 프롬프트 워크플로를 최적화하고, 특정 IDE에 종속되지 않도록 MCP(Model Context Protocol)를 도입하여 범용성을 확보했습니다. 최종적으로 AI가 생성한 결과물은 높은 품질을 보였으나, 기술 문서의 특성상 정확성을 담보하기 위한 인간의 검토 단계가 필수적임을 강조하며 결론을 맺습니다. ## 기존 AI 도구의 한계와 도큐먼트 엔지니어링의 목표 * 기술 문서는 항상 부족하며, 개발자 교육만으로는 시간과 관심의 부재라는 근본적인 원인을 해결하기 어렵다는 판단하에 자동화 프로세스를 구축했습니다. * GitHub Copilot과 같은 기존 도구는 코드 파악 능력은 뛰어나지만, 사내 전용 기술 용어나 특수한 스타일 가이드, 프로젝트별 컨텍스트를 반영하지 못하는 단점이 있습니다. * '사내 정보를 참고해 스타일 가이드에 맞는 API 주석을 작성하고, 이를 한곳에서 배포하기'를 목표로 테크니컬 라이터의 노하우를 자동화 공정에 이식했습니다. ## 프롬프트 최적화와 단계별 워크플로 구성 * 초기에는 방대한 지시 사항이 담긴 긴 프롬프트를 사용했으나, LLM이 복잡한 지시를 놓치는 문제가 발생하여 실행 단계를 세분화했습니다. * 처리 속도와 정확도 사이의 타협점을 찾기 위해 '프로그래밍 언어 인식', 'API 파악 및 예제 작성', '설명 및 파라미터/응답 값 작성'의 3단계 워크플로로 압축했습니다. * LINE의 고유 식별자인 'MID'를 단순한 약어(Member ID 등)로 오해하지 않고 사내 정의에 맞게 설명하도록 컨텍스트를 주입하여 일반 AI 도구와 차별화된 품질을 구현했습니다. ## 범용성 확보를 위한 MCP(Model Context Protocol) 도입 * 초기 프로토타입은 VS Code 익스텐션으로 제작했으나, IntelliJ 등 다양한 IDE를 사용하는 개발자들의 요구를 수용하기 위해 MCP 기반으로 전환했습니다. * MCP 서버는 클라이언트와의 통신에만 집중하므로, UI 구현에 드는 비용을 줄이고 언어 판별이나 코드 블록 선택 같은 부가 기능을 MCP 호스트(IDE 등)에 위임할 수 있습니다. * 사용자가 AI와 대화하며 파라미터를 입력하는 방식은 현대적인 AI 사용 경험에 부합하며, 특정 도구에 종속되지 않는 범용적인 문서화 솔루션을 제공합니다. ## AI 문서화의 성과와 실질적인 한계 * 자체 평가 결과, 생성된 주석의 88%가 기준을 만족했으며 78%의 사례에서 GitHub Copilot보다 우수한 품질의 설명을 생성하는 성과를 거두었습니다. * 그러나 AI는 확률 기반으로 작동하므로 100%의 정확성을 보장하지 못하며, 단 한 줄의 오류가 문서 전체의 신뢰도를 떨어뜨리는 API 레퍼런스의 특성상 위험 요소가 존재합니다. * 따라서 AI를 '완벽하지 않은 동반자'로 정의하고, AI가 초안을 대량으로 빠르게 생산하되 마지막 단계에서는 반드시 담당 개발자가 내용을 검토하는 '사람 중심의 검증' 프로세스를 권장합니다.

더블 클릭: MCP가 에이 (새 탭에서 열림)

Figma가 Anthropic에서 표준화한 Model Context Protocol(MCP)을 기반으로 한 자체 MCP 서버를 공개하며 AI와 디자인 워크플로우의 통합을 선언했습니다. 이 서버는 AI 에이전트가 Figma의 디자인 데이터에 직접 접근하고 이해할 수 있도록 설계되어, 개발자가 디자인 맥락을 AI 기반 개발 과정에 즉각적으로 활용할 수 있게 돕습니다. 이를 통해 디자인 사양 확인부터 코드 생성까지의 과정을 자동화하고 협업의 효율성을 획기적으로 높이는 것이 이번 발표의 핵심입니다. **MCP를 통한 디자인 맥락의 표준화** - Anthropic이 발표한 개방형 표준인 MCP를 채택하여 LLM(대규모 언어 모델)과 Figma 데이터 사이의 안전하고 표준화된 연결 통로를 구축했습니다. - AI 모델이 복잡한 Figma API를 일일이 학습하지 않아도, MCP 서버를 통해 파일 내용, 주석, 버전 히스토리 등의 정형화된 데이터를 즉시 조회할 수 있습니다. - 이는 디자인 데이터가 단순한 이미지를 넘어 AI가 해석 가능한 '살아있는 맥락'으로 작동하게 함을 의미합니다. **제공하는 주요 기능 및 데이터** - **디자인 노드 및 레이어 추출:** 특정 프레임, 컴포넌트, 레이어의 속성과 구조를 AI가 분석하여 정확한 스타일 정보를 파악할 수 있게 합니다. - **주석(Comments) 데이터 통합:** 디자인 파일 내에 남겨진 협업자들의 피드백을 AI가 읽어 들여, 수정 사항이나 의사결정 배경이 반영된 코드를 생성할 수 있습니다. - **이미지 및 에셋 렌더링:** 디자인 요소의 시각적 정보를 AI에게 전달함으로써, 시각적 일관성을 유지하며 UI 구현을 지원합니다. - **버전 히스토리 조회:** 디자인의 변경 이력을 추적하여 AI가 최신 업데이트 사항을 기반으로 작업하도록 보장합니다. **AI 기반 개발 워크플로우의 실제 활용** - Claude Desktop과 같은 MCP 지원 클라이언트와 연동하여 "이 디자인 프레임을 Tailwind CSS를 사용한 React 컴포넌트로 변환해줘"와 같은 복잡한 프롬프트를 수행할 수 있습니다. - AI 에이전트가 디자인의 제약 사항을 스스로 파악하고, 개발 가이드라인에 맞는 코드를 제안하거나 디자인과 코드 사이의 불일치를 찾아내는 검수 작업이 가능해집니다. - 반복적인 디자인-to-코드 변환 작업을 자동화하여 개발자는 로직 구현에 더 집중할 수 있는 환경을 제공합니다. Figma MCP 서버는 디자인과 개발 사이의 높은 장벽을 AI라는 매개체로 허무는 중요한 도구입니다. 현재 Claude Desktop 등을 통해 바로 사용해 볼 수 있으며, 개인 액세스 토큰(PAT)을 설정하여 보안을 유지하면서도 강력한 AI 자동화 워크플로우를 구축해 보길 권장합니다. 이를 통해 팀의 생산성을 높이고 디자인 시스템의 일관성을 더욱 견고하게 유지할 수 있을 것입니다.

MCP 서버 소개: 워크 (새 탭에서 열림)

Figma는 개발자가 LLM 기반 협업 도구에서 디자인 맥락을 실시간으로 활용할 수 있도록 지원하는 'Figma MCP(Model Context Protocol) 서버'를 베타 버전으로 출시했습니다. 이 서버는 단순한 이미지 전달을 넘어 디자인 시스템의 컴포넌트, 변수, 스타일링 정보를 AI에게 직접 제공함으로써, 개발자가 사용하는 코드베이스의 패턴에 최적화된 고품질 코드를 생성하도록 돕습니다. 결과적으로 Cursor, VS Code Copilot 등 AI 기반 코딩 도구에서 디자인 의도를 더욱 정확하고 효율적으로 구현할 수 있게 되었습니다. ### 디자인 의도를 코드로 전환하는 MCP 서버의 역할 * **표준화된 컨텍스트 제공**: MCP는 애플리케이션이 LLM에 맥락을 제공하는 표준 규격으로, 이를 통해 Figma의 디자인 데이터를 가공 없이 AI 에이전트(Cursor, Windsurf, Claude Code 등)에 직접 연결합니다. * **학습 데이터의 한계 극복**: LLM은 일반적인 코드는 잘 작성하지만 특정 팀의 고유한 코드 구조나 프레임워크 패턴은 알지 못합니다. MCP 서버는 팀 고유의 디자인 의도를 전달해 이 간극을 메웁니다. * **효율적인 워크플로우**: 단순히 디자인을 보고 코드를 짜는 단계를 넘어, AI가 디자인의 구조와 논리를 스스로 이해하고 멀티 레이어 애플리케이션 흐름을 구축할 수 있도록 지원합니다. ### 디자인 시스템 및 패턴 메타데이터 활용 * **정밀한 코드 매칭**: 디자인에 정의된 컴포넌트, 변수(Variable), 스타일 정보를 직접 전달합니다. AI가 단순히 비슷한 색상을 찾는 것이 아니라, 시스템에 정의된 정확한 토큰 이름과 변수명을 사용하게 합니다. * **Code Connect 연동**: Figma에 설정된 'Code Connect' 정보를 바탕으로 AI에게 해당 디자인이 구현된 실제 코드 파일의 경로를 정확히 안내하여 중복 컴포넌트 생성을 방지합니다. * **토큰 절약 및 정확도 향상**: 디자인 시스템의 패턴을 직접 참조함으로써 AI가 탐색에 소모하는 토큰 양을 줄이고, 디자인 시스템을 벗어난 코드를 생성할 확률을 낮춥니다. ### 시각적 정보와 상호작용의 결합 * **고수준 스크린샷 제공**: 텍스트 데이터로 설명하기 어려운 전체적인 화면 흐름, 반응형 레이아웃, 섹션 간의 관계를 스크린샷을 통해 AI에게 시각적으로 보완 설명합니다. * **인터랙션 및 의사 코드(Pseudocode)**: 복잡한 상태 변화나 UI 시퀀스를 설명하기 위해 '의사 코드' 형태의 프로토타입 데이터를 제공합니다. 이는 단순한 메타데이터 트리보다 AI가 컴포넌트의 동작 논리를 이해하는 데 훨씬 효과적입니다. * **선택적 컨텍스트 제어**: 사용자는 특정 도구가 반환하는 정보의 양을 설정하여, 현재 작업 중인 코드 구현에 가장 적합한 수준의 디자인 컨텍스트를 조절할 수 있습니다. ### 실용적인 활용 및 향후 계획 현재 Figma MCP 서버는 베타 단계로, VS Code의 Copilot이나 Cursor 같은 도구에 연결하여 즉시 디자인 기반 코드 생성을 테스트해 볼 수 있습니다. 향후 Figma는 원격 서버 기능 지원과 코드베이스와의 더욱 깊은 통합을 포함한 업데이트를 지속할 예정입니다. 디자인 시스템이 잘 구축된 팀일수록 이 서버를 통해 디자인과 코드 간의 일치성을 극대화하는 경험을 할 수 있을 것입니다.