피그마 MCP로 손쉽게 유튜브 섬네일 만들기

실습을 위해 먼저 피그마 데스크톱 앱을 설치합니다.

Figma 데스크톱 앱 설치: https://www.figma.com/ko-kr/downloads/

Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱

 

01 피그마 데스크톱 앱 설치가 완료되었다면 프로그램을 실행한 다음 왼쪽 위의 홈 아이콘을 눌러 메인 화면으로 이동합니다. 그런 다음 오른쪽 위의 [Design]을 눌러 빈 디자인 파일을 만듭니다.

 

02 빈 디자인 파일에서 페이지 빈 공간에 마우스 오른쪽 클릭을 하고 [Plugins -> Manage plugins...]를 누릅니다.

검색창이 나오면 'talk to figma'를 검색하고 가장 위에 검색되는 Cursor Talk To Figma MCP Plugin의 [Run] 버튼을 눌러 실행합니다.

 

03 그러면 MCP 설치 가이드 화면이 나옵니다. 가이드 화면에 있는 bunx 명령어를 터미널에서 실행해야 피그마 MCP와 커서를 연결할 수 있습니다. bunx를 설치하기 위해 다음 명령어를 터미널에서 실행합니다.

$ npm install -g bun

 

04 명령어를 실행한 뒤 이어서 다음 명령어를 입력해 피드마 MCP와 커서를 연결할 서버를 구동합니다. 서버가 정상적으로 실행되면 WebSocket server running on port 3055라는 메시지가 나타납니다. 서버 실행 후에는 절대로 터미널을 종료하면 안 됩니다.

$ bunx cursor-talk-to-figma-socket

 

05 이제 피그마로 돌아가서 [Connect]를 누릅니다. 그러면 채널 이름과 커서에 연결할 MCP 설정값이 나옵니다. [Copy to Clipboard]를 눌러 설정값을 복사합니다.

 

06 이제 MCP 설정값을 추가할 차례입니다. 커서 화면에서 오른쪽 위의 톱니바퀴 버튼을 누르고 [Tools & Integrations]를 누릅니다. 그런 다음 [+New MCP Server]를 누릅니다. 그러면 MCP 설정값 수정 화면이 보입니다.

 

07 여기서 커서 채팅방에 이 파일을 @콘텍스트로 추가해서 복사한 설정값을 추가해달라고 부탁해봅시다. 그러면 알아서 설정값을 추가해줄 것입니다.

 

08 커서를 종료했다가 켜면 TalkToFigma가 제대로 추가된 것을 볼 수 있습니다. 도구도 잘 로딩했네요. 이제 커서에게 피그마 MCP를 사용할 수 있습니다.

 

09 이제 Talk to figma가 잘 동작하는지 확인합니다. 커서에게 얻은 피그마 채널을 알려주고 다음과 같이 작업을 부탁합니다.

피그마에서 기본적인 메신저 앱을 디자인해봐. iOS의 디자인을 그대로 사용하면 돼. 채널은 ********** 야.

 

그러면 커서에게 MCP를 여러 번 호출하면서 피그마에서 메신자 UI 디자인을 해줍니다. 기본적인 텍스트 입력과 정렬, 박스 디자인끼지 해주므로, 조금 더 손을 봐서 완성도를 올리면 초기 애플리케이션 화면을 디자인하지 좋습니다.

 

10 이번엔 같은 방식으로 유튜브 섬네일도 만들어 보겠습니다. 우선 유튜브에 적합한 섬네일 사이즈 정보를 수집하여 다음 작업을 수행하겠습니다.

유튜브 썸네일 최적의 사이즈는?

 

11 섬네일 최정의 사이즈를 확인했습니다. 그러면 이 정보를 바탕으로 섬네일에 들어갈 텍스트를 만들어보겠습니다. 커서에게 섬네일 주제를 주고 텍스트 생상을 요청합니다.

요리 유튜브 콘텐츠를 섬네일 작업을 하기 위해 '최고의 한식 10가지 소개'라는 텍스트를 주제로 섬네일에 필요한 텍스트를 만들아줄래?

 

12 결과로 받은 섬네일용 추천 텍스트를 가지고 이제 커서에게 피그마를 이용해 섬네일 작업을 하도록 요청합니다.

이제 이 섬네일 추천 텍스트를 바탕으로 피그마에 섬네일 작업을 해줄래? 베경 이미지는 나중에 내가 알아서 1280 X 720 픽셀로 넣을게.

 

13 커서가 1280 x 720 픽셀 크기의 프레임과 텍스트를 만들어주었습니다. 여기에 배경 이미지를 추가하면 섬네일 배경화면이 완성됩니다. 이제 배경화면은 피그마의 Pixabay라는 플러그인을 활용하겠습니다. 피그마 바탕화면에서 마우스 오른쪽 버튼을 누른 다음 [plugin -> manage plugins...]를 누르고 Pixabay를 검색하여 [Run]을 눌러 실행합니다.

 

14 Pixabay 플러그인이 실행되면 Korean food를 검색합니다. 다양한 한식 이미지가 나옵니다. 방금 만든 프레임을 클릭하면 파란색 테두리가 생기는데, 이 상태에서 적절한 이미지를 찾아 더블클릭하면 자동으로 프레임 배경에 이미지가 들어갑니다.

 

15 배경 이미지가 프레임 크기에 맞게 잘 들어간 것을 확인할 수 있습니다. 그런 다음 왼쪽 Layers에서 '한식 유튜브 섬네일'을 클릭하고 오른쪽 Fill 메뉴에서 이미지 투명도 값을 조절하여 적절하게 배경으로 만듭니다.

 

16 만약 텍스트의 서체가 마음에 들지 않는다면 텍스트를 클릭하여 원하는 서체로 변경합니다. 여기서는 상업용 무료 서체인 '여기어때 잘난체'를 설치하여 서체를 바꿔서 조금 더 눈에 띄는 느낌이 들도록 했습니다.