Cursor + Figma MCP 가이드 - Cursor로 Figma 디자인을 코드로 변환하기

🎯 이번 편에서 배울 내용

Figma 디자인을 HTML/CSS로 변환하기
AI 프롬프트 작성 기법
생성된 코드 확인 및 테스트
코드 수정 및 개선하기

프로젝트 준비

시작하기 전에 확인사항

✅ Figma MCP가 Cursor에 연결되어 있음
✅ "Login Screen" 디자인이 완성됨
✅ Figma 링크가 준비됨
✅ 프로젝트 폴더가 있음

작업 폴더 준비

탐색기로 C:\Users\사용자이름\Documents\CursorProjects 이동
새 폴더 만들기: "login-screen-project"
Cursor에서 이 폴더 열기:
- File > Open Folder
- "login-screen-project" 선택

Step 1: Composer 모드로 코드 생성

1-1. Composer 열기

Cursor에서 Ctrl + I (대문자 아이)
Composer 창이 화면 중앙에 나타남
"Agent" 모드가 활성화되어 있는지 확인

1-2. 기본 프롬프트 작성

Composer 입력창에 다음과 같이 입력합니다:

다음 Figma 디자인을 HTML과 CSS로 구현해줘:

[여기에 Figma 링크 붙여넣기]

요구사항:
1. 시맨틱 HTML5 태그 사용
2. CSS는 별도 파일로 분리
3. 반응형 디자인 (모바일 우선)
4. 깔끔하고 읽기 쉬운 코드
5. 주석 포함

예시:

다음 Figma 디자인을 HTML과 CSS로 구현해줘:

https://www.figma.com/design/abc123xyz/Mobile-Login-Screen?node-id=1-2

요구사항:
1. 시맨틱 HTML5 태그 사용
2. CSS는 별도 파일로 분리
3. 반응형 디자인 (모바일 우선)
4. 깔끔하고 읽기 쉬운 코드
5. 주석 포함

1-3. AI 작업 과정 관찰

프롬프트를 보낸 후 AI는 다음 단계를 거칩니다:

1단계: Figma 정보 가져오기

🔧 Using tool: get_figma_node
Fetching design from Figma...

2단계: 디자인 분석

Analyzing layout structure...
- Frame: Login Screen (393×852)
- Elements: Logo, 2 input fields, 1 button, links
- Colors: #F8F9FA, #4A90E2, #FFFFFF
- Typography: Inter font family

3단계: 코드 생성

Creating files...
✓ index.html
✓ styles.css

4단계: 완료

✅ Implementation complete!
Created a responsive login screen matching your Figma design.

1-4. 생성된 파일 확인

왼쪽 Explorer에 다음 파일들이 생성됩니다:

login-screen-project/
├── index.html
├── styles.css
└── README.md (선택사항)

Step 2: 생성된 코드 검토

2-1. HTML 파일 열기

Explorer에서 index.html 클릭
코드가 에디터에 표시됩니다

예상되는 HTML 구조:

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="login-screen">
            <!-- 로고 -->
            <div class="logo">
                <div class="logo-circle">
                    <span>LOGO</span>
                </div>
            </div>
            
            <!-- 입력 필드 -->
            <form class="login-form">
                <div class="input-group">
                    <input type="email" 
                           placeholder="이메일 주소" 
                           required>
                </div>
                
                <div class="input-group">
                    <input type="password" 
                           placeholder="비밀번호" 
                           required>
                </div>
                
                <!-- 로그인 버튼 -->
                <button type="submit" class="login-button">
                    로그인
                </button>
            </form>
            
            <!-- 링크 -->
            <a href="#" class="forgot-password">
                비밀번호를 잊으셨나요?
            </a>
            
            <div class="divider"></div>
            
            <div class="signup-section">
                <span class="signup-text">계정이 없으신가요?</span>
                <a href="#" class="signup-link">회원가입</a>
            </div>
        </div>
    </div>
</body>
</html>

2-2. CSS 파일 검토

Explorer에서 styles.css 클릭
스타일 코드 확인

예상되는 CSS 주요 부분:

css

/* 전역 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #F8F9FA;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 393px;
}

.login-screen {
    padding: 20px;
}

/* 로고 스타일 */
.logo {
    text-align: center;
    margin-bottom: 60px;
    margin-top: 80px;
}

.logo-circle {
    width: 100px;
    height: 100px;
    background-color: #4A90E2;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
}

/* 입력 필드 스타일 */
.input-group {
    margin-bottom: 16px;
}

.input-group input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.input-group input::placeholder {
    color: #9CA3AF;
}

/* 로그인 버튼 스타일 */
.login-button {
    width: 100%;
    height: 52px;
    background-color: #4A90E2;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 24px;
}

.login-button:hover {
    background-color: #5BA3F5;
}

2-3. 코드 품질 확인

생성된 코드가 다음 요소를 포함하는지 확인:

✅ 시맨틱 HTML 태그 (<form>, <button> 등)
✅ 올바른 input type (email, password)
✅ CSS 변수 또는 일관된 색상 사용
✅ 주석이 포함되어 있음
✅ 반응형 스타일 (max-width, width: 100%)

Step 3: 브라우저에서 테스트

3-1. Live Server 실행 (방법 1)

Cursor에는 Live Server 기능이 내장되어 있을 수 있습니다:

index.html 파일에서 마우스 오른쪽 버튼
"Open with Live Server" 선택
브라우저가 자동으로 열립니다

3-2. 파일 직접 열기 (방법 2)

탐색기에서 index.html 파일 찾기
파일을 더블클릭
기본 웹 브라우저에서 열립니다

3-3. 결과 확인

브라우저에서 다음을 확인합니다:

✅ 정상 작동:

로고가 중앙에 표시됨
입력 필드가 올바르게 배치됨
버튼이 클릭 가능함
링크가 작동함
반응형이 작동함 (브라우저 크기 조절 시)

❌ 문제가 있는 경우:

레이아웃이 깨짐
색상이 다름
간격이 맞지 않음
폰트가 로드되지 않음

Step 4: 코드 개선 및 수정

4-1. 간단한 수정 요청

Composer 창에 다음과 같이 입력:

로그인 버튼에 호버 효과를 추가해줘.
마우스를 올리면 색상이 약간 밝아지고,
부드러운 전환 효과를 넣어줘.

AI가 CSS를 다음과 같이 수정합니다:

css

.login-button {
    /* 기존 스타일 */
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #5BA3F5;
}

.login-button:active {
    background-color: #3A7BC8;
}

4-2. 폰트 추가 요청

Inter 폰트를 Google Fonts에서 로드하도록
HTML head에 추가해줘.

AI가 HTML을 수정합니다:

html

<head>
    <!-- 기존 태그들 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>

4-3. 반응형 개선

데스크톱에서 볼 때 로그인 화면이 너무 작아보여.
최대 너비를 조금 더 크게 하고,
화면 중앙에 카드 스타일로 배치해줘.

4-4. 접근성 개선

접근성을 개선하기 위해:
1. input 필드에 label 추가
2. 버튼에 aria-label 추가
3. focus 스타일 강화

Step 5: 고급 기능 추가

5-1. 입력 유효성 검사 (JavaScript)

입력 필드에 실시간 유효성 검사를 추가해줘:
1. 이메일 형식 확인
2. 비밀번호 최소 8자
3. 오류 메시지 표시

AI가 새 파일을 생성합니다:

javascript

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.login-form');
    const emailInput = form.querySelector('input[type="email"]');
    const passwordInput = form.querySelector('input[type="password"]');
    
    // 이메일 유효성 검사
    emailInput.addEventListener('blur', function() {
        const email = this.value;
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        
        if (!emailRegex.test(email)) {
            showError(this, '유효한 이메일 주소를 입력하세요.');
        } else {
            clearError(this);
        }
    });
    
    // 폼 제출
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        // 로그인 로직
    });
});

5-2. 애니메이션 추가

페이지 로드 시 요소들이 부드럽게 나타나는
fade-in 애니메이션을 추가해줘.
위에서 아래로 순차적으로 나타나게 해줘.

5-3. 로딩 상태 구현

로그인 버튼을 클릭하면:
1. 버튼이 로딩 상태로 변경
2. 스피너 아이콘 표시
3. 클릭 비활성화

Step 6: 다크 모드 구현

6-1. CSS 변수 사용

먼저 기존 CSS를 변수로 변환하도록 요청:

CSS를 CSS 변수로 리팩토링해줘.
색상, 간격, 폰트 크기를 변수로 만들어줘.

결과:

css

:root {
    /* Colors */
    --color-background: #F8F9FA;
    --color-primary: #4A90E2;
    --color-white: #FFFFFF;
    --color-text: #1F2937;
    --color-text-secondary: #6B7280;
    --color-placeholder: #9CA3AF;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    
    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
}

6-2. 다크 모드 추가

다크 모드를 추가해줘:
1. CSS 변수를 사용해서 다크 테마 정의
2. 토글 버튼 추가
3. localStorage에 설정 저장

Step 7: 최종 테스트

7-1. 기능 테스트 체크리스트

브라우저에서 다음을 테스트합니다:

입력 테스트:

이메일 입력 가능
비밀번호 입력 가능
플레이스홀더 표시
포커스 스타일 작동

버튼 테스트:

로그인 버튼 클릭 가능
호버 효과 작동
클릭 효과 작동

링크 테스트:

"비밀번호 잊으셨나요?" 클릭 가능
"회원가입" 클릭 가능

반응형 테스트:

모바일 크기 (393px)
태블릿 크기 (768px)
데스크톱 크기 (1920px)

7-2. 크로스 브라우저 테스트

다른 브라우저에서도 테스트:

Chrome
Edge
Firefox
Safari (Mac이 있다면)

7-3. 개발자 도구로 검사

브라우저 개발자 도구 열기 (F12):

Elements 탭: HTML 구조 확인
Console 탭: JavaScript 오류 확인
Network 탭: 리소스 로딩 확인
Lighthouse 탭: 성능, 접근성 점수 확인

Step 8: 코드 정리 및 최적화

8-1. 파일 구조 개선

프로젝트 구조를 정리하도록 요청:

프로젝트 구조를 다음과 같이 정리해줘:
- css/ 폴더에 모든 CSS 파일
- js/ 폴더에 모든 JavaScript 파일
- images/ 폴더 생성 (추후 이미지용)

최종 구조:

login-screen-project/
├── index.html
├── css/
│   ├── styles.css
│   └── animations.css
├── js/
│   └── script.js
└── images/
    └── (나중에 추가)

8-2. 주석 추가

각 CSS 섹션과 JavaScript 함수에
설명 주석을 추가해줘.
다른 개발자가 이해하기 쉽게.

8-3. README 작성

프로젝트 README.md 파일을 작성해줘:
- 프로젝트 설명
- 파일 구조
- 사용 방법
- 기능 목록

프롬프트 작성 팁

좋은 프롬프트 예시 ✅

이 Figma 디자인을 React 컴포넌트로 구현해줘:
[링크]

요구사항:
- TypeScript 사용
- Tailwind CSS로 스타일링
- 재사용 가능한 컴포넌트 구조
- PropTypes 정의
- 접근성 고려 (aria-labels)

컴포넌트 파일 구조:
- Button.tsx
- Input.tsx
- LoginForm.tsx

나쁜 프롬프트 예시 ❌

이거 코드로 만들어줘
[링크]

→ 너무 막연함

HTML CSS JavaScript로 완벽하게 만들어줘

→ 구체적인 요구사항 없음

문제 해결

문제 1: 디자인과 코드가 다름

해결방법:

생성된 코드를 Figma 디자인과 비교해줘.
차이점을 찾고 정확히 맞춰줘.

특히 다음 부분을 확인:
- 색상 값
- 간격 (margin, padding)
- 글꼴 크기
- 모서리 반경

문제 2: MCP가 Figma를 읽지 못함

원인 확인:

MCP 서버 상태 확인 (Settings > MCP)
Figma 링크가 올바른지 확인
파일 공유 설정 확인