디자인 이론과 규칙을 아무리 잘 알고 있어도 이를 시각적으로 구현해 낼 도구가 없다면 그림의 떡에 불과하다. 과거에는 웹 디자인을 위해 포토샵이나 일러스트레이터 같은 무거운 프로그램을 설치해야 했지만, 이제는 웹 브라우저만 있으면 어디서나 바로 실행할 수 있는 '피그마(Figma)'가 디자인 툴의 대세로 자리 잡았다.
피그마는 프로그램 설치 없이도 웹상에서 실시간으로 작동하며, 링크 하나만 공유하면 여러 사람이 동시에 한 캔버스에 들어와 작업할 수 있다는 막강한 장점을 가지고 있다.
처음 피그마를 켜면 빈 화면과 영어로 된 메뉴들 때문에 잠시 멍해질 수 있다. 하지만 수많은 메뉴를 처음부터 다 외울 필요는 없다. 실무 작업의 90% 이상은 단 5가지 기본 툴과 캔버스 조작법만으로 진행된다.
피그마 캔버스에 들어왔을 때 가장 먼저 익혀야 하는 것은 화면을 자유자재로 움직이고 확대/축소하는 '화면 조작법'이다.
화면 이동(Pan): 키보드의
Space키를 누른 채 마우스 왼쪽 버튼을 드래그하거나, 마우스 휠을 클릭한 채 움직이면 손바닥 모양 아이콘이 나타나며 캔버스를 자유롭게 이동할 수 있다.화면 확대/축소(Zoom):
Ctrl(맥은Cmd) 키를 누른 상태에서 마우스 휠을 위아래로 굴리면 커서가 위치한 지점을 중심으로 화면이 확축된다.선택 요소로 한 번에 이동: 캔버스에 도형이나 프레임이 너무 많아 길을 잃었을 때는, 좌측 레이어 창에서 원하는 항목을 마우스로 더블클릭하거나 단축키
Shift + 2를 누르면 해당 요소가 화면 중앙에 딱 맞게 확대되어 들어온다.
이 조작법들이 손에 익지 않으면 도형 하나를 그릴 때마다 화면을 찾아 헤매느라 작업 시간이 길어지게 된다.
캔버스 조작에 익숙해졌다면 이제 상단 툴바(Toolbar)에 있는 핵심 도구 4가지를 활용해 볼 차례다.
첫째, Frame 툴 (단축키 F)이다. 포토샵의 '대지(Artboard)' 개념이자 웹페이지의 '화면 틀' 역할을 한다. 단축키 F를 누르면 우측 패널에 iPhone, Desktop, Tablet 등 규격화된 디바이스 크기 목록이 뜬다. 원하는 규격을 클릭하는 것만으로 해당 해상도의 도화지가 캔버스에 생성된다. 모든 디자인 요소는 반드시 이 프레임 안에서 작성되어야 한다.
둘째, Shape 툴 (단축키 R, O)이다. 사각형(R), 원(O), 선(L) 등 디자인의 기본 뼈대가 되는 도형을 그린다. Shift 키를 누른 채 드래그하면 찌그러지지 않는 정사각형이나 정원형을 깔끔하게 그릴 수 있다.
셋째, Text 툴 (단축키 T)이다. 글자를 입력할 때 사용하며, 캔버스를 클릭하고 글을 적으면 텍스트 레이어가 생성된다. 입력 후 우측 패널에서 폰트 종류, 크기, 굵기, 행간 등을 자유롭게 조절할 수 있다.
넷째, Hand 툴 (단축키 H)과 Comment 툴 (단축키 C)이다. Hand 툴은 실수로 요소를 건드리지 않고 화면만 둘러볼 때 쓰이며, Comment 툴은 캔버스 특정 위치에 말풍선 메모를 남겨 동료나 고객과 피드백을 주고받을 때 활용된다.
피그마를 다룰 때 초보자가 가장 많이 하는 실수는 프레임(Frame)과 단순 사각형(Rectangle)을 구분하지 않고 혼용하는 것이다.
겉보기에는 똑같은 네모 상자처럼 보이지만, 단순 사각형 안에는 다른 텍스트나 버튼을 그룹으로 넣어 관리할 수 없다. 반면 프레임은 그 자체로 하나의 독립된 레이아웃 영역이기 때문에, 프레임 안에 들어간 요소들은 프레임이 이동하거나 크기가 바뀔 때 함께 움직이게 된다.
버튼 하나를 만들 때도 단순 사각형 위에 글자를 얹는 것보다, 프레임을 생성하고 그 안에 텍스트를 넣는 구조로 습관을 들여야 이후 배우게 될 피그마의 핵심 기능들을 200% 활용할 수 있다.
[핵심 요약]
피그마 화면 조작은
Space + 드래그(이동),Ctrl + 휠(확대/축소),Shift + 2(선택 요소 중앙 배치)를 기본으로 익힌다.실무 핵심 툴은 Frame(
F), Rectangle(R), Text(T), Comment(C) 4가지로 단축키를 활용하면 작업 속도가 대폭 향상된다.화면이나 버튼의 기본 틀을 만들 때는 단순 사각형이 아닌 프레임(Frame)을 활용해야 하위 요소들을 구조적으로 관리할 수 있다.
[다음 편 예고] 다음 편에서는 요소들의 간격을 일일이 수동으로 맞추던 고통에서 벗어나게 해주는 피그마 최고의 핵심 기능 'Auto Layout(오토 레이아웃)'의 원리와 기초 활용법을 다룹니다.
0 댓글