피그마에 구글 스프레드 시트 연동하기 - 실전편
이론편은 없다! Google Sheet Sync 플러그인 사용기
피그마에 데이터가 뿅하고 들어오는 Google Sheet Sync
피그마 파일에 구글 스프레드 시트를 연동하고 레이어 이름을 맞춰주면 자동으로 시트의 데이터가 피그마에 뿅 들어온다! 기본적인 플러그인 사용 방법은 공식 문서에 잘 정리되어 있으니, 이 플러그인을 처음 보았다면 꼭 한번 읽어보길 바란다.
공식 문서만으로도 플러그인을 사용하기 충분해서 이번 글에서는 기본적인 플러그인 사용 설명은 건너뛰고, 사이드 프로젝트에 실제로 적용하게 된 과정과 예시, 그리고 사용하면서 느낀 점 위주로 글을 정리하려고 한다.
본론에 들어가기 전 사이드 프로젝트에 대해 간단히 설명하자면, 전략적 팀 전투라는 게임을 가이드 해주는 서비스이다. 게임 데이터를 기반으로 여러 가지 유용한 정보를 제공하여 사용자가 게임에서 승리할 수 있도록 도와준다. 게임 속 다양한 챔피언과 아이템 정보를 서비스 내에서 빠르게 볼 수 있으며, 강력한 챔피언 조합을 추천해주는 것이 주요 기능이다. 현재는 최소한의 기능으로 안드로이드 앱만 있는 상태이고, 플랫폼 확장과 디자인 리뉴얼을 진행하고 있다. 아, 게임 회사인 라이엇과는 1도 관련이 없다.
역할 분배 확실한 사이드 프로젝트 팀원들Google Sheet Sync 탐색전
플러그인을 찾아보게 된 계기
팀원들과 회의할 때, 실제 콘텐츠가 담긴 프로토타입을 보면서 이야기하는 것이 꽤나 중요하다고 생각한다. 그래서 디자인 작업 시 실제 콘텐츠를 담는 노고를 마다하지 않았다. 근데 이번엔 상황이 좀 달랐다. 서비스 특성상 필요한 이미지가 엄청나게 많았다. 총 162개의 이미지가 쓰이는데, 문제는 정보를 무작위로 넣으면 알게모르게 이질감이 생긴다. 그래서 콘텐츠 조합이 바뀔 때마다 162개의 이미지를 들여다보며 골라내야 했고, 이미지 뿐만 아니라 텍스트도 일일이 교체하는 작업을 무한 반복했다. 컴포넌트 기능도 최대한 사용해봤지만, 몇십 개의 컴포넌트 중에서 하나씩 찾아 넣는 것 역시 고역이었다. 팀원들에게 완성도 높은 프로토타입을 제공하고 싶은 마음과, 디자이너로서 건강한 심신을 챙기고 싶은 마음 둘 다 지키기 위해서 작업 방식을 개선하기로 마음먹었다.
이 프로젝트에 공수 대비 괜찮을까?
우선 플러그인을 직접 써보면서 사용 각을 쟀다. 프로젝트에 구체적으로 어떤 데이터가 필요한지, 그 데이터의 양이 얼마나 많은지, 구글 스프레드 시트를 다룰 시간이 충분히 있는지 확인했다. 시트 연동도 당연히 공수가 들기 때문에 간단한 디자인 작업은 그냥 피그마에서 처리하는 게 낫다. 하지만 방대한 데이터로 정확한 정보가 담긴 디자인 작업을 해야 하거나, 수많은 텍스트와 이미지 내용을 일괄적으로 자주 넣어줘야 하는 상황이면 시트를 연동하는 것이 장기적으로 좋아보였다. 공수 대비 충분한 가치가 있는 상황이라 판단했다. 이번 기회에 눈 딱 감고 데이터 파일 정리해서 사골 곰탕 우려먹듯 활용해보기로 했다.
개발자 협조부터 얻기
사실상 시트 연동을 위해 제일 먼저 한 일은 '개발자에게 물어보기'였다. 다뤄야 할 데이터가 많은 상황이기 때문에 개발자의 도움이 절실히 필요했다. 물론 데이터를 직접 손수 옮겨 적을 의지도 있었지만, 다행히도 백엔드 개발자 님이 흔쾌히 응해주셔서 수월하게 진행할 수 있었다.
Google Sheet Sync 연동하기
노가다의 늪에 빠진 나를 개발자가 구해주기로 한 후, 본격적인 시트 연동 단계를 추려보면 이러했다.
1. 디자인에서 연동이 필요한 데이터를 추려낸다.
2. 피그마에서 데이터와 연동되는 레이어로 수정한다.
3. 직접 시트에 몇 가지 데이터를 적어가며 연동이 잘 되는지 테스트 해본다.
4. 개발자에게 시트 예시를 전달하며 실제 데이터가 담긴 파일을 요청한다.
5. 받은 파일을 시트에 적용하고 동기화하면 끝!
데이터 시트 구성하기
먼저 필요한 데이터가 무엇인지 추려내고 간단하게 시트 예시를 만들어 피그마에 연동해봤다. 시트를 만들 때중요한 것은 행보다 '열'이다. 디자인에서의 상위 컴포넌트가 시트에서 한 행을 이루게 되고, 상위 컴포넌트 안에 들어가는 모든 데이터는 열로 나열한다. 최상단 열이 곧 레이어 이름이고, 데이터 종류라고 생각하면 편하다. 시트에서 열이 많아질 것 같으면, 겁먹지 말고 열을 무진장 늘려주면 된다. 피그마와 레이어 이름을 맞춰줄 때는 Layer Names Transform 플러그인을 거의 필수로 써야 했다.
시트 안의 셀 데이터에는 개발자가 갖고 있는 로우 데이터 뿐만 아니라, 디자인에 필요한 추가적인 데이터도 필요할 수 있다. 예를 들어, 이미지 데이터가 없을 때 특정 레이어를 숨기고 싶다면 img_frame 열에 /Hide를 입력해야 하고, 데이터가 특정 개수를 넘어갈 때 오브젝트 색이 변경된다면 tag_color 열에 /#FFC700를 입력해야 한다. 단순한 텍스트, 이미지 링크와 같이 기본적인 데이터만 필요하다면 개발이 비교적 간단하지만, 데이터 변수에 따라 디자인에 변동사항이 있다면 개발자가 데이터를 좀 더 손봐야 하기 때문에 추가 설명이 필요하다. 이러한 추가 사항들을 시트에 정리해서 요청했더니 개발자가 그에 맞는 데이터 파일을 뚝딱 만들어 줬다.
참고로, 개발자에게서 단순한 데이터로 이루어진 행53x열18 시트를 받기까지는 15분, 디자인 요소로 인해 복잡해진 행16x열79 시트는 커뮤니케이션 시간 포함 2시간이 걸렸다. 후자는 피그마 레이어 작업조차 꽤 오래 걸렸다. 레이아웃 변동사항이 많을 수록 개발자든 디자이너든 공수가 많이 드는 건 당연하다.
가장 자주 쓰는 데이터 시트의 일부로, 게임 챔피언 52명의 데이터가 담겨 있다.개발자에게서 기본적인 챔피언 정보가 담긴 시트를 받았고, 상황에 따라 시트를 응용해서 쓰고 있다. 챔피언 정보가 필요한 화면들도 각 화면마다 필요한 정보가 조금씩 다르기 때문에 그때그때 사용할 데이터만 골라서 파일 내 별도의 시트를 만들어 적용하고 있다. 챔피언 데이터 시트 외로는 챔피언 조합 시트와 유저 데이터 시트를 사용하고 있다.
연동한 데이터 시트로 UI 작업하기
세 가지 카드 컴포넌트 예시를 통해, 데이터 시트의 열 구성과 실제로 적용한 모습을 구경해보자!
1 - 랭킹 리스트 유저 카드
유저 데이터 시트 동기화 전과 후rank / user_img / user_name / lp / win / lose
가장 단순한 데이터만 담긴 유저 카드이다. 데이터 시트에는 이미지URL과 텍스트로만 이루어져 있으며, 데이터에 따른 레이아웃 변동사항이 없다. 개발자도 추가 수정 없이 기존에 가지고 있는 데이터만 가져오면 된다. 해당 카드를 오토 레이아웃으로 리스트 형태를 만들고 시트를 동기화하면 아래와 같이 만들어진다.
개발자에게 100명의 데이터를 받으면 100명의 리스트를 뿅하고 만들 수 있다!2 - 챔피언 리스트 카드
챔피언 데이터 시트 동기화 전과 후champ_cost / champ_img / champ_name / syn1_frame / syn1_img / ... / syn3_frame / syn3_img
게임 특성상 챔피언별로 1코스트부터 5코스트까지의 가격 정보가 색상으로 들어가야 한다. 그래서 시트에 champ_cost 열을 만들고, 개발자에게 해당 챔피언 코스트 정보를 1부터 5까지의 숫자로 받았다. 그리고 시트에서 직접 색상코드로 일괄 변경해줬다. 색상을 변경하고 싶을 땐 시트에서 직접 바꿔주면 된다.
챔피언별로 우측의 시너지 정보가 최대 3개까지 들어간다. 대부분의 챔피언이 2개의 시너지 정보를 갖고 있지만, 레이아웃을 잡을 때는 최대 개수인 3개에 맞춰준다. 그리고나서 2개의 시너지를 갖고 있는 챔피언의 세번째 시너지 데이터에 /Hide를 적어주면 오브젝트를 숨길 수 있다. 리스트에 적용하면 아래와 같다.
챔피언별 코스트 색상과 시너지 개수대로 잘 들어갔다.3 - 챔피언 조합 카드
챔피언 조합 시트 동기화 전과 후 comps_title / syn1_frame / syn1_img / syn1_color / ... / syn5_frame / syn5_img / syn5_color / champ1_name / champ1_img / champ1_cost / champ1_item_frame / champ1_item1 / champ1_item2 / champ1_item3 / ... / champ9_name / champ9_img / champ9_cost / champ9_item_frame / champ9_item1 / champ9_item2 / champ9_item3
시트의 열이 가장 많이 필요했던 카드 컴포넌트다. 열은 총 81개다. 반복되는 컴포넌트가 많아서 늘어난 것 뿐이지, 별다를 건 없다. 이전 예시와 똑같다. 정보에 맞는 색상 코드를 넣고, 최대 개수를 기준으로 레이아웃을 만들고, 데이터가 없을 경우 /Hide 시켜주었다. 이 카드에 쓰인 데이터 시트는 개발자가 챔피언별로 아이템 이미지가 하나라도 있으면 champN_item_frame열에 /Show를 적어주고, 이미지가 하나도 없으면 프레임을 숨겨야하기 때문에 /Hide를 적어줬다. 이쯤 되면 시트에 추가적으로 손본 건 색상코드와 /Hide가 전부였다 해도 무방하다.
챔피언 조합 카드의 챔피언 컴포넌트 하나를 데이터 시트로 만들려면 7개의 열이 필요하다.Google Sheet Sync 사용 후기
완전 좋다!
더 이상 화면을 만들 때 이미지와 텍스트를 갈아끼우기 위해서 애쓰지 않아도 된다. 플러그인이 나온지 1년이 다 돼가는 지금에서야 써본 게 후회된다. 프로젝트마다 상황은 다르겠지만, 디자인 작업에서 다뤄야 할 데이터의 견적이 크게 나온다 싶으면 무조건 시트 연동을 고려해서 작업에 들어가야겠다.
디자인 작업의 일부를 문서 작업으로 옮기니까 작업 방식이 좀 더 체계적이고 구조화된 느낌이 들었다. 원래는 눈 앞에 보이는 화면부터 만들기 급급했는데, 개발자에게 데이터를 요청하는 과정에서 전체적으로 필요한 데이터를 추려내고, 최종적인 레이아웃 틀을 생각하게 되니 머릿 속으로 큰 그림이 비교적 잘 그려졌다.
기능 상의 사소한 단점
시트에 피그마 컴포넌트 이름을 넣으면, 해당 레이어는 컴포넌트로 대체되고 시트 동기화가 불가능해진다. 만약 기존에 생성해둔 피그마 컴포넌트를 주로 사용해야 한다면, 플러그인 사용을 한번 더 고민해봐야 할 것 같다. 비슷한 문제로 /Hide된 레이어는 다시 시트와 동기화할 때 /Show를 입력하지 않는 이상 숨겨진 상태를 유지한다. 비교적 까다로운 데이터 시트가 담긴 레이아웃일 경우, 재동기화했을 때 데이터가 생각대로 들어오지 않을 경우가 많다. 그래서 데이터 동기화 전의 레이아웃으로 디자인을 잡고 최종 화면을 확인할 때마다 동기화했다.
이미지 URL 링크가 열리지 않을 때 시트와 동기화하면 이미지가 들어오지 않는다. 만약 링크가 많이 불안정한 상태라면, 이미지 파일을 피그마 컴포넌트로 만들어서 링크 대신 컴포넌트를 불러오거나, 연동을 포기하고 그냥 이미지 파일을 쓰는 게 낫겠다.
시트 안의 '데이터 자체'를 자주 교체 해줘야 하는 상황이라면 매번 개발자에게 파일을 요청해야한다. 근데 그럴 경우가 많이 있을 지는 잘 모르겠다. 시트 하나 받아놓고 우려 먹는 상황이 더 많을 것 같다.
부록
구글 스프레드 시트 필요한 만큼만 다루기
엑셀 종류의 파일을 다뤄본 적이 없어서 사소한 기능도 일일이 검색해야 했다. 아래 내용은 기본적인 기능이지만, 피그마를 위한 시트 수정으로는 이것만으로도 충분했다. 구글 스프레드 시트를 다루게 될 디자이너 분들의 검색 노고를 조금이라도 덜 수 있었으면 한다.
셀 일괄 변경하기
셀 데이터를 찾고 내용을 일괄 변경할 수 있다.
Ctrl + F > 더보기 버튼
빠르게 열 추가하기
한 컴포넌트 안에 들어갈 요소가 많으면 시트에서 열을 수정할 일이 많기 때문에 알아두면 좋다.
행 선택 후 > 단축키 Alt + i 누른 뒤 o 또는 행 선택 후 > 우클릭 > 오른 쪽에 n열 삽입
데이터에 접두사, 접미사 붙이기
개발자에게 받은 데이터에 단위가 없을 때 직접 추가할 수 있다.
행 선택 후 > 서식 > 숫자 > 추가 형식 > 맞춤 숫자 형식 > @ 입력 후 @ 앞 뒤로 원하는 내용 입력
중복 항목 삭제
카테고리 이름을 추려낼 때 사용했다.
데이터 > 중복 항목 삭제
셀에 텍스트 넘치지 않게 담기
모든 이미지를 URL로 넣기 때문에 기다란 링크를 숨겨주면 시트 보기에 좋다.
서식 > 텍스트 줄 바꿈 > 자르기
상단 레이어명 고정하기
레이어 이름이 적힌 최상단 행을 고정해주면 보기에 좋다. 물론 열 고정도 된다.
행 선택 후 > 보기 > 고정 > 행 1개
중복값 셀 서식 변경하기
셀 중요도에 따라 글자색이나 배경색을 달리 해주면 시트를 빠르게 훑어볼 때 좋다.
서식 > 조건부 서식 > 범위에 적용 A1:ZZ100, 형식 규칙 '텍스트에 포함'
