스토리보드에서 빠뜨린 케이스를 잡아내는 법 — 라프텔의 디자인 체크리스트 피그마 위젯 제작기

디자인을 넘겼는데 개발자에게서 이런 질문이 돌아와요. "이메일 미인증 상태에서는 어떻게 나와야 하나요?"

놓쳤어요. 호다닥 스토리보드에 해당 내용을 추가합니다. 근데 끝이 아니에요. 다른 팀과 검토하다 보면 또 빠진 게 나오고, 또 나오고. 애니 전문 OTT 라프텔의 프로덕트 디자이너 매미가 이 반복되는 상황을 체크리스트로 해결한 이야기예요.

사람의 머리로는 한계가 있는 순간

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

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

열심히 작성해서 전달하면 이런 상황이 펼쳐져요.

특정 케이스를 놓쳐버린 거죠. 이메일 미인증 상태 관련 내용을 추가하면 끝일까요? 아닙니다.

개발뿐만 아니라 다양한 팀과 검토하면서 놓친 수정사항이 끊임없이 발생해요. 처음부터 이랬던 건 아니에요. 프로덕트가 점점 확장되고 정교해지면서 디자인 시 고려해야 할 케이스가 늘어난 거예요. 아무리 꼼꼼하게 작성해도 사람의 생각만으로는 한계가 있는 거죠.

워크샵으로 체크리스트 뽑아내기

피그마의 피그잼을 활용해 온라인으로 워크샵을 진행했어요. 1차 워크샵에서는 각자 체크리스트화하면 좋을 내용들을 자유롭게 브레인스토밍하며 포스트잇에 적었고, 2차 워크샵에서는 작성한 포스트잇을 그룹핑했습니다. 유사한 개념을 묶고 삭제, 통합, 재분류하는 과정을 거쳤어요.

판단이 애매한 항목에는 기준 질문을 활용했어요. "실무에서 반복적으로 놓치거나 지적되는 부분인가?", "디자이너가 책임지고 챙겨야 할 범위인가?" 같은 질문들이었습니다.

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

가장 중요한 건 구체적인 문장화였어요. 워크샵에서는 "작품 판권 상태"처럼 날 것의 명사 위주로 작성했다면, 체크리스트에서는 "작품 판권 상태를 고려했나요?"처럼 실제 행동으로 옮길 수 있는 질문 형식으로 바꿨어요. (이 차이가 작아 보이지만 실제 사용할 때는 꽤 크더라고요.)

노션 말고 피그마에서 바로 쓰고 싶었다

노션으로 체크리스트를 쉽게 만들 수는 있었어요. 문제는 실제 작업이 피그마에서 일어난다는 거였죠. 탭을 왔다 갔다 하면서 체크하는 건 결국 안 하게 되거든요.

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

결국 직접 만들기로 했어요.

Cursor로 위젯을 찍어냈다

마침 바이브코딩 바람이 불고 있었고, 개발자들이 Cursor를 쓴다는 걸 알게 돼서 Cursor를 활용해 만들어봤어요.

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

라프텔은 디자인 작업 시 피그마 내에 미리 생성해둔 템플릿 파일을 복사해서 사용하는데, 이 템플릿에 체크리스트 페이지를 추가해 디자인하면서 바로 활용할 수 있도록 했어요. 작업 동선 안에 체크리스트를 녹여넣은 거죠.

실무에 적용하고 나서 바뀐 것들

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

피드백을 거쳐 최종 완성된 체크리스트를 실무에서 적극 활용하고 있어요. 이전에는 하나씩 떠올리며 살펴봐야 했던 케이스들을 이제는 체크리스트 덕분에 쉽게 확인할 수 있게 됐거든요. 실제로 다크모드가 최적화되지 않은 부분을 발견해 수정하기도 했고, 버튼의 실패 케이스나 UI 우선순위 설정, 각종 상태별 정의 등 놓치기 쉬운 부분들을 빼먹지 않고 챙길 수 있게 됐어요. 결과적으로 이전보다 훨씬 완성도 높은 스토리보드를 전달할 수 있게 됐습니다.

여담이지만, AI를 활용해 개발에 도전해본 것 자체도 의미가 컸다고 해요. 그동안 프로덕트 디자이너로서 필요한 툴이 있으면 수동적으로 지원을 기다리거나 개발팀에 요청하는 방법밖에 없었거든요. 원래라면 아쉬운 대로 맞지 않는 위젯 중 하나를 썼어야 했을 거예요. 근데 AI 덕분에 짧은 시간 안에 스펙과 요구사항만 전달해 필요한 결과물을 만들어낼 수 있었고, 앞으로 필요한 도구는 직접 만들어 쓸 수 있겠다는 자신감을 얻었다고요.

당시 해결하지 못했던 위젯 성능 문제도 더 발전한 AI 툴을 활용해 개선할 수 있지 않을까 하는 생각으로 추가 최적화를 시도할 예정이고, 궁극적으로는 AI가 디자인 체크리스트 항목들을 자동으로 검토해주는 단계까지 확장하는 걸 목표로 하고 있어요. 체크리스트를 사람이 누르는 것에서 AI가 검증하는 것으로. 꽤 자연스러운 다음 단계죠.