피그마 워크플로우를 15% 더 효율적으로 만든 방법
해당 아티클을 번역한 내용입니다.
딜리버루(Deliveroo)의 경험 팀은 피그마(Figma)를 캔버스로 활용합니다. 우리의 생각을 한 곳에서 포착하고, 반복하고, 커뮤니케이션하죠. 실제 제품 디자인 외에도 어떠한 파일이든(특히 '작업 중'인 파일) 포함될 수 있습니다:
1. 프로젝트 맥락(예시: 문제, 사용자 여정 등)
2. 피그마 외부에서 생성된 관련 링크 (예: PRD(Product requirements document), 사용자 테스트 비디오, 타임라인 등)
3. 콘텐츠 탐색 및 설명
4. 엔지니어링 사양, 기술적 제약 사항 및 지라(Jira) 위젯
5. 초기 디자인 반복
6. 로컬라이제이션 변경
*로컬라이제이션(Localization): 콘텐츠가 인식되는 방식에 영향을 미치는 번역, 관련 이미지, 문화적 요소를 포함하여 콘텐츠의 전체 의미를 새로운 지역에 맞게 조정하는 프로세스
파일의 세부 사항을 커뮤니케이션하고 콘텐츠를 정리하는 데 모두가 약간씩 다른 접근법을 가지고 있지만, 위 목록에 설명된 것처럼 대부분이(모두는 아닐지라도) 어떤 형태로든 피그마 안에서 생각을 주석으로 달아놓습니다.
모든 사람의 시간을 절약하기 위해, 우리는 파일 관리 라이브러리를 구축하여 우리 디자인에 더 많은 맥락을 제공하고 비즈니스 전반에서 사람들이 파일을 더 효율적으로 탐색할 수 있도록 도왔습니다(Tanya Hirst, 디자이너).
쉽게 접근할 수 있는 스티키 노트, 인용 블록 및 기타 유용한 기능을 사용하면 사람들이 실제로 작업에 주석을 달도록 더 근면해지는 것을 촉진했으며, 이는 엔지니어, PM 및 서로와의 협업에 긍정적인 영향을 미쳤습니다.
특히 큰 프로젝트에서는 파일을 깔끔하게 유지하는 데 매우 편리하게 사용되었습니다. 그 결과로 엔지니어들과의 비동기적 커뮤니케이션이 훨씬 원활해졌습니다(Early Attoh, 디자이너).
라이브러리에서 가장 인기 있는 섹션은 작업을 구조화하고 문서화하기 위해 6가지 카테고리를 갖춘 문서 페이지입니다.
파일 관리 라이브러리 사용법 예시1. 섹션(Sections)
우리는 파일의 흐름을 분리하기 위해 배너를 사용합니다.
5가지 컬러 배너 옵션 중 1개닐슨 노먼 그룹(Nielsen Norman Group)에 따르면, 정보를 그룹으로 나누면 더 쉽게 처리하고 보관할 수 있습니다. 유저 플로우나 기타 고유한 개념을 명확한 섹션으로 분리하면 파일 탐색이 더 쉬워질 수 있습니다. 5가지 색상 옵션 중에서 선택하여 아이디어를 생생하게 표현해 보세요.
섹션 배너와 하이라이트는 우리가 일하는 방식을 개선하는 게임체인저였습니다. 하루 종일 컨텍스트를 전환한 후에 저는 피그마 파일에 들어가 즉시 방향을 잡고 디자인에 몰입할 수 있었습니다(Sarah Roach, 프로덕트 매니저).
2. 플로우 세부사항(Flow details)
우리는 이러한 컴포넌트를 사용하여 플로우의 시작과 상태(예: WIP(Work In Progress), 완료, 아이디어 등)를 문서화합니다. 어떤 사람들은 섹션 배너 대신 이것을 사용하는 것을 선호하고, 어떤 사람들은 두 가지를 함께 사용합니다. 플로우 세부사항은 기기 유형에 따른 변형을 표시할 때 유용합니다.
6개의 흐름 세부 구성 요소 중 3개3. 화면 세부사항(Screen details)
플로우 세부사항과 유사하게 이를 사용하여 개별 화면에 대한 세부 사항을 문서화합니다. 이는 현재 제품에 적용되는 디자인과 향후 개선해야 할 아이디어를 구별하는 데 도움이 됩니다.
4. 메모(Notes)
우리 라이브러리에는 메모 작성을 쉽게 하고 디자인과 주석을 구별하는 데 도움이 되는 몇 가지 유형의 컴포넌트가 있습니다. 하나를 선택하거나 모두 함께 사용하여 파일 전체에서 다양한 유형의 콘텐츠를 전달하세요.
5. 하이라이트(Highlights)
하이라이트를 사용하여 현지화, 변경 사항 또는 완전히 새로운 것 등 주의가 필요한 작은 사항을 가리킵니다.
요소를 돋보이게 하기 위해 사용하는 6가지 하이라이트 중 4가지6. 링크된 자료(Linked resources)
우리는 리서치, 문서 및 기타 관련 리소스를 피그마로 가져오는 더 나은 방법을 원했습니다. 그래서 우리는 다양한 유형의 외부 콘텐츠 및 컨텍스트에 연결하기 위해 다양한 컴포넌트를 만들었습니다.
파일 관리 라이브러리는 팀에서 큰 인기를 얻었습니다!
'파일 관리'라는 이름을 보고 흥분해서 두 손을 비비는 제 모습을 보게 될 줄은 꿈에도 몰랐습니다. (Oli Puttick, 디자이너)
가장 인기 있는 파일 관리 요소에 대한 일부 데이터(2023년 1월 6일 기준)이러한 컴포넌트는 우리를 더욱 효율적으로 만듭니다. 숫자를 살펴볼게요…
피그마 에셋 패널에서 하이라이트 컴포넌트를 가져오는 데 평균 3~5초(4초라고 가정)가 걸립니다(시간을 재봤습니다).
반면에 처음부터 비슷한 주석을 만드는 데는 약 20~30초가 걸립니다(25초라고 하죠). 2022년 딜리버루의 피그마 전체 하이라이트 인스턴스(3,787개)를 살펴보면, 파일의 디자인이나 기타 변경 사항을 전달하기 위해 개별 주석을 만드는 데 총 26시간이 소요되었을 것입니다.
3,787 x 25초 = 94,675초. 94,675/60초 = 1,577.91667분. 1,577.91667/60분 = 26.2986111시간
하이라이트 컴포넌트 덕분에 우리는 4시간을 소비했습니다!
3,787 x 4초 = 15,148초. 15,148/60초 = 252.466667분. 252.466667/60분 =
4.20777778시간
자체 시스템을 개선하는 동안 염두에 둔 몇 가지 사항은 다음과 같습니다.
주석은 "실제 UI 요소보다 눈에 띄어야, 한눈에 쉽게 알아볼 수 있습니다"(Tanya Hirst, 디자이너).
[컴포넌트]는 너무 "압도적이어서 화면에서 초점을 빼앗아"서는 안 됩니다(Grant McAllister, 디자이너).
이러한 균형을 유지하려면 색상과 타이포그래피를 사용해 보세요.
여러분(및 여러분의 팀)의 작업 흐름을 자동화하는 방법을 찾고 계시다면 라이브러리를 다운로드하시고, 질문이 있거나 우리 팀에 대해 더 알고 싶으시면 언제든지 연락 주세요.
