피그마 기초 화면 정복해 보기
안녕하세요, 디자인 노트입니다! :)
피그마를 처음 켰을 때… 그 막막함 다들 아시나요?
다른 디자인툴들과 비슷해 보이다가도,,, 뭐가 뭔지 모르겠고, 일단 사각형 하나 그리는 것도 어디를 눌러야 할지 헤매게 되더라고요...!
저도 처음엔 화면만 멀뚱멀뚱 쳐다보다가 3개월 동안은 그저 방치했다가... 그냥 부딪쳐보자 생각하고 하게 되었어요.
그런데 알고 보니 피그마 화면은 딱 4개 영역만 이해하면 정말 간단했어요!
오늘은 피그마를 막 시작한 분들을 위해, 화면 구성을 영역별로 하나씩 정리해 볼게요.
이거 한 번만 읽어두면 더는 화면 보고 안 헤매실 수 있다고 생각해요 ㅎㅎ!
피그마 화면은 크게 4영역으로 나뉘어요
피그마 작업 화면은 복잡해 보여도 사실 이렇게 나뉘어요.
- 가운데: 캔버스 (실제 작업하는 공간)
- 왼쪽: 레이어·페이지·에셋 패널
- 오른쪽: 디자인 속성 패널
- 아래쪽 가운데: 도구 툴바
이 4개만 기억하면 끝이에요. 하나씩 볼게요!
① 가운데 — 캔버스 (작업 공간)
화면 한가운데 넓은 공간이 바로 캔버스예요. 우리가 실제로 디자인을 그리는 곳이죠.
피그마 캔버스는 크기 제한이 없어서, 한 화면 안에서 여러 개의 디자인을 펼쳐놓고 작업할 수 있어요.
저는 이게 진짜 편하더라고요 — 상세페이지 작업할 때 여러 시안을 옆에 쭉 늘어놓고 비교하기 좋거든요!
- 마우스 휠로 위아래 이동
- Space + 드래그로 화면 이동 (손바닥 도구)
- Ctrl/Cmd + 휠로 확대·축소
이런식으로 캔버스에 여러 프레임(아트보드)를 만들어서 작업을 편리하게 할 수 있어요 ㅎㅎ!!
② 왼쪽 패널 — 레이어 · 페이지 · 에셋
왼쪽 패널은 내 작업의 구조를 보여주는 곳이에요. 크게 세 가지로 나뉘어요.
레이어 (Layers)
내가 만든 요소들이 목록으로 쌓이는 곳이에요. 위에 있을수록 화면에서 앞쪽에 보여요.
요소가 많아지면 여기서 정리하는 게 정말 중요해요. (이름 잘 지어두면 나중에 본인이 편해요!)
포토샵에서 요소를 레이어 쌓아서 작업하는걸 생각하면 편할 것 같아요!
페이지 (Pages)
한 파일 안에서 여러 '페이지'로 작업을 나눌 수 있어요. 예를 들어 '시안 A', '시안 B', '완성본' 이렇게 나눠두면 깔끔해요.
에셋 (Assets)
내가 만든 컴포넌트나 라이브러리를 모아 보는 탭이에요. 처음엔 거의 쓸 일 없으니 "이런 게 있구나" 정도만 알아두면 돼요.
상단부터 페이지와 레이어 등을 볼 수 있는데, 프레임을 여러개 만들어서 진행하게되면
이벤트 배너 같은 것을 비슷한 디자인으로 진행할때, 옆에두고 만들어가면 편하더라구요!
③ 오른쪽 패널 — 디자인 속성
오른쪽 패널은 선택한 요소의 설정을 바꾸는 곳이에요. 여기가 진짜 자주 쓰는 영역이에요!
재밌는 건, 아무것도 선택 안 하면 → 파일·페이지 공통 설정이 뜨고,
요소 하나를 클릭하면 → 그 요소의 위치·크기·색·테두리·그림자 같은 속성으로 싹 바뀌어요.
- 위치/크기 (Position·Size): X, Y 좌표와 가로세로
- 채우기 (Fill): 색 채우기
- 선 (Stroke): 테두리
- 효과 (Effects): 그림자, 흐림 등
처음엔 "Fill로 색 바꾸기"랑 "크기 조절" 정도만 만져봐도 충분해요!
페이지만 클릭되고 아무것도 클릭하지 않았을때
레이어에 프레임을 클릭하였을때
프레임안에 요소를 클릭하였을때
이렇게 클릭하는 요소마다 오른쪽 패널이 달라지는걸 볼 수 있어요 ㅎㅎ!!
그렇게 클릭한 요소를 이제 오른쪽 패널에서 조절하면 됩니다..!!
④ 아래쪽 툴바 — 도구 모음 (위치 주의!)
예전엔 툴바가 화면 맨 위에 있었는데, 2024년 UI 개편(UI3) 이후로 화면 아래쪽 가운데로 내려왔어요!
그래서 오래된 강의나 블로그를 보고 따라 하다 보면 "툴바가 위에 없는데요?" 하고 당황하게 돼요.
지금은 아래 가운데 둥둥 떠 있는 바를 보시면 됩니다..!
주요 도구는 이래요.
- 이동 도구 (Move, 단축키 V): 선택하고 옮기는 기본 도구
- 프레임 (Frame, F): 작업의 틀(화면)을 만드는 도구
- 도형 (Shape, R): 사각형·원 등
- 펜 (Pen, P): 자유로운 선·도형
- 텍스트 (Text, T): 글자 입력
- 코멘트 (Comment, C): 협업할 때 메모 남기기
하단 이 부분을 보시면 됩니다 ㅎㅎ!!
✅ 처음엔 딱 이 3개만 기억하세요
도구가 많아 보이지만, 솔직히 처음부터 다 외울 필요 없어요. 저도 처음엔 이 세 개로 다 했거든요!
- V (이동) — 선택하고 옮기기
- F (프레임) — 작업 틀 만들기
- T (텍스트) — 글자 넣기
이 셋으로 일단 뭐라도 하나 만들어 보세요.
나머지는 쓰다 보면 자연스럽게 손에 익어가면서 편하게 사용할 수 있을거에요 ㅎㅎ!
피그마 화면, 처음엔 복잡해 보여도 '가운데 캔버스 + 좌우 패널 + 아래 툴바' 이 구조만 잡으면 하나도 두렵지 않더라구요!
오늘은 화면 구경만 했지만, 다음엔 실제로 프레임 만들고 도형 그려보는 것부터 같이 해볼게요.
처음이 제일 어렵지, 한 번 손에 익으면 정말 빠르게 늘어요. 저와 한번 같이 해봐요 😄
오늘도 읽어주셔서 감사하고, 다음 글로 또 찾아올게요:)
'피그마 독학' 카테고리의 다른 글
| 피그마 자동 레이아웃이란? - 써보니 진짜 편하더라고요;) (0) | 2026.06.03 |
|---|---|
| 피그마 무료 템플릿 활용하는 법 - 처음 시작할 때 써보세요👍 (2) | 2026.05.17 |
| 피그마 필수 단축키 모음 - 처음 외워야 할 것들 (0) | 2026.05.12 |
| 디자이너가 피그마 독학을 시작한 이유 + 첫 세팅 방법 (4) | 2026.05.12 |
