피그마 기초 사용법 완벽 가이드 - 가입부터 프레임, 컴포넌트, 내보내기까지 한번에

피그마를 처음 열었을 때 빈 캔버스와 수십 개의 아이콘 앞에서 어디부터 눌러야 할지 몰라 창을 닫아본 경험이 있으실 겁니다. 포토샵이나 파워포인트와는 구조 자체가 달라서 기존 습관이 오히려 방해가 되기도 합니다. 그런데 실제로 필요한 기능은 전체의 20% 정도입니다. 그 20%만 순서대로 익히면 썸네일, 배너, 앱 화면 시안 정도는 당일에 만들 수 있습니다. 이 글은 피그마 기초 사용법을 실제 작업 순서대로 정리한 안내서입니다.

피그마가 무엇이고 왜 쓰는가

피그마(Figma)는 브라우저에서 동작하는 UI 디자인 도구입니다. 2016년 정식 출시됐고, 설치 없이 웹에서 바로 실행되며 여러 명이 같은 파일을 동시에 편집할 수 있다는 점이 가장 큰 특징입니다. 데스크톱 앱도 있지만 기능은 웹 버전과 동일합니다.

다른 도구와 비교하면 포지션이 명확합니다.

무료 Starter 플랜에서는 개인 드래프트 파일을 제한 없이 만들 수 있고, 팀 프로젝트는 파일 수 제한이 있습니다. 개인 용도로 썸네일이나 배너를 만드는 수준이라면 무료 플랜으로 충분합니다. 정확한 제한은 플랜 정책이 바뀔 수 있으니 가입 시 요금 페이지를 한 번 확인하시는 것이 좋습니다.

가입과 첫 파일 만들기

figma.com에 접속해 구글 계정으로 가입하면 30초면 끝납니다. 로그인 후 보이는 화면이 파일 브라우저이고, 우측 상단 Design file 버튼을 누르면 새 파일이 열립니다.

화면 구성 이해하기

편집 화면은 크게 네 영역으로 나뉩니다.

• 왼쪽 패널(Layers): 캔버스에 올린 모든 요소가 계층 구조로 표시됩니다. 페이지 전환도 여기서 합니다.
• 가운데 캔버스: 실제 작업 공간입니다. 무한히 넓어서 여러 화면을 한 파일에 펼쳐 놓을 수 있습니다.
• 오른쪽 패널(Design): 선택한 요소의 위치, 크기, 색상, 글꼴 등 속성을 조정합니다.
• 하단 툴바: 프레임, 도형, 펜, 텍스트 같은 핵심 도구가 모여 있습니다. 2023년 UI3 개편 이후 툴바가 하단으로 이동했습니다.

프레임부터 만들기

피그마에서 가장 먼저 익혀야 할 개념이 프레임(Frame)입니다. 프레임은 아트보드이자 컨테이너로, 모든 디자인은 프레임 안에 들어갑니다. 키보드 F를 누르면 오른쪽 패널에 iPhone, Desktop, Social media 등 프리셋 크기가 나타납니다. 유튜브 썸네일은 1280x1920이 아니라 1280x720, 오픈그래프 이미지는 1200x630으로 직접 입력하면 됩니다.

기본 도구와 단축키

마우스로 툴바를 클릭해도 되지만 단축키를 외우면 작업 속도가 체감상 2배 이상 빨라집니다. 처음에는 아래 10개만 기억하셔도 됩니다.

캔버스 이동은 스페이스바를 누른 채 드래그, 확대와 축소는 Ctrl+마우스 휠입니다. 요소를 정렬할 때는 오른쪽 패널 최상단에 있는 정렬 아이콘을 쓰거나, 두 개 이상 선택한 뒤 Alt 키를 누르고 있으면 요소 간 거리가 빨간 숫자로 표시됩니다. 이 기능만으로도 여백을 눈대중으로 맞추던 시간이 크게 줄어듭니다.

오토 레이아웃과 컴포넌트

피그마를 단순한 그림판과 구분 짓는 두 가지 기능입니다. 이 둘을 이해하면 수정이 들어와도 처음부터 다시 그리는 일이 사라집니다.

오토 레이아웃(Auto Layout)

버튼 하나를 만든다고 가정해 보겠습니다. 사각형 위에 텍스트를 올린 뒤 둘을 선택하고 Shift+A를 누르면 오토 레이아웃이 적용됩니다. 이제 텍스트를 "확인"에서 "무료로 시작하기"로 바꾸면 사각형이 텍스트 길이에 맞춰 자동으로 늘어납니다. 오른쪽 패널에서 패딩(안쪽 여백)과 간격(Gap), 정렬 방향을 숫자로 지정할 수 있어 CSS의 Flexbox와 거의 같은 방식으로 동작합니다.

카드 목록이나 내비게이션 바처럼 반복되는 요소는 오토 레이아웃을 중첩해서 만듭니다. 항목 하나를 삭제하면 나머지가 자동으로 당겨지고, 항목을 추가하면 간격이 유지된 채 밀려납니다.

컴포넌트(Component)

같은 버튼을 화면 10곳에 써야 한다면 원본을 Ctrl+Alt+K로 컴포넌트로 만들고, 나머지는 복제해서 씁니다. 복제본을 인스턴스라고 부르는데, 원본(메인 컴포넌트)의 색상이나 모서리 값을 바꾸면 인스턴스 10개가 한 번에 바뀝니다. 인스턴스 안의 텍스트는 개별로 수정할 수 있어서 내용은 다르고 스타일만 같은 요소를 관리하기에 적합합니다.

피그마를 잘 쓴다는 것은 예쁘게 그린다는 뜻이 아닙니다. 나중에 수정 요청이 왔을 때 한 곳만 고치면 전체가 바뀌도록 구조를 짜두는 것입니다. 오토 레이아웃과 컴포넌트를 배우는 데 쓴 1시간이 이후 수십 시간을 절약합니다.

색상과 텍스트 스타일 관리

오른쪽 패널 Fill 항목에서 색상을 지정합니다. 기본 표기는 HEX(예: #1E293B)이고, 드롭다운에서 RGB나 HSL로 바꿀 수 있습니다. 개발자에게 넘겨야 하거나 다른 도구와 색상을 맞춰야 할 때 형식 변환이 잦은데, 외부 색상 변환기에서 HEX, RGB, HSL 값을 한 번에 확인하고 피그마에 붙여넣으면 실수를 줄일 수 있습니다.

스타일로 등록하기

자주 쓰는 색상은 Fill 옆의 스타일 아이콘(네 개의 점)을 눌러 Color style로 저장합니다. Primary, Background, Text 같은 이름을 붙여두면 이후 색상을 바꿀 때 스타일 하나만 수정하면 파일 전체에 반영됩니다. 텍스트도 마찬가지로 제목 24px Bold, 본문 16px Regular처럼 Text style로 등록하면 일관성이 유지됩니다.

한글 폰트 설정

웹 버전 피그마는 구글 폰트를 기본 제공하므로 Noto Sans KR, Nanum Gothic 등은 바로 사용할 수 있습니다. 컴퓨터에 설치된 Pretendard 같은 로컬 폰트를 쓰려면 데스크톱 앱을 사용하거나, 웹에서는 Figma Agent(폰트 헬퍼)를 설치해야 합니다.

• 썸네일이나 배너: Noto Sans KR 700~900 굵기가 가독성이 좋습니다.
• 앱과 웹 시안: Pretendard 또는 Noto Sans KR 400~600을 본문에 씁니다.
• 한 화면에 폰트는 2종 이내로 제한하는 것이 안전합니다.

내보내기와 협업 기능

완성한 프레임을 선택하고 오른쪽 패널 맨 아래 Export 섹션에서 형식을 고릅니다. 썸네일이나 SNS 이미지는 PNG 또는 JPG, 로고나 아이콘은 SVG가 적합합니다. 배율은 1x가 프레임 원본 크기이고, 고해상도 디스플레이용으로는 2x를 함께 뽑아두는 경우가 많습니다. 1200x630 프레임을 2x로 내보내면 2400x1260 이미지가 생성됩니다.

공유와 댓글

우측 상단 Share 버튼으로 링크를 만들면 상대방이 피그마 계정 없이도 볼 수 있습니다. 권한은 보기(Can view)와 편집(Can edit)으로 나뉘며, 외주나 팀 작업에서는 보기 권한으로 먼저 공유하고 댓글(C 키)로 피드백을 받는 방식이 안전합니다. 편집 권한을 여러 명에게 주면 실수로 원본이 바뀌는 일이 생기므로, 파일 공유 시 피그마 계정 보안도 함께 챙기는 편이 좋습니다. 회사 파일을 다루신다면 구글 계정에 2단계 인증을 켜고, 비밀번호는 비밀번호 생성기로 만든 16자 이상 무작위 문자열을 쓰는 것이 기본입니다.

프로토타입 맛보기

오른쪽 패널 상단 Prototype 탭에서 버튼을 다른 프레임으로 드래그하면 클릭 시 화면이 전환되는 프로토타입이 만들어집니다. 우측 상단 재생 버튼으로 실제 앱처럼 동작을 확인할 수 있고, 이 링크를 공유하면 개발 전에 흐름을 검증할 수 있습니다.

지금 바로 해볼 수 있는 것은 두 가지입니다. 첫째, 피그마에 가입해 1200x630 프레임을 만들고 텍스트와 사각형 하나로 썸네일을 완성해 PNG로 내보내 보세요. 둘째, 그 썸네일의 제목 텍스트와 배경을 선택해 Shift+A로 오토 레이아웃을 걸어 보세요. 텍스트를 바꿨을 때 배경이 따라 늘어나는 순간 피그마의 구조가 이해되기 시작합니다.