by
Mar 20. 2024
2. 서비스 기획자를 위한 툴 기초-1
피그마
지식 공유를 위해 이전에 만든 자료를 새로 업데이트했다.
이번 글에선 아래 내용을 확인할 수 있다.
1. 피그마 UI의 기능 설명
2. 피그마의 파일 구조
3. 그룹과 프레임의 차이
4. 피그마 꿀팁 및 단축키
5. 2024년 업데이트된 기능과 예시
목차
개요
피그마 UI
툴바
파일명, 뷰 영역
좌측 패널
우측 패널
피그마의 레이어 구조
그룹과 프레임
알면 편한 단축키
개요
ⓒ 327roy피그마가 가지고 있는 특징을 간단하게 정리했다. 작년 7월 Config에서 개발자 모드(Dev mode)가 추가되며 서비스 양상이 다소 달라지긴 했지만, 피그마를 붐업시킨 근본적인 이유는 변하지 않았다.
자세한 설명은 과거에 작성한 글을 읽어보는 것을 추천한다.
과거의 자료는 이곳에서 확인할 수 있다.
- 서비스 기획자의 피그마 사용 가이드-1
- 서비스 기획자의 피그마 사용 가이드-2
- 서비스 기획자의 피그마 사용 가이드-3
피그마 UI
작가 편집 ⓒ 327roy피그마 UI는 사진처럼 6가지 영역으로 구분할 수 있다. 툴바, 파일명이 있는 영역, 뷰와 관련된 설정을 할 수 있는 영역, 좌측 패널, 우측 패널 그리고 아트보드.
툴바 영역
작가 편집 ⓒ 327roy피그마 툴바의 모습이다. 이전 자료와 크게 달라지지 않았다. 내 기준으로 자주 사용하는 툴은 하이라이트 했다. 하이라이트 한 부분은 단축키를 외워 놓는 걸 추천한다.
여담으로 피그마 데스크탑 앱을 사용할 때, 다른 프로그램으로 전환했다가 다시 피그마로 돌아오면, 종종 피그마의 단축키가 씹히는 현상이 발생한다. 단축키가 갑자기 동작하지 않아 당황스러울 것이다. 레이어를 삭제했는데 되돌리기가 안 되기도 하고 말이다. 보통 피그마를 재실행해서 해결할 텐데, 그러지 말고 아무 텍스트 박스를 클릭해서 텍스트를 우다다 입력해 보자. "ㅁㄴㅇㄻㄴㅇㄹ" 이런 식으로! 그러면 피그마의 키보드 씹힘 현상이 사라진다.
파일명, 뷰 영역
작가 편집 ⓒ 327roy파일을 공유할 땐 권한을 잘 부여하자. 무료 플랜이라면 편집 권한을 못 주니 괜찮지만, 회사에서 유료 플랜을 이용하고 있다면 파일 내 편집 권한을 가진 인원수에 따라 월 결제 비용이 청구될 수 있다. 사이드 프로젝트, 영세 스타트업 등 비용을 아끼려면 개인 파일로 만들고 계정을 돌려쓰자.
파일의 보안을 신경 쓰려면 유료 플랜을 사용해야 한다. 유료 플랜 이용 시 파일에 비밀번호를 걸 수 있다.
Zoom to fit ⓒ 327roy아트보드에서 모든 화면을 한눈에 보여주고 싶을 땐 Shift+1 단축키를 사용하자. 페이지 내의 모든 레이어를 한 번에 볼 수 있도록 화면 사이즈를 조정해 준다. 기능 이름은 Zoom to fit이다.
좌측 패널:
Layers 탭 / Assets 탭
작가 편집 ⓒ 327roy좌측 패널은 크게 두 가지 탭으로 구분한다. 1) 레이어를 확인할 수 있는 Layers 탭과 2) 컴포넌트 등 파일 내 리소스를 확인할 수 있는 Assets 탭이다.
레이어는 요소를 겹치는 시각 기법이다. 포샵, 일러, 파워포인트부터 프리미어 등 영상 편집 툴까지 두루 사용하는 개념이다. 레이어 개념을 적용한 툴이 제공하는 보편적인 기능과 특징이 존재하는데, 이는 디자인 나침반에서 정리한 글에서 잘 확인할 수 있다. 귀찮다면 레이어를 제일 앞으로 당기는 Bring to front(단축키 [)와 맨 뒷단으로 보내는 Send to back(단축키 ])만 기억하자.
Assest 탭은 파일 내 등록된 (로컬) 컴포넌트나 피그마 팀 라이브러리에 퍼블리싱된 컴포넌트를 빠르게 검색하고, 사용할 수 있는 영역이다. 화면 설계를 하는 사람의 입장에서 디자인 시스템이 잘 갖춰진 조직일수록 이 탭의 진가를 느낄 수 있다. 알면 편한데 굳이 몰라도 되는 영역이다. 헷갈린다면 디자이너에게 물어보자. (혹은 필자에게 문의를 줘도 좋다.)
만약 피그마에서 SB(스토리보드)를 만드는 조직이라면 검색 기능(Ctrl+F)과 텍스트 대체 기능을 사용할 일이 더 많을 것이다.
우측 패널:
Layer 클릭 안 한 경우, 클릭한 경우
작가 편집 ⓒ 327roy레이어의 클릭 여부에 따라 우측 패널의 기능이 변한다. 레이어를 클릭하지 않은 경우엔 파일 혹은 페이지에 공통 적용되는 기능이 주를 이루며, 레이어를 클릭한 경우 해당 레이어에 적용하는 기능이 주를 이룬다. 디자이너가 주로 건드는 영역이다.
꿀팁을 하나 주자면, Width, Height 등 피그마에 숫자를 입력하는 곳에서 사칙연산을 활용할 수 있다. 예를 들어 Width 200px, Height 200px인 프레임을 2배로 키우고 싶다면, 1) 레이어의 비율 고정 기능을 활성화한 후, 2) Width를 클릭한 후 200*2를 입력하고 엔터를 눌러보자. 그러면 Width와 Height이 400px이 될 것이다.
피그마의 레이어 구조
작가 편집 ⓒ 327roy피그마에서 UI 디자인을 구성하는 작은 단위를 오브젝트라고 한다. 텍스트, 도형, 선이 여기에 속한다. 오브젝트는 프레임에 포함된다. 프레임은 섹션과 페이지에 포함되며, 페이지를 포함한 모든 것이 파일에 포함된다. 무료 버전을 사용한다면 파일 단위까지만 신경 쓰면 된다. 파일을 서비스 레벨로 구성하든, 서비스의 메뉴 레벨로 구성하든 그것은 본인이 관리하기 편한 방법에 따르자.
프로젝트는 Team Plan을 유료 결제해야만 사용할 수 있다. 프로젝트에 속한 파일은 프로젝트에서 지정한 규칙에 영향을 받는다. 가령 팀 라이브러리라거나. 규칙은 위계를 타고 내려가며 오브젝트에도 영향을 미친다.
위계를 기억하면 나중에 조직의 특성에 맞는 독자적인 시스템을 구축할 수 있다.
그룹과 프레임
작가 편집 ⓒ 327roy피그마는 프레임이 제일 중요하다. 대부분의 의미 있는 작업은 프레임을 활용해 이루어지며, 오토 레이아웃, 컴포넌트 또한 프레임을 기준으로 만들어진다.
오브젝트를 포함한 그룹과 프레임을 하나씩 만들어서 선도 넣어보고, 색도 채워보고, 사이즈도 조절해 보자. 그룹과 프레임의 차이를 바로 알 수 있을 것이다.
더 자세한 설명은 이 글을 읽어보는 걸 추천한다.
알아두면 편한 단축키
ⓒ 327roy