피그마(FIGMA)가 웹 기반의 세계적인 협업 툴의 표준이 되었음을 지난 포스팅에서 알아보았습니다.
피그마는 디자이너는 물론 기획자, 마케터, 개발자, 학생들에게 활용하기 좋은 협업 도구입니다.
처음 피그마를 접하면 낯설게 느껴질 수밖에 없습니다. 이걸 어떻게 써야 할지에 대한 막막함이 앞서게 됩니다. 하지만 피그마는 파워포인트만큼이나 직관적인 UI를 가지고 있으니 걱정하지 않아도 됩니다.
이 글에서는 피그마 설치방법과 인터페이스에 대해 알려드리도록 하겠습니다.
피그마 설치 웹 vs 앱
피그마는 웹버전과 앱버전이 있습니다.
피그마 웹버전의 가장 큰 장점은 설치가 필요 없다는 점입니다. 크롬, 엣지, 네이버 웨일 등 브라우저만 있으면 언제 어디서든 접속해서 작업할 수 있습니다. 다른 사람의 컴퓨터에서도 작업이 가능하고, 태블릿, 모바일에서도 접속이 가능하여 화면을 볼 수 있습니다.
앱 버전은 별도의 프로그램을 설치해서 사용해야 합니다. 장기적으로 계속 피그마를 사용할 계획이 있다면 앱설치도 고려해 볼만합니다. 앱은 컴퓨터에 설치된 폰트를 빠르게 인식하여 연동이 되어서 편리합니다. 웹브라우저의 단축키와 충동되지 않아서 사용하기 용이합니다.
처음 사용하는 사람이라면 웹 버전으로 시작해도 충분히 좋습니다. 또한 외부에서 공용컴퓨터나 다른 사람의 컴퓨터에서 작업할 때도 웹버전은 로그인만 하면 사용이 가능하기 때문에 편리합니다. 하지만 본격적으로 피그마를 배우거나 실무에서 활용하려면 웹설치를 강력하게 추천드립니다.
물론 웹과 앱의 기본 인터페이스는 동일하며, 기능도 모두 같습니다.
피그마 설치 방법
1. 공식 홈페이지 접속 : 피그마 공식 홈페이지(https://www.figma.com)에 들어갑니다.
2. 회원가입 : 우측 상단의 "지금 무료로 시작하기" 버튼을 누르고 구글 계정이나 이메일로 회원가입을 합니다.
=> 여기까지 하면 웹버전의 피그마를 사용할 수 있습니다.
3. 앱 다운로드 : 탑메뉴 "제품"을 누르시면 "다운로드"메뉴가 나오고 "다운로드"메뉴를 누르면 다운로드할 수 있는 화면으로 이동합니다. 이곳에서 "데스트톱 앱"을 다운로드하면 됩니다. (Windows/Mac 모두 지원)
=> 이제 피그마의 웹버전과 앱버전 모두 사용이 가능합니다.
피그마 인터페이스 이해하기
피그마의 작업화면은 크게 4가지 구역으로 나뉩니다.
1. 툴바(Toolbar) : 도구 상자
화면 맨 아래쪽 가운데 가로로 긴 바가 있습니다. 이곳은 작업을 위한 도구들이 모여있습니다.
- Move (단축키 V): 가장 많이 쓰는 기본 커서입니다. 요소를 선택하고 이동합니다.
- Region Tools (단축키 F): PPT의 슬라이드처럼 그림을 그릴 '도화지(Frame)'를 만듭니다.
- Shape Tools: 사각형, 원, 선 등 기본 도형을 그립니다.
- Text (단축키 T): 글자를 입력합니다.
- Comment (단축키 C): 말풍선 아이콘입니다. 화면의 특정 부분을 찍고 "이 부분 수정해 주세요"라고 댓글을 남길 수 있습니다. 협업의 핵심 기능입니다.
2. 레이어 패널 (Layers Panel) : 목차와 리스트 (좌측)
Layers: PPT의 '개체 선택 창'과 같습니다. 리스트의 위쪽에 있을수록 화면에서도 가장 앞에 보입니다.
- Assets: 자주 쓰는 버튼이나 아이콘을 등록해 두고 꺼내 쓰는 '라이브러리'입니다.
- Pages: 엑셀의 시트(Sheet) 탭과 같습니다. 하나의 파일 안에서 '기획안', '참고 자료', '최종본' 등으로 페이지를 나눠 관리할 수 있습니다.
3. 캔버스 (Canvas) : 작업 공간 (중앙)
가운데 가장 넓은 영역입니다. 피그마의 캔버스는 크기 제한이 없습니다.
- 마우스 휠을 돌려 무한히 확대/축소할 수 있고, 스페이스바를 누른 채 드래그하면 화면을 자유롭게 이동할 수 있습니다.
- 한 화면에 수십 장의 기획서를 펼쳐놓고 전체 흐름을 보며 작업하기에 최적화되어 있습니다.
4. 속성 패널 (Properties Panel) : 세부 설정 (우측)
화면 오른쪽에 있는 가장 복잡해 보이는 패널입니다. 선택한 요소의 세부 옵션을 조절합니다.
- Design 탭: 선택한 도형의 크기(W, H), 위치(X, Y), 색상(Fill), 테두리(Stroke), 정렬 등을 바꿉니다. PPT의 '서식' 메뉴와 같습니다.
- Prototype 탭: 화면과 화면을 연결해 실제 앱처럼 작동하게 만듭니다.
- Export: 작업물을 이미지(PNG, JPG, PDF)로 저장할 때 사용합니다
피그마 사용 팁
- 피그마 무료 플랜은 개인 사용자를 대상으로 제공됩니다. 회원가입만 하면 별도의 결제 없이 바로 사용이 가능하며, 학습이나 개인 작업에는 충분한 기능을 제공합니다.
- 작업 시작 전에는 눈금자를 켜두시면 기획서나 디자인할 때 줄 맞추기 편리합니다.
- 피그마를 처음 사용할 때 가장 많이 헷갈리는 부분이 어떤 요소를 선택했는지에 따라 오른쪽 패널이 달라지기 때문에 선택 상태를 인식하고 있는 것이 중요합니다.
- 피그마는 자동저장되므로 별도의 저장 버튼을 눌러 저장하지 않아도 됩니다. 그래도 내 컴퓨터에 저장을 하고 싶으면 "Save local copy"로 저장할 수 있습니다.
- 피그마는 모바일에서도 작동합니다. 밖에서 급하게 파일을 확인해야 할때 피그마 모바일을 다운로드하여서 사용해 보세요. iOS와 Android용 두 가지 모두 지원합니다.
지금 바로 피그마를 켜서 사각형 하나라도 그려보십시오.
그 작은 시도가 여러분의 업무 스킬을 한 단계 업그레이드시켜 줄 것입니다.
다음 포스팅에서는 "피그마의 그룹(Group)과 프레임(Frame)"에 대해서 알아보겠습니다.