들어가며
우아한테크코스에서 팀 프로젝트를 진행하고 있다. 프론트엔드 팀원 3명과 백엔드 팀원 4명으로 구성되어있다. 기획자도 없고 디자이너도 없어서 개발자끼리 전부 역할을 수행해야한다. 기획은 팀원 전체가 같이 진행을 했고, 디자자인은 디자인과 가장 밀접한 프론트엔드 개발자들이 담당하게 되었다. 디자이너 없이 AI를 적극적으로 활용해서 디자인을 하고, 이를 코드로 옮긴 이야기다.
이 이야기를 풀기에 앞서서 AI에 대한 내 의견에 대해 이야기하면, 나는 AI를 사용하는 것에 대해 상당히 긍정적이다. AI가 단순 반복 작업을 줄이고 업무 시간을 아껴준다면, 나는 사용하지 않을 이유가 없다고 생각한다.
다만 AI가 우리의 학습을 방해한다면 그건 문제가 될 것이다. 예를들어 학습한 것을 정리하는 글을 작성하는데 AI를 사용하는 것에 대해서는 부정적이다. 학습한 것을 정리하는 글은 글을 쓰는 과정에서 내가 아는 것과 모르는 것을 구분할 수 있고, 아는 것은 한 번 더 정리할 수 있는 효과를 얻을 수 있다. 그런데 AI를 사용하면 이런 효과를 포기하는 것과 같다. 또한 구글에 검색하면 뜨는 어느 글과 다를 바가 없는 글이 된다. 그런데 학습한 것을 정리하는 글을 직접 쓰고, 내 경험과 생각을 덧붙여서 쓴다면? 이는 세상 어디에도 없는, 색깔있는 나만의 글이 된다.
하지만 AI가 우리의 단순 반복 작업을 해결해준다면? 이 부분에 있어서 나는 상당히 긍정적이다. 프론트엔드 개발에서 대표적인 단순 반복 작업은 퍼블리싱이 있다. 창의성이 크게 필요 없다. 그저 디자인을 그대로 코드로 옮기면 되기 때문이다. 퍼블리싱은 코드에 정해진 패턴이 있고, 그 패턴을 따라가면 된다. AI가 이런 패턴은 잘 뽑아낸다. 퍼블리싱을 넘기면 그만큼 다른 데 시간을 쓸 수 있다.
디자인은 창의성이 상당히 필요하다고 생각한다. 우리 프로젝트의 색깔에 맞게 디자인을 하고, 사용성을 상당히 많이 고려해야하기 때문이다. 그래서 AI를 사용하지 않는 것이 더 좋다고 생각을 한다. 그럼에도 우리 팀에서 디자인을 맡게 된 프론트엔드 팀원 3명은 모두 디자인에 대한 지식이 전무하기 때문에, AI를 활용하기로 결정했다. 디자인을 위한 시간이 1달이 있었다면 디자인을 어느정도 공부하고 최대한 직접 하려고 했을 것이다. 그런데 우리에게 그런 충분한 시간이 주어지지는 않았다.
1. 프롬프트 to 웹사이트
Figma Makes
프롬프트를 입력하면 디자인을 만들어주는 AI는 많지 않다. 대표적으로 피그마 AI가 있는데 직접 사용해본 결과 쓸게 못된다. AI가 졸면서 디자인을 한 듯한 디자인이다. 디자인 분야에서 선두에 선 피그마조차 AI가 이런 디자인을 만드는 거보면 AI가 디자인을 만드는데에는 아직 한계가 있는 듯하다. 대신에 Lovable, V0, Replit, Flowith, bolt.new와 같이 웹사이트를 만들어주는 AI는 정말 많고, 퀄리티 또한 나쁘지 않다.
피그마의 AI제품 중에 피그마 Makes는 프롬프트를 입력하면 웹사이트를 만들어주는 건 참 잘한다. 디자인 역시 훌륭하다.
내가 보기에는 디자인을 그대로 사용해도 손색이 없을 정도이다.
각 팀원이 AI를 활용해서 디자인을 해오고, 이 중에서 가장 나은 디자인을 선택하고 이 AI를 활용해 디벨롭을 해나갔다.
아래는 디자인을 선택한 이후, AI를 활용해 디자인을 원하는 방향으로 디벨롭해나가는 과정이다.
2. 웹사이트 to 디자인
Figma HTML to Design Plugin
1번에서 피그마 Makes가 만든건 웹사이트이다. 이제 이 웹사이트를 기반으로 디자인으로 만들어보자. 디자인으로 만드는 이유는, 세세한 부분을 팀원들과 직접 수정하기 위함이다.
Figma의 html to design 플러그인에, 1번에서 배포한 웹사이트의 URL을 입력하면 된다.
디자인으로 가져오고 불필요한 그라데이션을 제거하고, 크기가 부적절한 부분을 수정하는 등 우리 입맛에 맞게 수정했다.
그리고 우리만의 디자인 시스템을 만들었다.
3. 디자인 to 코드
Figma MCP + Cursor/Claude Code
이제 디자인을 코드로 옮길 차례이다. 이번에는 Figma MCP를 사용해 AI가 피그마 디자인을 이해할 수 있도록 확장할 것이다. 필자는 Claude Code를 사용했으며 Cursor, Claude, ChatGPT, Gemini 등 다른 AI를 활용해도 괜찮다. 하지만 나는 다른 AI를 사용해봤을 때 Claude Code가 디자인과 가장 유사하게 만들어주었다. 여기서 '유사하다'는 건 두 가지 기준으로 봤다. 하나는 레이아웃 정확도로, 요소의 위치나 간격이 피그마와 얼마나 어긋나지 않는지다. 다른 하나는 디자인 토큰 반영으로, 색과 간격을 하드코딩하지 않고 우리 theme 값을 얼마나 잘 끌어다 쓰는지다. 이 두 가지에서 Claude Code가 제일 나았다.
💡 MCP(Model Context Protocol)
: AI 모델이 외부 데이터 및 도구와 효율적으로 연결될 수 있도록 하는 표준 프로토콜
1. Figma MCP 세팅
Figma 공식문서에 나와있으니 생략하도록 하겠습니다.
2. Figma에서 원하는 요소의 URL 복사
3. AI에게 요청
위 프롬프트의 앞의 /sc:design은 Super Claude라는, 확장된 프롬프트를 입력해주는 커맨드이다. 만약 Super Claude를 설치하지 않았더라면 이는 생략해도 된다.
Claude Code가 수행하는 작업은 다음과 같다.
- 피그마에서 디자인을 가져오고
- 할일 목록을 업데이트하고
- 현재 프로젝트 코드를 읽는다.
- 할 일 목록을 업데이트하고
- 코드를 쓰고
- 할 일 목록을 업데이트하고
작업이 끝날 때까지 5,6번을 반복한다.
- 센스 있게 포매팅과 린트 체크까지 수행한다.
만약 린트 에러가 나면 직접 수정을 한다.
- 결과를 안내한다.
이와 같이 순차적으로 AI 나름의 사고를 하며 작업을 진행하는 것을 확인할 수 있다. 작업을 지켜보다가 ‘이 방향이 아닌데’싶으면 ESC를 눌러 작업을 중단하고, 다시 지시하는 것을 권장한다.
4. 결과물 확인
이제 한 번, 두근거리는 마음을 가다듬고 AI가 만든 디자인을 확인해보자.
디자인과 정말 흡사한 것을 확인할 수 있다. 아이콘만 수정하면 될 듯하다. 이 아이콘도, 사실 프롬프트를 입력할 때 좀 더 구체적으로 ‘xx 아이콘을 사용해주세요.’라고 했으면 Claude Code가 알아서 작업을 해주었을 것이다.
Claude Code가 컴포넌트 코드에, 아이콘도 알아서 추가해주고, 스토리북까지 작성해준 것을 확인할 수 있다.
5. 코드 확인
AI가 작성한 코드를 100% 신뢰해서는 안된다. 코드에 오류는 없는 지, 우리 팀 컨벤션에 맞지 않는 코드가 없는지 반드시 확인을 해야한다. 우리팀 컨벤션에 맞지 않는 코드가 없는지는 Rules를 잘 설정하면 어느정도는 해소할 수 있다.
CLAUDE.md(Claude Code의 Rules)에 Theme관련한 명시를 해두어서 그런지 코드에서 theme를 적극적으로 활용한 것을 확인할 수 있다.
HTML 구조도 상당히 만족스러운 구조를 가지고 있다.
맺으며
AI에 대한 고민이 참 많았었다. AI에 대한 고민을 다룬 글을 작성한 적도 여럿 있었다.
손 딸깍하면 AI가 코드 다 짜주는 거 아니야?, AI와 공생하기, AI가 발전하는 요즘, 배우는게 의미가 있을까?, AI의 대체
막상 이번 프로젝트에서 디자인부터 코드까지 전 과정에 AI를 써보니, 걱정보다 훨씬 쓸만했다. 피그마 Makes가 뽑아준 첫 디자인부터 이미 팀원들 반응이 좋았다. 다만 어느 단계에서든 그대로 가져다 쓴 적은 한 번도 없었다. 그라데이션을 빼고, 아이콘을 갈고, 컨벤션에 맞게 코드를 다듬는 손질이 매번 필요했다.
무엇보다 디자이너 없는 상황에서 AI를 활용해 괜찮은 퀄리티의 디자인과 코드를 만들어낼 수 있다는 걸 확인했다. 물론 전문 디자이너가 만든 것만큼은 아니겠지만, 학습 목적의 프로젝트에서는 충분히 의미 있는 결과물을 만들 수 있었다.
AI를 적극적으로 활용하며, AI와 친해지고 나니 이제는 AI가 조금씩 내 손에 들어오는 듯하다. AI가 뭘 잘하고 어디서 막히는지, 나는 AI보다 뭘 더 잘하는지, 어떻게 하면 AI와 잘 협업할 수 있는지 점점 알아가고 있다. 이번 프로젝트로 AI와의 거리감을 하나 잡은 느낌이다. 다음엔 퍼블리싱을 아예 통째로 맡겨보고 어디서 무너지는지 보고 싶다.