디자인에서 구현까지: Figma와 Cursor MCP를 연결해봤다 (기본편)

목적

Cursor AI와 Figma 파일을 연동시켜서, 디자인 리소스를 바로 코드로 전환해보고자 했다. 다른 대부분의 디자인과 예술은 프로덕트 완성까지를 ‘완성’으로 보는데, 왜 UX, UI 디자인만 구현은 개발자의 몫이어야 할까? 그 질문에 대한 도전이었다. 결론적으로 작가 의식에 기반한 웹사이트 제작을 해보고 싶었던 것 같다.

가능성에 대한 의문들

• 외형은 구현할 수 있더라도, flex, grid layout, margin/padding, 질감 표현까지 내가 만든 대로 옮겨질 수 있을까?

• 개발 공수가 두 배가 되지는 않을까? lovable과 v0에서는 코드만 던져주는 느낌이라 실제 프로덕션에 적용하고 싶지 않았다. 디자인이란 결국 프로덕트에서 감성적인 보완점을 주는 역할을 빼놓을 수 없는데, 트렌드와 간결함에만 충실하고 친화적이지 않았다.

• Animation이 들어간 prototype도 구현 가능할까?

  • Figma에서는 프레임 간 연결로 prototype과 animation을 구현하지만, 단일 프레임 기반으로 MCP를 연결하면 어렵지 않을까?
  • 애니메이션이 가능하다면, 어떤 library이 효과적일까?

• hover 같은 상태(state)는 어떻게 구현되는가?

• JavaScript로 구현이 필요한 component들은 어떻게 처리할 수 있을까? 단순히 화면만 구성되고 기능은 무시되는 게 아닌가?

이 블로그를 남기는 이유

다른 사람들은 Cursor 연동만 완료한 뒤, 결과물만 보여준다. 개발 배경 지식이 없는 사람이 보더라도 Figma + Cursor MCP를 사용할 수 있도록 만들고 싶었다. 물론 의미있는 삽질이었지만, 다른 사람들은 나와 같은 시행착오를 겪지 않고 빠르게 개발을 하길 바란다. 디자이너와 개발자 간 소통 공수를 줄여, 더 빠르고 만족스러운 제품을 함께 만들어가기 위해 필요한 기술인 만큼 많이들 봐주었으면 좋겠다.

그래서 결과는?

꽤나 구조적으로, 예쁘게 뽑아줬던 것 같다. 이 랜딩페이지는 배포 직전까지의 거의 모든 과정을 내가 담당할 수 있었던 기회였다.

아쉽게도 Carousel이나 모션 등은 커스텀 해야하긴 했지만 (그러나 이것도 AI와 조금 함께하긴 했다), 초기 구조나 디자인 시스템은 Cursor의 도움을 많이 받았다.

아래 과정을 따라 하면, 여러분도 아래와 같은 랜딩페이지를 만들 수 있다! (아마도) 사이트 이름 안나오게 보여줄 수 있는 부분만 올려보자면 이런 느낌이다.