전문가 인터뷰

피그마 MCP × 클로드코드:
AI 시대 디자이너가 갖춰야 할 강력한 무기

"AI가 화면을 그려내는 시대, 디자이너는 이제 무엇을 해야 할까요?"

10년 차 UX/UI 디자이너이자 국내 최대 피그마 커뮤니티 리더, '피그마 튜터' 하이서 님이 던지는 질문입니다. 많은 디자이너가 AI 도입 앞에서 벽에 부딪히고 좌절하곤 합니다. 하지만 강사님은 이 문제가 AI에게 '우리 디자인 규칙'을 학습시키지 않았기 때문이라고 진단하시는데요.

이번 인터뷰에서는 코딩을 전혀 몰라도 '피그마 MCP'와 '클로드코드'라는 강력한 무기를 통해 단순 반복 업무를 하루 만에 끝내는 자동화 워크플로우를 공개합니다. AI라는 파도에 휩쓸리는 대신, 그 파도 위에서 멋지게 서핑하며 진짜 '경쟁력'을 키우고 싶은 디자이너라면 지금 이 이야기에 주목해 주세요.

국내 최대 피그마 &디자인 커뮤니티 리더,
피그마 튜터 하이서 님

안녕하세요, 강사님 🙂바쁘신 일정 중에도 이렇게 서면 인터뷰에 응해주시고 귀한 시간 내어주셔서 진심으로 감사드려요! 먼저 간단한 자기소개 부탁드립니다.

피그마 튜터 안녕하세요, '피그마 튜터' 하이서입니다. 10년 차 UX/UI·프로덕트 디자이너로 일하면서, 지금은 디자인·자동화 워크플로우를 다루는 작은 에이전시를 운영하고 있어요. Friends of Figma KR 멤버이자 피그마피디아 운영진으로 커뮤니티 활동도 이어오고 있고, 인스타그램(@figma_tutor)과 유튜브 '피튜브', 그리고 몇 권의 피그마 책을 통해 디자이너분들과 만나고 있습니다. 한마디로 "실무에서 직접 부딪힌 걸 정리해 나누는 사람"이라고 봐주시면 좋을 것 같아요.

디자이너에게 피그마 MCP와 클로드코드가 필수인 이유

강사님께서는 에이전시의 대표이시자 다양한 실무를 경험한 프로덕트 디자이너이기도 하시죠. 또한 여러 권의 피그마 저서를 집필하신 '피그마 튜터'로도 유명하신데요. 어떤 계기로 피그마의 기초를 넘어 피그마 MCP와 클로드코드를 활용한 자동화를 가르치시게 되셨는지 궁금합니다.

피그마 튜터 AI로 인해 시대가 빠르게 변하면서, 디자이너들에게 요구되는 역량이 변화하고 있다는걸 느낍니다. 이전에는 문제를 정의하고, 기획하고, 시안까지 잡는게 UXUI 디자이너의 역할이었다면 이제는 바이브 코딩으로 간단한 프로토타입을 구현하고 때론 토큰과 컴포넌트를 구현하는 것까지 필요로 하는 조직이 늘고 있는 것으로 알고 있어요.이렇게 했을 때 초기에는 학습 시간이라는 비용이 들지만, 궁극적으로 효율이 향상되고 개발자분들은 더 중요한 인프라 구축이나 서버 관리 쪽에 시간을 쏟으실 수 있기 때문이죠. 저는 이런 작업 프로세스의 필요성을 제 프로덕트에 적용하며 크게 체감을 했어요. 피그마 MCP와 클로드코드 조합으로 자동화를 여러번 테스트 했을 때 정확도가 높다는것을 알게 되었으니까요. 그리고 다른 디자이너들에게도 이 시기에 꼭 필요한 내용일거라는 확신이 들었어요. 초반 작업에 어려움을 겪는 디자이너분들을 위해서 이 워크플로우를 공유해야겠다고 생각했습니다.

AI 시대에 디자이너들이 겪는 장벽 2가지

국내 최대 피그마 커뮤니티 리더이자, 베스트셀러 저자로 수많은 디자이너와 소통해 오셨을 텐데요. 최근 현장의 디자이너들이 AI를 실무에 도입하려다 가장 많이 부딪히고 좌절하는 '마의 구간'은 어디인가요?

피그마 튜터 아무래도 개발환경이 익숙하지 않은 비개발자가 대부분이다 보니 환경설정과, 바이브 코딩과 우리 디자인 시스템 차이의 간극을 줄이는 과정 이 두 가지에서 가장 큰 어려움을 겪으시는 것 같습니다. 여기서 많은 분들이 "역시 AI는 아직까지 실무에 도입하기엔 무리가 있구나"하고 결론 내고 멈춰버려요. 그런데 사실 이건 AI의 한계가 아니라, AI에게 우리 규칙을 알려주지 않아서 생기는 문제예요. 이 강의에서는 앞서 말씀드린 2가지를 극복하실수 있도록 최대한 상세하게 내용들을 풀어보았어요.

UI/UX 디자이너에게 피그마 MCP와 클로드코드가 필수인 이유

어떤 디자이너들에게는 피그마 MCP와 클로드코드를 일에 적용하는 것이 아직 낯설게 느껴질지도 모르겠습니다. UI/UX 디자이너들에게 이 두 가지 툴의 조합이 구체적으로 어떤 역할을 대신해 주는지 쉽게 설명해 주실 수 있을까요?

피그마 튜터 기존의 디자인 시스템을 읽고 코드화 하는 작업, 역으로 디자인 시스템을 기반으로 피그마에 컴포넌트,토큰이 반영된 시안을 생성하는 작업 이 2가지가 피그마 MCP+클로드 코드로 진행할 수 있는 핵심 시나리오 입니다. 쉽게 비유하면, 클로드코드는 여러분 옆자리에 앉은 성실한 프론트엔드 개발자이자 디자이너예요. 그리고 피그마 MCP는 그 주니어가 여러분의 피그마 파일을 직접 열어서 읽고 반영할 수 있게 해주는 통로고요. 원래는 디자이너가 시안을 만들면 → 개발자에게 설명하고 → 코드로 옮겨지길 기다리고 → QA하고 → 다시 수정 요청하는 핑퐁이 반복됐잖아요. 이 조합을 쓰면 디자이너가 피그마에서 디자인 시스템을 잡아두기만 하면, MCP가 그 디자인을 클로드코드에게 그대로 읽어주고, 클로드코드가 우리 규칙에 맞는 코드로 옮겨줍니다. 반복적인 핸드오프·수정 노동을 대신 맡아주는 셈이에요. 또한 디자인 시스템이 구축된 상태에서 에러, 엣지 케이스 시안, 테스트 시안을 생성하고 피그마에 토큰과 컴포넌트가 적용된 디자인으로 생성해줘서 산출물을 별도로 생성할 필요가 없습니다. 디자이너는 '무엇을, 왜'에 더 집중하고, '어떻게 옮기느냐', ‘어떻게 조합하느냐’의 단순 작업은 덜어내는 거죠.

“코딩 모르는 디자이너도 바이브코딩 잘 할 수 있어요”

커리큘럼에 '디자인 시스템 코드화 및 확장 전략'이 포함되어 있는데요. 혹시 코딩을 모르는 디자이너도 이 강의를 듣고 소화해낼 수 있을까요?

피그마 튜터 네, 이 강의는 디자인 시스템 기반의 바이브 코딩을 알려드리지만, 그렇기 때문에 오히려 코딩을 아예 모르는 분들을 위한 콘텐츠라고 볼 수 있어요. 왜냐면 "디자이너를 개발자로 만드는" 강의가 아니라, "디자이너가 이미 잘 하는 것(디자인 시스템을 잘 설계하는 일)을 AI가 이해할 수 있는 형태로 넘기는 법"을 다루기 때문이죠. 물론 토큰, 컴포넌트, Git 같은 개념이 나오긴 하는데, 전부 디자이너에게 익숙한 비유로 풀어요. 예를 들어 프론트엔드는 식당 홀, 백엔드는 주방, API는 주문서처럼요. 코드를 직접 한 줄 한 줄 쓰는 게 아니라, AI에게 어떤 프로세스로 일을 맡기고, 효율적으로 작업을 하는지를 배우는 것이 핵심이에요.

디자이너가 AI 시대에 배워야 할 단 한 가지는?

강의에서 "AI 생성물과 디자인 시스템 사이 병목을 해결하는 핵심 6가지 학습 포인트"를 다루시는 것으로 알고 있어요. 혹시 이 6가지 중 현업에 종사하는 디자이너들에게 가장 필수적인 학습 포인트 하나만 자랑해 주신다면요?

피그마 튜터 딱 하나만 꼽자면, 'AI에게 우리 디자인 시스템을 규칙서로 학습시키는 법' 이에요. 대부분의 디자이너가 AI에게 그때그때 즉흥적으로 요청하다 보니 결과가 매번 달라지는데, 한 번 우리 토큰과 컴포넌트, 작업 규칙을 AI가 참조할 '하네스 키트(가이드)'로 정리해두면 그다음부터는 대충 요청해도 AI가 알아서 우리 결을 지켜요. 이 하나가 잡히면 나머지 다섯 개가 전부 쉬워집니다. AI 결과물이 일관돼지고, 수정이 줄고, 협업이 가능해지고요.

"피그마 MCP와 클로드코드로 '협업 가능한 디자이너'가 됩니다"

많은 디자이너가 두려워하는 것이 개발팀과의 협업입니다. 이번 강의를 통해 피그마 MCP와 클로드코드를 활용할 수 있게 된다면, 개발자를 포함한 다른 직무 동료들과의 팀워크가 훨씬 나아질 수 있을까요? 강의를 듣게 된다면 구체적으로 어떤 측면에서 도움을 받을 수 있을지 궁금합니다.

피그마 튜터 확실히 나아질거예요. 예전엔 "이 버튼 이렇게요"라고 말과 시안으로 전달했다면, 이제는 우리 디자인 시스템에 맞춰 정리된, 실제 프로덕션에서 쓸 수 있는 코드 형태로 대화를 시작할 수 있어요. 디자이너가 개발의 언어와 제약을 어느 정도 이해하고 들어가니까, 핑퐁이 줄고 서로 존중하는 협업이 됩니다. 개발자뿐 아니라 기획자와도, 막연한 아이디어를 빠르게 눈에 보이는 형태로 만들어 보여줄 수 있어서 의사결정이 훨씬 빨라져요. 여담이지만 저는 바이브코딩을 시작하면서, 개발자분들이 곤란해하실만한 혹은 번거로우실만한 새로운 포인트들을 많이 알게되어서, 제가 하는 일들의 해상도가 조금 높아지는 경험을 했어요. 여러분들도 이 강의를 통해서 비슷한 경험을 하실거라 생각해요.

AI 워크플로우로 단순 작업은 줄이고, 디자인은 더 깊게

강사님 역시 AI를 활용한 다양한 워크플로우를 실제 실무에 적용하고 계실 것 같아요. 그렇다면 AI 도입 이전과 비교해 작업 속도나 업무 만족도 측면에서 어떤 변화를 체감하셨는지 알고 싶습니다.

피그마 튜터 예전 같으면 시안 → 핸드오프 → 수정 → 재확인으로 며칠씩 돌던 일이, 디자인 시스템만 잘 잡혀 있으면 하루 안에 눈에 보이는 결과까지 가는 경우가 많아졌어요. 반복적인 단순 작업이 줄어든 게 가장 커요. 단순 노동을 AI가 덜어주니까, 저는 "이 화면이 왜 이래야 하는가", "사용자에게 어떤 경험을 줄 것인가" 같은, 디자이너로서 정말 하고 싶은 고민에 시간을 쓰게 됐어요.

주니어 및 미들급 디자이너들이 AI로 당장 시작해야 하는 3가지

AI 시대에 디자이너의 역할이 줄어들까 불안해하는 분들이 많습니다. 강사님이 인사말에서 강조하신 디자이너의 핵심 경쟁력을 키우기 위해, 주니어 및 미들급 디자이너들은 지금 당장 무엇부터 시작해야 한다고 보시나요?

피그마 튜터 AI가 잘하는 건 '빠르게 그럴듯하게 만드는 것'이에요. 반대로 끝까지 사람의 몫으로 남는 건 문제를 정의하고, 잘게 쪼개고, 결과를 판단하는 일이고요. 그래서 저는 "진짜 사용자의 문제를 찾고 공감할 수 있는 능력"이 앞으로의 경쟁력이라고 봐요.

지금 당장 시작할 건 거창하지 않습니다. 큰 틀에서 본다면 내 워크플로우에서 병목이 생기는 지점은 어디인지, 이 부분을 어떻게 AI로 효율화 할 수 있을지 정리해보는 작업부터 진행해보세요. 그리고 이 워크플로우 안에서 나의 개입이 필요한 부분은 어디인지, 어떤 도구를 써야 가장 효과적일지를 명확히 해보고, 바로 반영해 보시는겁니다. 그리고 우리 수업에서 다루는 워크플로우를 따라오면서 아래 내용들을 가볍게 시도해 보세요.

첫째, 디자인 시스템을 AI가 잘 이해할 수 있도록 제대로 정리해보세요. 네이밍과 컴포넌트 정규화부터 불필요한 레이어 제거, 디스크립션 추가까지 이 과정들은 번거로워 보이지만, 결국 좋은 결과물로 이어지는 밑거름이 됩니다.

둘째, 하네스를 설정하고, 프로젝트 초기 설정을 하고, 디자인을 코드로 옮겨보는 전체 과정을 한 번 진행해보고 이 감각을 익혀보세요. AI가 반복적으로 실수하는 부분은 어디이고, 어떻게 해결할 수 있는지 고민하는 과정을 거쳐보시는거죠.

셋째, 이 강의에서 배운 것들을 우리 프로젝트에도 반영해보세요. 이 과정까지 마치시면 단순히 수업을 따라오는 것이 아니라, 전체 과정을 온전히 내 것으로 만드는 경험을 하실수 있을거예요.

AI 시대를 서핑하는 디자이너가 되는 방법

아직 수강을 망설이는 디자이너들에게, 이 강의를 듣고난 뒤의 일하는 모습이 어떻게 달라져 있을지 독려하는 한마디를 부탁드리고 싶습니다.

피그마 튜터 AI 시대가 오면서 ‘내 일이 대체’되는 것에 대한 불안감을 느끼는 분들이 많으신것 같습니다. 이전에 겪어보지 못한 시대가 왔기에 어쩌면 그 불안감은 당연한 것이라 생각해요. 하지만 막연한 불안감 으로 시간을 보내기 보다는 이 불안정한 시대 안에서 내가 할 수 있는 것들을 빠르게 시도 해보는것이 중요하다고 생각합니다. 그러다 보면 이 AI 시대라는 파도에 휩쓸리기보다, 서핑을 하듯 시대의 흐름 위에서 무섭게 성장하는 디자이너가 되실 거예요. 강의 전체 과정을 모두 경험하시고 나면 화면을 그리는 등의 단순한 작업은 자동화할 수 있게 됩니다. 그 다음부터는 조금 더 중요한 일에 에너지를 쏟고 사용자의 문제에 집중할 수 있게 되실 거예요. 만약 이 과정을 듣지 않으시더라도, 모두가 지금 내 문제를 AI로 풀어보는 것부터 행동으로 옮기셔서 변화의 출발선에 함께 설 수 있다면 좋겠습니다. 긴 글 읽어주셔서 고맙습니다.