프레임과 레이어로 화면의 뼈대 만들기

화면을 만들기 전에, 먼저 뼈대를 세웁니다

피그마에서 화면을 만든다는 것은 예쁜 색을 칠하거나 멋진 아이콘을 얹는 일부터 시작하지 않습니다. 가장 먼저 해야 할 일은 "이 화면이 어디까지이고, 어떤 요소가 어떤 순서로 놓이는가"를 정하는 것입니다. 건물을 지을 때 벽지보다 기둥과 벽이 먼저인 것처럼, UI 디자인에서도 프레임과 레이어가 먼저입니다.

이 장에서는 피그마에서 기본 화면을 구성하는 데 꼭 필요한 프레임, 도형, 텍스트, 이미지, 레이어 정리 방법을 다룹니다. 아직 Auto Layout이나 Components를 몰라도 괜찮습니다. 오히려 지금 프레임과 레이어를 제대로 다뤄두면, 뒤에서 Auto Layout으로 반응형 UI를 만들고 Components로 반복 요소를 재사용할 때 훨씬 덜 헷갈립니다.

피그마 작업이 복잡해지는 이유는 기능이 어려워서라기보다, 처음 만든 구조가 정리되지 않았기 때문인 경우가 많습니다. 이름 없는 레이어가 수십 개 쌓이고, 어떤 버튼이 어떤 화면에 속하는지 모르게 되면 작은 수정도 오래 걸립니다. 반대로 화면의 뼈대를 단단히 잡아두면 디자인은 물론 기획 수정, 개발 전달, 협업 피드백까지 자연스럽게 이어집니다.

Frame은 화면이고, Group은 묶음입니다

피그마를 처음 사용할 때 가장 자주 헷갈리는 개념이 Frame과 Group입니다. 둘 다 여러 요소를 담을 수 있기 때문에 겉보기에는 비슷해 보입니다. 하지만 역할은 꽤 다릅니다.

Frame은 하나의 화면이나 영역을 담는 그릇입니다. 모바일 앱의 한 화면, 웹사이트의 한 페이지, 카드 UI, 내비게이션 바처럼 "디자인 구조를 가진 독립적인 영역"을 만들 때 사용합니다. Frame은 크기를 가질 수 있고, 배경색을 지정할 수 있으며, 안에 들어 있는 요소의 위치 관계를 관리할 수 있습니다. 나중에 Auto Layout, Constraints, Prototype, Components 같은 기능을 사용할 때도 Frame은 매우 중요한 기준이 됩니다.

Group은 여러 레이어를 잠시 하나처럼 선택하기 위한 묶음에 가깝습니다. 예를 들어 아이콘을 이루는 선과 도형 여러 개를 함께 옮기고 싶을 때 Group을 사용할 수 있습니다. 하지만 Group은 화면의 기준이 되기에는 부족합니다. 배경이나 반응형 설정, Auto Layout 같은 구조적 기능을 다루기에는 Frame이 훨씬 적합합니다.

쉽게 말하면 Frame은 "방"이고 Group은 "고무줄로 묶은 물건들"입니다. 방은 크기와 벽이 있고, 가구를 배치할 기준이 됩니다. 반면 고무줄로 묶은 물건은 한꺼번에 들고 이동하기는 쉽지만, 공간 자체가 되지는 않습니다.

실무 팁 — 헷갈리면 Frame을 먼저 생각하세요
화면, 카드, 버튼, 목록, 헤더처럼 UI의 구조를 이루는 단위라면 Frame을 사용하는 것이 좋습니다. 단순히 여러 개의 장식 요소를 잠깐 함께 옮기고 싶을 때만 Group을 사용한다고 생각하면 판단이 쉬워집니다.

어떤 프레임 크기로 시작해야 할까

피그마에서 Frame 도구를 선택하면 오른쪽 패널이나 캔버스 옆 프리셋 목록에서 다양한 화면 크기를 고를 수 있습니다. 모바일, 태블릿, 데스크톱, 프레젠테이션 등 여러 프리셋이 보이는데, 초보자 입장에서는 이 선택부터 막막할 수 있습니다.

가장 좋은 기준은 "사용자가 실제로 이 화면을 어디에서 볼 것인가"입니다. 모바일 앱 화면이라면 iPhone이나 Android 프리셋으로 시작하고, 웹 관리자 페이지라면 Desktop 프리셋으로 시작하는 식입니다. 태블릿용 서비스라면 Tablet 프리셋을 고르면 됩니다. 다만 실무에서는 특정 기기 하나에만 맞추기보다, 대표 크기를 기준으로 삼고 나중에 반응형 규칙을 잡는 경우가 많습니다.

모바일 앱을 처음 연습한다면 iPhone 계열 프리셋 하나를 선택해 시작해도 충분합니다. 예를 들어 로그인 화면, 회원가입 화면, 상품 상세 화면은 세로형 모바일 프레임으로 만들기 좋습니다. 웹 화면을 연습한다면 Desktop 프리셋을 사용하되, 너무 넓은 캔버스에 모든 요소를 퍼뜨리지 않도록 콘텐츠 폭을 의식해야 합니다. 태블릿 화면은 모바일보다 넓지만 데스크톱보다 좁기 때문에, 카드나 목록이 어떻게 재배치되는지 확인하는 중간 단계로 유용합니다.

프리셋은 정답이 아니라 출발점입니다. 처음 고른 크기가 마음에 들지 않으면 오른쪽 Design 패널의 W와 H 값을 바꿔 수정할 수 있습니다. W는 너비, H는 높이를 의미합니다. 모바일 화면에서 W가 390, H가 844라면 가로 390픽셀, 세로 844픽셀 크기의 화면이라는 뜻입니다.

단축키 박스 — 프레임 만들기
Mac은 Command, Windows는 Ctrl을 기준으로 생각하면 됩니다.

• Frame 도구: F

• 선택 도구: V

• 프레임 안으로 요소 넣기: 레이어를 프레임 안으로 드래그

• 선택한 요소를 프레임으로 감싸기: Option/Alt + Command/Ctrl + G

첫 화면을 만드는 기본 순서

빈 캔버스 앞에서 무엇부터 해야 할지 모르겠다면 순서를 정해두면 됩니다. 디자인을 잘하는 사람도 처음부터 완성된 화면을 한 번에 그리지 않습니다. 큰 덩어리를 놓고, 그 안에 작은 요소를 넣고, 마지막에 간격과 정렬을 다듬습니다.

먼저 화면이 될 Frame을 만듭니다. 모바일 앱이라면 세로형 프레임 하나를 만들고, 웹이라면 데스크톱 프레임을 하나 만듭니다. 그다음 화면 안의 큰 영역을 나눕니다. 예를 들어 로그인 화면이라면 상단 로고 영역, 가운데 입력 영역, 하단 안내 문구 영역 정도로 나눌 수 있습니다.

이 단계에서는 색이나 그림자를 너무 신경 쓰지 않아도 됩니다. 중요한 것은 사용자가 무엇을 먼저 보고, 다음에 무엇을 해야 하는지 흐름을 잡는 것입니다. 로그인 화면이라면 사용자는 앱 이름을 확인하고, 이메일과 비밀번호를 입력하고, 로그인 버튼을 누르게 됩니다. 따라서 이 순서가 화면 위에서 아래로 자연스럽게 이어지면 됩니다.

도형은 화면의 큰 덩어리를 잡을 때 유용합니다. 사각형으로 버튼 자리, 입력창 자리, 이미지 자리 등을 표시해두면 아직 실제 콘텐츠가 없어도 화면 구조를 빠르게 볼 수 있습니다. 이처럼 색과 세부 디자인을 넣기 전, 단순한 선과 면으로 화면 구조를 잡는 작업을 와이어프레임이라고 부릅니다.

도형, 선, 텍스트, 이미지 배치하기

피그마에서 가장 많이 사용하는 기본 재료는 도형, 선, 텍스트, 이미지입니다. 이 네 가지를 다룰 줄 알면 대부분의 기본 화면을 만들 수 있습니다.

도형은 버튼, 카드, 입력창, 배경 영역을 만드는 데 사용합니다. Rectangle 도구로 사각형을 만들고, 오른쪽 Design 패널에서 Fill 색상, Stroke 테두리, Corner radius 모서리 둥글기를 조절할 수 있습니다. 예를 들어 입력창은 밝은 회색 배경에 얇은 테두리를 주고, 버튼은 진한 색 배경에 흰색 텍스트를 올리는 방식으로 만들 수 있습니다.

선은 구분선을 만들 때 유용합니다. 리스트 항목 사이를 나누거나, 헤더 아래에 얇은 경계선을 넣을 때 사용합니다. 선을 너무 진하게 쓰면 화면이 복잡해 보일 수 있으므로, 보통은 연한 회색을 사용해 조용히 구분해주는 편이 좋습니다.

텍스트는 정보의 우선순위를 보여주는 핵심 요소입니다. 제목, 설명, 버튼 문구, 안내 문구는 모두 서로 다른 역할을 가집니다. 제목은 크고 굵게, 설명은 조금 작고 부드럽게, 버튼 문구는 짧고 명확하게 만드는 것이 기본입니다. 디자인 기본기에서 다룬 원칙처럼 텍스트 크기와 굵기를 아무렇게나 바꾸기보다 역할에 따라 일정한 규칙을 잡는 것이 좋습니다.

이미지는 실제 서비스의 분위기를 빠르게 전달합니다. 피그마에서는 이미지를 캔버스에 드래그해서 넣거나, Place image 기능으로 불러올 수 있습니다. 이미지를 도형 안에 채우고 싶다면 사각형을 만든 뒤 Fill 타입을 Image로 바꾸는 방법도 있습니다. 프로필 사진, 상품 이미지, 배너 이미지를 넣을 때 자주 쓰는 방식입니다.

단축키 박스 — 기본 요소 만들기

• 사각형: R

• 선: L

• 텍스트: T

• 이미지 불러오기: Command/Ctrl + Shift + K

• 비율 유지하며 크기 조절: 모서리를 드래그할 때 Shift 사용

크기 조절은 숫자와 눈을 함께 씁니다

초보자는 요소를 마우스로 대충 늘이고 줄이기 쉽습니다. 물론 빠르게 배치할 때는 드래그가 편합니다. 하지만 실무 화면에서는 크기와 간격이 조금만 어긋나도 어수선해 보입니다. 그래서 피그마에서는 눈으로 보며 조절하되, 중요한 값은 숫자로 확인하는 습관이 필요합니다.

오른쪽 Design 패널에는 선택한 요소의 X, Y, W, H 값이 표시됩니다. X와 Y는 요소의 위치를 의미하고, W와 H는 너비와 높이를 의미합니다. 예를 들어 버튼의 W가 320, H가 48이라면 너비 320픽셀, 높이 48픽셀짜리 버튼입니다. 같은 화면 안에서 주요 버튼 높이가 47, 49, 50으로 제각각이면 사용자는 정확히 말로 설명하지 못해도 어딘가 불안정하다고 느낄 수 있습니다.

처음에는 모든 값을 완벽하게 맞추려 하지 않아도 됩니다. 대신 자주 쓰는 크기를 정해두세요. 모바일 화면의 기본 버튼 높이를 48로 잡았다면 같은 화면 안의 주요 버튼은 가능한 한 같은 높이를 유지합니다. 입력창도 48 또는 52처럼 일정한 높이를 사용하면 화면이 안정됩니다.

크기를 조절할 때는 선택한 요소의 가장자리를 드래그할 수도 있고, 오른쪽 패널에 숫자를 직접 입력할 수도 있습니다. 여러 요소를 선택한 상태에서 같은 W나 H 값을 입력하면 한 번에 크기를 맞출 수 있어 편리합니다.

실수 방지 팁 — 크기가 이상하게 변할 때
이미지를 줄이다가 찌그러졌다면 비율이 깨진 것입니다. 모서리를 잡고 Shift를 누른 상태로 조절하거나, 오른쪽 패널에서 비율 잠금 아이콘을 확인하세요. 아이콘이나 로고처럼 형태가 중요한 요소는 가로세로 비율을 유지하는 것이 안전합니다.

정렬과 분포로 화면을 단정하게 만들기

화면이 어수선해 보일 때 가장 먼저 확인해야 할 것은 색상이 아니라 정렬입니다. 텍스트와 버튼의 시작점이 제각각이거나, 카드 사이 간격이 들쭉날쭉하면 아무리 좋은 색을 써도 정돈된 느낌을 주기 어렵습니다.

피그마에서는 여러 요소를 선택한 뒤 상단 또는 오른쪽 패널의 정렬 버튼을 사용할 수 있습니다. 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬, 위쪽 정렬, 세로 가운데 정렬, 아래쪽 정렬 같은 기능이 기본입니다. 예를 들어 로그인 화면에서 이메일 입력창, 비밀번호 입력창, 로그인 버튼을 모두 선택한 뒤 가운데 정렬을 누르면 세 요소의 중심선이 맞춰집니다.

분포 기능은 여러 요소 사이의 간격을 일정하게 만드는 데 사용합니다. 카드 3개가 가로로 놓여 있는데 사이 간격이 각각 다르다면, 분포 기능을 사용해 균일하게 맞출 수 있습니다. 피그마에서는 여러 요소를 선택했을 때 간격을 직접 입력하거나, Tidy up 기능으로 간격을 정돈할 수 있습니다. Tidy up은 흐트러진 책상 위 물건을 일정한 간격으로 착착 정리해주는 기능이라고 생각하면 됩니다.

정렬은 단순히 보기 좋게 만드는 기능이 아닙니다. 사용자가 화면을 읽는 방향을 만들어주는 기능입니다. 왼쪽 정렬이 잘 맞춰진 텍스트 묶음은 읽기 쉽고, 가운데 정렬이 잘 맞춰진 로그인 폼은 안정적으로 보입니다. 반대로 정렬 기준이 섞이면 사용자는 어디서부터 봐야 할지 망설이게 됩니다.

단축키 박스 — 선택, 복제, 정렬에 자주 쓰는 조작

• 여러 요소 선택: Shift를 누른 채 클릭

• 복제: Command/Ctrl + D

• 드래그 복제: Option/Alt를 누른 채 드래그

• 미세 이동: 방향키

• 크게 이동: Shift + 방향키

레이어 패널은 디자인의 목차입니다

피그마 왼쪽에는 Layers 패널이 있습니다. 이곳에는 현재 파일 안의 프레임, 도형, 텍스트, 이미지가 계층 구조로 표시됩니다. 초보자는 캔버스만 보고 작업하기 쉽지만, 실무에서는 Layers 패널을 함께 보는 습관이 매우 중요합니다.

레이어는 위아래 순서에 따라 화면에서 겹쳐 보입니다. Layers 패널에서 위에 있는 레이어는 캔버스에서도 앞쪽에 보이고, 아래에 있는 레이어는 뒤쪽에 깔립니다. 예를 들어 버튼 배경 사각형보다 버튼 텍스트 레이어가 아래에 있으면 텍스트가 가려질 수 있습니다. 이때는 레이어 순서를 바꾸면 됩니다.

또한 어떤 요소가 어떤 프레임 안에 들어 있는지도 Layers 패널에서 확인할 수 있습니다. 화면 위에 보기에는 프레임 안에 있는 것처럼 보여도 실제 레이어 구조상 프레임 밖에 놓여 있을 때가 있습니다. 이런 상태에서는 프레임을 이동할 때 요소가 함께 움직이지 않거나, 프로토타입 연결과 반응형 설정에서 예상치 못한 문제가 생길 수 있습니다.

따라서 화면 요소를 배치한 뒤에는 왼쪽 Layers 패널에서 해당 요소가 올바른 프레임 안에 들어갔는지 확인해야 합니다. 프레임 이름 왼쪽의 화살표를 펼치면 안에 들어 있는 레이어 목록을 볼 수 있습니다. 로그인 화면을 만들었다면 Login Screen 프레임 안에 로고, 제목, 입력창, 버튼, 안내 문구가 모두 들어 있어야 합니다.

이름 없는 레이어는 나중에 반드시 돌아옵니다

피그마는 도형을 만들면 자동으로 Rectangle 1, Rectangle 2처럼 이름을 붙입니다. 텍스트도 Text, 이미지는 Image처럼 표시될 수 있습니다. 혼자 연습할 때는 큰 문제가 없어 보이지만, 레이어가 많아지는 순간 이 이름들은 거의 쓸모가 없어집니다.

레이어 이름은 그 요소의 역할이 드러나도록 붙이는 것이 좋습니다. 단순히 생김새를 설명하기보다, 화면에서 어떤 일을 하는지 적으면 나중에 찾기 쉽습니다. 예를 들어 Rectangle 12보다 Email Input Background가 낫고, Text 5보다 Login Button Label이 훨씬 좋습니다.

한국어로 이름을 붙여도 괜찮습니다. 다만 개발자와 함께 일하거나 디자인 시스템을 만들 계획이라면 영어 이름이 더 편한 경우가 많습니다. 중요한 것은 언어보다 일관성입니다. 어떤 화면에서는 Button, 다른 화면에서는 Btn, 또 다른 화면에서는 버튼이라고 섞어 쓰면 검색과 관리가 어려워집니다.

추천하는 방식은 큰 구조에서 작은 요소로 내려가는 것입니다. 예를 들어 로그인 화면 안의 요소라면 Login / Email Input, Login / Password Input, Login / Primary Button처럼 이름을 붙일 수 있습니다. 이렇게 하면 검색할 때도 관련 요소를 빠르게 찾을 수 있습니다.

단축키 박스 — 레이어 이름과 순서 관리

• 레이어 이름 바꾸기: Command/Ctrl + R

• 앞으로 가져오기: Command/Ctrl + ]

• 뒤로 보내기: Command/Ctrl + [

• 맨 앞으로 가져오기: Option/Alt + Command/Ctrl + ]

• 맨 뒤로 보내기: Option/Alt + Command/Ctrl + [

Group, Frame, Section을 상황에 맞게 사용하기

작업을 정리할 때 사용할 수 있는 대표 도구는 Group, Frame, Section입니다. 세 가지 모두 여러 요소를 한 덩어리처럼 다루는 데 도움이 되지만, 사용 목적이 다릅니다.

Group은 임시 묶음입니다. 여러 도형을 함께 움직이거나, 아이콘을 이루는 요소를 잠시 묶어둘 때 적합합니다. 다만 화면 구조를 만들기 위한 기본 단위로는 Frame을 우선하는 것이 좋습니다.

Frame은 UI 구조의 핵심 단위입니다. 화면 하나뿐 아니라 카드, 버튼, 입력창, 모달, 탭 바처럼 독립적인 UI 덩어리를 만들 때도 사용할 수 있습니다. 나중에 Auto Layout을 적용할 수 있고, Components로 만들기에도 적합합니다. 이 책에서 다루는 많은 기능이 Frame을 기반으로 움직입니다.

Section은 캔버스를 큰 단위로 구분하는 데 유용합니다. 예를 들어 한 파일 안에 와이어프레임, 최종 디자인, 프로토타입용 화면, 참고 자료가 함께 있다면 Section으로 나누어두면 훨씬 보기 쉽습니다. Section은 페이지 안에 있는 여러 프레임을 주제별로 묶어주는 표지판에 가깝습니다.

실무 파일에서는 Section을 사용해 작업 상태를 구분하기도 합니다. 예를 들어 Draft, Review, Final, Archive처럼 영역을 나눠두면 팀원이 파일을 열었을 때 어디를 봐야 하는지 빠르게 이해할 수 있습니다. 단, Section 안에 모든 것을 무작정 넣기보다 목적이 분명한 영역으로 나누는 것이 좋습니다.

잠금과 숨김은 실수를 줄이는 안전장치입니다

작업하다 보면 배경을 잘못 선택하거나, 이미 맞춰둔 요소를 실수로 움직이는 일이 자주 생깁니다. 이럴 때는 잠금과 숨김 기능을 사용하면 됩니다.

잠금은 레이어를 선택하거나 움직이지 못하게 만드는 기능입니다. 예를 들어 모바일 화면 전체의 배경 사각형을 깔아두었다면 잠가두는 것이 좋습니다. 그러면 버튼이나 텍스트를 선택하려고 할 때 배경이 자꾸 선택되는 불편을 줄일 수 있습니다.

숨김은 잠시 보이지 않게 만드는 기능입니다. 여러 시안을 비교하거나, 특정 이미지가 없는 상태의 레이아웃을 확인하고 싶을 때 유용합니다. 숨긴 레이어는 삭제된 것이 아니므로 언제든 다시 보이게 할 수 있습니다.

다만 잠금과 숨김을 사용한 뒤에는 잊지 않도록 주의해야 합니다. "왜 이 요소가 선택되지 않지?"라고 한참 헤매다가 알고 보니 잠겨 있었던 경우가 흔합니다. "왜 화면에 안 보이지?" 싶을 때는 Layers 패널에서 눈 아이콘과 자물쇠 아이콘을 확인하세요.

단축키 박스 — 잠금과 숨김

• 선택한 레이어 잠금/해제: Command/Ctrl + Shift + L

• 선택한 레이어 숨김/표시: Command/Ctrl + Shift + H

• 전체 단축키 확인: Command/Ctrl + Shift + ?

• 실수로 사라진 작업 되돌리기: Command/Ctrl + Z

협업 가능한 파일은 구조가 먼저 보입니다

좋은 피그마 파일은 열자마자 어디를 봐야 하는지 알 수 있습니다. 프레임 이름이 명확하고, 레이어가 역할별로 정리되어 있으며, 불필요한 복사본이 캔버스 여기저기에 흩어져 있지 않습니다. 이런 파일은 혼자 작업할 때도 편하지만, 협업할 때 특히 강력합니다.

기획자가 화면 흐름을 확인할 때, 개발자가 버튼과 입력창의 구조를 살펴볼 때, 디자이너가 다음 화면을 이어서 작업할 때 모두 같은 파일을 봅니다. 이때 레이어 이름과 프레임 구조가 정리되어 있으면 질문이 줄어듭니다. "이 버튼이 어떤 화면에 있는 거죠?" "최종본은 어디예요?" 같은 대화가 줄어드는 것만으로도 팀의 속도는 빨라집니다.

협업을 고려한 파일 구조를 만들려면 처음부터 거창한 규칙을 만들 필요는 없습니다. 최소한 화면 이름, 주요 영역 이름, 반복되는 UI 이름만 명확히 해도 충분합니다. 예를 들어 모바일 앱의 로그인 화면이라면 프레임 이름을 Login, 회원가입 화면은 Sign Up, 홈 화면은 Home처럼 붙입니다. 각 화면 안에서는 Header, Form, Primary Button, Footer Text처럼 역할을 알 수 있는 이름을 사용합니다.

또 하나 중요한 습관은 임시 요소를 방치하지 않는 것입니다. 실험용으로 만든 버튼, 버려진 이미지, 예전 문구가 캔버스에 남아 있으면 파일을 보는 사람이 혼란스러워집니다. 버릴 것은 삭제하고, 보관할 것은 Archive Section으로 옮겨두세요. 정리된 파일은 디자인 실력의 일부입니다.

로그인 화면 와이어프레임으로 구조 익히기

이제 지금까지 배운 내용을 로그인 화면으로 연결해보겠습니다. 로그인 화면은 UI 구조를 연습하기에 아주 좋은 예제입니다. 필요한 요소가 많지 않지만, 정렬과 간격, 레이어 구조를 모두 연습할 수 있기 때문입니다.

먼저 모바일 프레임을 하나 만듭니다. 프레임 이름은 Login으로 바꿉니다. 배경은 흰색이나 아주 연한 회색으로 설정합니다. 그런 다음 화면 상단에는 앱 로고 또는 앱 이름이 들어갈 자리를 만듭니다. 실제 로고가 없어도 괜찮습니다. 텍스트로 App Name이라고 적어두면 됩니다.

가운데 영역에는 이메일 입력창과 비밀번호 입력창을 배치합니다. 입력창은 사각형 도형으로 만들고, 안쪽에 Email과 Password라는 안내 텍스트를 넣습니다. 아직 실제 입력 기능이 있는 것은 아니지만, 화면 설계 단계에서는 사용자가 무엇을 입력해야 하는지 알 수 있으면 충분합니다.

그 아래에는 로그인 버튼을 만듭니다. 버튼은 입력창과 같은 너비로 맞추고, 높이는 48 정도로 설정해보세요. 버튼 안에는 Log In이라고 적습니다. 버튼 텍스트는 버튼 배경 위에서 잘 보여야 하므로, 배경이 진하다면 흰색 텍스트를 사용하면 됩니다.

마지막으로 하단에는 Forgot password?나 Create account 같은 보조 문구를 배치합니다. 이 문구들은 주요 행동은 아니지만 사용자가 문제를 해결하거나 다음 단계로 이동하는 데 도움을 줍니다.

작업이 끝났다면 Layers 패널을 확인하세요. 모든 요소가 Login 프레임 안에 들어 있어야 합니다. 입력창 두 개와 버튼은 서로 같은 x 위치에 놓이고, 너비도 같아야 합니다. 텍스트와 도형 이름도 역할에 맞게 정리합니다. 이 정도만 해도 단순한 로그인 화면이 아니라, 다음 단계로 발전시킬 수 있는 탄탄한 화면 뼈대가 됩니다.

자주 하는 실수와 빠른 해결법

프레임과 레이어를 다룰 때 초보자가 자주 겪는 문제는 대부분 구조와 선택에서 발생합니다. 화면은 제대로 보이는데 막상 프레임을 움직이면 요소가 따라오지 않거나, 버튼을 수정하려는데 배경만 선택되는 식입니다.

이럴 때는 먼저 Layers 패널을 보세요. 요소가 올바른 프레임 안에 있는지 확인하는 것이 가장 빠릅니다. 프레임 밖에 있는 요소는 화면 위에 겹쳐 보여도 실제로는 그 화면의 구성원이 아닙니다. 해당 레이어를 드래그해 프레임 안으로 넣거나, 캔버스에서 잘라내기 후 프레임을 선택하고 붙여넣으면 정리할 수 있습니다.

두 번째로 레이어 잠금 상태를 확인하세요. 선택되지 않는 요소는 잠겨 있을 가능성이 있습니다. 왼쪽 Layers 패널의 자물쇠 아이콘을 확인하고, 필요하면 잠금을 해제합니다.

세 번째로 겹침 순서를 확인하세요. 텍스트가 안 보인다면 삭제된 것이 아니라 도형 뒤에 숨어 있을 수 있습니다. 이때는 레이어 순서를 앞으로 가져오면 됩니다. 피그마에서 "안 보인다"는 말은 종종 "뒤에 있다"는 뜻입니다.

실무 팁 — 이상할 때는 세 가지만 확인하세요

• 프레임 안에 들어 있는가?

• 잠겨 있거나 숨겨져 있지 않은가?

• 다른 레이어 뒤에 깔려 있지 않은가?

핵심 요약

프레임과 레이어는 피그마 작업의 뼈대입니다. 프레임은 화면이나 UI 영역을 담는 구조적 그릇이고, 그룹은 여러 요소를 임시로 묶는 도구입니다. 화면, 카드, 버튼, 입력창처럼 나중에 수정하고 재사용할 가능성이 있는 요소는 Frame으로 만드는 습관을 들이는 것이 좋습니다.

도형, 선, 텍스트, 이미지는 화면을 구성하는 기본 재료입니다. 처음부터 완성된 디자인을 만들려고 하기보다, 큰 영역을 나누고 요소를 배치한 뒤 정렬과 간격을 다듬는 순서로 작업하면 훨씬 안정적인 화면을 만들 수 있습니다.

레이어 이름, 잠금, 숨김, Section 구분은 협업 가능한 파일을 만드는 기본 습관입니다. 보기 좋은 화면뿐 아니라 다른 사람이 이해할 수 있는 파일을 만드는 것이 실무에서는 매우 중요합니다. 지금 정리한 구조는 Auto Layout, Constraints, Components 학습의 출발점이 됩니다.

실습 과제: 로그인 화면 기본 와이어프레임 만들기

이번 실습에서는 모바일 로그인 화면의 기본 와이어프레임을 만들어봅니다. 색과 디테일보다 프레임, 레이어, 정렬, 이름 정리에 집중하세요.

과제 목표

모바일 프레임 하나를 만들고, 로그인에 필요한 기본 요소를 배치한 뒤, 레이어 구조를 협업 가능한 상태로 정리합니다.

만들어야 할 요소

• 모바일 프레임 1개: 이름은 Login

• 앱 이름 또는 로고 자리: 상단에 배치

• 이메일 입력창과 비밀번호 입력창: 같은 너비와 높이로 배치

• 로그인 버튼: 입력창과 같은 너비로 배치

• 보조 문구: 비밀번호 찾기 또는 회원가입 안내 문구 추가

• Section 1개: 작업 영역 이름을 Wireframe Practice로 지정

완료 기준

모든 요소가 Login 프레임 안에 들어 있어야 합니다. 입력창과 버튼의 왼쪽, 오른쪽 기준이 맞아야 하며, 각 요소 사이 간격은 일정해야 합니다. Layers 패널에서 Rectangle 1, Text 2처럼 의미 없는 이름이 남아 있지 않도록 주요 레이어 이름을 정리합니다.

마지막으로 프레임을 한 번 선택해 이동해보세요. 로그인 화면의 모든 요소가 함께 움직인다면 구조가 제대로 잡힌 것입니다. 만약 일부 요소가 따라오지 않는다면 그 요소는 프레임 밖에 있을 가능성이 큽니다. 이 문제를 직접 찾아 고치는 것까지가 이번 장의 중요한 연습입니다.