언제나 디자인을 구현하는 것은 매우 귀찮은 일이다.
그래서 주로 백엔드 작업을 선호하고 직무도 거의 그렇게 해왔다.
그러나 매번 하고싶은 일만 할 수는 없는 법, 간혹가다가 회사에서 혹은 개인 프로젝트를 할 때면 어김없이 프론트 특히 디자인을 구현하는 부분이 생기기 마련이다.
그런데 요즘 뜨는 바이브 코딩 중, Cursor를 통해 Figma의 디자인 링크만 넣어주면 자동으로 구현해준다는 것을 보고 심장이 떨려왔다.
드디어 재미없었던 화면 구현을 AI에게 맡길 수 있다고 생각했다.
그러면서 바로 관련 문서를 찾아보았고 MCP 를 통해서 Figma 와 Cursor 를 연결하는 것이었는데 아래 링크를 통해서 확인이 가능하다.
https://github.com/GLips/Figma-Context-MCP?tab=readme-ov-file
# git clone
git clone https://github.com/GLips/Figma-Context-MCP.git
cd Figma-Context-MCP
# settings > security > personal access tokens 에서 generate token(write permssion 을 주면 된다)
vi .env
FIGMA_API_KEY=<Figma 에서 얻은 키 입력>
# 그리고 저장
# brew 로 pnpm 설치(설치 되어있거나 os 가 다른 경우 맞춰서 설치 진행)
brew install pnpm
# 의존성 설치
pnpm install
#mcp 서버 실행 --figma-api-key 같은 경우에는
#이미 .env 에서 설정해서 안해도 될 것 같으나 일단 대부분의 블로그에서 사용하고 있기에 포함
npx figma-developer-mcp --figma-api-key=<Figma 에서 얻은 키 입력>
위의 과정을 통하면 일단 mcp server 와 figma 는 연결이 되어진 것이다.
그리고 해야하는 것은 mcp server 와 cursor 를 연결해줘야 한다.
아래를 따라가면 가능하다.
# cursor 실행
# preferences > cursor settings > tools & integrations > mcp tools > new mcp server
# json 형식
{
"mcpServers": {
"figma-developer-mcp": {
"url": "http://localhost:3333/sse",
"env": {
"API_KEY": <Figma 에서 발급받은 키>
}
}
}
}
url 의 경우 현재 로컬로 띄워져있고 기본 .env 를 사용했으면 저 url 이 기본형태이닌 복붙해서 사용하고 API_KEY 만 바꿔주면 된다.
그렇게 한 이후에 피그마에서 구현이 필요한 부분을 아래와 같이 copy as > copy link to selection 으로 해서 링크를 복사하고
cursor 에게 해당하는 링크를 붙여주면서 프롬프르로 똑같이 구현해달라고 하면 mcp 를 통해서 소스를 가져와 구현을 시작한다.
이제 솔직히 써본 입장에서 말해보면
장점
1. 디자인 구현에 대한 리소스가 많이 줄어든 것은 사실이다.
2. 더욱 더 많은 시도를 통해서 더 나은 결과를 얻기위해 시도할 수 있다.
단점
1. 아직은 답답한 부분이 존재한다. -> 디자인 자체가 의도한 형태로 안나오는 경우가 빈번하게 존재
2. 코드 퀄리티가 떨어지는 부분이 존재한다. -> 리팩토링 필수 불가결
3. Cursor 에 대한 부분이 유료 Plan 이 필수적이다.
일단 이렇게 나오는데
만약에 그래서 사용할거야? 안할거야? 라고 말하면 무조건 사용할 것 같다.
나같은 경우에는 디자인 구현을 그렇게 좋아하지 않다보니 일단 시킬 것 같고 세부적인 부분만 내 손으로 구현하거나 리팩토링 할 것 같다.
물론 나머지 서비스 영역에 관련된 코드들은 검수가 무조건 필수이다보니 내가 대부분을 구현하는 형태일 것이다.
'Programming' 카테고리의 다른 글
대량 트래픽에 대응을 해보자 (0) | 2024.09.28 |
---|---|
이미지의 Content-Type이 이상하게 올라가요.... (0) | 2024.09.19 |
python 3.8 -> python 3.11 업데이트 경험기 (3) | 2024.09.13 |
Django 3.2 -> 4.2 변경 기록 (1) | 2024.09.11 |
어쩌다 DB Index를 잡았는가? (0) | 2024.09.10 |