41일~45일차 스터디: 프론트도 피그마는 알아야지.

🚩Design Handoff 

디자인 핸드오프란, 디자이너가 디자인 작업물을 넘길 때 다른 팀원들이 원활히 사용할 수 있도록 전달하는 과정을 말합니다. 이 과정에서 디자인 파일, 이미지, 스펙, 가이드 등이 전달되며 개발자와 디자이너 간의 빠르고 정확한 소통이 몹시 중요해집니다. 나쁜 핸드오프는 팀원 간의 불화를 일으키고, 레이아웃을 어지럽히고, 작업 시간을 늦춥니다. 그럼에도 완성된 작업물을 세상에 내놓기 위해서는 디자인 핸드오프 과정을 빼놓을 수 없습니다. 

 

이처럼, 반드시 필요하지만 불협화음이 자주 생기는 과정에 도움을 주기 위해 등장한 것이 피그마 툴입니다. 피그마를 사용하면 실시간으로 편리하게 협업이 가능하여 자연스럽게 많은 개발자와 디자이너들이 이용하게 되었죠. 즉, 개발자가 디자인에 100% 전념하지 않더라도, 디자이너와 함께할 수 있을 정도로는 피그마를 이해하여 협업에 뛰어들 준비는 되어있어야 한다는 것입니다. (또 어떤 환경에서는 개발자가 디자인까지 해야겠죠...Oh...)

내 담당이 아니라고 미루며 아주 무지할 수는 없다고요!

 

따라서 이왕 피그마를 배운 거 좀 더 딥하게 들어가보기로 했습니다. 언제 또 이런 기회가 오겠습니까?

상세한 컴포넌트를 만들거나 기능을 추가하는 방법은 관련강좌를 찾아보면 될 것 같습니다. 이 포스팅에서는 개발자가 디자이너 측과 협업을 하기 위해 그래도 이정도는 알아야 할 것 같다는 기능만 12가지로 모아보았습니다. 

 

 

🚩오늘의 목표: 협업할 때 수치스럽지 않을 정도로 피그마를 다루자!

1) 파일 즐겨찾기 : 내가 작업하고 싶은 것들을 좌측에 정렬

상세 페이지에 들어가기 전에 원하는 파일의 우측에 있는 별표를 클릭합니다. 이렇게 북마크한 파일들은 화면의 좌측에 정렬되는데요. 주력으로 작업하는 프로젝트가 있다던가, 자주 보길 원하는 파일을 효율적으로 모아볼 수 있습니다. 

무료 피그마는 3개 파일까지만 제공하지만 대부분의 회사에서는 유료 피그마를 씁니다. 따라서 관리하는 파일이 많아지면 많아질수록 그만큼 당장 원하는 파일을 찾을 때 시간이 소요되니, 이와 같이 북마크를 잘 활용하면 편리합니다.

 

 

2) 피그마 APP: 자꾸 인터넷이 끊길 때

피그마는 figma.com에서 바로 사용할 수 있습니다.

하지만 부득이하게 인터넷이 불안정한 환경이라면 어떨까요? 작업하던 파일이 불안정한 네트워크 때문에 한순간에 날아가버리는 불상사가 발생하면 곤란합니다. 이를 위해 나온 것이 데스크탑 APP입니다.

https://www.figma.com/downloads/

Figma Downloads | Web Design App for Desktops & Mobile

위 링크에 접속하면, 다양한 환경에 맞는 APP을 다운받을 수 있습니다. 혹시라도 인터넷이 안 되거나 서버가 점검할 경우를 고려하여 피그마 App을 설치하여 사용하는 것도 고려해볼 법 하네요.

다만 이 경우 협업, 저장을 하거나 파일을 불러올 때에는 인터넷 연결이 되어 있어야 한다는 점을 유의하세요.

 

 

3) 내장 계산기: 언제까지 숫자 일일이 계산할래?

width나 height 등에  +나 -등을 사용해서 수식을 줄 수 있습니다. +, -, /, * 등 단순한 사칙연산에 사용되는 기능은 다 가능하다고 보면 되겠습니다. 주로 디자인을 할 때 컴포넌트 사이 간격 계산할 경우 많이 쓰이더라고요. 

머릿속으로 계산하지 않고 바로바로 수식으로 해결할 수 있다는 점 알아두면 요긴하게 쓸 것 같아요.

 

 

4) 툴 박스 제거: 전체 레이아웃 좀 편하게 보자

ctrl + \ 를 하면 좌측과 우측의 너저분한 툴박스들이 사라지고, 전체 워크스페이스를 볼 수 있습니다.

당장 넓은 화면에 집중하고 전체 레이아웃을 파악할 때 유용하게 쓰일 것 같습니다. 

 

 

5) 스포이드 쉽게 쓰기: 저 색도 보고 싶고 이 색도 보고 싶은데?

오브젝트의 색을 아직 정하지 못했는데, 기존에 쓰고 있던 여러 테마 색 중에 어떤 색이 어울릴지 고민하는 상황이라고 해봅시다. 이때 색상을 클릭하면 스포이드가 보입니다.

스포이드.

스포이드를 클릭해서 색을 뽑는 것까지는 어렵지 않습니다. 그런데 클릭한 채로 화면 내에서 여기저기 드래그하면, 해당 스포이드가 위치하는 곳에 따라 여러 색을 예시로 넣어보기 가능하다는 점! 우리가 옷을 사기 전에, 굳이 입어보지 않고 거울 앞에서 대보는 것처럼 이런 방식으로 빠르게 어떤 색이 이 오브젝트에 더 어울리는지 적용시켜 볼 수 있습니다. 

 

 

6) 전체 이미지 저장: 여기 이미지 다 주세요.

File > Export

디자이너가 갖다 넣어준 이미지를 개발자측에서 싹 뽑아가야 할 때 유용한 저장기능입니다.

File에서 Export를 누르면, 현재 작업 파일에서 저장가능한 모든 이미지가 목록처럼 표시됩니다. 물론 이 중에서 필요없는 이미지는 제외할 수 있으니 골라서 사용하시면 됩니다. 

 

 

7) 상대 단위로 변환? : 그건 개발자의 몫

저런, 전부 px입니다.

피그마의 경우, 크기를 rem 단위로 설정해주지 않기 때문에 개발자가 직접 바꾸어주어야 한다는 번거로움이 있습니다. 피그마에서는 css도 코드로 제공되기 때문에 종종 그대로 가져다 쓸 때가 있을 텐데, 만약에 상대 단위를 써야 하는 프로젝트라면 꼭 체크해주세요.

 

 

8) 코멘트: 그래서 이 컴포넌트는 뭘 위한 거예요?

피그마 파일 내부에서는 위와 같은 아이콘을 클릭하여 직접 코멘트를 남길 수 있습니다. 주로 공유 파일에서 협업을 할 때 유용한데요. 특히 아이콘을 클릭한 채 원하는 부위에 드래그 하면, 영역을 지정해서 코멘트를 남길 수도 있습니다. 

문제가 해결되었거나 원하는 기능 구현이 되었을 때 코멘트 내부에 있는 체크를 눌러주면 화면에 어지럽게 코멘트가 쌓이는 것을 방지 가능합니다. 이렇게 지운 코멘트들도 나중에 모아서 볼 수 있어요. 

 

 

9) 버블: 가벼운 대화와 반응

피그마 작업 환경에서 /을 누른 뒤 타자를 치면 마우스 커서를 따라다니는 작은 창이 뜹니다. 이것을 버블이라고 하는데요. 바로 이 창으로 실시간으로 가벼운 대화 나눌 수 있습니다.

다만 이 버블들은 일정 시간이 지나면 사라지기 때문에, 중요한 기록은 코멘트로 남기고 즉각적인 반응이나 호응 같은 부분들을 버블로 사용하면 좋을 것 같습니다.

 

 

10) 스포트라이트 : 내 화면을 바라 봐.

우측 위에 보면 Spotlight me라는 버튼이 있습니다. 자신의 프로필을 누른 뒤 나타난 파란 버튼을 누르면 됩니다. 이는 실시간으로 협업 하고 있는 사람들에게 지금 자신이 작업하는 화면이 보이도록 초점을 맞추는 기능인데, 줌이나 디스코드, 구글밋에서 제공하는 '화면 공유'와 비슷하다고 보면 될 것 같습니다.

몇 초 기다리면 다른 사람들도 내가 보는 시야를 함께 볼 수 있습니다. 

 

 

11) 프레임 포커스: 파일 공유할 때 우선 여길 봐주세요.

기본적으로 피그마에서는 Share 버튼을 클릭해서 파일을 공유 가능합니다. Anyone with the link로 바꿔주면 링크를 가진 사람은 누구든 접속해서 볼 수 있죠(옆에 can edit로 하면 수정도 가능합니다. 공유 전에 주의할 것).

그런데 우측 아래에 Link to current selection이라는 체크 박스 보이시나요? 링크 공유할 때 보통은 이 박스가 체크가 되어 있지 않습니다. 하지만 작업 파일에서 주목하길 원하는 Frame을 눌러 선택 후 다시 Share창을 열면 Link to current selection이 저절로 체크 되어 있는 모습을 확인할 수 있습니다.

 

체크가 되어 있습니다.

이제 링크를 복사한 뒤 새 주소에 넣어 창을 띄워봅니다.

좌: 선택한 프레임  우: 링크로 접속하자 우선 보이는 프레임

오... 아까 클릭했던 프레임에 초점이 맞춰진 채 피그마 파일이 뜨는군요. 작업하는 파일이 단순해서 프레임들이 한눈에 보인다면 사용할 필요 없는 기능이겠지만, 많은 것을 한 파일에서 개발하다 보면 뭐가 뭔지 헷갈리는 상황이 발생합니다. 당장 웹사이트 하나 틀을 짤 때에도 몇 페이지에 걸쳐 작업하면 눈이 어지럽기 마련이죠. 바로 이때 불필요한 부분에서 헤매지 않도록 초점을 맞춰 공유해주는 식으로 사용하면 되겠습니다. 

또한 notion 에서도 이렇게 포커스 맞춘 피그마 링크를 공유 가능한데요. 우선 노션 파일에서 /를 쓴 뒤 Figma를 찾고 복사한 링크를 넣어줍니다. 그러면 아까 설정한 프레임이 노션 페이지에서 일종의 프리뷰처럼 보입니다.

즉, 피그마 파일로 직접 초대하지 않고도 실시간으로 노션에서 시안 공유가 가능합니다. 

...라고 하는데 왜 제 노션에서는 안 될까요...? 기이하네요... notion의 임베드에서 피그마가 안 뜨는데 이게 노션에서 제외한 건지 아니면 업데이트를 해야 하는지 모르겠네요. 혹시 되면 사용해보시길...

 

 

 

12) 배열에서 오브젝트 위치 정렬 및 쉽게 바꾸기: 붉은 점에 주목하라

레이아웃을 할 때, 같은 요소들을 연속으로 나열하는 경우가 생각보다 많습니다. 이때 하나하나 수작업으로 배치하기보다, 적당히 각 위치에 끌어 놓은 뒤 전체를 드래그합니다. 그리고 우측 아래 뜨는 작은 사각형을 클릭하면 오브젝트들이 마법처럼 자동 정렬이 됩니다.

끙끙거리며 줄 맞추는 노력을 덜 수 있겠죠?(생각보다 엄청 귀찮더라고요..)

우측 아래 상자를 누르자마자 저절로 정렬이 된 것을 볼 수 있습니다.

 

또 여기서 재밌는 부분이 있습니다.

나란히 정렬된 요소들을 드래그해서 단체 선택하자 갑자기 가운데에 작은 붉은 점들이 나타났습니다. 이 붉은 점에 커서를 갖다대면 원이 커지는데, 이 부분을 드래그하여 배열에 위치한 다른 요소들과 위치를 바꿔줄 수 있습니다. 당장 순서를 바꿔야 하는데 일일이 잘라내고 붙여넣기 귀찮을 때, 이처럼 배열 내에 있는 요소들의 순서를 바꾸고 싶다면 붉은 점을 적극 활용하는 것도 효율적일 것 같네요.

붉은 점을 드래그 해서, 우측 맨 아래의 하늘색 상자를 그 바로 옆의 파란 상자와 위치만 바꿔줍니다.

 

피그마를 사용해서 하나하나 디자인하기보다, 당장 협업에서 쓸만 한 기능들 위주로 추려서 알아보았습니다.

물론 디자인도 하면 좋겠죠. 자칫하면 모르고 지나치기 쉬운 작은 팁들로, 피그마를 다루는 디자인이 무서운 개발자들이 덜 고생했으면 하는 바람입니다!

 

 

출처: 

https://youtu.be/-cGX96AE1tY

https://onlydev.tistory.com/142

https://brunch.co.kr/@fastfive/411