AI를 팀원으로 만들기 (feat. Cursor와 Figma MCP)
최근에 새로운 스프린트를 시작하면서 다음과 같은 생각이 문득 들었다.
이 작업을 또 해야해?
(일을 되게 하기 싫은 것처럼 느껴지지만 그건 아님)
이 생각의 기저에는 '반복되는 작업'을 그만하고 싶은 마음이 컸다. 보통 스프린트를 할 때 FE 개발의 순서는 이러했다.
- 요구사항와 디자인 스펙을 보고 사내 디자인 시스템으로 구현
- UI 구현 완료 후 BE API 연동
- 유저 흐름대로 사용해보면서 요구사항이나 부자연스러운 부분 잡기
그런데 생각보다 1번 작업에 많은 시간을 쏟고 있었고, UX를 고민하는 3번에 소홀해왔다. 개발자도 디자이너와 함께 UX를 고민해야 좋은 제품, 사용하고 싶은 서비스가 나온다고 믿는다. 하지만 UI만 구현하다가 시간을 다 써버리고 있다.
그렇게 '디자인 시스템이 있는데 이걸 자동화할 수 없을까'하는 생각이 자연스럽게 떠올랐다. 플러그인을 개발해서 figma to react component 할 수 있겠지만, AI 시대에 살고 있으니까 평소 즐겨쓰는 agent에 먼저 손이 갔다. MCP라는 기술을 보면서 손쉽게 UI를 자동화할 수 있겠다는 확신이 들었다.
MCP(Model Context Protocol) 는 쉽게 말하면 LLM이 내/외부 리소스를 잘 활용할 수 있도록 도와주는 인터페이스이다. 원래 LLM은 우리가 입력한 프롬프트만으로 답변을 생성(generation)한다. 그러나 점점 URL을 던져주면 링크로 들어가서 정보를 가져오거나, 구글링을 스스로 하기도 한다. 이처럼 단순 사용자 프롬프트를 넘어서 LLM의 능력을 극대화하기 위해 모델 스스로 내/외부 리소스를 가져오는데 이를 tool이라고 한다.(openai tool 설명) 이런 맥락에서 MCP 인터페이스는 agent가 리소스를 가공해서 결과를 생성할 수 있도록 도와주는 역할을 한다.
회사 업무에 Figma MCP를 활용해보고 있는데 생성 결과가 만족스럽다. 원하는 피그마 디자인 링크를 넣어주면 디자인 시스템까지 적용해서 UI 컴포넌트를 만들어준다. 뿐만 아니라 작업 시간도 40 ~ 60% 정도 줄일 수 있었다.
이런 (멀지 않을) 미래를 상상하고 있고 실현해보고 싶다.
- 자는 동안 UI 업무를 모두 마치고, 출근하면 API 연동하고 비즈니스 로직만 작성하면 된다.
- Jira로 들어온 이슈 요구사항을 분석해서 요약하거나 UI/UX를 제안하고 코드로 구현해준다
업무하면서 AI로 실험하면서 얻은 팁을 'AI를 팀원으로 만들기' 시리즈로 만들어보려 한다.
