숨고의 Product Designer가 AI를 활용하는 방법 (2부) : 디자인 검수 시간을 획기적으로 줄여 준 숨고 디자인 린트 플러그인 제작기

안녕하세요, Product Designer Zeze입니다. 현재 숨고에서 숨고의 Design System인 Prisma와 Product Design 업무를 담당하고 있죠. 이번 시간에는 디자인 검수 시간을 획기적으로 줄여준 플러그인 제작기를 들려 드리고자 합니다 :)

마스터파일 검수는 단순 반복 작업의 연속이었어요

숨고 Product Design Team은 각 도메인별 최신 화면을 마스터 파일로 관리하고 있어요. 일감이 배포된 이후에는 작업자가 개선한 화면을 마스터 파일에 업데이트하는 과정이 반드시 필요한데요. 이 과정에서 업데이트가 올바르게 이루어졌는지 확인하기 위해 1~2명의 디자이너를 리뷰어로 지정해 리뷰를 받는 과정을 거치고 있었어요.

리뷰어가 확인해야 하는 항목은 크게 세 가지예요

1. 컬러, 스페이싱 등 디자인 시스템의 디자인 토큰(Variable)을 사용하지 않고 하드 코딩된 값은 없는지
2. 불필요한 레이어로 그룹핑된 요소는 없는지
3. 레이어명을 변경하지 않고 기본값으로 사용하고 있지는 않은지

문제는 이 검수 방식이 디자이너가 피그마 파일에서 화면을 하나하나 클릭하며 눈으로 확인하는 방식이었다는 점이었어요. 범위가 작은 작업이라면 괜찮지만, 수십 개의 화면이 바뀌는 큰 프로젝트의 경우 리뷰어가 검수에만 꽤 많은 시간을 써야 했거든요. 작업자 입장에서도 리뷰를 기다리는 시간이 길어질수록 최종 머지 일정에 영향이 생겼고요.

이렇게 단순 반복 작업에서 생기는 비효율을 줄일 방법은 없을지 고민하다가, 자동으로 규칙 위반 항목을 찾아 주는 피그마 플러그인을 직접 만들어 보기로 했어요.

클로드 코드와 피그마 플러그인 만들기

요즘은 엔지니어가 아니어도 클로드 코드로 피그마 플러그인을 비교적 쉽게 만들 수 있잖아요. 저도 바로 도전해 보기로 했어요. 먼저 클로드에 요청하기 전에 플러그인의 방향성을 잡았어요.

Step 1. 플러그인 방향성 잡기

• 범위가 큰 프로젝트도 검수할 수 있도록 여러 개의 프레임을 한 번에 검사할 수 있게 만들기
• 디자이너가 검수할 프레임을 선택하고 클릭 한 번으로 검수 결과를 확인할 수 있게 만들기
• 발견된 문제를 항목별로 정리해 보여 주고, 클릭하면 해당 레이어로 이동할 수 있게 만들기

클로드에게 만들고 싶은 플러그인을 설명하니 의도를 꽤 잘 이해하고 빠르게 코드를 만들어 주었어요. 클로드가 알려 준 대로 피그마에 적용해 보니, 놀랍게도 첫 번째 버전은 생각보다 빠르게 작동했어요. 10분 만에 코드 한 줄 직접 작성하지 않고도 플러그인이 실제로 돌아가는 것을 보는 경험은 꽤 인상적이었어요.

Step 2. 예외 처리의 연속

기본 구현만으로도 충분히 사용할 수 있었지만, 실제로 마스터파일에 플러그인을 돌려보니 생각지 못한 문제들이 계속 확인되었어요.

기본 OS 컴포넌트 탐지 문제

• 문제 : 숨고는 앱과 웹을 모두 제공하는 멀티 플랫폼 서비스이기 때문에 앱과 웹(모바일, 데스크톱) 화면을 모두 디자인해야 해요. 이때 화면 안에 기본 OS UI 컴포넌트(status bar, tab bar, keyboard 등)가 사용되는데, 검수할 때마다 Variables 미사용 오류로 잡히고 있었어요
• 해결 : 레이어명에 기본 OS 컴포넌트명이 포함된 경우 검수에서 제외하는 방식으로 해결했어요

아이콘 내부 패딩 오탐지 문제

• 문제 : 아이콘 컴포넌트 내부의 패딩이나 간격이 Variable에 연결되지 않았다고 계속 감지되었어요. 아이콘은 구조상 내부 간격을 Variable로 관리하지 않기 때문에 실제로는 문제가 아닌데도 오류로 잡히고 있었어요

• 해결 : 이름에 icon 키워드가 포함되거나 자식 레이어가 모두 Vector 계열로만 구성된 경우를 아이콘으로 판단해 spacing 검사에서 제외하는 방식으로 해결했어요

1.0 레거시 컴포넌트 문제

• 문제 : 숨고는 디자인 시스템이 2.0으로 전환되는 과정에 있었기 때문에 마스터 파일 안에 아직 레거시 컴포넌트가 일부 남아 있었어요. 이 컴포넌트들은 Variable이 연결되지 않은 채 설계되어 있어서 검수할 때마다 대량의 오류로 잡혔어요. 실제로는 문제가 아닌 레이어들이 결과를 가득 채우는 상황이었죠
• 해결 : 이를 위해 제외 목록 기능을 추가했어요. 1.0 컴포넌트 인스턴스를 선택한 뒤 제외 목록에 등록하면, 해당 mainComponent key를 기준으로 같은 종류의 컴포넌트를 이후 검수부터 모두 제외하는 방식이에요

오버레이/모달 구조 문제

• 문제 : 가장 까다로웠던 부분이에요. 확인 모달이나 바텀 시트처럼 오버레이가 있는 화면을 검수할 때, 사용자 눈에 보이는 것은 오버레이 위에 올라온 모달뿐인데 그 뒤에 깔린 화면까지 모두 검수되는 문제가 있었어요
• 해결 : 처음에는 이름에 dim이나 overlay가 포함된 레이어를 만나면 하위 탐색을 중단하는 방식을 시도했어요. 하지만 실제로 테스트해 보니 여전히 모달 뒤의 콘텐츠가 검수되었어요. 원인을 파악해 보니 오버레이 컴포넌트가 앱솔루트 포지션으로 배치되어 있어 피그마 레이어 패널에서는 가장 하단, 즉 높은 인덱스에 위치하고 있었어요. 그래서 레이어 순서 기반으로 접근 방향을 바꾸었어요. children 배열에서 overlay 또는 dim이 이름에 포함된 컴포넌트를 역방향으로 먼저 탐색해 가장 위에 올라온 오버레이 컴포넌트만 검수하고, 나머지는 스킵하는 방식으로 해결했어요

숨겨진 레이어 처리

• 문제 : 디자인을 고민하는 과정에서 미처 지우지 못한 불필요한 레이어도 찾아내 제거할 수 있으면 좋겠다고 생각했어요. 그래서 숨겨진 레이어도 검수할 수 있도록 검수 항목을 추가했어요. 그런데 의도적으로 숨김 처리된 디자인 시스템 컴포넌트의 숨겨진 레이어까지 검수되는 문제가 있었어요
• 해결 : 디자인 시스템 컴포넌트에는 prop 설정으로 인해 의도적으로 숨김 처리되는 레이어가 존재해요. 그래서 INSTANCE 타입은 숨겨진 레이어 검사에서 제외하는 방식으로 해결했어요

Step 3. 플러그인 완성

최종적으로 완성된 플러그인 Soomgo Design Lint는 세 개의 탭으로 구성되어 있어요.

• 검사 항목 탭 : 색상 Variable 미연결, 타이포 Variable 미연결, 간격 Variable 미연결, 레이어 이름 미변경, 숨겨진 레이어까지 총 다섯 가지 항목을 원하는 대로 선택해 검사할 수 있어요
• 결과 보기 탭 : 오류, 경고, 검사 화면 수를 요약으로 보여 주고, 프레임별, 항목별로 문제를 그룹화해 표시해요. 각 항목 옆의 이동 버튼을 누르면 해당 레이어로 바로 이동해요
• 제외 목록 탭 : 1.0 레거시 컴포넌트 인스턴스를 선택해 등록할 수 있어요. 등록된 컴포넌트는 이후 검수에서 자동으로 제외돼요. 등록된 목록은 피그마 플러그인에 누적되어 팀원들과 공유돼요

이렇게 1시간 만에 완성한 플러그인 덕분에 Product Design Team의 검수 프로세스에도 변화가 생겼어요. 이전에는 리뷰어가 화면을 하나씩 클릭하며 눈으로 확인해야 했지만, 이제는 플러그인이 대신 검수해 줄 수 있어 리뷰어를 지정하지 않고도 셀프 검수가 가능해졌어요.

마스터 파일을 업데이트할 때마다 다른 사람의 리소스를 사용한다는 부담도 줄었어요. 또한 플러그인이 자동으로 검수해 주기 때문에 놓치는 부분을 줄이고, 더 안정적으로 마스터 파일을 업데이트할 수 있게 되었어요.

AI와의 협업은 제품을 만드는 과정과 같아요

이번 경험에서 얻은 가장 큰 인사이트는 단순해요. 개발 지식이 없어도 내가 원하는 것을 명확하게 설명할 수 있다면 도구를 직접 만들 수 있는 시대가 됐다는 것이에요.

물론 쉽지만은 않았어요. AI가 코드를 써 주더라도 실제 환경에서 돌려보면 예상하지 못한 문제가 계속 발생했거든요. 하지만 그 문제를 발견하고 원인을 파악해 AI에게 다시 설명하는 과정 자체가 결국 제품을 만드는 과정과 크게 다르지 않았어요. 디자이너로서 문제를 구조화하고 요구 사항을 구체화하는 능력이 AI와 협업할 때도 그대로 쓰인다는 것을 느꼈어요.

저처럼 아무리 작은 불편함이라도 그냥 넘기지 않고 직접 해결해 보는 경험을 꼭 해 보셨으면 좋겠어요.