오즈코딩스쿨 디자인 캠프 - 피그마, 이제 화면이 안 막막하다 — 인터페이스부터 도형까지 (day9)

 

 

오늘은 UI 디자인 수업의 첫날이었다. 그동안 피그마를 혼자 만져보긴 했지만, 처음 열었을 때 화면이 넓고 어떤 기능이 뭘 하는지 헷갈렸던 기억이 있다. 그래서 오늘은 실제 작업에 꼭 필요한 영역을 하나씩 짚고, 가장 기본이 되는 섹션·프레임·그룹의 차이까지 정리했다. 수업이 끝나고 나니, 적어도 화면을 열었을 때 어디를 봐야 할지는 감이 잡혔다.

피그마를 쓰는 이유

크게 세 가지였다.

실시간 동기화 — 하나의 클라우드 문서에서 여러 명이 같이 작업한다. 예전처럼 디자인 파일을 저장해서 보내고, 수정본을 다시 받고, 버전이 계속 늘어나는 일이 없다. 한 작업대 위에서 실시간으로 업데이트된다.

맥락 유지와 소통 — 작업 화면 안에서 바로 코멘트로 소통한다. "이 버튼 왜 여기 있어요?" 같은 피드백을 기획안을 따로 캡처해 보낼 필요 없이, 그 위치에 바로 남길 수 있다.

시스템적 설계 — 컴포넌트와 오토레이아웃으로 반복 업무를 줄이고 규격화한다. 컴포넌트는 재사용하는 디자인 단위이고, 오토레이아웃은 요소 간 간격과 배치를 규칙으로 관리하는 기능이다.

피그마 화면은 네 영역으로 나뉜다

영역역할

좌측 패널	페이지와 레이어 구조 (파일·에셋 탭)
중앙 캔버스	실제로 작업하는 공간
우측 패널	선택한 요소의 속성 설정 (선택에 따라 바뀜)
하단 도구 영역	펜·텍스트·도형·섹션 등 무엇을 만들지 선택

좌측 패널에는 페이지와 레이어가 있다. 레이어는 캔버스의 요소들을 리스트 형태로 보여주는데, 앞에 붙은 아이콘으로 섹션·프레임·그룹·도형·이미지·텍스트·오토레이아웃·컴포넌트·인스턴스를 구분한다. 외우려 하지 않아도 작업하다 보면 자연스럽게 익숙해진다고 한다. 파일 탭을 에셋 탭으로 바꾸면 머티리얼 디자인이나 애플 디자인 시스템 같은 UI 키트를 검색해서 내 작업에 불러올 수 있다.

우측 패널은 선택한 요소에 따라 내용이 달라진다. 텍스트를 고르면 폰트·정렬·행간·자간을 조절하는 패널로, 프레임을 고르면 사이즈·레이아웃을 조절하는 패널로 바뀐다. 텍스트는 입력 방식이 두 가지인데, T를 누르고 그냥 클릭하면 입력하는 내용에 따라 박스가 늘어나고, 드래그해서 박스를 먼저 만들면 그 공간 안에서 줄바꿈되며 입력된다.

가장 중요한 건 섹션·프레임·그룹의 차이

오늘 수업에서 가장 핵심으로 꼽은 부분이다. 어도비나 XD에서 넘어온 사람이 가장 헷갈려 하는 지점이라고 했는데, 나도 그랬다.

구분단축키역할

섹션	Shift+S	여러 프레임·요소를 묶어 작업 구역을 구분. 타이틀을 달 수 있음
프레임	F	화면 단위(틀). 한 화면을 담는 도화지
그룹	Cmd+G	여러 요소를 임시로 묶기. 잘 쓰지 않음

섹션은 로그인 플로우, 회원가입 플로우처럼 화면들을 카테고리 단위로 묶을 때 쓴다. 큰 덩어리를 나누는 용도다. 프레임은 모바일 앱 한 화면, 웹 한 화면, 썸네일 하나처럼 화면 단위를 만드는 도구로, 그 자체가 하나의 독립된 도화지처럼 작동한다.

여기서 중요한 건 그룹과 프레임의 구분이다. 강사님 표현을 빌리면 "그룹은 그냥 껴놓은 것이고, 프레임은 작업 공간"이다. 그래서 화면을 만들 때는 그룹이 아니라 프레임(또는 오토레이아웃)을 써야 한다.

왜 그룹을 쓰면 안 될까. 그룹만 쌓인 화면은 반응형 대응이 아예 안 되기 때문이다. 화면 크기가 바뀔 때 요소들이 어떻게 움직여야 하는지 기준(제약 속성)을 부여할 수 없어서, 해상도가 줄거나 늘어날 때 대응이 안 된다. 웹과 모바일을 함께 작업하다 보면 레이아웃을 하나하나 수동으로 옮겨야 해서, 큰 단위의 프로덕트에서는 굉장히 비효율적이 된다. 반면 프레임으로 화면 단위를 먼저 정의하면 기준 해상도가 분명해지고, 그리드와 간격 규칙을 적용하기 쉬워진다. 협업할 때도 개발자나 팀원이 "이 프레임이 하나의 화면이구나" 하고 바로 이해한다. 그래서 피그마에서는 프레임으로 시작하는 습관을 들이라고 강조했다.

꼭 기억할 단축키

복잡해 보여도 자주 쓰는 것 위주로 정리했다.

기능단축키

선택·이동 (기본 상태)	V
프레임 만들기	F
섹션 만들기	Shift+S
텍스트	T
사각형 / 원	R / O
선	L
오토레이아웃	Shift+A
이미지·동영상 업로드	Cmd+Shift+K
액션(기능 검색)	Cmd+K 또는 /
캔버스 이동	Space 누른 채 드래그, 또는 휠 클릭
확대·축소	Cmd(Win은 Ctrl) + 마우스 휠
전체 단축키 목록 보기	Ctrl+Shift+?

이 밖에도 캔버스에서 자주 쓰는 동작이 있다. 객체를 복사할 땐 Option(Alt) 드래그, 가장 아래 레이어를 콕 집어 선택할 땐 Option(Alt)+클릭, 요소를 앞뒤로 보낼 땐 ]와 [를 쓴다. 줄자는 Shift+R, 레이아웃 그리드는 Shift+G로 켜고 끈다. 요소 간 간격을 확인할 땐 Option을 누른 채 마우스를 올리면(호버) 수치가 보인다.

단축키는 완벽하게 외우려 하기보다, 화면 한쪽에 띄워두거나 프린트해서 옆에 붙여놓고 직접 작업하며 손에 익히는 게 더 효율적이라고 했다. 나도 노트북 옆에 붙여놓기로 했다.

우측 패널에서 자주 쓰는 5가지 속성

속성무엇을 바꾸나

Fill (필)	도형 안쪽 면색
Stroke (스트로크)	테두리 두께와 색
Corner Radius	모서리 둥글기
Opacity (오퍼시티)	투명도
Effects (이펙트)	그림자·블러 등 효과

스트로크는 테두리가 선의 안쪽(Inside)·가운데(Center)·바깥쪽(Outside) 어디에 위치하는지 정할 수 있고, 점선(Dashed)이나 한쪽 면만(Top·Bottom 등) 적용하는 것도 가능하다. 코너 레디우스는 모서리 둥글기인데, 각지면 단단하고 딱딱한 인상을, 둥글면 부드러운 인상을 준다. 카드나 버튼의 분위기를 이 값으로 바꿀 수 있다. 이펙트에는 드롭 섀도우, 이너 섀도우, 레이어 블러, 백그라운드 블러, 그리고 요즘 iOS에 적용된 유리 질감의 글라스 효과까지 있다.

실습 — 도형으로 손에 익히기

후반에는 직접 도형을 다뤄봤다. 피그마는 이론으로 듣기보다 자주 써보며 익히는 게 효율적이라, 손으로 따라 하는 시간이었다.

기본 도형은 사각형(R)·원(O)·별·삼각형(폴리곤)·선(L)으로 만든다. Shift를 누르면 정비율로, 비율 고정을 켜면 늘려도 형태가 유지된다. 색은 스포이드(I)로 콕 집거나 Fill에 헥스코드를 붙여넣어 바꾼다. 복제는 Option 드래그로, 같은 간격을 기억해 반복 복제할 땐 Cmd+D를 쓴다. 별이나 폴리곤은 어피어런스(Appearance) 패널에서 꼭지점 수와 깊이를 조절하고, 사각형은 더블클릭해서 꼭지점을 옮기거나 모서리를 개별로 둥글릴 수 있다.

특히 새로 배운 건 **패스파인더(불리언)**였다. 도형을 겹쳐놓고 합치거나 잘라내는 기능이다.

기능동작

Union	여러 도형을 하나로 합치기
Subtract	위에 얹은 도형으로 아래 도형을 잘라내기
Intersect	겹친 부분만 남기기
Exclude	겹친 부분만 제거하고 나머지 유지

여기서 도형이 쌓인 순서(레이어 위치)가 결과를 바꾼다는 점이 포인트였다. 마지막으로 정렬도 익혔다. 좌·우·중앙, 상·중·하 정렬과 간격을 균등하게 분배하는 기능인데, 프레임을 선택하고 Enter를 누르면 그 안의 요소가 전부 선택돼 한 번에 정리할 수 있다. 그리고 도형을 프레임 안에 넣으면 프레임 사이즈대로 잘리는데, 이때 요소가 반드시 그 프레임에 속해 있어야 한다는 것도 확인했다.