피그마 기본기 | 오토레이아웃까지, AI와 작업할 때 꼭 알아야 할 개념

AI로 피그마 편집까지 할 수 있는 시대입니다. 그런데 AI가 만든 결과물도 결국 직접 손봐야 하는 경우가 많습니다. 이 영상에서는 쇼핑몰 배너 한 장을 처음부터 끝까지 만들면서 피그마의 기본 개념과 사용법을 차례로 짚습니다. 화면 세 구역, 프레임, 레이어, 채우기부터 오토레이아웃(간격 · 패딩 · 정렬 · 허그 · 고정 · 컨테이너 채우기), 상자 안에 상자, 모바일 크기로 바꾸기와 내보내기까지 다룹니다. 마지막에는 오늘 배운 단어로 AI에게 피그마 배너를 요청하는 문장을 드립니다. 아래에 그대로 적어 뒀습니다. ■ 타임라인 0:00 AI 시대에도 기본기 0:28 화면 세 구역 2:39 손으로 놓아 보기 5:00 첫 오토레이아웃 8:45 상자 안에 상자 12:37 모바일 배너로 바꾸기 14:12 AI에게 할 말 ■ 영상에 나온 단축키 F 프레임 · T 글자 · R 사각형 · Shift+A 오토레이아웃 걸기 · Ctrl+D 복제(맥은 Command+D) · Ctrl+Z 되돌리기 · Esc 글자 입력 끝내기 · 스페이스 바를 누른 채 끌기 캔버스 옮기기 · Ctrl을 누른 채 휠 확대 축소 ■ 상자 지도 (오늘 만든 배너의 구조) 쿠팡 배너: 가로 · 고정 1280 x 440 글자 묶음: 세로 · 컨테이너 채우기 로켓배송 뱃지: 가로 · 내용에 맞게(허그) 작은 문구 큰 문구 상품 묶음: 가로 · 아래 정렬 · 내용에 맞게(허그) 순서: 상자 지도를 먼저 그리고, 가장 안쪽 상자부터 Shift+A로 묶고, 상자마다 흐름 · 간격 · 패딩 · 정렬을 정한 다음, 마지막으로 크기(고정 · 허그 · 채우기)를 고릅니다. ■ AI에게 할 말 (영상 14:12) 배너에 쓸 사진과 문구는 피그마 파일에 먼저 올려 두고, 그 파일 주소를 같이 줍니다. 미니 쇼케이스 쿠팡 배너를 피그마에 가로 1280, 세로 440으로 만들어 줘. 오토레이아웃으로 짜 줘. 로켓배송 뱃지, 글자 묶음, 상품 묶음을 각각 상자로 나눠서 배너 상자 안에 넣어 줘. 배너는 고정 크기로, 뱃지는 내용에 맞게 늘어나게 해 줘. (배너 이름과 문구는 내 배너에 맞게 바꿔서 쓰면 됩니다) ■ 시연 환경 2026년 10월 29~30일, 피그마 무료(Starter) 계정 한국어 화면. AI 시연은 AI 브라우저 Aside. ■ 사진 · 아이콘 출처 배경 사진 Unsplash, Christian Mackie (Unsplash License) · 로켓 아이콘 Lucide (ISC License) #피그마 #피그마사용법 #오토레이아웃 #Figma #피그마기초