들어가며

pxd는 현재 디자인 도구로 Figma를 사용하고 있습니다. 디자인과 개발 팀 모두 Figma를 이용해 화면 작업을 진행하고 있는데, 이 과정에서 몇가지 불편한 점을 개선하고자 해당 프로젝트를 시작하게 되었습니다.

 

프로젝트의 배경

디자인파트에서 Scaffold design system을 구축하면서 Color, Text Style 등을 변수로 설정하기 시작했고, 개발파트도 이에 맞춰 SCSS 변수를 동일하게 설정해 사용하고 있었습니다. 하지만 이 과정에서 한 가지 불편한 점이 발견되었습니다.

현재 사용 가능한 Figma Plugin 중에서 Text Styles을 코드로 export할 때, 폰트 사이즈를 정의된 variables와 자동으로 매칭시켜주는 기능이 없었던 것입니다. 이로 인해 매번 디자이너가 Text Styles을 export한 후, 다시 정의된 font-size variables와 수동으로 매칭해야 하는 번거로움이 있었습니다.

 

해결 방안 모색

이 문제를 해결하기 위해, Figma API에서 Text Styles의 font-size variables을 제공한다는 사실을 알게 되었고, 이를 활용한 Plugin 개발을 고려하게 되었습니다. 더불어, 현재 사용 중인 Cursor IDE의 AI Composer 기능을 테스트해볼 좋은 기회라고 생각했습니다.

 

프로젝트 목표

이 Figma Plugin 개발 프로젝트의 목표는 두 가지였습니다:

1. Scaffold Design System의 variables 파일과 Text styles 파일을 SCSS 코드로 효과적으로 변환하기
2. Cursor의 AI Composer 기능만을 사용하여, 코드 작성 없이 원하는 플러그인 기능 구현하기

 

개발 과정

Figma Plugin 개발을 시작하기 위해, Figma의 Plugins -> Development -> New plugins… 메뉴를 통해 기본 코드 셋을 생성했습니다. 그 후, 다음과 같은 단계를 거쳤습니다:

1. Node로 셋팅된 기본 Figma Plugin install

2. tsconfig 파일을 watch 모드로 실행

   // TypeScript 컴파일러 시작
   npx tsc -p tsconfig.json
   
   // 파일 변경 감지 모드로 실행
   npm run watch

3. Figma API 문서를 Cursor에 학습시키기

   • 커서 chat 창에 @ 입력 Docs 선택 후 add new doc을 선택 해 Figma api doc url을 입력

이후 Cursor Composer에 다음과 같은 프롬프트를 입력했습니다:

1. 나는 Figma Plugin을 개발하고 싶어.
2. Figma에 정의된 variables을 scss 파일로 export 시키고 싶어.
3. 모든 변수명 네이밍 규칙은 케밥 케이스로 맞춰줘.
4. 버튼을 하나 더 만들어 Text styles 역시 mixin 형태로 export 시키고 싶어.

 

결과 및 개선 과정

놀랍게도, 이 간단한 프롬프트만으로도 기본적인 기능 구현이 가능했습니다. Cursor Composer가 UI 파일을 생성하고, Figma variables을 SCSS로 export하는 기능을 구현해주었습니다.

하지만 초기 결과물에는 몇 가지 개선이 필요했습니다. 불필요한 폴더명 반복, 공백 문제, 단어 중복 등이 있었고, 프로젝트마다 작업자의 스타일이 달라 일관성 있는 결과를 얻기 어려웠습니다.

이를 해결하기 위해 추가적인 프롬프트를 입력했습니다:

1. 중복되는 단어 제거하기
2. 폴더명 포함 여부를 선택할 수 있는 옵션 추가하기

이러한 개선 과정을 거쳐, 여러 프로젝트에서 일관된 결과를 얻을 수 있게 되었습니다.

가장 중요한 Text styles 기능도 개선이 필요했습니다. 초기에는 font-size가 실제 수치로만 입력되었지만, variables와의 매칭이 필요했습니다. Figma API 문서를 참조하여 다음과 같은 프롬프트를 추가했습니다:

@Figma 참고해서 export styles 할 때 Figma의 font-size에 매칭된 variables 값을 export variables 값에서 찾아 매칭시켜줘.

이 과정을 통해 원하는 형태의 Text styles export 기능을 구현할 수 있었습니다.

개발된 Figma Plugin

개발 소요 시간 및 효율성

Cursor Composer를 활용한 전체 개발 과정은 약 2-3시간 정도 소요되었습니다. 직접 코딩했다면 더 많은 시간이 걸렸을 것입니다. API 문서 학습부터 시작해야 했을 테니까요.

Plugin 완성 후 디자이너와의 피드백을 통한 수정 작업도 모두 Cursor Composer를 통해 진행했습니다. 때로는 직접 코드를 수정하는 것이 더 빠를 것 같다는 생각도 들었지만, 이번 프로젝트의 목적이 Cursor Composer의 기능을 최대한 활용해보는 것이었기에 끝까지 AI의 도움만으로 진행했습니다.

실제 Cursor Composer가 작성해준 코드와 주석

 

Cursor Composer의 경험

개발 과정에서 느낀 Cursor Composer에 대한 인상 몇가지를 이야기 해 보자면,

가끔 수정 질문을 하다가 기존에 되던 기능을 날려먹고 새로운 기능을 추가하는 일도 종종 있었습니다. 다행히도 컴포저는 파일을 직접 수정하는 기능을 가지고 있기에 git commit 기록 처럼 checkpoint 처럼 코드의 변경 시점을 기억하고 있습니다. 그래서 원하는 기능이 동작했던 때로 checkout 해서 다시 시작할 수 있어서 이 점이 굉장히 좋았습니다. 실제로 내가 코드를 고치게 될 때를 생각했을때도 꽤나 주석을 상세하게 달아줘서 코드에 대한 해석을 충분히 할 수 있었습니다.

 

마치며

해당 플러그인은 회사 내에 공개하여 앞으로 진행되는 프로젝트에서 좀 더 사용해볼 예정입니다. 조금 더 다듬으면 초기 셋팅의 시간을 많이 단축 시켜줄수 있지 않을까 기대하고 있습니다.

실제 업무의 불편한 점을 해결하고, Cursor IDE의 컴포저 기능을 좀 더 활용해보고자 시작한 작업이였는데, 꽤 괜찮은 경험이였습니다. 그동안은 Cursor의 chat만 이용했었는데, 레포 기준으로 기능을 만들거나, 수정할때 composer 기능을 이용해도 꽤 괜찮겠다라는 생각이 들었습니다. 파일을 직접 참조하여 고친다는게 좀 더 활용하면 업무 시간을 더 단축 시켜줄수도 있지 않을까.. 라는 기대를 하게되었습니다. 다음 프로젝트 때 좀 더 적극적으로 활용해봐야 겠다는 생각이 드는 작업이였습니다.