피그마 기본 화면 둘러보기
피그마를 둘러보며 디자인에 필요한 화면 영역과 도구를 알아보겠습니다. 직관적인 쉬운 구조로 되어 있으니 처음에는 위치만 살펴보고 실습을 하며 익혀보세요. 피그마는 전체 파일을 확인할 수 있는 홈 화면과 디자인 화면, 개발자를 위한 화면 이렇게 크게 세 가지로 나뉘어 있습니다. 여기서는 홈 화면과 디자인 화면을 위주로 보도록 하겠습니다.
지금 모든 화면과 기능을 다 외울 필요는 없습니다. 이 챕터는 사전처럼 두고 두고 참고할 부분이라고 생각해주세요. 구체적인 기능은 이후 실습을 따라 하다보면 자연스럽게 익숙해질 겁니다.
이 아티클의 내용은 다음 유튜브 영상으로도 학습할 수 있습니다.
https://youtu.be/PXMcuWzEzQU?si=lvzSWmxYj_WReb82
[기본] 피그마 홈 화면 살펴보기
피그마 홈 화면은 크게 ➊ 왼쪽 메뉴 영역과 ➋ 오른쪽 콘텐츠 영역으로 나누어집니다. 여러분의 컴퓨터에 피그마 화면을 띄워놓고 비교해보세요.
메뉴 영역
왼쪽 메뉴 영역을 먼저 살펴보겠습니다. 프로필, 알림, 검색, 최근 본 파일, 드래프트, 팀, 각 팀에 속해 있는 프로젝트, 파일, 멤버로 구성되어 있습니다.
<1분 꿀팁> 무료 플랜을 사용하면 파일을 더 만들 수 없나요?
무료 버전의 피그마를 사용하면 팀을 추가로 생성할 수 없으며, 팀 프로젝트당 파일은 최대 3개까지만 만들 수 있습니다. 또한 파일 내에서 생성할 수 있는 페이지 수도 제한됩니다. 하지만 드래프트에서는 원하는 만큼의 파일과 페이지를 생성할 수 있습니다.
콘텐츠 영역
왼쪽 메뉴에 따라 오른쪽에 나오는 콘텐츠가 변경됩니다. 다음은 피그마를 시작했을 때 보이는 기본 화면입니다. 최근 작업했던 프로젝트가 보이고 오른쪽 위 버튼을 클릭하면 6 종류의 피그마 파일을 새로 만들거나 불러올 수 있습니다
<1분 꿀팁> 파일을 잘못해서 삭제했다면 이곳에서 확인하세요.
➊ 왼쪽 [Trash] 메뉴를 선택하면 오른쪽 영역에 삭제된 파일 또는 프로젝트가 나타납니다. 복구하려는 파일을 선택 후 오른쪽 마우스를 눌러 ➋ [Restore]를 클릭하면 원래 있던 위치로 파일이 복구됩니다.
[기본] 피그마 작업 화면 살펴보기
피그마 디자인 파일은 왼쪽 패널, 오른쪽 패널, 툴바, 작업 영역으로 구성되어 있으며. 레이아웃이 단순하고 직관적입니다.
왼쪽 패널
왼쪽 패널에는 파일 구성과 디자인 요소 관리를 위한 메뉴들이 있습니다. ➊ 메인 메뉴와 ➋ 페이지, ➌ 레이어, ➍ 에셋은 아래에서 조금 더 자세히 알아볼 겁니다.
➊ 메인 메뉴 : 파일 관리, 설정 변경, 플러그인 활용 등 다양한 작업을 할 수 있습니다. 가장 바깥의 메뉴들만 먼저 소개하겠습니다. 자세한 메뉴는 피그마를 직접 사용하면서 알아가보세요.
File(파일) : 새로운 파일 열기, 가져오기, 내보내기, 로컬 저장하기 등 파일에 관련된 메뉴
Edit(편집) : 실행 취소/재실행, 복사/붙여넣기, 찾기 등
View(보기) : 레이아웃 그리드, 눈금자, 확대/축소 등 보기 설정과 관련된 메뉴
Object(개체) : 그룹, 프레임, 회전, 마스크 등 개체에 적용하는 메뉴
Text(문자) : 문자의 굵기, 기울임, 언더라인 등 문자와 관련된 메뉴
Arrange(정렬) : 정렬 등 개체를 정리하는 메뉴
Plugin(플러그인) : 저장, 사용한 플러그인을 관리, 실행할 수 있는 메뉴
Widgets(위젯) : 애플리케이션을 관리, 사용하는 메뉴
Preferences(기본 설정) : 기본적인 설정, 테마, 간격 수치 등의 설정하는 메뉴
Libraries(라이브러리) : 라이브러리를 사용할 수 있는 메뉴
Help and account(도움과 설명) : 키보드 단축키, 도움 영상, 로그아웃 등의 메뉴
➋ 페이지 : 파일 내에서 여러 개의 페이지를 만들어 사용할 수 있으며 각 페이지별로 별도의 디자인을 할 수 있어 폴더 개념처럼 사용할 수 있습니다.
[+] 아이콘을 클릭해 페이지를 추가할 수 있습니다. 페이지 이름은 더블 클릭하거나 오른쪽 마우스를 눌러 변경할 수 있습니다. 페이지 이름에 '-'를 입력하고 [Enter]를 누르면 페이지 간 분할 표시를 할 수 있습니다.
무료 플랜에서는 팀 프로젝트 파일에 페이지를 3개까지 추가할 수 있습니다. 드래프트 파일은 필요한 만큼 페이지를 추가할 수 있습니다.
➌ 레이어 : 작업 영역에 만든 모든 프레임, 그룹, 개체가 표시됩니다. 유형에 따라 표시되는 아이콘이 달라지며, 마지막에 만든 개체가 가장 위의 레이어로 올라옵니다.
➍ 에셋 : 재사용할 수 있는 디자인 요소들로 반복되는 요소를 작업에 빠르게 사용할 수 있습니다. 직접 만든 요소 뿐만 아니라 피그마에서 제공하는 기본 디자인 키트를 작업 영역으로 드래그해 사용할 수 있습니다.
[기본] 오른쪽 디자인 패널
오른쪽 디자인 패널에는 디자인 탭과 프로토타입 탭이 있으며 파일의 권한과 개체의 유형 및 작업 영역의 선택에 따라 옵션들이 다르게 나타납니다. 작업 영역에서 아무것도 선택하지 않으면 다음과 같이 ➊ 디자인 탭에는 페이지의 배경 색상, 변수, 스타일, 전체 페이지 내보내기 옵션이 나타나고 ➋ 프로토타입 탭에서는 프로토타입 디바이스와 배경색을 선택할 수 있습니다. 두 탭을 더 자세히 살펴봅시다.
디자인 탭
레이어를 선택하면 나타나는 기본 탭으로 다양한 속성들이 나타나며 선택한 객체에 따라 보여지는 속성이 달라집니다.
<1분 꿀팁> 객체에 따른 상황별 도구
선택한 객체의 속성에 따라 활성화되는 버튼이 다르다고 앞서 설명했습니다. 다양한 기능을 빠르게 제공하는 버튼을 간단히 소개합니다.
나머지 메뉴를 계속 알아봅시다. 여기서는 ‘프레임’ 유형의 레이어를 선택했을 때 메뉴를 기준으로 소개하겠습니다. 선택한 레이어에 따라 활성화되는 메뉴가 다를 수 있습니다.
프로토타입 탭
피그마에는 디자인한 화면에 버튼 클릭, 화면 전환, 애니메이션 같은 동작을 미리 적용해서 볼 수 있는 '프로토타입' 기능이 있습니다. 프로토타입 탭에서는 해당 기능과 관련한 조작을 할 수 있습니다. 다음은 ‘프레임’ 유형의 레이어를 선택했을 때 활성화되는 프로토타입 탭의 메뉴입니다.
[기본] 단순하고 쉬운 피그마 툴바 살펴보기
피그마는 일반적인 그래픽 도구에 비해 사용해야 하는 도구가 직관적이고 간단합니다. 화면 중앙 하단의 툴바를 살펴보며 피그마의 주요 도구를 종류별로 알아보겠습니다.
이동 / 선택 도구
기본 선택 도구입니다. 객체를 클릭하거나 드래그해 이동, 크기 조절, 선택할 수 있습니다.
프레임 도구
디자인할 화면 영역을 만들고 관리하는 데 사용하는 도구입니다.
도형 도구
사각형, 원, 선, 화살표 등을 만들 수 있습니다. 버튼이나 카드 배경 같은 디자인 구성 요소의 기초가 됩니다.
펜 도구
자유롭게 선이나 곡선을 그릴 수 있는 도구입니다. 아이콘이나 일러스트를 만들 때 사용합니다.
문자 / 댓글 도구
문자와 댓글 도구는 추가 선택 도구가 없는 단일 도구입니다. 이름 그대로 역할을 이해하면 됩니다.
액션 도구
AI 기능과 플러그인, 위젯 등을 관리하고 활용할 수 있는 도구입니다. AI 기능은 프로페셔널 플랜부터 사용할 수 있고, 플랜별 활용할 수 있는 양(크레딧)에 차이가 있습니다.
액션 도구에서 사용할 수 있는 기능은 다음과 같습니다.
➊ Search(검색) : 두 메뉴 모두 상단에는 검색 기능이 있어 사용하려는 플러그인, 위젯 등을 찾을 수 있습니다.
➋ All : 최근에 쓴 기능이나 위젯, 플러그인을 빠르게 쓸 수 있고 일반 액션 도구에서는 자주 사용하는 설정을, AI 액션 도구에서는 배경 제거, 이미지 생성, 언어 변환 등 다양한 AI 기능을 사용할 수 있습니다.
➌ Assets(에셋) : 왼쪽 패널에 있었던 에셋을 볼 수 있습니다.
➍ Plugins&widgets(플러그인과 위젯) : 피그마의 기능을 확장해주는 플러그인과, 작업 효율을 높이는 위젯을 검색하고 선택할 수 있습니다.
<1분 꿀팁> 개발자를 위한 피그마?
툴바 오른쪽 끝 토글 버튼을 통해 디자인 파일의 모드를 변경할 수 있습니다. 피그마의 디자인 파일은 다음과 같이 ➊ 기본적인 디자인 모드, ➋ 벡터 기반 일러스트를 그리기 용이한 드로우 모드, ➌ 개발자와 협업을 위한 개발자 모드, 총 3가지 모드를 사용할 수 있습니다.
개발자 모드는 무료 플랜인 스타터 요금제에서는 사용할 수 없고 프로페셔널 요금제부터 사용할 수 있습니다.
[기본] 작업 영역
캔버스라고 부르는 작업 영역은 모든 프레임, 그룹, 등 레이어를 그려내는 영역입니다. 작업 영역의 크기는 제한이 없으므로 한 화면에 많은 내용을 담을 수 있습니다. 원하는 색상으로 배경을 변경할 수 있으며, 좌우 패널의 색상은 테마에서 변경할 수 있습니다.
이 아티클의 내용은 다음 유튜브 영상으로도 학습할 수 있습니다.
https://youtu.be/PXMcuWzEzQU?si=lvzSWmxYj_WReb82