피그마 기초 사용법 완벽 정리 - 가입부터 첫 디자인까지 따라하기

디자인 도구를 처음 켜면 막막합니다. 화면에 버튼은 수십 개인데 뭐부터 눌러야 할지 감이 안 옵니다. 포토샵은 무겁고 비싸고, 일러스트는 학습 곡선이 가파릅니다. 그래서 많은 사람이 시작도 못 하고 포기합니다. 피그마는 그 진입 장벽을 크게 낮춘 도구입니다. 설치도 필요 없고, 무료 플랜만으로도 개인 작업은 충분합니다.

이 글은 디자인을 한 번도 안 해본 분을 기준으로 피그마 기초 사용법을 처음부터 끝까지 순서대로 정리했습니다. 방송 오버레이, 썸네일, 채널 배너를 직접 만들고 싶은 스트리머에게도 그대로 적용됩니다.

왜 피그마인가

피그마는 웹 브라우저에서 바로 돌아가는 디자인 도구입니다. 윈도우와 맥을 가리지 않고, 별도 설치 없이 크롬이나 엣지에서 접속만 하면 됩니다. 데스크톱 앱도 있지만 기능은 동일합니다.

가장 큰 강점은 세 가지입니다.

• 무료로 시작: 개인 파일 3개까지 무료 플랜으로 제한 없이 사용할 수 있습니다.
• 실시간 협업: 구글 문서처럼 여러 명이 같은 화면을 동시에 편집합니다.
• 자동 저장: 작업 내용이 클라우드에 즉시 저장돼 파일이 날아갈 걱정이 없습니다.

가입과 화면 구성 익히기

figma.com에 접속해 구글 계정이나 이메일로 가입합니다. 가입 후 첫 화면은 파일을 모아두는 대시보드입니다. 여기서 Design file을 새로 만들면 실제 작업 화면으로 들어갑니다.

작업 화면의 4개 영역

처음엔 복잡해 보이지만 화면은 크게 네 구역으로 나뉩니다. 이 구조만 외우면 절반은 끝난 셈입니다.

가운데 캔버스는 끝이 없습니다. 마우스 휠로 확대 축소하고, 스페이스바를 누른 채 드래그하면 화면이 이동합니다. 길을 잃었다면 단축키 Shift+1을 누르세요. 모든 요소가 한눈에 들어오게 화면이 맞춰집니다.

꼭 알아야 할 핵심 도구와 단축키

도구는 많지만 처음에 쓰는 건 다섯 개뿐입니다. 단축키를 같이 외우면 작업 속도가 눈에 띄게 빨라집니다.

• V (이동): 요소를 선택하고 옮기는 기본 도구. 평소엔 항상 이 상태입니다.
• F (프레임): 작업의 기준이 되는 틀을 만듭니다. 가장 중요한 개념입니다.
• R (사각형) / O (원): 도형을 그립니다. 버튼, 카드, 배경의 기본 재료입니다.
• T (텍스트): 글자를 입력합니다.
• P (펜): 자유로운 선과 도형을 그립니다. 익숙해지면 마지막에 손대세요.

레이아웃 짤 때 더미 텍스트가 필요하다면

디자인 시안을 짤 때 실제 문구가 아직 안 정해진 경우가 많습니다. 이때 빈칸을 두면 글자가 들어갔을 때의 균형을 가늠하기 어렵습니다. 의미 없는 채움 문장, 즉 더미 텍스트를 넣어두면 전체 비율을 미리 확인할 수 있습니다. 영문 더미가 필요할 땐 Lorem Ipsum 생성기로 원하는 분량을 뽑아 텍스트 박스에 붙여넣으면 됩니다.

프레임과 레이아웃 다루기

피그마에서 가장 먼저 이해해야 할 개념이 프레임입니다. 프레임은 디자인이 담기는 그릇입니다. 웹페이지 한 장, 모바일 화면 한 개, 썸네일 한 장이 각각 하나의 프레임이 됩니다.

프레임 없이 캔버스에 도형만 흩어놓으면 나중에 정리가 안 됩니다. 무엇을 만들든 프레임부터 잡고 그 안에서 작업하는 습관이 초보와 중급을 가릅니다.

F 키를 누르면 오른쪽 패널에 미리 정해진 크기 목록이 뜹니다. 인스타그램 정사각형, 모바일 화면, 데스크톱 화면 등이 준비돼 있어 클릭만 하면 표준 규격의 프레임이 생깁니다. 유튜브 썸네일은 1280x720, 방송 오버레이는 1920x1080처럼 직접 숫자를 입력해 만들 수도 있습니다.

색상은 HEX 코드로 정확하게

요소를 선택하고 오른쪽 Fill 항목을 누르면 색을 고를 수 있습니다. 색은 보통 #FF5733 같은 16진수 HEX 코드로 표기됩니다. 브랜드 컬러를 정확히 맞추려면 이 코드를 직접 입력하는 편이 안전합니다. HEX 값을 RGB 십진수로 바꿔 확인하고 싶을 땐 진법 변환기로 16진수와 10진수를 즉시 변환할 수 있습니다.

정렬은 여러 요소를 한꺼번에 선택한 뒤 오른쪽 패널의 정렬 버튼을 쓰면 됩니다. 가운데 정렬, 좌우 균등 배치가 클릭 한 번에 끝나므로 눈대중으로 맞추지 마세요.

협업과 공유 기능

피그마가 다른 도구와 결정적으로 다른 지점이 협업입니다. 오른쪽 상단의 Share 버튼을 누르고 링크를 복사해 전달하면 끝입니다. 받은 사람은 설치 없이 브라우저에서 바로 엽니다.

권한은 두 가지로 나뉩니다.

• can view (보기): 디자인을 보고 코멘트만 남길 수 있습니다. 외주 클라이언트나 피드백 주는 사람에게 적합합니다.
• can edit (편집): 직접 수정까지 가능합니다. 같이 작업하는 동료에게 줍니다.

코멘트 기능은 특히 유용합니다. C 키를 누르고 화면 특정 위치를 클릭하면 메모를 붙일 수 있어, 어느 부분을 고쳐야 하는지 말로 설명할 필요가 없습니다. 작업물을 이미지로 빼고 싶을 땐 프레임을 선택하고 오른쪽 하단 Export에서 PNG나 JPG, SVG로 내보냅니다.

다음 단계로 가는 법

여기까지 익혔다면 간단한 썸네일이나 배너는 충분히 만듭니다. 더 나아가고 싶다면 두 가지를 권합니다.

첫째, 컴포넌트를 익히세요. 자주 쓰는 버튼이나 카드를 컴포넌트로 등록하면 한 번 수정으로 모든 사본이 같이 바뀝니다. 반복 작업이 사라집니다. 둘째, 커뮤니티에 공개된 무료 템플릿을 가져와 뜯어보세요. 잘 만든 결과물을 분해하면서 배우는 속도가 혼자 만드는 것보다 훨씬 빠릅니다.

오늘 당장 할 일은 단순합니다. figma.com에 가입하고, F 키로 프레임 하나를 만든 뒤, 도형과 텍스트를 올려보세요. 30분만 손에 익히면 다음부터는 검색하지 않고도 화면이 눈에 들어옵니다.