Cursor + Figma MCP 가이드 - Figma에서 디자인 만들고 링크 가져오기

프로젝트 목표

이번 편에서는 모바일 앱 로그인 화면을 디자인합니다. 간단하지만 실용적인 예제로, 다음 요소들을 포함합니다:

• 로고
• 이메일 입력 필드
• 비밀번호 입력 필드
• 로그인 버튼
• "비밀번호를 잊으셨나요?" 링크
• "회원가입" 링크

Step 1: 새 Figma 프로젝트 만들기

1-1. Figma 실행 및 파일 생성

1. Figma 데스크톱 앱을 실행합니다
2. 좌측 상단의 "+ New design file" 클릭
   • 또는 단축키: Ctrl + N
3. 빈 캔버스가 열립니다

1-2. 파일 이름 지정

1. 좌측 상단의 "Untitled" 클릭
2. 파일 이름을 입력합니다:

 

   Mobile Login Screen

1. Enter를 눌러 저장합니다

1-3. 자동 저장 확인

• 파일 이름 옆에 "Saved" 표시가 있으면 자동 저장 중입니다
• Figma는 모든 변경사항을 실시간으로 클라우드에 저장합니다

Step 2: 모바일 프레임 생성

2-1. 프레임 도구 선택

1. 상단 툴바에서 프레임 도구 (F) 클릭
2. 또는 단축키: F
3. 우측 패널에 디바이스 프리셋이 나타납니다

2-2. iPhone 프레임 선택

1. 우측 패널에서 "Phone" 섹션을 찾습니다
2. "iPhone 14 Pro" 클릭
   • 크기: 393 × 852 px
   • 최신 iOS 디바이스 해상도
3. 캔버스에 프레임이 생성됩니다

2-3. 프레임 이름 변경

1. 좌측 레이어 패널에서 프레임 이름을 더블클릭합니다
2. 이름을 다음과 같이 변경:

 

   Login Screen

1. Enter로 확인

2-4. 프레임 배경색 설정

1. 프레임을 선택한 상태에서
2. 우측 패널의 "Fill" 섹션 찾기
3. 색상 상자 클릭
4. 연한 회색을 선택합니다:
   • Hex: #F8F9FA
   • 또는 RGB: (248, 249, 250)
5. 색상 선택기 밖을 클릭해서 닫습니다

Step 3: 로고 영역 디자인

3-1. 로고 배경 원 만들기

1. 상단 툴바에서 원형 도구 (O) 클릭
2. Shift 키를 누른 채로 드래그하여 정원을 그립니다
   • Shift를 누르면 정확한 원이 됩니다
   • 크기: 약 100 × 100 px
3. 우측 패널에서 정확한 크기 입력:
   • W (width): 100
   • H (height): 100

3-2. 로고 원 스타일링

1. 원을 선택한 상태에서
2. Fill (채우기) 색상 변경:
   • Hex: #4A90E2 (파란색)
3. Stroke (테두리) 제거:
   • Stroke 옆의 - 버튼 클릭

3-3. 로고 텍스트 추가

1. 텍스트 도구 (T) 선택
2. 원의 중앙을 클릭
3. "LOGO" 입력
4. 우측 패널에서 텍스트 스타일 설정:
   • Font: Inter (또는 다른 sans-serif 폰트)
   • Size: 32
   • Weight: Bold
   • Color: #FFFFFF (흰색)
   • Alignment: Center (가운데 정렬)

3-4. 로고 위치 조정

1. 이동 도구 (V)로 전환
2. 로고 원과 텍스트를 모두 선택 (Shift + 클릭)
3. 상단 툴바에서:
   • 가로 중앙 정렬 아이콘 클릭
4. 프레임 상단에서 약 80px 아래로 배치합니다

3-5. 로고 그룹화

1. 로고 원과 텍스트를 선택한 상태에서
2. 단축키: Ctrl + G (그룹 만들기)
3. 좌측 패널에서 그룹 이름을 "Logo"로 변경

Step 4: 입력 필드 디자인

4-1. 이메일 입력 필드 만들기

1) 배경 사각형

1. 사각형 도구 (R) 선택
2. 로고 아래에 사각형을 그립니다
3. 크기 설정:
   • W: 327 (프레임 너비 - 양쪽 여백 33px씩)
   • H: 52
4. 스타일 설정:
   • Fill: #FFFFFF (흰색)
   • Corner radius (모서리 둥글기): 12
   • Shadow (그림자) 추가:
     • X: 0, Y: 2
     • Blur: 8
     • Color: #000000, Opacity: 8%

2) 플레이스홀더 텍스트

1. 텍스트 도구 (T) 선택
2. 사각형 왼쪽 안쪽을 클릭
3. "이메일 주소" 입력
4. 스타일:
   • Font: Inter
   • Size: 16
   • Weight: Regular
   • Color: #9CA3AF (회색)
5. 왼쪽 패딩: 텍스트를 사각형 왼쪽에서 16px 띄웁니다

3) 아이콘 추가 (선택사항)

1. 원형 도구로 작은 원 만들기 (20 × 20)
2. 이메일 아이콘 대신 간단한 도형 사용
3. 사각형 왼쪽에 배치

4) 그룹화

1. 입력 필드의 모든 요소 선택
2. Ctrl + G로 그룹화
3. 이름: "Email Input"

4-2. 비밀번호 입력 필드 만들기

1. 방금 만든 "Email Input" 그룹을 선택
2. Ctrl + D로 복제
3. 복제된 그룹을 아래로 이동 (간격: 16px)
4. 플레이스홀더 텍스트를 "비밀번호"로 변경
5. 그룹 이름을 "Password Input"으로 변경

4-3. 입력 필드 정렬

1. 두 입력 필드를 모두 선택
2. 상단 툴바에서:
   • 가로 중앙 정렬 클릭
3. 로고와의 간격: 약 60px

Step 5: 버튼 디자인

5-1. 로그인 버튼 만들기

1) 버튼 배경

1. 사각형 도구 (R) 선택
2. 비밀번호 입력 필드 아래에 사각형 그리기
3. 크기:
   • W: 327
   • H: 52
4. 스타일:
   • Fill: #4A90E2 (파란색)
   • Corner radius: 12

2) 버튼 텍스트

1. 텍스트 도구 (T) 선택
2. 버튼 중앙 클릭
3. "로그인" 입력
4. 스타일:
   • Font: Inter
   • Size: 16
   • Weight: Bold
   • Color: #FFFFFF
   • Alignment: Center

3) 그룹화 및 정렬

1. 버튼 배경과 텍스트 선택
2. Ctrl + G로 그룹화
3. 이름: "Login Button"
4. 가로 중앙 정렬
5. 비밀번호 입력 필드와의 간격: 24px

Step 6: 링크 텍스트 추가

6-1. "비밀번호를 잊으셨나요?" 링크

1. 텍스트 도구 (T) 선택
2. 로그인 버튼 아래 클릭
3. "비밀번호를 잊으셨나요?" 입력
4. 스타일:
   • Font: Inter
   • Size: 14
   • Weight: Regular
   • Color: #4A90E2 (파란색)
5. 가로 중앙 정렬
6. 로그인 버튼과의 간격: 16px

6-2. 구분선 추가

1. 선 도구 (L) 선택
2. 가로 선 그리기
3. 스타일:
   • Width: 327
   • Height: 1
   • Color: #E5E7EB
4. 비밀번호 링크 아래 24px 간격으로 배치

6-3. "회원가입" 섹션

1. 텍스트 도구로 다음 입력:

 

   계정이 없으신가요?

1. 스타일:
   • Size: 14
   • Color: #6B7280 (회색)
2. 같은 줄에 "회원가입" 텍스트 추가:
   • Size: 14
   • Weight: Bold
   • Color: #4A90E2
3. 두 텍스트를 수평으로 배치하고 그룹화
4. 가로 중앙 정렬

Step 7: 최종 조정

7-1. 전체 레이아웃 확인

프레임 안의 모든 요소가 다음 순서로 배치되어야 합니다:

1. Logo (상단에서 80px)
2. Email Input (로고 아래 60px)
3. Password Input (이메일 입력 아래 16px)
4. Login Button (비밀번호 입력 아래 24px)
5. Forgot Password Link (로그인 버튼 아래 16px)
6. Divider Line (링크 아래 24px)
7. Sign Up Section (구분선 아래 24px)

7-2. 간격 조정

모든 요소의 간격이 일정한지 확인:

1. 요소를 선택하면 인접한 요소와의 간격이 빨간색 숫자로 표시됩니다
2. 불규칙한 간격이 있다면 조정합니다
3. 권장 간격 시스템:
   • 큰 섹션 간: 24-32px
   • 관련 요소 간: 8-16px
   • 컴포넌트 내부: 4-8px

7-3. 정렬 확인

1. 모든 요소를 선택 (Ctrl + A)
2. 상단 툴바에서 가로 중앙 정렬 확인
3. 좌측 레이어 패널에서 계층 구조 정리

Step 8: 링크 추출하기

8-1. 올바른 링크 복사 방법

전체 프레임 링크 (권장):

1. 좌측 레이어 패널에서 "Login Screen" 프레임 선택
2. 마우스 오른쪽 버튼 클릭
3. "Copy link to selection" 선택
4. 클립보드에 링크가 복사됩니다

형태:

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

개별 요소 링크: 특정 요소만 참조하고 싶다면:

1. 해당 요소(예: 로그인 버튼) 선택
2. 마우스 오른쪽 버튼 > "Copy link to selection"

8-2. 링크 저장

1. 메모장을 엽니다
2. 복사한 링크를 붙여넣습니다
3. 다음 정보도 함께 적습니다:

 

   프로젝트: Mobile Login Screen
   프레임: Login Screen
   생성일: 2025-10-27
   용도: Cursor 코드 생성
   
   링크:
   https://www.figma.com/design/...

1. 파일 저장: figma_login_screen_link.txt

8-3. 공유 설정 확인

Cursor가 Figma 파일에 접근하려면 올바른 권한이 필요합니다:

1. Figma 우측 상단의 "Share" 버튼 클릭
2. 공유 설정 확인:
   • "Anyone with the link" 선택
   • 권한: "can view"
3. "Copy link" 버튼으로도 링크를 복사할 수 있습니다

⚠️ 중요: "Only people invited to this file" 설정이면 Cursor가 접근할 수 없습니다!

Step 9: 디자인 변형 만들기 (선택사항)

9-1. 다크 모드 버전

1. "Login Screen" 프레임을 복제 (Ctrl + D)
2. 복제된 프레임 이름: "Login Screen - Dark"
3. 색상 반전:
   • 배경: #1F2937 (어두운 회색)
   • 입력 필드 배경: #374151
   • 텍스트: #F9FAFB (밝은 회색)
   • 플레이스홀더: #9CA3AF

9-2. 상태 변형 (Hover, Active)

1. 로그인 버튼을 복제
2. 다른 상태를 표현:
   • Hover: 배경색을 약간 밝게 #5BA3F5
   • Active: 배경색을 약간 어둡게 #3A7BC8
   • Disabled: 불투명도 50%, 회색조

9-3. 프레임 정리

모든 변형을 한 화면에 정렬:

1. 기본 버전: 왼쪽
2. 다크 모드: 오른쪽
3. 상태 변형: 하단

간격: 100px

Step 10: Cursor에서 사용할 준비 완료

10-1. 최종 체크리스트

• 프레임 이름이 명확하다 ("Login Screen")
• 모든 레이어에 의미있는 이름이 있다
• 색상이 일관적이다
• 간격이 규칙적이다
• 링크를 복사했다
• 공유 설정이 "Anyone with the link - can view"다

10-2. 디자인 문서화 (선택사항)

Figma에서 주석을 추가하여 디자인 의도를 명확히 할 수 있습니다:

1. 주석 도구 (C) 선택
2. 요소를 클릭하고 설명 추가:

 

   로그인 버튼:
   - Primary action
   - 높이: 52px
   - 모서리: 12px 반경

디자인 팁

색상 팔레트

프로젝트 전반에 걸쳐 일관된 색상을 사용하세요:

Primary 색상:

• #4A90E2 - 주요 버튼, 링크

Neutral 색상:

• #1F2937 - 어두운 텍스트
• #6B7280 - 보조 텍스트
• #9CA3AF - 플레이스홀더
• #E5E7EB - 구분선
• #F8F9FA - 배경

타이포그래피

일관된 텍스트 크기:

• Heading: 24-32px
• Body: 16px
• Secondary: 14px
• Caption: 12px

간격 시스템

8의 배수를 사용하세요:

• 4px, 8px, 16px, 24px, 32px...