Figma MCP로 30분만에 15개 페이지 개발하는 방법

아래 화면은 디자이너가 구현한 Figma 상의 다섯 개 페이지 화면입니다.
추천코드 입력 화면과 이메일 입력 화면, 인증번호 입력 화면, 비밀번호 입력 화면, 가입 완료 화면 으로 이루어져있습니다.

이 페이지들을 직접 퍼블리싱하고, state를 연결하는 데 얼마 정도의 시간이 걸리시나요?
저는 셋업 시간을 제외하고 10분도 채 걸리지 않고 다섯 개의 페이지를 개발했습니다.

빠른 시간 내에 개발을 완료한 거라면 코드 품질이 안 좋지 않을까요? 그것 또한 확인해보겠습니다.

아키텍처	레이아웃

아키텍처 또한 제가 원하는대로 Feature 기반으로 slice되어 설계되었고, Next.js 프레임워크의 app router와 private routing 기술을 적절하게 이용했습니다.

레이아웃도 재사용되는 컴포넌트는 확실하게 나누어져있고, 컴포넌트 내부 또한 유연하게 바뀌도록 잘 설계되어 있는 것 같아 보입니다.

이 모든 일들이 10분도 안 되어서 일어났습니다. 어떻게 이런 마법같은 일이 일어날 수 있을까요?

이 글에서는...

• MCP와 Claude code가 무엇인지에 대해 설명합니다.
• Claude code와 Figma MCP를 연결하는 방법을 설명합니다.
• Claude code의 Memory System을 유용하게 쓰는 방법을 설명합니다.
• AI를 통해 한 문장만으로 페이지를 개발하고, 결과물과 과정을 리뷰합니다.

MCP가 뭘까?

MCP(Model Context Protocol)는 AI 모델과 외부 데이터 소스를 연결하는 표준화된 오픈 프로토콜입니다.
쉽게 말하면 우리가 익숙하게 사용하는 웹 사이트 안의 GPT나 Perplexity, Gemini같은 툴들을 어떤 서비스와 연결해 사용할 수 있게 하는 Bridge나 USB라고도 생각할 수 있습니다.

요즘 MCP가 굉장히 핫한 주제인데, MCP를 지원하는 서비스라면 어디서든 Claude code와 같은 AI를 붙여서 사용할 수 있기 때문입니다.

대표적으로 Blender MCP가 있습니다.

MCP를 연결 후 Claude code에 '집을 모델링해줘'라고 입력하면 gif처럼 Claude code가 직접 블렌더를 활용합니다.

어떻게 이게 가능할까요?

사용자가가 Claude에게 프롬프트를 통해 요청을 하면, MCP 클라이언트가 프로토콜 통신을 통해서 대상 서비스에 API 요청을 보냅니다. 해당 API 요청을 토대로 응답을 처리하면서 위 GIF처럼 마법같은 일이 생길 수 있게 됩니다.

Blender MCP 뿐만 아니라 일감과 문서를 구체화해 관리해주는 Jira, Confluence MCP, Figma 화면을 보고 개발을 자동화해주는 Figma MCP, 더 나아가 MCP가 포켓몬 골드를 플레이하고 하는 등 여러 부면에서 재미있는 시도가 일어나고 있습니다.

이 글에서는 그 중 프론트엔드 개발자들이 매우 유용하게 사용할 수 있는 Figma MCP에 대해 알아볼 예정입니다. 그 전에, 기본적으로 글에서 서술할 Claude code에 대해 알아보겠습니다.

Claude code란 무엇일까?

Claude code는 개발자가 터미널을 기반으로 프롬프팅을 할 수 있는 툴입니다. 요즘 개발자들 사이에서는 Cursor AI가 유독 많이 알려져 있는데요, Claude code는 터미널을 기반으로 실행할 수 있기 때문에 IntelliJ를 쓰는 개발자, WebStorm을 쓰는 개발자, VSCode를 쓰는 개발자를 불문하고 모든 IDE에서 돌아갈 수 있다는 유연성이 장점입니다.

GPT처럼 어떤 사이트에 들어가서 질문을 하고, 답변을 받는 식과 다르게 Claude code는 질문이나 명령을 전송하면 직접 개발자의 코드를 분석해서 코드를 작성해주기도 합니다.

현재 점유율은 Cursor AI가 훨씬 높지만, 두 가지 툴을 다 써 본 입장에서 주관적인 생각으로는 JavaScript 기반 코드를 짤 때에는 Claude code가 조금 더 뛰어난 성능을 보인다고 느낍니다.

Claude code Setup

Claude code는 npm을 통해 설치할 수 있습니다.

$ npm install -g @anthropic-ai/claude-code

개발자의 컴퓨터에 전역적으로 claude code를 설치한 후, 원하는 프로젝트에서 claude 명령어만 작성하면 바로 claude code를 실행시킬 수 있습니다.

claude 명령어를 통해 vscode 터미널에서 오늘 저녁 메뉴를 추천받아보겠습니다.

위 gif처럼 바로 설치 후 작동시킬 수 있습니다. 기본적으로 Claude code는 특정 토큰을 초과하여 사용하면 결제가 필요할 수 있기 때문에, 이 점 참고하시기 바라겠습니다. (필자는 Pro plan을 사용 중입니다)

Figma MCP Setup

이제 서두에서 설명드렸던 것처럼 이를 Figma MCP와 연결시켜보겠습니다.

해당 링크에서 원문 문서를 확인하실 수 있습니다

1. 먼저 피그마를 최신 버전으로 업데이트합니다.

2. 좌측 상단 피그마 아이콘을 클릭하고, Preferences에 있는 Enable Dev Mode MCP Server 옵션을 Check합니다.

참고로 옵션 이름 만큼, Dev Mode가 켜져있는 피그마에서만 MCP를 사용할 수 있다는 점 참고 부탁드립니다.

이렇게 되면 기본적으로 Figma에서 할 일은 끝났습니다.

그 다음은 Claude code로 가서 세팅을 해보겠습니다. Figma MCP를 사용하려는 프로젝트의 루트에 다음 명령어를 실행해주세요. (claude 실행 후 해당 커맨드 실행하는 게 아니라, 그냥 터미널에서 명령어처럼 실행해주시면 됩니다)

$ claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

이렇게 되면 Figma MCP 사용 준비가 끝났습니다. 이제 바로 이를 사용해서 개발을 진행해보겠습니다.

Project Guide Setup

먼저 우리는 Claude에게 명령을 내릴 때마다 똑같은 말을 반복하지 않도록, 그리고 우리가 원하는 코드 스타일대로 개발을 진행할 수 있게 프로젝트에 대해 가이드하는 문서를 작성해줄 겁니다.

프로젝트의 루트에 CLAUDE.md 파일을 생성해주세요. 파일명이 다르면 안되며, CLAUDE.md 파일만 생성해두면 claude가 실행될 때 자동으로 해당 파일을 학습합니다.

제가 작성한 가이드 파일은 이 정도입니다. 가이드 파일은 한글로 작성해주셔도 되는데요, 저 또한 어떤 가이드 파일이 가장 좋은 효율을 내는지 계속해서 새로운 시도를 해 보고 있는 중이라 영어로 작성하였습니다.

특정 부분마다 나누어 파일을 살펴보겠습니다.

CLAUDE.md

# CLAUDE.md

It is a mobile-based web service that matches you with the opposite gender for romantic relationships and blind dates.

먼저 해당 프로젝트가 어떤 서비스인지에 대해 설명합니다. 저는 디자이너 지인 분께서 해커톤에 참여할 때 사용하셨던 템플릿을 빌렸습니다. 해당 서비스는 소개팅을 연결해주는 웹 기반 서비스라고 명시해주었습니다.

MCP Servers

# MCP Servers

## Figma Dev Mode MCP Rules

- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Figma MCP Server rule에 대해 기본적으로 설명합니다. 대체적으로 asset과 관련된 내용입니다.
미리 말씀드려보면 Figma MCP를 사용하면서 png, svg와 같은 asset을 사용할 때 Claude code가 애를 좀 먹습니다.
이 부분에 가이드 파일을 원하는대로 더 상세하게 적어본다면 asset을 세부적으로 조절할 수 있습니다.

Tech Spec

# Tech Spec

Please Check dependencies in ./package.json file.

- **Development**: Next.js, TypeScript, React.js
- **Styling**: tailwindcss@4
- **API Request**: axios, @tanstack/react-query
- **Animation** : motion

어떤 라이브러리나 프레임워크를 사용하고있는지를 명시합니다. 구버전이나 stable 버전을 사용하는 경우 버전까지 같이 명시해주면 좋습니다. 예시에서는 최신버전인 tailwindcss@4를 적어두었지만, 특정 프로젝트에서 MCP를 쓸 때 v3 문법을 쓰는 프로젝트에서 v4 코드를 짜는 등의 이슈가 발생하기도 합니다.

그래서 한 버전으로 제한해야하는 경우 이렇게 버전을 명시해두면 좋고, 저는 혹시나 실수할까봐 첫 줄에 package.json 파일을 참고하라고도 해두었습니다.

Directory Architecture

# Directory Architecture

figma-mcp/
├── public/ /* statical assets e.g. png, jpg, ... */
├── src/
│   ├── app/
│   │   ├── [pageName]/
│   │   │   ├── _features/
│   │   │   │   ├── ui/
│   │   │   │   │   └── /* being used component in [pageName], If you implement page component, you can naming [pageName]PageView.tsx with camelcase */
│   │   │   │   ├── lib/
│   │   │   │   │   ├── assets/ /* if you need use svg, you can make svg component file with `index.ts` barrel file. Please use svg by tsx module */
│   │   │   │   │   └── hooks/ /* being used custom hook in [pageName] */
│   │   │   ├── _entities/
│   │   │   │   ├── model/
│   │   │   │   │   └── /* being used type or interface in api call, e.g. response dto, request dto, or just model, etc. you can naming 'types.ts', 'dto.ts' and export it. (do not use `export default`) */
│   │   │   │   ├── api/
│   │   │   │   │   ├── axios.ts /* axios function group */
│   │   │   │   │   └── queries.ts /* React Query group object with use `queryOptions` in @tanstack/react-query. if you need declare useMutation, you can declare in this file. but mutation don't have `mutationOptions`, So you should use type annotation with `MutationOptions` type. */
│   │   │   └── page.tsx /* just export in _features/ui/[pageName]PageView.tsx. page.tsx's component should use type annotation with 'NextPage' in 'next'. */
│   │   └── page.tsx
│   ├── shared/
│   │   ├── components/ /* shared components in feature page */
│   │   └── hooks/ /* shared hooks in feature page */

이 부분이 꽤 중요한 부분이라고 생각합니다. 만약 지향하는 아키텍처가 있거나, 기존 프로젝트에서 추가적인 코드를 짜는 경우 프로젝트 아키텍처에 대해 세부적으로 설명해야 합니다.

저는 bun으로 Next.js를 셋업한 다음 아무 구조도 없는 상태에서 다음과 같은 아키텍처로 짜달라고 요청했습니다.
각 디렉터리에 어떤 내용이 어떤 스타일로 들어가야하는지, 코드에는 어떤 게 꼭 포함되어야 하는지도 명시합니다.

영어를 잘 못하는데 공부하는 겸 번역기 안 쓰고 손수 작성해보아서 문법이 엉망입니다. 양해 부탁드립니다ㅠ

Implement

# Implement

- Each page is managed via [pageName] directory in `src/app`.
- If you need implement some page, follow Directory Architecture rules.
- You should declare model and api when you need implement some page. see the figma design and judgment what data is necessary.
- If you think it is a frequently used component, such as a button or input, please implement it flexibly in shared so that the component can be commonly used.

Implement에서는 페이지를 개발할 때 어떤 부분을 어떻게 개발해야하는지를 세부적으로 설명합니다.

Avoid Pattern

# Avoid Pattern

- Do not use any type. If need some interface or type, you can write [feature page name]/types.ts and export it.
- You can use gap or empty `h-{} div` instead of margin and padding. Please avoid margin/padding styling pattern as you can.
- If a component file has more than 150 lines of code, please separate the hooks or components into modules.
- Do not use `React.[module]` pattern. please just import and use it.
- Do not use inline function. please make a handler function and use it. you can naming function with this rule via `'handle'{target}{eventName}` e.g. handleCTAButtonClick, handleAgeInputChange, etc.
- Do not use inline style css.
- If you need assets, use can copy as SVG code in figma. do not implement yourself asset file, just use svg and convert to svg component.
- Please avoid publish with `relative`, `absolute`. you can use flex and grid tailwindcss keyword.

Avoid Pattern에는 말 그대로 피해야하는 코드 스타일을 적어주었습니다. TypeScript any 쓰지마라, margin이나 padding 말고 gap을 써보아라, 컴포넌트가 너무 길어지면 모듈화를 진행해라, inline style 쓰지마라 등의 내용을 넣어주었습니다.

사실 CLAUDE.md 파일을 잘 작성했다면 모든 준비가 끝났습니다. 이제 본격적으로 Claude code에게 구현을 명령해보겠습니다.

Claude code로 개발해보기

피그마에서 구현을 원하는 프레임을 우클릭해보시면 Copy link to selection이라는 버튼이 있습니다.

해당 버튼을 클릭해 링크를 복사하고 claude를 실행한 다음,

이런 식으로 링크와 함께 구현을 요청하는 커맨드를 입력합니다.

Claude code는 명령을 받고 자신이 해야 할 일을 Todos로 분류한다음 작업을 진행합니다.
빠른 시간 내에 결과물이 나오는데요, 결과물을 확인해보겠습니다.

피그마	구현

말씀드렸던 Arrow와 같은 SVG를 제외하고는 거의 동일하게 구현되었네요. 아키텍처를 확인해보겠습니다.

CLAUDE.md에 셋업해둔 명령어처럼 원하는대로 아키텍처를 잘 짰네요. 세부 코드도 확인해보겠습니다.

  const [formData, setFormData] = useState<ReferralCodeFormData>({ code: '' });

  const handleCodeInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ code: e.target.value });
  };

  const handleBackButtonClick = () => {
    // Navigate back logic
    console.log('Navigate back');
  };

  const handleNextButtonClick = () => {
    if (formData.code.length === 6) {
      // Submit logic
      console.log('Submit referral code:', formData.code);
    }
  };

  const isNextButtonEnabled = formData.code.length === 6;

이야기하지도 않았는데 피그마에 적힌 글자만을 보고 6글자인 경우에만 Button을 enable 시키는 플래그도 만들어 주었습니다. state를 개발하고 각 핸들러 함수들을 정확한 이름으로 선언했으며,

  return (
    <div className="bg-[#ffffff] flex flex-col min-h-screen w-full">
      <div className="flex flex-col shrink-0 pt-4">
        <NavigationHeader
          leftContent={
            <button
              className="shrink-0 w-7 h-7"
              onClick={handleBackButtonClick}
            >
              <ArrowBackIcon />
            </button>
          }
        />
        <TitleSection
          title={
            <>
              <p className="block mb-0">가입하기 전 추천코드를</p>
              <p className="block">입력해주세요.</p>
            </>
          }
          subtitle="추천코드가 없다면 가입이 힘들어요"
        />
      </div>
      <div className="flex flex-col flex-1 w-full">
        <div className="flex flex-col items-center h-full w-full">
          <div className="flex flex-col justify-between pt-2 pb-0 px-0 h-full w-full">
            <Input
              label="추천 코드"
              value={formData.code}
              onChange={handleCodeInputChange}
              placeholder="숫자, 영문을 합친 6자리 코드를 입력해주세요."
              maxLength={6}
            />
          </div>
        </div>
      </div>
      <CTAButton
        onClick={handleNextButtonClick}
        disabled={!isNextButtonEnabled}
        rightIcon={<ArrowRightIcon />}
      >
        다음
      </CTAButton>
    </div>
  );

UI적인 측면에서도 딱히 더럽다고 느껴지는 부분 없이 깔끔하게 코드 작성을 완료했습니다.

이런 식으로 다섯 개의 프레임을 Claude code에 요청했고, 모든 명령을 요청하고 응답을 받는 시간까지 10분도 걸리지 않아 아래와 같은 화면이 뚝딱 만들어졌습니다.

물론 asset과 약간의 레이아웃 관련해서 조금 다른 부분이 있어, 이 부분은 직접 수정을 진행해주었습니다. (해당 시간까지 포함해서도 10분도 걸리지 않았습니다)

사용성

Claude code는 이외에도 여러가지 기능들을 제공하는데요, 기능들 중 제일 기본적인 메모리 시스템을 이용한 CLAUDE.md 파일과, 간단하게 셋업할 수 있는 Figma MCP만으로도 이 정도 퀄리티의 코드를 짤 수 있습니다.

더 나아가 세부적인 개발이나 코드 스타일을 원한다면, 계속해서 CLAUDE.md 파일을 업데이트시키거나 Memory 세팅을 통해 원하는대로 Claude를 입맛에 맞게 튜닝할 수 있습니다.

저는 Claude code로 회사에서 진행하고 있는 업무 중, 페이지를 유연하고 확장성있게 개발하는 특정 업무에서 Figma MCP를 사용하고 있습니다.

기존에 재사용할 수 있는 컴포넌트가 많이 존재하고, 피그마 내에서의 오토 레이아웃이나 패딩, 마진, 컴포넌트화 등이 알맞게 적용되어있다면 훨씬 뛰어난 성능을 발휘합니다.

개인적으로는 이런 개발뿐만 아니라, 사용자가 해당 페이지에 접속해서 어떤 흐름으로 페이지를 사용할지를 예상하고 이를 테스트 코드로 작성하는 일 또한 할 수 있다는 점이 좋다고 느껴집니다.

또 해당 작업을 Claude code로 문서화하여 온보딩 가이드를 만들고, Jira MCP를 활용해 작업이 끝난 후 Github에 코드를 push할 때마다 진행 상황을 업데이트하고, Confluence MCP를 활용해 Tech Spec 문서를 업데이트 하고 ...

이런 식으로 AI를 활용한다면 개발자는 직접 코드를 작성하지 않아도 빠르게 일을 처리할 수 있습니다. 개발부터 테스트 코드 작성, 문서화까지 원래 8시간이 걸렸다면 AI와 MCP를 통해 한 시간 만에 이를 구현할 수 있는 것이고, 그 시간 동안 다른 일을 할 수도 있게 되는 거죠.

마무리

저도 AI를 그렇게 신용하는 개발자는 아니라서 이번에 거의 처음 Claude code와 MCP를 사용해보게 되었는데, 생각보다 편리하고 코드를 잘 짜주며, 무엇보다도 속도가 너무 빨라서 그 시간에 비개발적인 업무(타 직군과 의사결정 포인트 논의 or 개인적인 스터디, 운영 업무 캐치업 등)를 할 수 있어 너무 여유로웠습니다.

원래는 '돈 벌려고 일하는데 왜 돈을 주면서 일해야 해?'라는 생각을 가지고 이런 AI들을 결제하지 않았었는데, 많이 부풀려서 표현해보면 '달에 3만원씩만 내면 월급을 받을 수 있네?' 라고 생각이 바뀌어 잘 사용해보고 있습니다.

시대가 너무 좋아졌습니다. 개발에 필요한 기본기나 지식, 내부 동작 원리 또한 중요하지만, 이제는 AI를 비서처럼 활용해 본인의 업무를 어떻게 효율화할 수 있는지를 플래닝하는 것 또한 중요하다고 느껴집니다.

'AI가 내 직업을 대체하지 않을까?', 'AI 때문에 취업 못하는 거 아니야?'와 같은 부정적인 생각보다는, AI와 함께 협업한다고 생각하시며 오픈된 마인드로 다가가보신다면 더욱 훌륭한 개발자가 되어있으실 거라 예상합니다.

AI를 좋아하지 않으시더라도 꼭 한 번 써보시길 바라며, 월 3만원이 비싸게 느껴질 수 있지만 ... 저는 술자리 한 번 안 간다고 생각하고 결제했습니다. 한번쯤은 꼭 사용해보시는 걸 추천드립니다.