🎨 디자이너도 이제 직접 만든다 — AI로 피그마 위젯 만든 실전 후기

 

"이건 개발자한테 부탁해야 하는데…" 이 말, 언제까지 해야 할까요?

디자이너라면 분명 한 번쯤은 이런 상황을 경험해봤을 거예요. 필요한 도구가 눈앞에 그려지는데, 코딩을 모른다는 이유 하나로 개발자 일정을 기다리거나, 맞지도 않는 기성 툴로 억지로 버텨야 하는 그 답답함.

그런데 요즘 그 공식이 조금씩 흔들리고 있어요. AI를 활용한 바이브코딩 덕분에 디자이너도 자기에게 필요한 도구를 직접 만들기 시작했거든요.

오늘은 애니 전문 OTT 서비스 라프텔의 프로덕트 디자인 팀이 Cursor를 활용해 피그마 위젯을 직접 만든 실전 사례를 소개해드릴게요. 단순한 도구 소개가 아니라, AI가 실제 업무 방식을 어떻게 바꾸는지 보여주는 이야기입니다.

반복적으로 케이스를 빠뜨리는 건 의지의 문제가 아니에요

라프텔 팀은 개발자를 위한 스토리보드(annotation) 작업을 꼼꼼하게 하는 팀이에요. 버튼 클릭 시 어떤 화면이 나와야 하는지, 어떤 상황에서 토스트 메시지를 노출할지 같은 UX 정책을 하나하나 문서화하죠.

그런데 아무리 꼼꼼하게 작성해도 케이스를 빠뜨리는 일이 생겼어요. "이메일 미인증 상태일 때는요?" 개발 과정에서 이런 질문이 나오면, 다시 스토리보드를 수정하고, 검토하다 보면 또 다른 수정사항이 나오고. 끝없는 루프가 시작되는 거죠.

프로덕트가 점점 커질수록 고려해야 할 케이스도 함께 늘어나니까요. 사람의 기억력만으로는 한계가 있다는 걸 팀 전체가 느끼기 시작했고, 결국 "팀 공용 디자인 체크리스트를 만들자"는 결론에 이르게 됩니다.

이건 사실 디자이너 팀만의 문제가 아니에요. 프로덕트 팀 어디에서나 반복적으로 발생하는 구조적인 문제거든요. 의지나 능력의 부족이 아니라, 시스템이 없어서 생기는 문제입니다.

워크샵부터 노션까지 — 체크리스트가 탄생하기까지

라프텔 팀은 체크리스트를 만드는 과정에서도 꽤 체계적으로 접근했어요. 가볍게 시작한 게 아니라 팀 전체가 참여하는 워크샵부터 진행했거든요.

1차 워크샵에서는 피그마의 피그잼을 활용해 온라인 브레인스토밍을 했어요. 각자 체크리스트에 넣으면 좋을 내용을 포스트잇에 자유롭게 적었고, 2차 워크샵에서는 유사한 내용끼리 묶고 삭제하거나 통합하는 작업을 거쳤죠.

이 과정에서 흥미로운 기준이 생겼어요. "실무에서 반복적으로 놓치거나 지적되는 부분인가?", "디자이너가 책임지고 챙겨야 할 범위인가?" 이 두 질문이 항목을 고르는 기준이 된 거예요.

정리된 내용은 노션 테이블로 옮겨졌는데, 여기서 중요한 포인트가 하나 있었어요. 명사 위주의 메모를 질문 형식으로 바꾼 거예요. '작품 판권 상태'라는 메모가 체크리스트에서는 '작품 판권 상태를 고려했나요?'로 바뀌는 식이죠. 이 차이가 생각보다 훨씬 크거든요. 질문 형식이 실제로 행동을 유도하니까요.

노션이 아니라 피그마 안에 있어야 하는 이유

체크리스트 자체는 완성됐는데, 문제가 남아 있었어요. 실제 디자인 작업은 피그마에서 하는데 체크리스트는 노션에 있다는 거였죠.

작업하다가 노션 탭을 열고, 확인하고, 다시 피그마로 돌아오는 과정. 귀찮은 건 둘째치고, 그 과정에서 집중이 끊기면 체크 자체를 건너뛰게 되거든요. 아무리 잘 만든 체크리스트도 사용하지 않으면 의미가 없으니까요.

피그마 커뮤니티를 뒤져봤더니 이미 체크리스트용 위젯들이 여럿 존재했어요. 그런데 기존 위젯들은 라프텔 팀이 원하는 두 가지 기능을 동시에 충족하지 못했어요.

첫째는 태그 기반 필터링이에요. 스토리보드마다 확인해야 할 항목이 달라서, 태그를 부여하고 상황에 따라 걸러볼 수 있어야 했거든요. 둘째는 계층형 구조였어요. '계정 유형을 확인했나요?' 아래에 로그인, 비로그인, 미성년자 계정 같은 하위 항목을 드롭다운으로 펼쳐볼 수 있는 구조가 필요했죠.

두 조건을 동시에 만족하는 위젯이 없었어요. 그래서 직접 만들기로 했습니다.

바이브코딩이 뭔지 몰라도 괜찮아요 — Cursor로 직접 도전

이 지점에서 AI가 등장해요. 팀 내 개발자들이 Cursor를 쓴다는 걸 알게 됐고, 마침 바이브코딩이라는 개념이 퍼지고 있을 때였거든요.

바이브코딩이란 코딩 지식 없이 AI에게 자연어로 원하는 기능을 설명하고, 피드백을 주고받으며 결과물을 만들어가는 방식이에요. "이런 화면이 필요해요", "이 부분이 안 맞는 것 같아요" 이런 식으로 대화하듯 진행하는 거죠.

라프텔 팀은 Cursor를 활용해 피그마 위젯 개발에 도전했고, 결과물은 예상보다 훨씬 좋았어요. 노션에서 만든 테이블 구조를 그대로 피그마 위젯으로 옮겼고, 별도 페이지로 들어가야 볼 수 있던 세부 항목들이 드롭다운 메뉴로 바로 펼쳐지게 됐어요. 태그 기반 필터링도 구현됐고요.

완성된 위젯은 피그마 템플릿 파일에 체크리스트 전용 페이지를 추가하는 방식으로 팀 전체에 배포됐어요. 이제 디자이너는 작업 중 피그마를 벗어나지 않고 체크리스트를 확인하고 하나씩 체크해나갈 수 있게 된 거예요.

실제 써보니 — 놓쳤던 것들이 눈에 들어오기 시작했어요

위젯을 배포한 후 팀은 실제 업무에 적용해보고 피드백 세션을 가졌어요. 추상적으로 느껴지는 질문에는 구체적인 예시를 추가했고, 너무 당연해 보이는 항목도 다시 검토해 체크리스트를 다듬었죠.

성능 면에서 위젯이 다소 느리다는 피드백이 있었지만, 실용성이 더 중요하다는 판단으로 계속 사용하기로 했어요.

효과는 구체적으로 나타났어요. 다크모드 최적화가 안 된 화면을 발견해 수정하기도 했고, 버튼의 실패 케이스, UI 우선순위 설정, 각종 상태별 정의 같이 놓치기 쉬운 항목들을 빠뜨리지 않고 챙길 수 있게 됐죠. 이전보다 완성도 높은 스토리보드를 개발팀에 전달할 수 있게 됐다고 해요.

디자이너의 경계가 사라지고 있다는 건 위협이 아니에요

이 사례가 의미 있는 이유는 단순히 "위젯 하나를 만들었다"가 아니에요. 디자이너가 자신에게 필요한 도구를 직접 만들 수 있다는 가능성을 실제로 증명했다는 데 있어요.

피그마의 CPO 유키 야마시타는 2024년 4분기 기준으로 피그마 월간 활성 사용자 중 약 3분의 2가 디자이너가 아닌 사용자라고 밝혔어요. 이 중 30%는 개발자였고요. 디자인 도구의 경계가 허물어지고 있다는 신호예요.

반대로 디자이너도 개발 영역으로 발을 넓히고 있어요. 피그마가 새롭게 선보인 피그마 메이크(Figma Make)는 텍스트 입력만으로 소스 코드를 생성할 수 있는 바이브코딩 방식을 지원하는 방향으로 발전하고 있거든요.

도구가 발전할수록 "아이디어를 명확하게 설명하는 능력"이 그 어떤 기술보다 중요해지는 시대가 오고 있어요. 코딩을 못해도 괜찮아요. 내가 원하는 게 뭔지 정확히 말할 수 있으면 되거든요.

사람들이 놓치는 부분이 있어요. AI 바이브코딩이 무서운 게 아니라, AI를 활용하지 않는 쪽이 더 위험한 상황이 되어가고 있다는 거예요. 피그마의 2025년 AI 리포트에 따르면 응답자의 78%가 AI 통합을 미래 성공의 필수 요소라고 답했지만, 디자이너의 경우 54%만이 AI가 업무 품질을 향상시킨다고 동의했어요. 개발자(82%)에 비해 디자이너들의 AI 활용 인식 격차가 아직 크다는 거예요.

다음 단계는 AI가 자동으로 체크해주는 세상

라프텔 팀은 여기서 멈추지 않겠다는 계획도 밝혔어요. 지금은 디자이너가 체크박스를 하나씩 눌러 확인하는 방식이지만, 앞으로는 AI가 디자인 체크리스트 항목들을 자동으로 검토해주는 단계까지 나아가는 게 목표라고 해요.

이게 실현된다면 디자이너는 빠뜨린 것이 없는지 확인하는 일에서 벗어나 더 좋은 UX를 설계하는 일에 집중할 수 있게 돼요. 검수에 쓰던 시간을 창의적인 설계로 돌릴 수 있게 되는 거죠.

AI는 이제 텍스트를 입력하면 결과물을 뱉어내는 도구를 넘어, 팀의 작업 방식을 이해하고 실제로 함께 제품을 만드는 동료로 진화하고 있어요. 라프텔 팀의 이 작은 실험은 그 방향을 보여주는 선명한 사례입니다.

마무리 — 지금 여러분 팀에서 반복적으로 놓치는 게 뭔가요?

이 이야기에서 얻을 수 있는 인사이트를 정리해볼게요.

반복적으로 빠뜨리는 케이스는 의지의 문제가 아니라 시스템의 문제예요. 좋은 체크리스트는 문서가 아니라 실제 작업 흐름 안에 녹아있어야 해요. 그리고 AI 덕분에 디자이너도 이제 필요한 도구를 직접 만들 수 있게 됐어요.

지금 여러분이 반복적으로 놓치는 케이스가 무엇인지 생각해보세요. 그게 바로 체크리스트를 만들어야 할 이유이고, AI 바이브코딩을 시작해볼 이유예요.