스타트업에서 피그마(Figma)를 써보니
BX디자이너의 피그마 입문기
BX디자이너인 내가 왜 UXUI디자인을 공부하는지는, 지난 이야기에서.
혹시
피그마는 알아요?
동료 개발자가 물었다. '예..? 피그마요? 마그마는 들어봤는데요...' 들어보니 요즘 UI 디자인 분야에서 급부상하는 툴이라고 한다.
"모르지만 제가 툴은 금방 배우거든요. 대학에서 UXUI 디자인을 배우기도 했고요." (라며 일단 자신만만해 했다) 회의실에서 나와 자리로 돌아오자마자 피그마 계정을 만들고 PC앱을 설치했다.
피그마가 뜨는 이유
피그마(Figma)는 웹과 모바일 UI/GUI 디자인을 위해 만들어진 프로그램이다. 피그마는 시장에 늦게 뛰어들었지만 뛰어난 협업 시스템으로 급부상하고 있다. 클라우드 형식으로 여러 명이 동시에 디자인에 참여할 수 있고, 무엇보다 개발 코드를 바로 확인할 수 있어 개발자와 함께 사용하기 좋다. 동료 개발자가 피그마를 빠르게 업무에 도입한 이유다.
오른쪽 상단 Inspect를 클릭하면 코드를 바로 확인할 수 있다1년 가까이 써보니
피그마와 함께 일 한지 어느새 1년이 다 되어 간다. 이제는 꽤나 익숙한 툴이 되었다. 스케치나 제플린 같은 타 툴을 사용해본 적이 없어서 비교는 어렵겠지만 '이거 때문에 업무 효율이 올라가는구나!' 라고 생각한 기능 3가지를 적어보려 한다.
➊ 팀 라이브러리
자주 사용하는 에셋은 물론 폰트와 컬러까지 저장하고 일괄적으로 수정도 할 수 있는 기능이다. 프로젝트 파일에서도 컴포넌트를 사용해 어느 정도 일괄 수정이 가능하지만 컴포넌트에 사용되거나 개별로 사용된 폰트와 컬러까지는 불가능하다. 팀 라이브러리를 사용하면 모두 가능하다. 다만 유료 결제가 필요하다.
팀 라이브러리에 공통적으로 사용할 디자인 요소를 추가하고 Publish를 한다. 연동된 계정으로 만든 프로젝트 파일에서 활성화하면 추가한 요소를 가져다 쓸 수 있다. 폰트 줄간격을 수정하거나 컬러 코드를 바꿀 때, 효과 속성값을 미세하게 조정할 때, 정말 쉽고 빠르게 모든 디자인에 반영할 수 있다.
내가 입사하기 전, 우리 회사는 팀 라이브러리에 폰트와 컬러만 추가해서 사용했다. 그대로 인수인계를 받은 나는 당연히 그렇게만 쓰는 줄 알았는데... 이번 글을 쓰기 위해 기능을 조사하다가 (어쩌면 당연하게도) 컴포넌트 같은 에셋까지 관리할 수 있다는 사실을 알게 되었다. 이번 리뉴얼만 완료되면 프로젝트 파일에 만든 디자인 시스템을 정리하면서 팀 라이브러리로 옮겨야겠다. 프로젝트 파일에 에셋을 팀 라이브러리로 바로 이동시킬 수는 없든데...
➋ 댓글
빠른 개편을 위해 우리는 디자인과 개발을 거의 동시에 진행하고 있다. 당연히 와이어 프레임을 짠 다음 디자인에 들어가지만, 에셋을 배치하고 컬러와 이미지를 넣다보면 디자인이 수정되는 경우는 빈번하다. 이럴 때 수정사항을 한번에 정리해서 전달하면 좋겠지만, 개발자가 코드 작업을 하기 전에 최대한 빠르게 알리는 게 우리에겐 더 효율적이다.
슬랙이나 노션같은 툴을 사용한다면 우선 디자인을 캡처하고 수정되는 부분을 체크해주고 설명도 적어주어야 한다. 하지만 피그마에서는 수정된 지점을 정확하게 찍어 전달하니 직관적이고 빠르게 팔로우업이 가능하다.
➌ 오토레이아웃
처음엔 짜놓은 틀 안에서 조정하는 일이 오히려 다루기 까다롭다고 생각했는데, 이제는 정말 없어서는 안 될 기능이다. 오토레이아웃을 사용하면 설정한 간격을 유지하면서 텍스트 길이나 에셋 순서를 바꿀 수 있다. 버튼 속 문구를 바꿀 때나 카드 안에 상품 제목과 상세 정보 순서를 바꿀 때, 간격을 다시 조정하지 않아도 된다.
아쉬운 점은
디자인할 때 하이퍼링크가 들어가는 텍스트에는 밑줄 스타일을 적용한다. 굳이 부가적으로 설명하지 않아도 하이퍼링크임을 알리기 위해서다. 텍스트는 당연히 팀 라이브러리에 추가한 폰트를 사용한다. 그런데 팀 라이브러리로 묶인 폰트는 밑줄 적용할 수 없다? 그러려면 팀 라이브러리 연결을 끊고 밑줄을 긋거나, 밑줄이 적용된 폰트를 팀 라이브러리에 추가하는 방법 밖에 없다. 두 방법 모두 유쾌하진 않다. 특히 개발자에게.
먼저 연결을 깨서 사용하는 방법은 개발자가 바로 폰트 이름을 확인하지 못한다. 원활한 소통을 위해 디자이너는 세팅한 폰트 속성에 고유한 이름을 부여하고, 개발자는 초기 세팅을 완료하고 나서는 폰트 이름으로 디자인을 적용한다. 그런데 팀 라이브러리 연결을 끊어버리면 폰트 이름을 확인하지 못한다.
팀 라이브러리에 밑줄 폰트를 추가하는 방법은 불필요하게 옵션을 늘린다. 예를 들어 P-16이라 정의한 폰트와 속성은 똑같은데, 단지 밑줄 스타일을 적용했기 때문에 P-16-hyper라는 폰트를 추가해야 한다.
일단 하이퍼링크를 고정으로 사용할 만큼 많지는 않으니, 팀 라이브러리에 추가해 옵션을 늘리기 보다 아쉬운대로 연결을 깨고 사용하기로 했다. 글자 크기와 두께 값을 보고 폰트 이름을 확인해 적용하고 있다. 정녕 해결 방법이 없는지 검색을 해봤지만 찾지 못했다. (혹시 방법을 아신다면 댓글 부탁합니다…!)
실무에 도움 될
작은 꿀팁
➊ 디자인을 이미지로 공유할 때 : Copy as PNG
피그마를 사용하지 않는 동료에게 진행상황을 공유할 때가 생긴다. 그 때마다 스크린샷을 찍어 보냈는데, 문제는 긴 화면을 한번에 캡처할 수 없으니 끊어서 공유해야 한다는 점이었다. 게다가 진행상황을 캡처해 업무일지를 기록하는 나로서는, 디자인하는 페이지 양이 늘어날수록 캡처하는 시간도 늘어났다. 설마 이미지로 저장하는 기능이 없을까 싶어 평소 유심히 보지 않았던 오른쪽 버튼 메뉴 맨 아래를 봤다. 그제서야 발견하게 된 Copy as PNG 기능. 단축키는 cmd+shift+c다. 저장을 원한다면 [File - Export]를 사용하면 된다. 단축키는 cmd+shift+e.
➋ 프로토타입에서 헤더와 버튼을 고정할 때 : Fix position when scrolling
사용자는 웹과 모바일 서비스를 이용할 때 화면에 걸린 내용만 본다. 하지만 디자이너는 헤더부터 푸터까지 한눈에 보면서 작업한다. 그러다보니 실제 화면에서는 어디까지 보이는지 틈틈이 프로토타입을 통해 확인하는 과정이 필요하다.
피그마는 한 플랫폼 안에서 손쉽게 프로토타입을 만들 수 있어 편리하다. 액션을 취하면 어떻게 반응하고 어디로 이동하는지, 간단한 애니메이션과 함께 실물과 가깝게 점검할 수 있다. 다 좋은데 스크롤 할 때마다 내려가는 헤더와 하단 고정 버튼이 불편했다. 개발자에게 프로토타입을 보여줄 때마다 '원래 이 페이지에는 헤더가 이렇게 고정돼요.' 혹은 '이 버튼은 하단 고정이에요.' 라고 설명해야 했다.
(CGV앱을 예시로) Fix position when scrolling를 설정하지 않은 경우그러던 어느날, 갑자기 업데이트가 된 걸까...? 아니면 필요할 때 유심히 찾아보니 그제서야 발견한 건지. Constraints 아래 Fix position when scrolling라는 문구가 눈에 들어왔다. 고정하고 싶은 요소를 클릭하고 체크박스를 활성화하면 레이어가 Fixed와 Scrolls로 나뉜다. 그리고서 프로토타입을 재생하면 헤더와 하단 버튼이 고정된 모습을 확인할 수 있다.
Fix position when scrolling를 설정한 경우자주 찾아보고
많이 만들어 보자
피그마를 업무에 활용하면서 도움이 되었던 기능 몇 가지를 경험에 빗대어 소개해보는 시간을 가져보았다.
글 초반에 내가 툴을 빨리 배운다고 자신있게 말한 이유는 일단 만들어보면 할 수 있다는 믿음 때문이었다. 지금까지 모든 툴을 이런 마음가짐으로 배웠고, 디자인 툴이 대부분 비슷한 구조와 기능을 가지고 있어서 접근이 쉽다는 특징도 있다.
처음 피그마로 업무할 때도 당장 필요한 기초만 유튜브 영상으로 찾아보고 바로 만들기 시작했다. 물론 시행착오도 많았지만 애초에 수십가지나 되는 모든 기능을 마스터하고 작업하기란 불가능하다. 어려움이 생길 때마다 해결방법을 찾아보며 배우는 게 좋다고 생각한다.
피그마를 포함해 사용하는 툴이 어느 정도 손에 익은 요즘, 다시 한번 툴을 살펴보는 시간도 필요하겠다는 생각이 들었다. 그렇지 않으면 익숙한 기능만 쓰게 되니까. 뒤늦게 더 효율적인 방법을 알게 되어 아쉬웠던 적도 많았다. 물론 어떤 툴로 디자인을 했느냐 보다 어떤 의도로 디자인을 했느냐가 더 중요하다. 하지만 새로운 툴과 기능이 시간과 노력을 아껴주거나 생각을 더 효과적으로 전달하도록 도와주기도 한다. 틈틈이 관련 글이나 영상을 찾아보면서 새로운 방법을 습득하는 노력도 필요하겠다.
기능과 사용법을 설명해 놓은 피그마 홈페이지. 자주 들어가서 봐야지.
