작업 전에 알아야 할 디자인 기본기

피그마를 처음 열면 누구나 비슷한 착각을 합니다. 사각형을 그리고, 색을 바꾸고, 버튼처럼 보이게 만들면 화면 디자인이 된 것처럼 느껴집니다. 그런데 실무에서 좋은 화면은 예쁜 사각형 몇 개로 완성되지 않습니다. 사용자가 어디를 먼저 봐야 하는지, 어떤 정보가 서로 관련 있는지, 버튼이 눌러도 되는 것처럼 보이는지, 글자가 편하게 읽히는지까지 모두 고려해야 합니다.

이 장에서는 피그마의 기능을 깊게 배우기 전에 꼭 알아야 할 디자인 기본기를 다룹니다. 디자인 전공자가 아니어도 괜찮습니다. 이 장의 목표는 감각을 타고나는 것이 아니라, 화면을 정리하는 최소한의 규칙을 갖는 것입니다. 좋은 화면은 대부분 감각보다 규칙에서 시작합니다.

좋은 화면은 감각보다 기준에서 시작한다

초보자가 만든 화면이 어색해 보이는 이유는 대개 색을 못 골라서가 아닙니다. 더 자주 일어나는 문제는 기준이 없다는 것입니다. 제목은 왼쪽에 있는데 본문은 약간 오른쪽으로 밀려 있고, 버튼마다 높이가 다르며, 카드 안의 여백이 제각각입니다. 하나씩 보면 작은 차이지만, 화면 전체로 보면 사용자는 무의식적으로 불안함을 느낍니다.

디자인의 기본 기준은 생각보다 단순합니다. 화면을 볼 때는 먼저 네 가지 질문을 던져보면 됩니다.

• 이 요소들은 같은 기준선에 맞춰 정렬되어 있는가?

• 중요한 정보와 덜 중요한 정보의 차이가 충분히 보이는가?

• 같은 역할을 하는 요소가 같은 모양과 간격으로 반복되는가?

• 서로 관련 있는 요소끼리 가까이 배치되어 있는가?

이 네 가지 질문이 바로 정렬, 대비, 반복, 근접성의 출발점입니다. 이 원칙들은 피그마의 특정 기능이 아니라 화면을 바라보는 눈에 가깝습니다. 프레임, 레이어, Auto Layout, Components를 배우더라도 이 기준이 없으면 기능은 금방 복잡해집니다. 반대로 이 기준이 있으면 아직 기능을 많이 몰라도 화면은 훨씬 안정적으로 보입니다.

정렬: 보이지 않는 선에 맞추기

정렬은 화면 안의 요소를 보이지 않는 선에 맞추는 일입니다. 사람의 눈은 작은 어긋남을 생각보다 잘 알아차립니다. 제목의 왼쪽 끝과 본문의 왼쪽 끝이 3px만 어긋나도 화면은 묘하게 흔들려 보입니다. 반대로 여러 요소가 같은 시작점에 맞춰 있으면 화면은 단정하고 믿음직해 보입니다.

예를 들어 모바일 앱의 로그인 화면을 만든다고 해봅시다. 상단에는 앱 이름, 그 아래에는 설명 문장, 다시 아래에는 이메일 입력창과 비밀번호 입력창, 마지막에는 로그인 버튼이 있습니다. 이때 각 요소의 왼쪽 끝이 모두 다르면 사용자의 시선은 계속 흔들립니다. 하지만 모든 요소를 같은 왼쪽 기준선에 맞추면 사용자는 자연스럽게 위에서 아래로 읽어 내려갑니다.

피그마에서는 여러 레이어를 선택하면 상단 또는 오른쪽 패널 주변에서 정렬 아이콘을 사용할 수 있습니다. 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬, 위쪽 정렬, 세로 가운데 정렬 같은 기능이 대표적입니다. 하지만 버튼을 누르기 전에 먼저 생각해야 할 것은 어떤 기준에 맞출 것인가입니다. 화면 전체의 가운데에 둘 것인지, 카드 내부의 왼쪽 여백에 맞출 것인지, 아이콘과 텍스트를 서로 가운데 맞출 것인지에 따라 정렬 기준이 달라집니다.

정렬에서 가장 흔한 실수는 모든 것을 가운데에 놓는 것입니다. 가운데 정렬은 포스터나 짧은 랜딩 섹션에서는 강한 인상을 줄 수 있지만, 입력 폼이나 목록 화면처럼 읽을 정보가 많은 곳에서는 불편해지기 쉽습니다. 특히 한국어 문장이 여러 줄로 이어질 때 가운데 정렬을 사용하면 다음 줄의 시작점을 매번 다시 찾아야 합니다. 실무 UI에서는 대부분 왼쪽 정렬이 더 안전한 기본값입니다.

팁 박스 — 정렬을 빠르게 확인하는 방법

• 레이어를 선택한 뒤 오른쪽 Design 패널에서 X, Y 위치와 W, H 크기를 확인합니다.

• 여러 레이어를 선택하고 정렬 아이콘을 눌러 같은 기준선에 맞춥니다.

• Mac은 Option, Windows는 Alt를 누른 채 다른 요소 위에 마우스를 올리면 요소 사이의 거리를 확인할 수 있습니다.

대비: 무엇을 먼저 봐야 하는지 알려주기

대비는 차이를 만드는 일입니다. 화면 안의 모든 요소가 같은 크기, 같은 굵기, 같은 색이면 사용자는 어디를 먼저 봐야 할지 알 수 없습니다. 반대로 제목은 크고 굵게, 설명은 작고 차분하게, 주요 버튼은 선명하게 만들면 화면의 흐름이 생깁니다.

대비는 색으로만 만드는 것이 아닙니다. 크기, 굵기, 위치, 여백, 배경, 그림자 모두 대비를 만드는 도구입니다. 예를 들어 회원가입 화면에서 가장 중요한 행동이 시작하기라면 시작하기 버튼은 화면에서 가장 눈에 띄어야 합니다. 반면 나중에 할게요 링크는 존재하되, 시작하기 버튼보다 약하게 보여야 합니다. 둘 다 같은 파란색과 같은 굵기로 만들면 사용자는 두 행동의 우선순위를 구분하기 어렵습니다.

버튼을 예로 들어보겠습니다. 주요 버튼은 진한 배경색에 흰 글자를 사용하고, 보조 버튼은 흰 배경에 테두리만 사용할 수 있습니다. 위험한 행동인 삭제는 빨간색 계열을 사용할 수 있지만, 모든 강조를 빨간색으로 처리하면 실제 오류나 경고가 묻힙니다. 색은 강력한 신호이기 때문에 역할을 정해두고 아껴 쓰는 편이 좋습니다.

대비는 사용자를 배려하는 장치이기도 합니다. 작은 회색 글자가 흰 배경 위에 놓이면 화면은 세련돼 보일 수 있지만, 실제로는 읽기 어렵습니다. 특히 밝은 장소에서 모바일 화면을 볼 때는 낮은 대비가 큰 문제가 됩니다. 읽어야 하는 글자는 충분히 진해야 하고, 클릭해야 하는 요소는 배경과 분명히 구분되어야 합니다.

반복: 같은 역할은 같은 모습으로

반복은 화면에 규칙을 만드는 일입니다. 같은 역할을 하는 요소가 같은 모습으로 반복되면 사용자는 한 번 배운 것을 다음 화면에서도 그대로 사용할 수 있습니다. 이것이 UI가 직관적으로 느껴지는 중요한 이유입니다.

예를 들어 상품 카드가 여러 개 있는 화면을 생각해봅시다. 첫 번째 카드의 이미지 모서리가 12px 둥글고 제목은 16px 굵은 글자이며 가격은 파란색이라면, 두 번째 카드와 세 번째 카드도 같은 규칙을 따라야 합니다. 어떤 카드는 모서리가 8px이고, 어떤 카드는 제목이 15px이고, 어떤 카드는 가격이 검은색이면 사용자는 무의식적으로 다른 의미가 있는지 고민하게 됩니다.

반복은 나중에 Components를 배울 때 더 강력해집니다. 컴포넌트는 반복되는 UI를 하나의 원본으로 관리하는 기능입니다. 하지만 컴포넌트를 만들기 전에 먼저 반복할 규칙이 있어야 합니다. 버튼 높이, 내부 여백, 글자 크기, 아이콘 간격, 모서리 둥글기 같은 기준을 정해두면 컴포넌트는 자연스럽게 만들어집니다.

반복은 지루함과 다릅니다. 반복은 사용자가 헷갈리지 않도록 만드는 약속입니다. 화면마다 제목 위치가 같고, 버튼 스타일이 같고, 카드 구조가 같으면 사용자는 새로운 화면을 볼 때마다 처음부터 다시 배우지 않아도 됩니다.

근접성: 가까운 것은 관련 있어 보인다

근접성은 서로 관련 있는 요소를 가까이 두고, 관련 없는 요소는 멀리 두는 원칙입니다. 화면에서 거리는 관계를 설명합니다. 제목과 설명이 가까우면 하나의 묶음처럼 보이고, 설명과 버튼 사이에 충분한 여백이 있으면 다른 역할의 요소로 구분됩니다.

카드 UI를 예로 들어보겠습니다. 카드 안에 이미지, 제목, 설명, 가격, 버튼이 들어 있습니다. 제목과 설명은 서로 가까워야 합니다. 가격과 구매 버튼도 하나의 행동 영역으로 묶일 수 있습니다. 그런데 제목과 설명 사이보다 설명과 버튼 사이가 더 가까우면 사용자는 정보 구조를 잘못 이해할 수 있습니다. 디자인에서는 이런 작은 거리 차이가 의미를 만듭니다.

근접성에서 중요한 것은 단순히 붙이는 것이 아니라 묶는 것입니다. 관련 있는 요소끼리는 4px, 8px, 12px처럼 작은 간격을 사용하고, 다른 그룹 사이에는 24px, 32px처럼 더 큰 간격을 사용합니다. 이렇게 하면 선을 많이 긋지 않아도 화면이 자연스럽게 나뉩니다.

팁 박스 — 선을 긋기 전에 간격부터 조정하기

• 구분선이 너무 많으면 화면이 복잡해 보입니다.

• 관련 있는 정보는 가까이 두고, 그룹과 그룹 사이를 더 넓게 벌려보세요.

• 간격만 잘 조정해도 카드, 섹션, 입력 폼의 구조가 훨씬 또렷해집니다.

8pt 그리드: 간격을 감으로 정하지 않는 방법

이제 조금 더 실무적인 기준으로 들어가 보겠습니다. UI 디자인에서는 8pt 그리드라는 말을 자주 듣게 됩니다. 여기서 pt는 엄밀한 인쇄 단위라기보다, 화면 간격을 8의 배수로 맞추는 규칙이라고 이해하면 충분합니다. 피그마에서는 보통 px 단위로 작업하지만, 실무에서는 8pt, 8px 그리드라는 표현을 섞어 쓰기도 합니다.

8pt 그리드의 핵심은 간격을 7px, 13px, 19px처럼 그때그때 정하지 않고 4, 8, 12, 16, 24, 32처럼 일정한 단계로 정하는 것입니다. 꼭 모든 숫자가 8의 배수여야 하는 것은 아닙니다. 작은 아이콘과 텍스트 사이에는 4px이 자연스러울 수 있고, 카드 내부의 촘촘한 정보 사이에는 12px이 적당할 수 있습니다. 중요한 것은 무작위가 아니라 규칙적으로 선택하는 것입니다.

초보자에게 추천하는 기본 간격은 다음과 같습니다.

이 표는 절대 법칙이 아닙니다. 하지만 처음 작업할 때는 이 값들만 사용해도 화면이 훨씬 안정됩니다. 피그마에서 요소를 움직이다 보면 17px, 23px 같은 숫자가 생기기 쉽습니다. 이럴 때 가까운 기준값인 16px 또는 24px로 정리해보세요. 화면이 갑자기 정돈되는 느낌을 받을 수 있습니다.

단축키 박스 — 간격을 맞출 때 자주 쓰는 조작

• 방향키를 누르면 선택한 레이어를 조금씩 이동할 수 있습니다.

• Shift와 방향키를 함께 누르면 더 큰 단위로 빠르게 이동할 수 있습니다.

• Mac은 Option, Windows는 Alt를 누른 채 마우스를 올려 요소 사이의 거리를 확인합니다.

• Cmd 또는 Ctrl + D로 선택한 요소를 복제해 같은 간격의 반복 요소를 만들 수 있습니다.

버튼으로 이해하는 여백과 정렬

버튼은 UI 기본기를 배우기에 아주 좋은 재료입니다. 작지만 그 안에 정렬, 대비, 반복, 간격, 글자 크기가 모두 들어 있기 때문입니다.

좋은 버튼은 눌러도 되는 것처럼 보여야 합니다. 이를 위해서는 먼저 충분한 크기가 필요합니다. 모바일 화면에서 버튼 높이는 보통 44px에서 48px 정도를 시작값으로 잡으면 안정적입니다. 너무 낮은 버튼은 손가락으로 누르기 어렵고, 너무 높은 버튼은 화면을 답답하게 만듭니다.

버튼 안의 텍스트는 가운데에 정렬합니다. 텍스트가 위쪽으로 치우치면 버튼이 불안정해 보이고, 왼쪽으로 치우치면 특별한 의도가 있는 것처럼 보입니다. 아이콘이 함께 들어가는 버튼이라면 아이콘과 텍스트 사이 간격은 8px 정도에서 시작해보세요. 텍스트와 버튼 가장자리 사이의 좌우 여백은 16px 또는 20px 정도가 무난합니다.

예를 들어 시작하기 버튼을 만든다면 다음 기준으로 시작할 수 있습니다.

여기서 패딩은 요소의 안쪽 여백을 뜻합니다. 버튼의 배경 사각형과 텍스트 사이에 있는 공간이라고 생각하면 됩니다. 나중에 Auto Layout을 배우면 이 패딩을 훨씬 편하게 관리할 수 있습니다. 지금은 버튼을 볼 때 텍스트가 사각형 안에 숨 쉴 공간을 갖고 있는지 확인하는 것으로 충분합니다.

카드 UI로 이해하는 화면 구조

카드는 정보를 작은 덩어리로 묶어 보여주는 UI입니다. 쇼핑 앱의 상품 카드, 뉴스 앱의 기사 카드, 대시보드의 통계 카드가 모두 여기에 해당합니다. 카드는 실무에서 매우 자주 쓰이기 때문에 간격과 정렬을 연습하기에 좋습니다.

카드에서 가장 먼저 정해야 할 것은 바깥 여백과 안쪽 여백입니다. 바깥 여백은 카드와 주변 요소 사이의 거리이고, 안쪽 여백은 카드 테두리와 카드 안 콘텐츠 사이의 거리입니다. 초보자는 이 둘을 자주 섞습니다. 카드가 답답해 보이면 내부 패딩이 부족한 경우가 많고, 카드들이 서로 달라붙어 보이면 카드 사이 간격이 부족한 경우가 많습니다.

간단한 콘텐츠 카드를 만든다고 해봅시다. 카드 안에는 썸네일 이미지, 제목, 설명, 보조 정보, 버튼이 들어갑니다. 카드 내부 패딩은 16px로 시작하고, 제목과 설명 사이 간격은 8px, 설명과 보조 정보 사이 간격은 12px, 정보 영역과 버튼 사이 간격은 16px 정도로 잡을 수 있습니다. 카드와 카드 사이 간격은 16px 또는 24px 정도가 무난합니다.

카드에서는 모든 요소를 같은 왼쪽 기준선에 맞추는 것이 중요합니다. 이미지가 카드 너비 전체를 차지하는 구조가 아니라면, 이미지와 제목과 설명의 왼쪽 끝이 어긋나지 않도록 확인하세요. 버튼이 카드 하단에 있다면 버튼 너비를 카드 내부 영역에 맞출 것인지, 텍스트 길이만큼만 둘 것인지도 의도적으로 정해야 합니다.

카드 UI를 만들 때 가장 위험한 습관은 눈대중으로 조금씩 움직이는 것입니다. 한 장만 만들 때는 괜찮아 보이지만, 카드가 세 개, 네 개로 늘어나면 어긋남이 바로 드러납니다. 처음부터 8, 12, 16, 24 같은 기준값으로 간격을 정해두면 나중에 반복하기 쉽습니다.

글자는 콘텐츠가 아니라 인터페이스다

피그마에서 텍스트를 입력하는 일은 쉽습니다. T 키를 누르고 클릭한 다음 글자를 쓰면 됩니다. 하지만 읽기 쉬운 화면을 만드는 일은 조금 다릅니다. UI에서 글자는 단순한 콘텐츠가 아니라 사용자를 안내하는 인터페이스입니다.

글자를 다룰 때는 글꼴, 크기, 행간, 자간, 굵기를 함께 봐야 합니다. 글꼴은 문자 모양의 가족이고, 크기는 글자의 높이 기준이며, 행간은 줄과 줄 사이의 간격입니다. 자간은 글자와 글자 사이의 간격이고, 굵기는 Regular, Medium, Bold처럼 글자가 얼마나 두꺼운지를 뜻합니다.

초보자가 가장 먼저 정해야 할 것은 글자 크기의 단계입니다. 화면마다 제목 크기를 다르게 정하면 전체 서비스가 흔들려 보입니다. 처음에는 다음 정도의 단계로 시작해도 충분합니다.

한국어 본문은 줄 간격이 너무 좁으면 답답해 보입니다. 본문 크기가 16px이라면 행간은 24px 정도에서 시작해보세요. 이는 글자 크기의 약 150%입니다. 짧은 버튼 텍스트나 라벨은 행간이 크게 중요하지 않지만, 두 줄 이상 읽어야 하는 설명 문장에서는 행간이 읽기 편안함을 크게 좌우합니다.

자간은 조심해서 다뤄야 합니다. 영어 대문자 라벨에서는 자간을 약간 넓히는 경우가 있지만, 한국어 본문에서 자간을 과하게 벌리면 단어가 흩어져 보입니다. 반대로 너무 좁히면 글자가 뭉쳐 보입니다. 초보자는 대부분의 본문 자간을 기본값으로 두고, 특별한 이유가 있을 때만 조정하는 것이 안전합니다.

굵기는 계층을 만드는 데 사용합니다. 모든 글자를 Bold로 만들면 아무것도 강조되지 않습니다. 제목은 Semibold, 본문은 Regular, 버튼은 Medium처럼 역할별로 제한해서 쓰면 화면이 훨씬 차분해집니다.

단축키 박스 — 텍스트 작업을 빠르게 시작하기

• T를 누르면 텍스트 도구를 선택할 수 있습니다.

• 텍스트 레이어를 선택한 뒤 오른쪽 Design 패널에서 크기, 굵기, 행간, 자간을 조정합니다.

• 텍스트 상자를 드래그해 만들면 줄바꿈 폭을 정할 수 있어 본문 문장을 다루기 좋습니다.

읽기 쉬운 화면을 만드는 글자 기준

글자를 보기 좋게 만드는 가장 쉬운 방법은 역할을 줄이는 것입니다. 한 화면 안에서 너무 많은 글자 스타일을 쓰지 마세요. 제목, 본문, 보조 정보, 버튼 정도만 있어도 대부분의 화면은 충분히 구성됩니다.

또 하나의 중요한 기준은 줄 길이입니다. 데스크톱 화면에서 본문이 너무 길게 한 줄로 이어지면 읽기 어렵습니다. 모바일에서는 화면 폭이 제한되어 자연스럽게 줄이 짧아지지만, 데스크톱 웹에서는 본문 영역의 최대 너비를 의도적으로 제한해야 합니다. 피그마에서 텍스트 박스의 너비를 너무 길게 늘리지 말고, 실제 사용자가 읽을 폭을 상상하면서 조정해보세요.

문단 사이 여백도 중요합니다. 줄과 줄 사이의 행간은 문장 내부의 호흡이고, 문단 사이 여백은 생각의 덩어리를 나누는 호흡입니다. 설명 문장이 두 문단 이상이라면 문단 사이에 12px 또는 16px 정도의 간격을 두면 읽기 편합니다.

실무에서는 글자 스타일을 나중에 Styles나 Variables로 관리하게 됩니다. 하지만 그 전에 먼저 이 화면에서 가장 중요한 문장은 무엇인가, 사용자가 반드시 읽어야 하는 안내는 무엇인가, 흐리게 처리해도 되는 보조 정보는 무엇인가를 구분해야 합니다. 기능은 기준을 저장해줄 뿐, 기준을 대신 정해주지는 않습니다.

색상은 예쁨보다 역할이 먼저다

색을 고를 때 초보자는 예쁜 색부터 찾습니다. 하지만 실무 UI에서 색은 장식보다 신호에 가깝습니다. 사용자는 색을 보고 이 버튼이 주요 행동인지, 이 문구가 오류인지, 이 상태가 성공인지 빠르게 판단합니다.

색을 고를 때는 먼저 역할을 나누는 것이 좋습니다.

• 기본 글자색은 화면에서 가장 많이 읽히는 색입니다.

• 보조 글자색은 덜 중요한 설명이나 날짜에 사용합니다.

• 주요 색상은 브랜드나 핵심 버튼에 사용합니다.

• 상태 색상은 성공, 경고, 오류, 정보 같은 의미를 전달합니다.

• 배경색과 테두리색은 화면의 구역을 부드럽게 나눕니다.

처음에는 색을 많이 쓰지 않는 것이 좋습니다. 검정에 가까운 글자색, 회색 계열의 보조 색, 하나의 주요 색, 그리고 오류를 위한 빨간색 정도만 있어도 대부분의 기본 화면을 만들 수 있습니다. 색이 많을수록 화면이 풍부해지는 것이 아니라, 오히려 의미가 흐려질 수 있습니다.

예를 들어 주요 색을 파란색으로 정했다면 주요 버튼, 선택된 탭, 링크 등에 일관되게 사용할 수 있습니다. 오류 메시지는 빨간색, 성공 메시지는 초록색, 주의가 필요한 알림은 노란색이나 주황색 계열로 분리할 수 있습니다. 이때 중요한 것은 같은 색을 같은 의미로 반복하는 것입니다.

명도 대비와 접근성: 모두가 읽을 수 있어야 한다

색에서 가장 중요한 실무 기준 중 하나는 명도 대비입니다. 명도는 색의 밝고 어두운 정도입니다. 흰 배경 위에 연한 회색 글자를 올리면 분위기는 부드러울 수 있지만, 글자가 잘 보이지 않을 수 있습니다. 특히 작은 글자일수록 배경과의 대비가 충분해야 합니다.

접근성은 특별한 사람만을 위한 별도 작업이 아닙니다. 밝은 야외에서 휴대폰을 보는 사람, 피곤한 상태로 작은 글씨를 읽는 사람, 색을 구분하기 어려운 사람 모두를 위한 기본 배려입니다. 접근성이 좋은 화면은 대부분의 사용자에게 더 편한 화면입니다.

색으로 상태를 표현할 때도 색 하나에만 의존하지 않는 것이 좋습니다. 입력 오류를 표시할 때 테두리만 빨간색으로 바꾸면 일부 사용자는 알아차리기 어렵습니다. 빨간색 테두리와 함께 오류 문구를 표시하고, 가능하면 아이콘이나 안내 문장도 함께 제공해야 합니다. 예를 들어 이메일 형식이 올바르지 않습니다라는 문구가 입력창 아래에 나타나면 사용자는 무엇을 고쳐야 하는지 바로 알 수 있습니다.

비활성화 버튼도 주의해야 합니다. 너무 연하게 만들면 존재 자체가 보이지 않고, 너무 진하게 만들면 누를 수 있는 버튼처럼 보입니다. 비활성화 상태는 배경과 글자 대비를 낮추되, 사용자가 왜 누를 수 없는지 안내가 필요한 경우에는 주변에 설명을 추가하는 편이 좋습니다.

팁 박스 — 색을 정할 때의 안전한 출발점

• 본문 글자는 흰 배경에서 너무 연한 회색을 피합니다.

• 주요 색상은 한 화면에 너무 많이 뿌리지 말고 핵심 행동에 집중해서 사용합니다.

• 오류, 성공, 경고 색상은 의미를 고정해 반복해서 사용합니다.

• 색만으로 의미를 전달하지 말고 텍스트, 아이콘, 위치를 함께 사용합니다.

피그마에서 기본기를 확인하는 습관

디자인 기본기는 머리로 이해하는 것보다 손으로 확인할 때 빨리 늘어납니다. 피그마에서는 화면을 만든 뒤 다음 순서로 점검해보세요.

먼저 정렬을 확인합니다. 프레임 안의 주요 요소가 같은 왼쪽 기준선에 놓여 있는지, 버튼 안의 텍스트가 가운데에 있는지, 카드 목록의 시작점과 너비가 일관적인지 봅니다. 그다음 간격을 확인합니다. 8, 12, 16, 24 같은 기준값을 사용했는지, 관련 있는 요소끼리는 가깝고 다른 그룹은 멀리 떨어져 있는지 확인합니다.

이후 글자를 봅니다. 한 화면에 글자 크기와 굵기가 너무 많이 섞여 있지는 않은지, 본문 행간이 답답하지 않은지, 보조 정보가 너무 흐려서 읽기 어렵지는 않은지 점검합니다. 마지막으로 색을 봅니다. 가장 중요한 버튼이 잘 보이는지, 오류와 성공 같은 상태 색상이 다른 의미와 섞이지 않았는지, 배경과 글자의 대비가 충분한지 확인합니다.

이 순서가 익숙해지면 화면을 수정하는 속도가 빨라집니다. 막연히 이상한데라고 느끼는 대신, 정렬이 어긋났는지, 간격이 불규칙한지, 글자 계층이 약한지, 색의 역할이 불분명한지 구체적으로 말할 수 있기 때문입니다. 실무에서 디자인 피드백을 주고받을 때도 이 언어는 큰 도움이 됩니다.

단축키 박스 — 작업 흐름을 빠르게 만드는 기본 단축키

• F를 누르면 Frame 도구를 선택할 수 있습니다.

• R을 누르면 Rectangle 도구를 선택할 수 있습니다.

• T를 누르면 Text 도구를 선택할 수 있습니다.

• Shift + A를 누르면 선택한 요소에 Auto Layout을 적용할 수 있습니다. 자세한 사용법은 뒤에서 다룹니다.

• Cmd 또는 Ctrl + /를 누르면 피그마의 명령 검색을 열어 원하는 기능을 빠르게 찾을 수 있습니다.

실무 감각을 키우는 작은 기준표

처음부터 완벽한 디자인 시스템을 만들 필요는 없습니다. 다만 프로젝트를 시작할 때 작은 기준표를 만들어두면 화면이 흔들리지 않습니다. 예를 들어 모바일 앱 화면을 만든다면 다음 정도만 정해도 충분합니다.

이 기준표는 프로젝트가 커지면 더 정교해질 수 있습니다. 나중에는 Styles, Variables, Components로 이 기준을 저장하고 재사용하게 됩니다. 하지만 처음에는 표 하나만으로도 충분합니다. 중요한 것은 매번 새로 감으로 정하지 않는 것입니다.

핵심 요약

• 좋은 화면은 예쁜 색보다 정렬, 대비, 반복, 근접성 같은 기본 규칙에서 시작합니다.

• 정렬은 보이지 않는 기준선을 맞추는 일이며, 실무 UI에서는 왼쪽 정렬이 가장 안전한 출발점입니다.

• 대비는 사용자가 무엇을 먼저 봐야 하는지 알려주는 장치입니다. 크기, 굵기, 색, 여백으로 우선순위를 만듭니다.

• 반복은 같은 역할의 요소를 같은 모습으로 유지해 사용자가 화면을 쉽게 학습하도록 돕습니다.

• 근접성은 관련 있는 요소끼리 가까이 두고, 다른 그룹은 더 넓은 간격으로 구분하는 원칙입니다.

• 8pt 그리드는 간격을 감으로 정하지 않기 위한 실무 기준입니다. 8, 12, 16, 24 같은 값을 반복해 사용하면 화면이 안정됩니다.

• 글자는 콘텐츠이면서 인터페이스입니다. 크기, 행간, 자간, 굵기를 역할별로 정리해야 읽기 쉬운 화면이 됩니다.

• 색상은 장식보다 역할이 먼저입니다. 주요 색, 보조 색, 상태 색을 구분하고 명도 대비와 접근성을 함께 고려해야 합니다.

실습 과제: 어색한 카드 UI 정리하기

이번 실습에서는 일부러 어색한 카드 UI를 만든 뒤, 이 장에서 배운 기준으로 정리해봅니다. 목표는 예쁜 화면을 완성하는 것이 아니라, 왜 정리되어 보이는지 설명할 수 있는 화면을 만드는 것입니다.

먼저 피그마에서 모바일 크기의 프레임을 하나 만듭니다. 예를 들어 iPhone 15 정도의 세로형 프레임을 선택해도 좋고, 직접 390px × 844px 크기의 프레임을 만들어도 됩니다. 프레임 안에 여행 상품 카드 하나를 만들어보세요. 카드에는 이미지 영역, 제목, 설명, 가격, 예약하기 버튼이 들어갑니다.

처음에는 일부러 다음처럼 어색하게 배치해봅니다.

• 카드의 왼쪽 여백과 제목의 왼쪽 위치를 다르게 둡니다.

• 제목, 설명, 가격 사이 간격을 각각 7px, 19px처럼 불규칙하게 둡니다.

• 버튼 높이를 37px처럼 애매하게 만들고 텍스트를 살짝 위로 치우치게 둡니다.

• 제목과 본문을 비슷한 크기와 굵기로 만들어 정보 우선순위를 약하게 만듭니다.

• 설명 글자를 너무 연한 회색으로 설정해 읽기 어렵게 만듭니다.

그다음 이 카드를 복제해서 오른쪽에 정리된 버전을 만듭니다. 정리된 버전에서는 카드 내부 패딩을 16px로 맞추고, 제목과 설명 사이는 8px, 설명과 가격 사이는 12px, 가격과 버튼 사이는 16px로 조정해보세요. 버튼 높이는 48px로 맞추고, 버튼 안 텍스트는 가운데 정렬합니다. 제목은 18px Semibold, 설명은 14px 또는 15px Regular, 가격은 16px Semibold 정도로 설정해 정보 계층을 만듭니다.

색상도 정리합니다. 본문 설명은 너무 연하지 않은 회색으로 바꾸고, 주요 버튼에는 하나의 선명한 브랜드 색을 사용합니다. 버튼 안 글자는 흰색으로 두되 배경과 충분히 구분되는지 눈으로 확인합니다. 만약 가격을 강조하고 싶다면 주요 색을 사용할 수 있지만, 버튼보다 더 강하게 보이지 않도록 주의하세요.

마지막으로 두 카드를 나란히 놓고 비교합니다. 정리된 카드 아래에 짧은 메모를 남겨보세요. 예를 들어 왼쪽 기준선을 통일했다, 간격을 8pt 기준으로 정리했다, 버튼 높이를 48px로 맞췄다, 제목과 본문 굵기를 분리했다처럼 구체적으로 적습니다. 이 메모를 쓸 수 있다면 단순히 예쁘게 만든 것이 아니라 디자인 기준을 적용한 것입니다.

실습을 마친 뒤에는 다음 체크리스트로 스스로 점검해보세요.

• 카드 안의 주요 요소가 같은 왼쪽 기준선에 맞춰져 있는가?

• 간격이 8, 12, 16, 24 같은 규칙적인 값으로 정리되어 있는가?

• 제목, 설명, 가격, 버튼의 시각적 우선순위가 분명한가?

• 버튼이 눌러도 되는 요소처럼 충분히 크고 선명하게 보이는가?

• 글자와 배경의 대비가 읽기에 충분한가?

• 색상이 장식이 아니라 역할에 맞게 사용되었는가?

이 실습을 제대로 해두면 다음 장에서 프레임과 레이어로 화면의 뼈대를 만들 때 훨씬 수월해집니다. 이제부터 피그마의 도구들은 단순한 그리기 기능이 아니라, 방금 세운 디자인 기준을 화면에 정확히 옮기는 도구가 됩니다.