간결하게 업무하기 : Google Sheets Sync
피그마 플러그인 알차게 활용하기
01. 세상엔 배울 게 진짜 많다
PM인 저는 와이어프레임 제작에 필요한 피그마 사용법을, 프로덕트 디자이너인 다혜님은 제품 분석에 필요한 데이터 추출 목적의 SQL 사용법을 배우고 싶었습니다. 마침 서로가 잘 알고 있는 영역이었습니다. 그래서 3주 간 월요일 점심시간을 활용해 미니 스터디를 진행했습니다. 이름하야 "세상엔 배울 게 진짜 많다" (진짜 많습니다)
평소 이론으로는 알아도 막상 몇 번 써보지를 않아 헷갈렸던 부분 위주로 질문드렸습니다. (ex. Hug / Fill / Fixed 개념, Master Component - Instance) 정말 감동 포인트는- 제가 질문 드린 것 외에도 제 업무 비효율 해소에 도움이 될 만한 것들을 먼저 찾아서 알려주셨습니다. 감사하면 보답하는 게 인지상정(?). 알려주신 것을 바로 업무에 활용해 서로의 업무 시간을 크게 단축할 수 있었습니다. 다혜님이 알려주신 것은 Google Sheets Sync라는 플러그인인데요. 494번의 반복이 필요했던 것을 13번으로 줄였습니다.
사실 [반복 작업의 제거]는 업무 자동화의 기본 중 기본입니다. 그래서 '기록할 만한 토픽은 아닌 것 같은데.. 너무 단순한 것 아닌가' 싶어 발행을 할까말까 잠깐 망설이기도 했는데요. 배운 것을 실무에 적용하면서 효용을 체감했던 경험을 기록해두는 데에 의의를 두고자 남겨둡니다.
일을 하다보면 1) 기반 세팅하는 게 귀찮아서 2) 복붙하면 당장은 빨리 끝낼 수 있을 것 같아서 => 장기적인 관점의 업무 효율성 개선을 무시하게 되는 경우도 (부끄럽지만) 종종 있거든요. 가끔 제 발로 이 글을 찾아와서 이 작고 소중한 성취 경험을 떠올리며 일의 태도를 바로 잡아보겠습니다.
02. Google Sheets Sync : 언제 쓰나요
Google Sheets Sync는 구글 스프레드 시트에 있는 데이터를 피그마에 있는 프레임에 싱크, 즉 한번에 옮길 수 있는 플러그인입니다. 상품 카드나 표 등 반복되는 구조의 UI에 데이터를 여러 번 옮겨야 할 때 아주 유용합니다.
[썸네일 이미지, 제목, 설명, 가격]의 동일한 구조로 데이터가 반복된다사실 정규 제품에 대한 기획서를 작성할 때에는 화면에 들어가야 할 대량의 데이터를 피그마에 바로 넣을 일이 없습니다. 서버에서 데이터를 받아와 표기하기 때문에 데이터의 집계/표시법에 대한 설명을 작성하곤 합니다. 다만 개발 리소스 없이 빠르게 실험하기 위해 PM과 디자이너가 [이미지 제작 + 이미지만으로 이루어진 노코드 웹사이트 (ex. 우피, 웹플로우)]를 제작할 때에는 이미지에 데이터를 모두 표기해야 하는 경우가 종종 있습니다. 그럴 때 유용하게 사용할 수 있습니다.
03. Google Sheets Sync : 어떻게 쓰나요
(참고) 상세한 사용법 문서는 아래를 참고하세요
사용법은 크게 아래 3단계입니다.
다혜님이 만들어주신 교안1단계 : 데이터 들어갈 그릇 만들기
반복 데이터가 들어가야 하는 layer의 이름 앞에 #을 붙입니다.
이름을 붙여준 layer가 모여 component가 될텐데요, 반복되어야 하는 만큼 component를 복사해서 instance로 만듭니다.
2번 반복된다고 가정하고 instance는 2개만 만들었습니다.2단계 : 담을 데이터 준비하기
구글 스프레드 시트 파일을 만든 다음, 1단계에서 지정한 layer의 이름에서 #을 뺀 형태의 텍스트를 1행에 작성합니다. #author 레이어에 들어가야 할 저자 이름을 넣을 컬럼의 첫 행에 author라고 작성하는 것입니다.
3단계 : 그릇과 데이터 연결하기
Figma 좌측 상단 메뉴 > Plugins > Manage Plugins > 'Google Sheets Sync' 검색해서 RUN을 클릭합니다.
'Enter sheets Sharable Link Here..' 부분에 2단계에서 제작한 구글 스프레드 시트의 링크를 붙여 넣습니다. 중요한 것은 링크 액세스 권한에 제한이 없어야 한다는 점입니다.
링크를 붙여 넣은 다음 Fetch & Sync 버튼을 클릭하면 끝입니다.
*실습 사례에서는 이미지 반복이 생략되었는데, 필요시 스프레드 시트에 이미지 소스 링크를 넣으면 Sync 기능을 동일하게 사용할 수 있습니다.
시트 데이터가 피그마로 잘 옮겨졌습니다04. 소소한 것이어도 실제로 써보기
부족한 내공 속에서도 나름의 경험을 쌓다보니 분명하게 느끼는 점은 1) 배울 것은 많고 2) 배우는 것보다 체화하는 게 중요하다. 라는 점입니다. 혁신적인 방법을 쓰는 것만큼이나, 소소한 것이어도 실제로 써보는 습관을 들이는 것이 귀한 경험이 된다는 걸 조금씩 배워나갑니다.
