쇼피파이에서 협업을 (새 탭에서 열림)

Shopify는 Figma 파일을 팀 간 협업의 공용 작업 공간으로 활용하기 위해, 프로젝트 상태와 산출물을 일정한 구조로 정리하는 템플릿을 사용한다. 이 템플릿은 GSD(Get Sh*t Done)의 Think–Explore–Build 프로세스를 기반으로 하며, 실제로 구현할 결과물을 가장 앞에 배치해 필요한 정보를 빠르게 찾도록 설계됐다. 핵심은 파일마다 예측 가능한 구조와 상태 표시를 적용해 디자인·제품·엔지니어링 팀의 커뮤니케이션 비용을 줄이는 것이다.

일관된 파일 구조가 필요한 이유

• Figma는 협업을 쉽게 만들지만, 시간이 지나면서 파일과 산출물이 많아지면 다음과 같은 문제가 생긴다.
  • 어떤 디자인이 최신인지 파악하기 어렵다.
  • 특정 레이아웃이 승인됐는지 알기 어렵다.
  • 실제 구현 대상과 사용자 테스트용 프로토타입을 구분하기 어렵다.
  • 제품 관리자, 엔지니어, 다른 디자이너가 필요한 정보를 찾기 어렵다.
• Shopify는 팀마다 다른 파일 정리 방식을 사용하는 문제를 해결하기 위해 공통 템플릿을 만들었다.
• 일정한 형식은 여러 팀이 파일을 탐색할 때 기대할 수 있는 공통 규칙을 제공하고, 프로젝트 초기 설정 시간도 줄여준다.

GSD 프로세스와 템플릿의 페이지 순서

• Shopify의 GSD 프레임워크는 세 단계로 구성된다.
  • Think: 문제와 배경을 이해한다.
  • Explore: 다양한 해결책을 탐색한다.
  • Build: 선택한 해결책을 구체화하고 출시한다.
• 템플릿의 페이지는 이 순서와 반대로 구성된다.
  • 가장 중요한 구현 준비 상태의 결과물을 파일 앞부분에 둔다.
  • 사용자가 파일을 열었을 때 최근 작업과 실행 가능한 결과를 먼저 확인할 수 있다.
• 새 파일을 만들 때는 표지와 프로젝트 개요를 먼저 작성한 뒤, Think 섹션의 정보를 채우는 방식으로 시작한다.
• Explore 단계에서는 필요한 만큼 페이지를 만들고 자유롭게 실험한다.
• Build 단계에 들어가면 Explore에서 선택된 페이지나 레이아웃을 Build 섹션으로 이동한다.

표지: 프로젝트의 현재 상태를 한눈에 표시

• 새 Figma 파일을 만들 때 표지를 먼저 구성한다.
• 표지에는 다음과 같은 정보를 담는다.
  • 프로젝트명
  • 담당 팀
  • 프로젝트 상태
• Figma 프로젝트의 그리드 보기에서도 파일을 쉽게 식별할 수 있다.
• 프로젝트가 진행될 때마다 상태 표시를 갱신해야 현재 단계가 혼동되지 않는다.

프로젝트 개요: 배경과 담당자 연결

• 개요 페이지에는 프로젝트를 이해하는 데 필요한 추가 정보를 제공한다.
• 포함할 수 있는 내용은 다음과 같다.
  • 관련 문서와 리서치 링크
  • 프로젝트 브리프
  • 피드백을 줄 담당자
  • 질문이나 문의를 전달할 연락처
• 필요에 따라 섹션과 항목을 추가하거나 삭제할 수 있다.
• Figma 문서에 문서 링크나 Slack 프로필 링크를 붙여 넣으면 관련 앱을 바로 열 수 있어 탐색 과정이 단순해진다.

Think: 문제 공간과 프로젝트 기반 정리

• Think 섹션은 탐색을 시작하기 전에 문제와 맥락을 정리하는 공간이다.
• 다음과 같은 자료를 모을 수 있다.
  • 사용자 플로우
  • 고객 여정 지도
  • 잡 스토리(job story)
  • 디자인 스프린트 결과물
  • 과거 디자인이나 영감을 위한 스크린샷
  • 관련 외부 문서 링크
• 이 단계의 목적은 해결책을 바로 결정하는 것이 아니라, 탐색에 필요한 정보를 한곳에 모아 프로젝트의 기반을 만드는 것이다.

Explore: 다양한 아이디어를 실험하고 피드백 수집

• Explore는 여러 해결책을 넓고 깊게 시도하는 작업 공간이다.
• 협업과 댓글, 피드백이 가장 활발하게 발생하는 영역으로 활용한다.
• 효과적인 정리를 위해 다음 규칙을 적용할 수 있다.
  • 태블릿·모바일처럼 기기나 화면 형태가 다르면 별도 페이지로 나눈다.
  • 탐색 결과와 사용자 플로우에 제목을 붙여 내용을 명확히 한다.
  • 진행 상태를 나타내는 배지를 추가한다.
  • 새 페이지마다 날짜를 기록해 최신 작업인지 확인할 수 있게 한다.
  • 사용자 테스트용 프로토타입은 별도 페이지로 관리한다.
  • 스티키 노트로 메모, 아이디어, 피드백, 후속 작업을 기록한다.
• 이 단계에서는 가능한 접근법을 많이 시도한 뒤, 피드백을 바탕으로 구현할 방향을 좁혀 간다.

Build: 선택된 결과물을 구현 단계로 이동

• Build는 탐색을 마친 뒤 적절한 해결책을 구체화하고 출시 및 피드백으로 연결하는 단계다.
• Explore에서 검토한 여러 시안 중 실제로 진행할 페이지나 레이아웃만 Build 섹션으로 이동한다.
• 이를 통해 실험 중인 아이디어와 구현 대상으로 확정된 결과물을 명확히 분리할 수 있다.
• 파일 앞부분에 Build 관련 결과물이 배치되므로 다른 직군도 현재 구현 대상과 프로젝트 진행 상황을 빠르게 파악할 수 있다.

팀 단위로 Figma를 운영한다면 표지, 개요, Think–Explore–Build 섹션을 기본 템플릿으로 정하고, 날짜·상태 배지·담당자·관련 링크를 의무적으로 기록하는 방식이 실용적이다. 특히 Explore의 자유로운 실험 공간과 Build의 확정 산출물을 분리하면 최신 디자인과 구현 대상을 찾는 데 드는 커뮤니케이션 비용을 크게 줄일 수 있다.