• Product Design

AI로 디자인 체크리스트 피그마 위젯 만들기

‘매번 놓치는 것들’을 없애는 방법

2026.03.18

Maemi

안녕하세요! 애니 전문 OTT 라프텔의 프로덕트 디자이너 매미입니다. 오늘은 디자인을 더 잘 할 수 있도록 돕는 디자인 체크리스트 제작 과정을 공유하려고 합니다.

1. 계기

스토리보드(annotation) 예시

라프텔의 프로덕트 디자이너는 개발자들이 화면을 이해할 수 있도록 설명하는 스토리보드(annotation)을 작성합니다.

간단한 예시로 위와 같은 화면을 디자인했다면 편집 버튼을 눌렀을 때 어떻게 되어야 하는지, 새 프로필을 눌렀을 때 어떤 화면이 나와야 하는지, 하단 토스트 문구는 어떤 상황에서 나오는지 등 각 내용을 세세하게 정의해서 전달해야 합니다.

그리고 이렇게 스토리보드를 열심히 작성해서 개발자에게 전달하면 종종 이런 상황이 펼쳐집니다.

이렇게 특정 케이스를 놓쳐버린거죠! 그럼 프로덕트 디자이너는 호다닥 이메일 미인증 상태 관련 내용을 스토리보드에 추가합니다. 그럼 이제 끝났을까요? 아닙니다.

이런 식으로 개발뿐만 아니라 다양한 팀과 검토하면서 놓친 수정사항이 끊임없이 발생하게 됩니다. 그럼 왜 이런 상황이 생겨나게 되었을까요?

사실 처음부터 그랬던 것은 아닙니다. 프로덕트가 점점 확장되고 정교해지면서 디자인 시 고려해야 할 케이스를 놓치는 일이 생기게 된겁니다.

이런 식으로 케이스가 늘어나면서 스토리보드를 아무리 꼼꼼하게 작성해도 사람의 생각만으로는 한계가 있기 마련입니다. 그래서 이런 상황이 반복되는 것을 막기 위해 디자인 체크리스트를 만들어 보자! 라고 생각하게 되었습니다.

2. 목표

디자인 작업 시 놓치기 쉬운 UX 요소들을 팀 공통 체크리스트로 만들어 사용하는 것을 목표료 하였습니다.

3. 워크샵 진행

워크샵은 피그마의 피그잼을 활용해 온라인으로 진행했습니다.

1차 워크샵에서는 각자 체크리스트화하면 좋을 내용들을 자유롭게 브레인스토밍하며 포스트잇에 적어보았습니다. (시작하기 전 재미삼아 셀피도 찍어보았습니다.😙)

2차 워크샵에서는 작성한 포스트잇을 그룹핑했습니다. 유사한 개념을 묶고 삭제·통합·재분류하는 과정을 거쳤습니다. 체크리스트화 할 필요가 있는지 판단이 애매한 항목은 기준 질문을 활용했습니다.

예를 들어 '실무에서 반복적으로 놓치거나 지적되는 부분인가?', '디자이너가 책임지고 챙겨야 할 범위인가?' 같은 질문들이었습니다.

다음으로 실제 체크리스트를 제작했습니다. 노션의 테이블 기능을 활용해 리스트를 만들고 각 항목의 세부 내용은 페이지 내부에 추가 체크 항목으로 정리했습니다. 디바이스, 카테고리, 도메인별로도 필터링할 수 있게 설정했습니다.

가장 중요한 것은 구체적인 문장화였습니다. 워크샵에서는 다소 날 것의 명사 위주로 작성되었다면, 체크리스트에서는 조금 더 실제 행동으로 옮길 수 있도록 질문 형식의 문장으로 바꿨습니다.

예를 들어 '작품 판권 상태'라는 내용이라면 체크리스트에는 '작품 판권 상태를 고려했나요?'와 같이 수정했습니다.

4. 피그마 위젯 만들기(with AI)

체크리스트를 노션으로 쉽게 만들 수 있었지만 문제는 실제 작업은 피그마에서 한다는 것이였습니다. 이왕이면 주요 작업 툴인 피그마 내에서 체크리스트를 바로 확인하고 사용할 수 있는 형태가 가장 좋겠다고 생각했습니다.

리서치를 해본 결과, *피그마 위젯을 활용하면 좋을 것 같다는 생각이 들었습니다. 다행히 피그마 커뮤니티에 검색해보니 이미 누군가가 잘 만들어 놓은 체크리스트용 피그마 위젯들이 있었습니다. 그래서 이 기능을 활용하면 편리하게 이용할 수 있을 것 같았습니다.

하지만 기존 체크리스트 위젯들은 저희가 만든 체크리스트 내용과 구조가 맞지 않았습니다. 스토리보드마다 확인해야 하는 정책이 다르기 때문에 태그를 부여하고 필터링할 수 있는 기능이 필요했습니다. 또한 하위 세부 항목 구조도 필요했습니다. 예를 들어 '계정 유형을 확인했나요?'라는 질문 아래에 로그인, 비로그인, 미성년자 계정 등의 하위 체크리스트를 둘 수 있어야 했습니다.

*피그마 위젯: 피그마 파일 안에 추가해서 사용할 수 있는 작은 앱이나 도구로, 파일 안에서 바로 작동하며 추가 기능을 제공

그래서 라프텔만의 디자인 체크리스트 위젯을 직접 만들어보기로 했습니다!

마침 당시 바이브코딩 바람이 솔솔 불고 있었고 개발자들이 Cursor를 사용한다는 사실을 알게 되어 Cursor를 활용해 만들어보았습니다.

(위젯 개발을 주도해준 같은 팀 동료 커비에게 감사드립니다.💜)

바이브코딩 덕분에 위와 같이 라프텔 맞춤 체크리스트 위젯을 완성할 수 있었습니다.

노션에서 만든 테이블 형식 그대로 피그마 위젯으로 만들었고 페이지를 한 단계 더 들어가서 봐야했던 세부 체크 항목은 드롭다운 메뉴로 바로 펼쳐서 확인하고 체크할 수 있도록 했습니다.

저희는 디자인 작업 시 피그마 내에 미리 생성해둔 템플릿 파일을 복사해서 사용는데요, 이 템플릿에 체크리스트 페이지를 추가해 디자인하면서 바로 활용할 수 있도록 하였습니다.

5. 실제 업무 적용 그리고 피드백 시간

각자 현재 맡은 업무에 체크리스트를 적용해보고 시간이 지난 후 함께 모여 회고 및 피드백 시간을 가졌습니다. 추상적으로 느껴지는 질문은 구체적인 예시를 추가해 명확하게 수정했고, 너무 당연해 보이는 항목도 다시 검토하며 체크리스트를 더욱 다듬었습니다. 기능적인 측면에서 위젯이 다소 느리게 동작하다는 점이 아쉬웠지만 이는 일단 안고 가기로 했습니다.

6. 후기 및 후속 작업

피드백을 통해 최종 완성된 체크리스트를 이제는 실무에서 적극 활용하고 있는데요, 이전에는 하나씩 떠올리며 살펴 봐야 했던 케이스들을 이제는 체크리스트 덕분에 쉽게 확인할 수 있게 되었습니다.

실제로 다크모드가 최적화 되지 않은 부분을 발견해 수정하기도 했고, 버튼의 실패 케이스나 UI 우선순위 설정, 각종 상태별 정의 등 놓치기 쉬운 부분들을 빼먹지 않고 챙길 수 있게 되었습니다. 그 결과 이전보다 훨씬 완성도 높은 스토리보드를 전달할 수 있게 되었습니다!

추가로 AI를 활용해 개발에 도전해본 후기도 빼놓을 수 없는데요, 그 동안은 프로덕트 디자이너로서 필요한 툴이 있으면 수동적으로 지원을 기다리거나 개발 팀에 요청하는 방법밖에 없었습니다. 체크리스트 역시 원래라면 아쉬운 대로 우리에게 완전히 맞지 않았던 위젯 중 하나를 썼어야 했을 것입니다.

하지만 이제는 AI 덕분에 짧은 시간 안에 스펙과 요구사항만 전달해 필요한 결과물을 만들어낼 수 있었고, 이 경험을 통해 앞으로 필요한 도구는 직접 만들어 쓸 수 있겠다는 자신감을 얻게 되었습니다.

이러한 경험의 연장선에서, 당시에는 해결하지 못했던 성능적인 부분도 이제는 더욱 발전한 AI 툴을 활용해 개선할 수 있지 않을까 하는 생각이 들었습니다. 그래서 최신 AI 툴을 적극 활용해 위젯을 더 최적화하는 추가 개선을 시도해볼 예정입니다.

또한 현재는 체크리스트의 체크박스를 하나씩 직접 눌러 확인하는 방식으로 사용하고 있는데요. 앞으로는 한 단계 더 나아가 AI가 디자인 체크리스트 항목들을 자동으로 검토해주는 단계까지 확장 해보고자 합니다.

감사합니다!