20분 만에 홈페이지 재설계하기: Figma MCP + Atlassian Design System MCP + Rovo Dev CLI

출처

Redesigning a Homepage in 20 Minutes: Figma MCP + Atlassian Design System MCP + Rovo Dev CLI

작성자:
Anuj Shah (Software Engineer)
발행일: 2026년 02월 23일

Before vs after (이전 vs 이후)

개발자가 4일 동안 작업해야 했던 것이 Rovo Dev CLI와 MCP 서버를 사용해 20분 만에 완료됩니다.

TL;DR (요약)

애플리케이션 홈페이지 전체를 새롭게 리디자인했습니다. Figma 목업부터 프로덕션에 바로 투입할 수 있는 React 코드까지, 20분도 채 걸리지 않았습니다.
디자인 토큰을 일일이 복붙할 필요도 없었고, 컴포넌트 API를 추측할 필요도, DevTools에서 픽셀 단위로 미세 조정할 필요도 없었습니다.

재설계의 핵심

핵심은 무엇일까요?

Figma MCP,  Atlassian Design System (ADS) MCP, 그리고  Rovo Dev CLI를 하나의 AI 기반 워크플로로 연결하는 것입니다.

이 글에서는 이를 어떻게 구현했는지 자세히 살펴보고, 내부적으로 어떤 MCP 도구들이 사용되었는지, 그리고 그 결과 어떤 코드가 만들어졌는지 정확히 소개합니다.

The Problem (문제)

기존 홈페이지의 시각적 디자인을 완전히 개편해야 했습니다.

보통 이런 종류의 재설계에는 프런트엔드 엔지니어가 최소 3~4일, 그 이상의 시간을 들여야 합니다.

디자인을 해석하고, 토큰을 찾아보고, 적절한 컴포넌트를 찾고, 스타일을 연결하고, 테스트를 해야 합니다.

AI를 활용하면 이 과정을 몇 분으로 줄일 수 있을지 확인해 보고자 했습니다.

구성: RD CLI와 두 개의 MCP 서버가 연동되는 구조

개발 환경에서 두 개의 MCP (Model Context Protocol) 서버를 구성했습니다.

Figma Desktop MCP

Figma 데스크톱 앱에 연결해 Figma 파일에서 디자인 데이터를 직접 추출합니다.

{
  "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp",
      "transport": "http"
  }
}

Atlassian Design System MCP

ADS의 모든 컴포넌트, 토큰, 아이콘 및 접근성 가이드라인에 대한 접근 권한을 제공합니다.

{
  "atlassian-design-system-mcp": {
      "command": "npx",
      "args": ["-y", "@atlaskit/ads-mcp"]
  }
}

Rovo Dev CLI

워크플로를 총괄하는 AI 코딩 에이전트로, 디자인을 읽고, 디자인 시스템 가이드를 조회하고, 코드를 생성하며, 테스트까지 수행합니다.

이 세 가지가 모두 연결되면 다음과 같은 파이프라인이 구성됩니다: Figma 디자인 → AI 해석 → ADS 준수 코드 → 테스트 완료된 결과물

Step-by-Step (단계별 설명): 20분 동안 진행된 과정

Step 1: Figma에서 디자인 추출하기

Rovo Dev에게 새로운 홈페이지 디자인의 Figma 노드 URL을 전달했습니다.

내부적으로 두 개의 Figma MCP 도구가 동시에 사용되었습니다:

get_design_context 

전체 디자인 트리(레이아웃 구조, 색상, 타이포그래피, 여백, 컴포넌트 계층, 콘텐츠)를 추출했습니다.

이를 통해 프레임 내 모든 요소의 구조화된 표현을 얻을 수 있었습니다. 여기에는 다음이 포함됩니다:

• 프레임 크기와 자 레이아웃 속성

• 색상 채우기 (the amber #F5CD47 hero, the #0C66E4 video card)

• 텍스트 내용, 글자 크기, 굵기, 줄 간격

• 테두리 반경, 패딩, 간격 값

• 중첩된 컴포넌트 구조

get_screenshot

시각적 참고를 위해 디자인의 픽셀 단위까지 정확한 스크린샷을 캡처했습니다.

이를 통해 AI는 검증 기준이 되는 이미지를 얻게 됩니다.

구조화된 데이터와 시각적 스크린샷의 조합 덕분에 AI는 추측할 필요 없이 의미 구조와 시각적 목표물을 모두 확보할 수 있었습니다.

Step 2: Atlassian Design System 조회

Rovo Dev는 단 한 줄의 코드를 작성하기 전에 ads_plan 도구를 사용하여 ADS MCP에 쿼리를 보냈습니다  

이것이 단순히 "이미지에서 코드를 생성하는 것"과 차별화되는 핵심 요소였습니다.

쿼리에는 다음 항목이 포함되었습니다:

요청된 토큰:

• color.background.warning (앰버 히어로 배너용)

• color.background.brand.bold (파란색 비디오 카드용)

• color.text, color.text.subtle, color.text.inverse

• elevation.shadow.overflow, elevation.surface.raised

• space.200, space.300, space.400, space.500

• border.radius.200

요청된 컴포넌트:

• Box, Inline, Stack, Flex, Grid (레이아웃 기본 요소)

• Heading, Button, Lozenge, ProgressBar, Checkbox, Badge

요청된 아이콘:

• play, chevron-left, chevron-right, more, clock, video

ADS MCP에서는 다음과 같은 결과가 나왔습니다:

• 각 컴포넌트의 정확한 import 경로

• 사용 방법과 API 문서

• 토큰 값과 사용 시점

• 아이콘 컴포넌트 이름과 해당 패키지

• 각 컴포넌트의 접근성 요구사항

이렇게 생성된 코드는 하드코딩된 hex 값 대신 실제 디자인 시스템 토큰을 사용하고, 일반적인 HTML이 아닌 실제 ADS 컴포넌트를 사용하며, 처음부터 올바른 접근성 패턴을 따릅니다.

Step 3: 기존 코드 패턴 파악

Rovo Dev는 프로젝트의 코드 패턴 문서(rovodev/code-patterns.md 파일)를 참고해 다음 내용을 파악했습니다:

• 프로젝트에서 컴포넌트를 구성하는 방법

• 스타일링 규칙(xcss 사용, raw CSS 대신)

• 별칭 패턴 가져오기(~src/...)

• 테스트 규칙

• 기존 페이지에서 레이아웃을 구성하는 방식

이렇게 하면 생성된 코드가 보기에도 좋을 뿐만 아니라 코드베이스에도 잘 맞아 떨어졌습니다.

Step 4: 컴포넌트 생성

디자인 데이터, ADS 가이드, 그리고 코드베이스 패턴을 바탕으로 Rovo Dev는 새로운 컴포넌트 여섯 개를 생성하고 기존 파일 두 개를 업데이트했습니다.

각 컴포넌트에는 다음 요소가 사용되었습니다:

• 레이아웃에는 CSS로 직접 스타일링한 div 대신 ADS Box, Flex, Stack, Grid 사용

• 적절한 헤딩 레벨을 적용한 ADS Heading

• 상태 배지를 위한 ADS Lozenge

• 액션을 위한 ADS Button(기본 API와 새로운 API 모두 사용)

• 작업 완료 상태를 표시하는 ADS ProgressBar

• 접근성을 위해 적절한 aria-label을 적용한 ADS Checkbox

• xcss를 통한 디자인 토큰 적용(예: 앰버 배너에는 color.background.warning.bold, 비디오 카드에는 color.background.brand.bold)

• @atlaskit/icon/core/* 및 @atlaskit/icon/utility/*의 ADS 아이콘

Step 5: 레이아웃 구성

메인 HomePage.tsx 파일을 업데이트해 Figma와 동일한 레이아웃으로 모든 새 섹션을 구성했습니다.

사이드바는 코드 분할 로딩을 위해 프로젝트의 lazyWithSidebar 유틸리티를 사용해 라우팅 구조에 연결되었습니다.

Step 6: 문제 수정 및 테스트 실행

AI는 코드를 생성하는 데서 끝나지 않고 기존 테스트 스위트(test suite)를 실행해 세 가지 문제를 차례로 수정했습니다.

1. Double React.lazy wrapping

사이드바에 React.lazy가 두 번 적용되었습니다.

(한 번은 수동으로 적용되었고, 한 번은 lazyWithSidebar를 통해 적용되었습니다)

이로 인해 “Element type is invalid” 오류가 발생했습니다.

이에 따라 사이드바를 named export로 변경해 해결했습니다.

1. Duplicate welcome text

기존 HomeBanner와 새 WelcomeHeroBanner에서 동일한 문구가 렌더링되어 getByText가 여러 요소를 찾게 되는 문제가 발생했습니다.

이를 해결하기 위해 기존 HomeBanner를 제거하고 그 안에 있던 액션 버튼을 인라인으로 옮겼습니다.

1. Accessibility violation

TopTasksSection의 체크박스에 라벨이 없어 axe-core 접근성 검사에 실패했습니다.

이를 해결하기 위해 설명이 포함된 aria-label 속성을 추가했습니다.

최종 결과: 접근성 검사를 포함해 3개의 테스트가 모두 통과했습니다.

최종 결과

10개 파일이 변경되었으며, 1,381줄이 추가됐고 70줄이 삭제됐습니다.

홈페이지 전면 개편 - 새로운 히어로 배너, 비디오 섹션, 일정 패널, 작업 트래커, 사이드바 내비게이션이 추가되었습니다.

모든 구성은 ADS(Atlassian Design System) 컴포넌트와 토큰을 기반으로 구성되었으며, 접근성을 준수하고 기존 코드베이스 패턴을 따릅니다.

브랜치: feature/camper-homepage-redesign

최종 결과: 접근성 검사를 포함해 3개의 테스트가 모두 통과했습니다.

왜 중요한가

Speed

개발자 기준으로 4~5일이 걸리던 작업을 약 20분 만에 처리할 수 있습니다.

AI가 기계적인 변환 과정(design → tokens → components → layout)을 담당하고, 개발자는 의도 파악과 결과 검토에 집중할 수 있습니다.

Consistency

코드 생성 전에 ADS MCP를 조회했기 때문에 모든 컴포넌트가 올바른 디자인 토큰과 컴포넌트 API를 사용합니다. 하드코딩된 색상도 없고, 잘못된 간격 값도 없으며 더 이상 사용되지 않는 컴포넌트도 없습니다.

Accessibility

ADS MCP는 컴포넌트 API와 함께 접근성 가이드를 제공합니다.

생성된 코드는 처음부터 올바른 heading 계층 구조, ARIA 라벨, 그리고 키보드로 탐색 가능한 패턴을 포함하며, 테스트 스위트가 axe-core를 통해 이를 검증합니다.

Code Quality

Rovo Dev가 먼저 코드베이스의 규칙을 확인했기 때문에 생성된 코드는 프로젝트의 기존 패턴을 따릅니다.

결과물은 코드베이스를 잘 아는 팀원이 작성한 것처럼 보이며, 단순히 스크린샷만 보고 만든 AI 코드처럼 보이지 않습니다.

The MCP Tool Chain: A Summary

직접 사용해 보기

1. Figma MCP 설치 - Figma 데스크톱 앱 연동 활성화

2. ADS MCP 설치 - Atlassian Design System 서버 연결

3. Rovo Dev CLI에 Figma 노드 전달 - 노드 URL을 공유하고 원하는 작업 설명

4. 결과 검토 - AI가 코드 생성, 테스트, 수정까지 수행하고 사용자가 최종 검토 및 보완

Front-end 개발의 미래는 개발자를 대체하는 것이 아니라, 디자인과 코드 사이의 번거로운 변환 과정을 줄여 개발자가 실제로 중요한 판단에 집중할 수 있도록 하는 것입니다.