숨고의 Product Designer가 AI를 활용하는 방법 (1부) : 더미 데이터 실제 데이터로 교체해주는 피그마 플러그인 만들기

안녕하세요. 숨고 Product Design Team Ean입니다.

이번 아티클에서는 코드를 전혀 모르는 디자이너가 AI 에이전트를 활용해 피그마 플러그인을 완성한 과정을 소개하고자 합니다. 업무 효율화를 위한 도구 제작에 관심이 있다면 참고해 보시면 좋겠습니다.

디자인에는 '진짜 데이터'가 필요하다

UI 시안 작업과 사용자 테스트(UT)용 화면을 제작할 때는 실제 서비스에서 사용되는 이미지와 텍스트를 최대한 활용하고 있습니다.

짧고 깔끔한 가상의 데이터만 사용한다면, 실제 데이터가 적용되었을 때 중요한 정보가 잘리거나 레이아웃이 무너지는 문제를 발견하지 못할 수 있기 때문이에요. 또한 사용자 테스트를 진행하게 되면 테스트 참여자들은 화면에 노출된 콘텐츠를 자신이 알고 있는 것과 다르다고 느낄 때 “제가 아는 거랑 달라요. 이거는 잘못됐어요.” 와 같이 다른 점에 꽂혀 사용성 검증을 원활히 진행할 수 없다는 문제점도 있어 실제 데이터를 사용하고 있습니다.

기존 방식의 문제점

문제는 그 데이터를 피그마에 채워 넣는 과정이었어요. 기존 방식은 크게 두 가지였습니다.

수동으로 교체하기

실제 상용 서비스에서 직접 데이터를 가져와 피그마에 하나씩 붙여넣는 방식입니다. 데이터가 1~2개 정도라면 큰 문제가 없지만, 교체해야 하는 데이터가 많아질수록 작업 시간이 늘어나고 효율도 떨어질 수밖에 없어요.

스프레드시트 연동 플러그인 사용하기

시중에는 Google Sheets와 연동해 데이터를 치환해 주는 피그마 플러그인이 많이 있어요 하지만 원하는 데이터가 생길 때마다 스프레드시트를 별도로 정리해야 했고, 이 과정 자체가 또 하나의 반복 업무였죠. 물론 최근에는 AI를 활용해 데이터 정리를 자동화할 수 있습니다. 하지만 결국 스프레드시트를 관리해야 한다는 점은 변하지 않았고, 그래서 다시 수동 작업으로 돌아가는 경우도 많았습니다.

결론적으로 원하는 건 단순했어요. 플러그인을 실행하면, 선택한 피그마 화면에 실제 서비스 데이터(이미지 + 텍스트)가 자동으로 들어오는 것!

더미 데이터를 실제 데이터로 교체해주는 피그마 플러그인 제작 과정

Step 1. 제작 전 원칙 설정

플러그인 제작 전에 세 가지 원칙을 먼저 세웠습니다. 이 세 가지를 기준으로 놓고 보니, 어떤 방향으로 만들어야 할지가 조금 더 선명해졌어요.

Step 2. AI로 개발 방법 도출하기

먼저 Claude와 ChatGPT에 기능 요구사항과 원칙을 전달하고 아이데이션을 진행했습니다. 돌아온 제안은 세 가지였습니다.

API 호출

엔지니어들이 매번 "어떻게 내려주실 거예요?", "명세서 언제 나와요?"라고 말하는 바로 그 API입니다. 비개발자인 제가 바로 활용하기에는 어려운 영역이라고 생각했어요. 또한 테크팀의 도움이 필요한 구조라면 나중에 혼자 유지보수하기 어렵다고 판단해 제외했습니다.

스프레드시트 연동

스프레드시트 기반 방식은 링크가 있는 사용자라면 누구나 접근할 수 있어 정보 유출 위험이 있었어요. 또한 업데이트나 새로운 데이터가 필요할 때마다 스프레드시트를 정리해야 하는 번거로움도 있었죠. 그래서 이 방법으로는 근본적인 문제가 해결되지 않는다고 판단해 제외했습니다.

데이터를 플러그인에 내장

현실적인 방법이었지만, 데이터 최신성을 위해 정기적으로 업데이트가 필요하고 플러그인도 같이 업데이트 해야해서 유지보수 측면에서 아쉬웠어요.

그렇다면 URL을 입력하면 크롤링 해서 가져오는건 어떨까?

세 가지 제안이 모두 마음에 들지 않았을 때 떠올린 아이디어였어요. 플랫폼 차원에서 크롤링을 막고 있기는 하지만, 최근 Claude와 Perplexity가 현재 보고 있는 페이지의 정보를 잘 정리해 주는 모습을 보면서 이 정도는 가능하지 않을까 생각했죠. 하지만 Claude와 ChatGPT 모두 "플랫폼 차원에서 제한되어 있을 수 있다"라고 경고했습니다. 그래도 일단 직접 만들어 보기로 했죠.

역시 결과는 예상대로였어요. URL 기반으로 데이터를 크롤링하는 방식의 플러그인은 오류가 많았고 안정적으로 동작하지 않았습니다. 심지어 Claude Code는 개인 플랜으로 사용하고 있었는데..! 토큰만 꽤 사용한 채 실패로 끝나고 말았죠.

Step 3. 동료 엔지니어에게 물어보기

토큰 비용만 날린 충격에 결국 스쿼드 Backend Engiener에게 어떤 플러그인을 만드려고 하는지, 어떤 문제로 해결이 안되는지 상황을 설명하고 방법이 있을지 물어봤어요. 엔지니어는 바로 몇 가지 해결 방법을 제안해주었습니다.

Step 4. Claude Code로 제작하기

동료가 던져준 힌트를 듣자마자 “오 이건 되겠다!” 싶어서 바로 Claude Code에게 요구사항을 정리해 입력했고 불과 15분만에 플러그인을 바로 제작해 줬어요!

요구사항

• 더미 데이터를 피그마 레이어명에 맞는 텍스트/이미지 데이터로 교체하는 피그마 플러그인을 제작한다.
• 서비스와 데이터 유형별로 기본 API URL 셋팅되어 있어, 바로 데이터를 불러와 교체할 수 있다.
• (중략)

이후 1~2시간가량 테스트를 반복하면서 규칙을 적용하고 버그를 수정했어요. 그 결과 플러그인 제작을 완료할 수 있었고, 다음 날 Publish까지 마쳐 팀에 공유할 수 있었습니다.

이렇게 제작된 데이터 치환 플러그인

피그마에서 레이어명을 가이드에 맞게 지정하면 설정된 API URL의 데이터를 불러와 실제 데이터로 교체할 수 있도록 만들었어요.

1. 우선 피그마에서 데이터를 교체하고 싶은 레이어를 가이드에 맞게 정리해요

2. 플러그인에서 데이터 유형과 서비스를 선택하고 <데이터 불러오기> 버튼을 선택해요

3. 마지막으로 <데이터 교체하기> 버튼을 선택하면 레이어명에 맞게 실제 데이터로 한번에 교체돼요

이제 데이터를 수동으로 교체하는 노가다는 작별입니다 :)

이전에는 화면이 많거나 서비스별로 셋팅이 필요하다면 교체하는데 최소 20분씩은 걸렸지만 플러그인을 사용하면 최대 3분만에 해결이 돼요.

그리고 원하는 데이터가 있는 경우 직접 API URL이나 JSON 파일을 넣어서 교체할 수 있는 방법도 제공해서 원하는 데이터로 바로 교체할 수 있게 열어 두었어요.

이제 디자이너도 '빌더'가 될 수 있습니다

요구사항과 설계 방향을 입력하면 실제 제품이 만들어지는 경험을 하고 나니 기술의 접근성이 생각보다 훨씬 낮아졌다는 것을 체감했어요. AI를 디자인·기획 업무의 보조 도구로만 활용하는 것이 아니라, 내가 활용할 수 있는 것이 무엇인지 알고 동작 구조를 이해하고 있다면 업무에 필요한 도구를 직접 만들 수도 있는 상황이 된것이죠.

지금은 단순한 플러그인을 만든 수준이지만 앞으로는 설계자로서 할 수 있는 영역이 생각보다 훨씬 넓다는 것을 느꼈습니다. 물론 과정에서 실패도 있었고 시행착오도 있었어요.

하지만 그 실패 덕분에 다음 질문의 정확도를 높일 수 있었고, 동료 엔지니어에게도 더 구체적인 질문을 할 수 있었습니다. 업무 과정에서 병목이 발생하거나 반복되는 문제가 있다면 AI 에이전트를 활용해 효율화를 위한 도구를 직접 만들어 보시길 권합니다. 결과물 자체보다 중요한 것은 요구사항을 정의하고 해결 방법을 좁혀 가는 과정이라고 생각해요.

그럼 그 과정에서 설계자의 시각으로 문제를 바라보는 관점을 자연스럽게 익힐 수 있을 것이라 믿어요!