[클래스 01] 피그마 기본 화면 둘러보기

2026년 1월 5일조회 628

이 글은 《콘텐츠 디자인은 피그마 with AI》에서 발췌했습니다.

콘텐츠 디자인은 피그마 with AI

ISBN 9791194383390지은이 리디드로우(김선영)₩26,000

피그마 기본 화면 둘러보기

피그마를 둘러보며 디자인에 필요한 화면 영역과 도구를 알아보겠습니다. 직관적인 쉬운 구조로 되어 있으니 처음에는 위치만 살펴보고 실습을 하며 익혀보세요. 피그마는 전체 파일을 확인할 수 있는 홈 화면과 디자인 화면, 개발자를 위한 화면 이렇게 크게 세 가지로 나뉘어 있습니다. 여기서는 홈 화면과 디자인 화면을 위주로 보도록 하겠습니다.

지금 모든 화면과 기능을 다 외울 필요는 없습니다. 이 챕터는 사전처럼 두고 두고 참고할 부분이라고 생각해주세요. 구체적인 기능은 이후 실습을 따라 하다보면 자연스럽게 익숙해질 겁니다.

이 아티클의 내용은 다음 유튜브 영상으로도 학습할 수 있습니다.

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

📚 더 읽기

저자 소개

리디드로우

4년 전, 온라인 셀러로 활동을 시작하면서 디자인 프로젝트에만 사용하던 피그마라는 도구가 새롭게 보이기 시작했습니다. 디자이너가 아니어도 상세페이지나 배너 제작에 충분히 활용할 수 있다는 가능성에 매료되어 누구나 다룰 수 있는 피그마 활용법을 소개하는 유튜브 채널을 운영하고 있습니다. 강의를 통해 셀러 실전 경험이 담긴 상세페이지와 마케팅 소재 만들기 노하우를 나누고 있습니다. 강의 - 러닝아넥스 〈1인 셀러를 위한 상세페이지 30분 제작 비법〉 SNS - YouTube _ youtube.com/@rddraw

📚《콘텐츠 디자인은 피그마 with AI》 자주 묻는 질문

Q.피그마(Figma)가 정확히 뭔가요? 디자인 경험이 전혀 없는데 시작할 수 있을까요?

피그마는 웹 기반의 디자인 협업 도구입니다. 설치 없이 브라우저에서 바로 사용할 수 있으며, 디자인 초보자도 쉽게 접근할 수 있도록 직관적인 인터페이스를 제공합니다. 무료로도 핵심 기능들을 충분히 활용할 수 있다는 장점이 있죠. 실시간 협업 기능 덕분에 팀원들과 함께 디자인 작업을 효율적으로 진행할 수 있습니다. 디자인 경험이 없더라도 걱정 마세요. 피그마는 다양한 템플릿과 플러그인을 제공하여 디자인 작업을 훨씬 수월하게 만들어줍니다. 기본적인 도형 그리기부터 시작해서 텍스트 편집, 이미지 활용, 컴포넌트 생성 등 다양한 기능을 익히면서 점차 디자인 실력을 향상시킬 수 있습니다. 특히 피그마 버즈(Buzz), 드로우(Draw) 기능과 같은 최신 업데이트는 디자인 작업에 더욱 재미와 효율성을 더해줍니다. 처음 시작이 어렵게 느껴진다면, 《콘텐츠 디자인은 피그마 with AI》를 통해 피그마의 기본 메뉴부터 실전 예제까지 차근차근 따라해보세요. 디자인 초보자도 쉽게 이해할 수 있도록 구성되어 있어, 금방 피그마의 매력에 빠져들게 될 것입니다.

Q.피그마를 활용해서 어떤 디자인 작업들을 할 수 있나요? 구체적인 예시가 궁금합니다.

피그마는 활용 범위가 매우 넓은 디자인 도구입니다. 웹사이트나 앱의 UI/UX 디자인은 물론, 소셜 미디어 콘텐츠, 프레젠테이션 자료, 배너 광고, 인쇄물 등 다양한 디자인 작업에 활용할 수 있습니다. 예를 들어, 카드 뉴스를 제작하거나 상세 페이지를 디자인하고, 이벤트 배너를 만들거나 브로셔와 같은 인쇄물을 디자인하는 데 사용할 수 있습니다. 또한 피그마는 컴포넌트와 변수 기능을 제공하여 디자인 시스템을 구축하고 유지 관리하는 데 매우 유용합니다. 반복적으로 사용되는 요소들을 컴포넌트로 만들어 재사용하고, 변수를 활용하여 디자인의 일관성을 유지할 수 있습니다. 최근 업데이트된 피그마 버즈(Buzz) 기능을 이용하면 템플릿 디자인도 더욱 쉽게 만들 수 있습니다. 더 나아가 구글 시트와 연동하여 디자인 요소들을 자동화하는 것도 가능합니다. 이러한 다양한 기능들을 활용하여 디자인 작업 시간을 단축하고 효율성을 높일 수 있습니다. 다양한 실전 예제를 통해 피그마 활용법을 익히고 싶다면, 《콘텐츠 디자인은 피그마 with AI》를 통해 카드 뉴스, 상세 페이지, 배너, 인쇄물 제작 과정을 직접 따라해보세요.

Q.피그마의 '오토 레이아웃' 기능이 뭔가요? 사용법이 어렵게 느껴지는데 쉽게 배울 수 있는 방법이 있을까요?

피그마의 오토 레이아웃은 요소들을 자동으로 정렬하고 간격을 조절해주는 매우 강력한 기능입니다. 텍스트나 이미지의 크기가 변경되더라도 자동으로 레이아웃을 조정해주기 때문에 디자인 수정 시간을 크게 단축할 수 있습니다. 오토 레이아웃을 사용하면 요소들을 수평 또는 수직으로 정렬하고, 요소 간의 간격, 패딩 등을 쉽게 설정할 수 있습니다. 또한 요소들의 정렬 방식(가운데 정렬, 왼쪽 정렬 등)도 자유롭게 지정할 수 있습니다. 처음에는 오토 레이아웃 사용법이 다소 어렵게 느껴질 수 있지만, 꾸준히 연습하면 금방 익숙해질 수 있습니다. 오토 레이아웃을 효과적으로 사용하려면 레이아웃의 기본 원리를 이해하고, 다양한 옵션들을 직접 사용해보는 것이 중요합니다. 《콘텐츠 디자인은 피그마 with AI》에서는 오토 레이아웃의 기본 개념부터 활용법까지 상세하게 설명하고 있습니다. 책에 제시된 예제들을 따라하면서 오토 레이아웃 기능을 익히면 디자인 작업 속도를 크게 향상시킬 수 있을 것입니다.

Q.피그마 플러그인은 무엇이고, 어떤 플러그인을 사용하면 디자인 작업에 도움이 될까요?

피그마 플러그인은 피그마의 기능을 확장해주는 도구입니다. 다양한 플러그인들이 존재하며, 이를 활용하면 디자인 작업 효율성을 크게 높일 수 있습니다. 예를 들어, 무료 이미지 소스를 제공하는 플러그인, 아이콘을 쉽게 삽입할 수 있는 플러그인, 색상 팔레트를 생성해주는 플러그인, 텍스트를 자동으로 번역해주는 플러그인 등이 있습니다. 어떤 플러그인을 사용해야 할지는 디자인 작업의 종류와 목적에 따라 달라집니다. 예를 들어, 웹사이트 디자인을 할 때는 반응형 디자인을 지원하는 플러그인이나, 그리드 시스템을 쉽게 설정할 수 있는 플러그인이 유용할 수 있습니다. 소셜 미디어 콘텐츠를 디자인할 때는 텍스트 효과를 쉽게 적용할 수 있는 플러그인이나, 이미지 편집 기능을 제공하는 플러그인이 도움이 될 수 있습니다. 플러그인을 사용하기 전에 사용자 리뷰를 참고하고, 무료 플러그인부터 사용해보는 것이 좋습니다. 《콘텐츠 디자인은 피그마 with AI》에서는 디자인 작업에 유용한 다양한 플러그인들을 소개하고, 사용법을 자세하게 설명하고 있습니다. 플러그인을 활용하여 디자인 작업 효율성을 높이고 싶다면, 이 책을 참고하여 자신에게 맞는 플러그인을 찾아보세요.

Q.피그마와 AI를 함께 사용하면 어떤 장점이 있나요? AI 기능은 어떻게 활용할 수 있는지 궁금합니다.

피그마는 AI 기술과 결합하여 디자인 작업의 효율성을 극대화할 수 있습니다. 예를 들어, AI 기반의 플러그인을 사용하면 이미지 해상도를 자동으로 높이거나, 텍스트를 자동으로 요약하거나, 디자인 요소들의 색상과 스타일을 자동으로 맞춰줄 수 있습니다. 또한 AI는 사용자 데이터를 분석하여 디자인 개선에 필요한 인사이트를 제공할 수도 있습니다. 피그마의 AI 기능은 디자인 아이디어를 빠르게 시각화하고, 반복적인 작업을 자동화하며, 사용자 경험을 개선하는 데 도움이 됩니다. 《콘텐츠 디자인은 피그마 with AI》에서는 피그마의 AI 기능들을 활용하는 방법을 구체적인 예시와 함께 설명하고 있습니다. AI를 활용하여 디자인 작업 시간을 단축하고 창의적인 디자인을 구현하고 싶다면, 이 책을 통해 AI 기능들을 익혀보세요.

Q.피그마 버즈(Buzz) 기능은 무엇인가요? 어떻게 활용할 수 있나요?

피그마 버즈(Buzz)는 피그마의 최신 업데이트 기능 중 하나로, 팀원들과 디자인에 대한 피드백을 더욱 효율적으로 주고받을 수 있도록 도와줍니다. 기존에는 댓글 기능을 통해 피드백을 주고받았다면, 버즈 기능을 사용하면 특정 디자인 요소에 대한 의견을 명확하게 표현하고 관리할 수 있습니다. 예를 들어, 특정 버튼의 색상 변경에 대한 의견, 텍스트의 수정 제안, 이미지 변경 요청 등을 버즈를 통해 전달할 수 있습니다. 버즈는 댓글과 달리 특정 요소에 직접 연결되어 있기 때문에, 어떤 부분에 대한 피드백인지 명확하게 파악할 수 있습니다. 또한 버즈는 상태 관리를 통해 해결된 피드백과 미해결된 피드백을 구분할 수 있어, 피드백 누락을 방지하고 작업 진행 상황을 효율적으로 관리할 수 있습니다. 《콘텐츠 디자인은 피그마 with AI》에서는 피그마 버즈 기능을 활용하여 템플릿을 디자인하는 방법까지 자세하게 다루고 있습니다. 팀 협업을 통해 디자인 효율을 높이고 싶다면, 이 책에서 버즈 기능 활용법을 배워보세요.

Q.피그마를 배우고 나서 디자인 실력을 향상시키려면 어떻게 해야 할까요?

피그마를 배우는 것은 디자인 실력 향상을 위한 첫걸음입니다. 피그마를 익힌 후에는 꾸준한 연습과 실전 경험을 통해 실력을 키워나가야 합니다. 먼저 다양한 디자인 튜토리얼을 따라하고, 자신만의 디자인 프로젝트를 진행해보세요. 온라인 디자인 커뮤니티에 참여하여 다른 디자이너들과 교류하고, 피드백을 주고받는 것도 좋은 방법입니다. 디자인 트렌드를 꾸준히 학습하고, 다양한 디자인 스타일을 접해보는 것도 중요합니다. 디자인 관련 서적이나 블로그를 읽고, 디자인 컨퍼런스나 워크숍에 참여하는 것도 도움이 될 수 있습니다. 또한, 자신이 만든 디자인을 포트폴리오로 정리하고, 온라인에 공개하여 다른 사람들의 평가를 받아보는 것도 좋습니다. 중요한 것은 꾸준함입니다. 매일 조금씩이라도 디자인 연습을 하고, 새로운 기술을 배우려는 노력을 게을리하지 않으면 디자인 실력은 꾸준히 향상될 것입니다. 《콘텐츠 디자인은 피그마 with AI》를 통해 피그마의 기본기를 다지고, 다양한 디자인 프로젝트에 도전해보세요. 이 책은 여러분의 디자인 여정에 든든한 길잡이가 되어줄 것입니다.