피그마를 처음 여는 사람을 위한 전체 지도
피그마는 '그림 그리는 앱'이 아니라 화면을 설계하는 작업실입니다
피그마를 처음 열면 많은 사람이 비슷한 생각을 합니다. "어디를 눌러야 하지?" 화면 한가운데에는 빈 공간이 넓게 펼쳐져 있고, 왼쪽과 오른쪽에는 낯선 패널이 붙어 있으며, 위나 아래 어딘가에는 아이콘이 줄지어 있습니다. 포토샵이나 파워포인트에 익숙한 사람도 피그마 앞에서는 잠시 멈칫합니다.
하지만 피그마는 어렵게 생긴 도구라기보다, 여러 사람이 함께 화면을 만드는 작업실에 가깝습니다. 기획자는 서비스의 흐름을 정리하고, 디자이너는 실제 화면을 만들고, 개발자는 구현에 필요한 크기와 색상, 간격 정보를 확인합니다. 한 파일 안에서 화면 설계, 디자인, 피드백, 프로토타입, 개발 전달까지 이어질 수 있기 때문에 실무에서 널리 사용됩니다.
이 장의 목표는 멋진 버튼을 만드는 것이 아닙니다. 그보다 먼저 피그마라는 도시의 지도를 익히는 것입니다. 어디에 무엇이 있고, 어떤 단위로 파일이 구성되며, 처음 화면에서 길을 잃지 않으려면 무엇을 알아야 하는지 차근차근 살펴보겠습니다.
누가 피그마를 쓰고, 무엇을 만들까요?
피그마는 디자이너만 쓰는 도구가 아닙니다. 실제 현업에서는 디자인 비전공자, 서비스 기획자, 프로덕트 매니저, 마케터, 개발자까지 함께 사용합니다. 물론 각자가 피그마에서 하는 일은 조금씩 다릅니다.
기획자는 보통 와이어프레임이나 화면 흐름을 만듭니다. 와이어프레임은 색과 장식보다 구조에 집중한 화면 초안입니다. 예를 들어 쇼핑 앱의 상품 상세 페이지를 설계할 때, "상단에는 상품 이미지가 있고, 그 아래에는 상품명과 가격, 옵션 선택, 구매 버튼이 있어야 한다"는 식으로 화면의 뼈대를 잡습니다. 완성된 디자인처럼 예쁘지 않아도 괜찮습니다. 중요한 것은 사용자가 어떤 순서로 정보를 보고 행동하는지 정리하는 것입니다.
디자이너는 와이어프레임을 바탕으로 실제 서비스에 가까운 화면을 만듭니다. 텍스트 크기, 색상, 여백, 버튼 모양, 아이콘, 이미지 비율 등을 다듬습니다. 반복해서 쓰는 버튼이나 카드 UI는 컴포넌트로 만들어 재사용합니다. 나중에 버튼 색을 바꿔야 할 때 모든 화면을 하나씩 수정하지 않고, 원본 컴포넌트만 수정해 여러 화면에 반영할 수 있습니다.
개발자는 피그마를 보고 화면을 구현합니다. 버튼의 너비와 높이, 텍스트 스타일, 색상 코드, 이미지 내보내기 정보, 화면 간 이동 흐름 등을 확인합니다. 예전에는 디자이너가 별도의 문서에 수치를 정리해 전달하는 일이 많았지만, 피그마에서는 파일 안에서 상당 부분을 직접 확인할 수 있습니다.
실무에서 피그마로 만드는 산출물은 다양합니다.
아이디어를 빠르게 정리한 러프 스케치와 와이어프레임
실제 서비스 화면에 가까운 UI 디자인과 디자인 시스템
클릭해서 흐름을 확인할 수 있는 프로토타입
개발자에게 전달하기 위한 화면 명세와 에셋
회의와 리뷰를 위한 코멘트, 버전 기록, 공유 링크
처음부터 모든 산출물을 완벽하게 만들 필요는 없습니다. 이 책에서는 실무에서 자주 쓰는 Auto Layout, Components, Prototype 같은 기능을 중심으로, 작은 화면을 만들고 정리하고 공유하는 흐름을 익혀 나갑니다.
새 파일을 열면 보이는 것들
피그마 파일을 열면 가장 먼저 넓은 빈 공간이 보입니다. 이곳이 캔버스입니다. 캔버스는 책상과 같습니다. 이 책상 위에 모바일 화면도 놓고, 웹 화면도 놓고, 버튼 모음도 놓고, 메모도 붙일 수 있습니다. 캔버스 자체는 하나의 화면이 아니라 작업 공간입니다.
캔버스 주변에는 작업을 돕는 영역들이 있습니다. 최신 피그마 UI에서는 화면 구성과 세부 위치가 계정 설정이나 업데이트 상태에 따라 조금씩 달라 보일 수 있지만, 기본 역할은 크게 변하지 않습니다. 처음에는 위치보다 역할을 기억하는 것이 중요합니다.
왼쪽에는 주로 Layers와 Assets 패널이 있습니다. Layers는 현재 페이지 안에 있는 프레임, 도형, 텍스트, 이미지 같은 요소의 목록입니다. 화면 위에 무엇이 쌓여 있는지 층별로 보여주는 구조라고 생각하면 됩니다. Assets는 재사용 가능한 컴포넌트나 라이브러리 요소를 찾는 곳입니다. 이미 만들어 둔 버튼, 입력창, 아이콘 등을 꺼내 쓰는 서랍에 가깝습니다.
오른쪽에는 Design, Prototype, Inspect 관련 패널이 있습니다. Design에서는 선택한 요소의 크기, 위치, 색상, 테두리, 그림자, Auto Layout 같은 속성을 조정합니다. Prototype에서는 버튼을 눌렀을 때 어느 화면으로 이동할지, 어떤 애니메이션으로 전환할지 설정합니다. Inspect 또는 개발자 확인 영역에서는 개발에 필요한 수치와 코드 힌트, 에셋 정보를 확인합니다. 팀이나 플랜, Dev Mode 사용 여부에 따라 표시 방식은 다를 수 있지만, "오른쪽은 선택한 대상의 속성과 전달 정보를 보는 곳"이라고 이해하면 쉽습니다.
도구를 선택하는 툴바는 최신 UI에서 상단 또는 하단의 떠 있는 막대 형태로 보일 수 있습니다. 여기에는 이동 도구, 프레임 도구, 도형 도구, 펜, 텍스트, 손 도구, 코멘트 도구 등이 모여 있습니다. 피그마를 다룬다는 것은 결국 이 도구들로 캔버스 위에 요소를 만들고, 왼쪽에서 구조를 확인하고, 오른쪽에서 속성을 조정하는 일입니다.
UI 길잡이
캔버스는 작업 책상, 왼쪽 패널은 문서의 목차, 오른쪽 패널은 선택한 물건의 속성표라고 생각해 보세요. 툴바는 연필, 자, 포스트잇이 놓인 필통입니다. 이 비유만 기억해도 처음 화면이 훨씬 덜 낯설어집니다.
툴바: 무엇을 만들지 고르는 곳
툴바는 피그마에서 가장 자주 손이 가는 영역입니다. 여기서 선택한 도구에 따라 캔버스에서 할 수 있는 행동이 바뀝니다.
가장 기본은 Move 도구입니다. 이름 그대로 요소를 선택하고 이동할 때 사용합니다. 피그마에서 대부분의 작업은 Move 도구로 시작해 Move 도구로 끝납니다. 화면을 만들다가 뭔가 이상해졌다면 우선 Move 도구로 돌아와 현재 무엇을 선택했는지 확인하는 습관이 좋습니다.
Frame 도구는 피그마의 핵심입니다. 프레임은 모바일 화면, 웹 페이지, 카드, 버튼 묶음처럼 디자인을 담는 그릇입니다. 파워포인트의 슬라이드와 비슷하다고 생각할 수 있지만, 피그마의 프레임은 훨씬 유연합니다. 프레임 안에 또 다른 프레임을 넣을 수 있고, Auto Layout을 적용해 내용에 따라 크기가 반응하게 만들 수도 있습니다.
Shape 도구는 사각형, 원, 선 같은 기본 도형을 만듭니다. 버튼 배경, 카드, 구분선, 아이콘의 기초 형태를 만들 때 사용합니다. Text 도구는 글자를 입력할 때 사용합니다. 피그마에서 텍스트는 단순한 문장이 아니라 디자인 요소입니다. 크기, 굵기, 줄 간격, 정렬 방식에 따라 화면의 인상이 크게 달라집니다.
Comment 도구는 협업에서 매우 중요합니다. 화면 특정 위치에 의견을 남길 수 있어, "이 버튼 문구를 바꿔 주세요" 또는 "이 영역은 다음 회의에서 결정합시다" 같은 대화를 파일 안에 직접 기록할 수 있습니다. 디자인 파일과 메신저 대화가 따로 흩어지지 않는다는 점이 피그마 협업의 큰 장점입니다.
단축키 박스: 기본 도구
V: Move 도구로 돌아가기F: Frame 도구 선택R: Rectangle, 사각형 만들기O: Ellipse, 원 만들기T: Text 도구 선택C: Comment 도구 선택단축키를 모두 외우려고 애쓰지 않아도 됩니다. 처음에는
V,F,T만 익혀도 화면을 따라 만드는 데 큰 무리가 없습니다.
캔버스: 화면을 올려놓는 무한 책상
캔버스는 무한히 넓은 작업 공간처럼 느껴집니다. 실제로 프레임을 여러 개 만들어 왼쪽에서 오른쪽으로 나열할 수도 있고, 위에서 아래로 버전별 화면을 쌓아 둘 수도 있습니다. 이 자유로움은 장점이지만, 초보자에게는 혼란의 원인이 되기도 합니다.
예를 들어 로그인 화면을 만든다고 해 보겠습니다. 캔버스 위에 텍스트와 버튼을 그냥 흩뿌리듯 놓으면 당장은 화면처럼 보일 수 있습니다. 하지만 나중에 위치를 옮기거나 프로토타입을 연결하거나 개발자에게 전달하려고 할 때 문제가 생깁니다. 무엇이 하나의 화면인지 구분하기 어렵기 때문입니다.
그래서 피그마에서는 먼저 프레임을 만들고, 그 안에 요소를 넣는 방식으로 작업하는 것이 좋습니다. 프레임은 "이 안에 있는 것들이 하나의 화면 또는 하나의 UI 묶음입니다"라고 선언하는 경계입니다. 모바일 앱 화면이라면 iPhone 크기의 프레임을 만들고, 웹 페이지라면 데스크톱 크기의 프레임을 만들면 됩니다.
캔버스 위를 이동할 때는 확대와 축소를 자주 사용합니다. 가까이 확대하면 세부 간격을 볼 수 있고, 멀리 축소하면 전체 화면 흐름을 볼 수 있습니다. 디자인 작업은 현미경과 지도를 번갈아 보는 일과 비슷합니다. 버튼 하나의 1픽셀 차이를 확인하다가도, 곧바로 전체 가입 흐름이 자연스러운지 살펴봐야 합니다.
단축키 박스: 이동과 확대/축소
Space누른 채 드래그 : 캔버스 이동+/-: 확대 / 축소Shift+1: 전체 보기Shift+2: 선택한 요소에 맞춰 보기
마우스 휠 또는 트랙패드 제스처 : 캔버스 이동과 확대/축소길을 잃었다면
Shift+1을 눌러 전체 지도를 먼저 보세요. 선택한 요소만 크게 보고 싶다면Shift+2가 유용합니다.
왼쪽 패널: Layers와 Assets 이해하기
왼쪽 패널의 Layers는 피그마 파일의 구조를 보여줍니다. 캔버스에는 화면이 시각적으로 보이지만, Layers 패널에는 그 화면을 이루는 요소들이 목록으로 보입니다. 프레임 안에 텍스트가 있고, 버튼이 있고, 버튼 안에 다시 배경 사각형과 글자가 들어 있는 식입니다.
레이어는 말 그대로 층입니다. 종이를 여러 장 겹쳐 놓은 모습을 떠올리면 됩니다. 위에 있는 레이어는 화면에서도 앞쪽에 보이고, 아래에 있는 레이어는 뒤쪽에 깔립니다. 어떤 요소가 보이지 않는다면 삭제된 것이 아니라 다른 사각형 뒤에 숨어 있을 수도 있습니다. 이럴 때 Layers 패널을 보면 어떤 요소가 어디에 있는지 확인할 수 있습니다.
Assets 패널은 재사용의 출발점입니다. 프로젝트가 커질수록 같은 버튼, 같은 아이콘, 같은 카드가 여러 화면에 반복됩니다. 매번 새로 그리면 시간도 오래 걸리고 모양도 조금씩 달라집니다. 이때 컴포넌트로 만들어 둔 요소를 Assets에서 꺼내 쓰면 일관성을 지킬 수 있습니다. 컴포넌트는 'Components로 반복 UI를 재사용하기'에서 본격적으로 다루겠지만, 지금은 "자주 쓰는 UI 부품을 모아 두는 곳" 정도로 이해하면 충분합니다.
초보자가 자주 겪는 문제 중 하나는 원하는 요소가 선택되지 않는 상황입니다. 캔버스에서 클릭했는데 자꾸 큰 프레임만 선택되거나, 반대로 작은 아이콘만 선택되는 식입니다. 이럴 때는 Layers 패널에서 직접 이름을 보고 선택하는 편이 빠릅니다. 레이어 이름을 정리하는 습관은 나중에 협업할 때 큰 차이를 만듭니다.
팁 박스: 레이어 이름은 나중의 나를 위한 메모입니다
Rectangle 17,Group 42같은 이름이 많아지면 파일은 금방 미로가 됩니다. 처음부터 완벽할 필요는 없지만, 중요한 프레임과 버튼에는Login,Home,Primary button처럼 의미 있는 이름을 붙여 보세요. 동료뿐 아니라 내일의 나도 훨씬 빨리 파일을 이해할 수 있습니다.
오른쪽 패널: Design, Prototype, Inspect의 역할
오른쪽 패널은 선택한 요소에 따라 내용이 달라집니다. 아무것도 선택하지 않았을 때와 텍스트를 선택했을 때, 프레임을 선택했을 때 보이는 항목이 다릅니다. 그래서 처음에는 "왜 방금 보이던 메뉴가 사라졌지?"라고 느낄 수 있습니다. 피그마의 오른쪽 패널은 항상 현재 선택한 대상에게 필요한 조작만 보여준다고 이해하면 됩니다.
Design 탭에서는 화면의 생김새를 조정합니다. 위치를 나타내는 X, Y 값, 크기를 나타내는 W, H 값, 회전, 투명도, 색상, 테두리, 그림자, 텍스트 속성 등이 여기에 있습니다. Auto Layout을 적용한 프레임이라면 방향, 간격, 안쪽 여백 같은 설정도 Design 영역에서 조정합니다.
Prototype 탭에서는 화면과 화면을 연결합니다. 예를 들어 로그인 버튼을 클릭하면 홈 화면으로 이동하게 만들 수 있습니다. 사용자는 실제 앱처럼 버튼을 눌러 흐름을 확인할 수 있습니다. 기획 단계에서는 "이 흐름이 맞는가?"를 확인하는 데 도움이 되고, 디자인 리뷰에서는 말로 설명하지 않아도 화면 전환을 직접 보여줄 수 있습니다.
Inspect 또는 개발 관련 패널은 구현 정보를 확인하는 곳입니다. 개발자는 이곳에서 색상 코드, 폰트 크기, 간격, 에셋 다운로드 정보를 볼 수 있습니다. 최신 피그마에서는 Dev Mode를 통해 개발자에게 필요한 정보가 더 명확하게 제공되기도 합니다. 다만 초보 단계에서는 "디자인을 만드는 Design, 흐름을 연결하는 Prototype, 구현 정보를 확인하는 Inspect"라는 큰 구분만 잡아도 충분합니다.
초보자 주의 박스: 메뉴가 사라진 게 아니라 선택 대상이 바뀐 것입니다
오른쪽 패널은 선택한 요소에 따라 계속 달라집니다. 텍스트를 선택하면 글자 관련 옵션이 보이고, 사각형을 선택하면 색상과 테두리 옵션이 보입니다. 원하는 설정이 보이지 않는다면 먼저 캔버스나 Layers 패널에서 올바른 요소를 선택했는지 확인하세요.
파일, 페이지, 섹션, 프레임, 레이어의 차이
피그마를 제대로 쓰려면 작업 단위를 구분해야 합니다. 처음에는 파일, 페이지, 프레임, 레이어라는 말이 비슷하게 들립니다. 하지만 이 차이를 이해하면 프로젝트를 훨씬 깔끔하게 정리할 수 있습니다.
파일은 하나의 프로젝트 문서입니다. 예를 들어 쇼핑앱 리뉴얼, 회사 홈페이지 개편, 관리자 대시보드 같은 단위가 파일이 될 수 있습니다. 피그마 홈 화면에서 열고 닫는 가장 큰 작업 단위라고 생각하면 됩니다.
페이지는 파일 안을 나누는 탭입니다. 하나의 파일 안에 여러 페이지를 만들 수 있습니다. 예를 들어 쇼핑앱 파일 안에 Wireframe, Design, Prototype, Components, Archive 같은 페이지를 둘 수 있습니다. 이렇게 나누면 초안, 최종 디자인, 재사용 부품, 보관 자료가 뒤섞이지 않습니다.
섹션은 같은 페이지 안에서 관련된 프레임들을 묶는 영역입니다. 예를 들어 회원가입 흐름, 상품 탐색 흐름, 결제 흐름처럼 화면 묶음마다 섹션을 만들 수 있습니다. 캔버스가 넓어질수록 섹션은 표지판 역할을 합니다. 회의 중에도 "결제 흐름 섹션을 봐 주세요"라고 말하면 모두가 같은 위치를 찾기 쉽습니다.
프레임은 실제 화면 또는 UI 묶음의 그릇입니다. 로그인 화면, 홈 화면, 상품 상세 화면처럼 하나의 화면을 프레임으로 만들 수 있습니다. 때로는 버튼이나 카드 같은 작은 UI 단위도 프레임으로 만들 수 있습니다. 특히 Auto Layout을 사용할 때 프레임은 매우 중요해집니다.
레이어는 프레임 안에 들어 있는 가장 작은 작업 요소입니다. 텍스트, 도형, 이미지, 아이콘, 컴포넌트 인스턴스 등이 레이어가 됩니다. 레이어가 모여 프레임을 만들고, 프레임이 모여 섹션을 이루며, 섹션과 페이지가 모여 하나의 파일을 구성합니다.
아래처럼 생각하면 쉽습니다.
파일: 쇼핑앱 리뉴얼 프로젝트 전체
페이지: 와이어프레임, 최종 디자인, 컴포넌트, 보관함
섹션: 로그인 흐름, 상품 탐색 흐름, 결제 흐름
프레임: 로그인 화면, 홈 화면, 장바구니 화면
레이어: 제목 텍스트, 상품 이미지, 구매 버튼, 아이콘
이 구조를 알면 피그마가 단순한 그림판이 아니라 체계적인 화면 설계 도구라는 점이 보이기 시작합니다.
실제 프로젝트는 이렇게 정리합니다
이제 가상의 프로젝트를 하나 떠올려 보겠습니다. 우리는 작은 모바일 앱, 예를 들어 "동네 카페 주문 앱"을 만든다고 가정하겠습니다. 이 앱에는 로그인, 메뉴 목록, 메뉴 상세, 장바구니, 결제 완료 화면이 필요합니다.
먼저 피그마에서 새 파일을 만들고 파일 이름을 동네 카페 주문 앱으로 정합니다. 파일 안에는 00 Cover, 01 Wireframe, 02 Design, 03 Prototype, Components, Archive 같은 페이지를 만들 수 있습니다. 숫자를 붙이면 페이지 순서가 정리되어 팀원이 보기 편합니다. 이 책의 챕터 제목에는 번호를 넣지 않지만, 실무 파일의 페이지 이름에는 정렬을 위해 숫자를 붙이는 경우가 많습니다.
01 Wireframe 페이지에는 화면 구조만 빠르게 잡습니다. 로그인 화면 프레임, 메뉴 목록 프레임, 메뉴 상세 프레임을 만들고, 각 화면 안에 필요한 정보만 배치합니다. 색상은 회색 위주로 단순하게 두어도 됩니다. 이 단계의 목표는 예쁜 디자인이 아니라 흐름 확인입니다.
02 Design 페이지에서는 실제 색상, 폰트, 이미지, 버튼 스타일을 적용합니다. Components 페이지에는 반복해서 사용할 버튼, 상단 바, 메뉴 카드, 수량 선택 UI를 모아 둡니다. 나중에 디자인이 커질수록 이 페이지가 프로젝트의 부품 창고가 됩니다.
03 Prototype 페이지나 Design 페이지 안에서는 화면들을 연결해 클릭 가능한 흐름을 만듭니다. 로그인 버튼을 누르면 메뉴 목록으로 이동하고, 메뉴 카드를 누르면 상세 화면으로 이동하며, 결제 버튼을 누르면 완료 화면으로 이동하게 만들 수 있습니다.
이처럼 피그마 작업은 보통 "구조 잡기 → 화면 만들기 → 반복 요소 정리하기 → 흐름 연결하기 → 공유하고 피드백 받기"의 순서로 진행됩니다. 이 순서를 알고 있으면, 빈 캔버스를 마주해도 다음에 무엇을 해야 할지 덜 막막합니다.
선택, 검색, 정렬: 초반에 익히면 편해지는 조작
피그마에서 초보자가 가장 많이 시간을 쓰는 일은 의외로 그리기가 아니라 찾기입니다. 내가 만든 버튼이 어디 있는지, 어떤 프레임을 선택해야 하는지, 화면이 왜 이상하게 움직이는지 확인하는 데 시간이 걸립니다. 그래서 선택과 검색 조작을 초반에 익혀 두면 작업 속도가 빠르게 올라갑니다.
요소를 선택할 때는 캔버스에서 직접 클릭할 수도 있고, Layers 패널에서 이름을 클릭할 수도 있습니다. 겹쳐 있는 요소를 선택해야 할 때는 더블 클릭이나 계층 선택이 필요할 수 있습니다. 큰 프레임 안에 작은 버튼이 있고, 그 버튼 안에 텍스트가 있는 구조라면 한 번 클릭으로는 가장 바깥 프레임이 선택될 수 있습니다. 이때 안쪽 요소를 선택하려면 한 번 더 들어가야 합니다.
검색은 큰 파일에서 특히 유용합니다. 프레임 이름이나 레이어 이름을 잘 붙여 두었다면 검색으로 원하는 화면을 빠르게 찾을 수 있습니다. 그래서 이름 정리는 단순한 청소가 아니라 작업 속도를 높이는 장치입니다.
복사와 붙여넣기도 자주 사용합니다. 피그마에서는 같은 요소를 복제해 여러 화면에 배치하는 일이 많습니다. 다만 반복 요소가 많아진다면 단순 복사보다 컴포넌트화를 고려해야 합니다. 복사는 빠르지만, 나중에 일괄 수정이 어렵습니다. 컴포넌트는 처음 만들 때 조금 신경을 써야 하지만, 장기적으로는 훨씬 안정적입니다.
단축키 박스: 선택과 검색
Cmd+A/Ctrl+A: 현재 범위 안의 전체 선택Cmd+C/Ctrl+C: 복사Cmd+V/Ctrl+V: 붙여넣기Cmd+D/Ctrl+D: 복제Cmd+//Ctrl+/: 메뉴와 명령 검색Cmd+F/Ctrl+F: 파일 안에서 검색맥은
Cmd, 윈도우는Ctrl을 기본으로 사용합니다. 협업 중에는 운영체제가 달라도 같은 기능을 서로 설명할 수 있도록 단축키의 역할을 함께 기억해 두면 좋습니다.
초보자가 자주 헷갈리는 피그마 UI
처음 피그마를 배울 때 헷갈리는 지점은 대부분 비슷합니다. 첫 번째는 프레임과 그룹의 차이입니다. 그룹은 여러 요소를 임시로 묶는 방식에 가깝고, 프레임은 화면이나 UI 구조를 담는 그릇입니다. 실무에서는 그룹보다 프레임을 더 자주 사용하게 됩니다. 특히 Auto Layout, Constraints, Prototype 연결 등은 프레임을 기준으로 이해하는 편이 좋습니다.
두 번째는 캔버스와 프레임을 혼동하는 것입니다. 캔버스는 무한 작업 공간이고, 프레임은 그 위에 올려놓는 실제 화면입니다. 모바일 앱 화면을 만든다면 반드시 모바일 크기의 프레임 안에 요소를 넣어야 합니다. 캔버스 위에 그냥 텍스트와 버튼을 놓는 것은 책상 위에 낱장을 흩어 놓는 것과 같습니다.
세 번째는 오른쪽 패널이 상황에 따라 바뀐다는 점입니다. 앞서 말했듯이 피그마는 선택한 요소에 맞는 옵션을 보여줍니다. 텍스트를 수정하고 싶다면 텍스트 레이어를 선택해야 하고, 프레임 크기를 바꾸고 싶다면 프레임을 선택해야 합니다. 원하는 메뉴가 보이지 않을 때는 "피그마가 이상하다"가 아니라 "내가 지금 무엇을 선택했지?"라고 먼저 확인해 보세요.
네 번째는 공유 권한입니다. 피그마는 웹 기반 협업 도구이기 때문에 링크를 공유할 수 있습니다. 하지만 링크가 있다고 해서 모두 편집할 수 있는 것은 아닙니다. 보기 권한인지, 코멘트 권한인지, 편집 권한인지에 따라 할 수 있는 일이 달라집니다. 실무에서는 파일을 공유하기 전에 상대방이 무엇을 해야 하는지 생각하고 권한을 설정해야 합니다.
팁 박스: 처음부터 완벽한 파일을 만들려고 하지 마세요
피그마 실력은 한 번에 생기지 않습니다. 처음에는 프레임을 만들고, 이름을 붙이고, 요소를 안에 넣는 것만 제대로 해도 충분합니다. 정돈된 시작이 나중의 Auto Layout, Components, Prototype 학습을 훨씬 쉽게 만들어 줍니다.
피그마 작업 흐름 한눈에 보기
피그마의 기본 작업 흐름은 생각보다 단순합니다. 먼저 만들 화면의 목적을 정합니다. 로그인 화면인지, 상품 목록인지, 설정 화면인지 결정합니다. 다음으로 프레임을 만들고, 그 안에 텍스트와 도형, 이미지 같은 레이어를 배치합니다. 화면이 어느 정도 잡히면 간격과 정렬을 조정하고, 반복되는 요소를 컴포넌트로 정리합니다. 이후 화면 간 연결이 필요하면 Prototype에서 흐름을 설정하고, 팀원에게 공유해 피드백을 받습니다.
이 흐름은 앞으로 배우는 기능에서도 계속 반복됩니다. 디자인 기본기를 익히면 화면의 정렬, 대비, 반복, 근접성을 더 안정적으로 볼 수 있고, 프레임과 레이어를 제대로 다루면 구조가 흔들리지 않습니다. Auto Layout은 내용에 따라 반응하는 UI를 만들게 해 주고, Components와 Variants는 반복 UI를 체계화합니다. Prototype은 클릭 가능한 화면 흐름을 만들고, Dev Mode와 핸드오프 과정은 개발자에게 필요한 정보를 전달하는 데 도움을 줍니다.
즉, 이 장은 출발점입니다. 지금은 모든 기능을 외우지 않아도 됩니다. 대신 피그마를 열었을 때 "왼쪽은 구조, 가운데는 작업 공간, 오른쪽은 속성, 프레임은 화면의 그릇"이라는 감각을 가져가면 됩니다. 이 감각이 있으면 앞으로 어떤 기능을 배우든 제자리를 찾을 수 있습니다.
핵심 요약
피그마는 디자이너만의 도구가 아니라 기획자, 개발자, 마케터가 함께 화면을 설계하고 공유하는 협업 도구입니다.
캔버스는 작업 공간이고, 프레임은 실제 화면이나 UI 묶음을 담는 그릇입니다.
왼쪽 Layers 패널은 파일 구조를 보여주고, Assets 패널은 재사용 가능한 컴포넌트와 라이브러리 요소를 찾는 곳입니다.
오른쪽 Design 패널은 시각 속성을 조정하고, Prototype 패널은 화면 흐름을 연결하며, Inspect 또는 Dev Mode 관련 영역은 개발 전달 정보를 확인하는 데 사용됩니다.
파일, 페이지, 섹션, 프레임, 레이어의 차이를 이해하면 프로젝트를 깔끔하게 정리할 수 있습니다.
처음에는
V,F,T, 확대/축소, 전체 보기, 검색 단축키만 익혀도 작업이 훨씬 편해집니다.
실습 과제: 새 파일을 만들고 첫 번째 작업 공간 정리하기
이번 실습에서는 멋진 디자인을 만들기보다 피그마의 기본 구조를 손에 익히는 것이 목표입니다. 천천히 따라 하며 파일, 페이지, 섹션, 프레임, 레이어의 관계를 확인해 보세요.
피그마에서 새 디자인 파일을 만들고 파일 이름을
나의 첫 앱 화면 연습으로 변경합니다.왼쪽 페이지 영역에서
Wireframe,Design,Components,Archive페이지를 만듭니다.Wireframe페이지로 이동한 뒤, 캔버스에 섹션을 하나 만들고 이름을로그인 흐름으로 지정합니다.섹션 안에 모바일 크기의 프레임을 2개 만들고 각각
로그인 화면,회원가입 화면이라고 이름 붙입니다.로그인 화면프레임 안에 앱 이름 텍스트, 이메일 입력 영역, 비밀번호 입력 영역, 로그인 버튼을 간단한 도형과 텍스트로 배치합니다.회원가입 화면프레임 안에 제목, 이름 입력 영역, 이메일 입력 영역, 가입 버튼을 배치합니다.Layers 패널에서 프레임과 주요 레이어 이름이 알아보기 쉽게 정리되어 있는지 확인합니다.
Shift+1로 전체 화면을 보고,Shift+2로 선택한 프레임을 확대해 보며 이동과 확대/축소에 익숙해집니다.
마지막으로 스스로에게 질문해 보세요. "내 파일에서 페이지는 어디에 있고, 프레임은 어디에 있으며, 레이어는 어떤 구조로 들어가 있는가?" 이 질문에 답할 수 있다면 다음 학습으로 넘어갈 준비가 된 것입니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.