피그마 컴포넌트와 오토 레이아웃을 조합해 반복 작업을 줄이는 방법

피그마(Figma)는 브라우저에서 열리는 UI 디자인 도구예요. 설치 없이 링크 하나로 여러 사람이 같은 파일을 동시에 열 수 있고, 컴포넌트와 오토 레이아웃, 프로토타입, 개발자 핸드오프까지 한 파일 안에서 이어져요. 화면에 도형과 글자를 놓는 건 익혔는데 그다음이 막막해서 검색하셨다면, 여기서부터는 그림을 더 잘 그리는 법이 아니라 같은 일을 두 번 하지 않는 구조를 만드는 쪽이에요.

기본을 넘어서면 조합하게 되는 것들

피그마는 2016년에 나온 브라우저 기반 도구예요. 클라우드에 저장되니까 버전 관리가 자동으로 되고, 여러 사람이 같은 파일에서 동시에 작업할 수 있어요. 지금은 화면을 그리는 도구를 넘어서 기획·디자인·개발이 한 파일에서 만나는 쪽으로 넓어졌어요.

처음에는 프레임 하나 열고 사각형 놓고 텍스트 넣는 데서 시작해요. 그 단계에서는 기능이 부족할 일이 거의 없어요. 문제는 화면이 열 개를 넘어갈 때 생겨요. 같은 버튼을 열 번 고치고, 색 하나 바꾸려고 레이어 스무 개를 하나씩 클릭하게 되거든요.

심화 활용은 바로 그 지점에서 갈라져요. 같은 일을 두 번 하지 않는 구조를 만드는 쪽이에요. 피그마에서 그 구조를 이루는 부품은 정해져 있어요. 컴포넌트, 오토 레이아웃, 스타일과 변수, 프로토타입, Dev Mode예요. 다섯 개를 따로 익히면 기능 하나씩이고, 붙여 놓으면 워크플로가 돼요.

먼저 전체 정보를 한 번에 보면 이래요.

피그마 기본 정보

심화로 갈수록 먼저 걸리는 건 플랜 경계예요

기능을 몰라서 막히는 게 아니라, 배운 기능을 쓸 자리가 없어서 막히는 경우가 많아요. 무료 Starter 플랜은 디자인 파일 3개, 파일당 페이지 3개, 버전 기록 30일이에요. 개인 포트폴리오 하나나 학습용으로는 이 선이 크게 걸리지 않아요.

반대로 팀 단위 협업, 디자인 시스템 공유, AI 기능 활용, 프로젝트 여러 개 동시 진행은 이 선에 바로 부딪혀요. 프리랜서라도 클라이언트 작업을 두세 개 같이 굴리면 파일 3개는 금방 차요.

무엇이 어디서 걸리는지 표로 보면 이래요.

무료 Starter에서 걸리는 지점

반복 요소를 시스템으로 바꾸는 조합

심화의 첫 조합은 컴포넌트, 이름 규칙, 오토 레이아웃이에요. 셋을 따로 쓰면 효과가 반이고, 붙여 쓰면 반복 작업이 사라져요.

컴포넌트는 반복해서 쓰는 요소를 원본 하나로 만들어 두는 기능이에요. 버튼, 카드, 네비게이션 바 같은 걸 컴포넌트로 등록하면 원본을 고칠 때 복사본까지 자동으로 바뀌어요. 요소를 선택하고 Ctrl(⌘)+Alt(Option)+K를 누르면 끝이고, 왼쪽 레이어 패널에서 이름 앞에 마름모 아이콘이 붙으면 등록된 거예요. 다른 프레임으로 끌어다 놓으면 복사본인 인스턴스가 생겨요.

이름 규칙은 여기서부터 중요해져요. 컴포넌트 이름에 슬래시(/)를 쓰면 Assets 패널에서 자동으로 폴더 구조가 생겨요.

컴포넌트 이름에 이렇게 입력하세요

Button/Primary
Button/Secondary
Button/Ghost
Card/Default
Card/WithImage

이름 규칙과 오토 레이아웃을 겹쳐 놓기

앞의 이름을 그대로 쓰면 Assets 패널에서 Button 폴더 안에 Primary, Secondary, Ghost가 정리돼요. 파일이 아무리 복잡해져도 원하는 부품을 바로 꺼낼 수 있어요.

오토 레이아웃은 요소를 감싸서 간격과 정렬을 자동으로 유지하는 기능이에요. 레이어를 선택하고 Shift+A를 누르면 프레임이 생기고 오른쪽 패널에 오토 레이아웃 속성이 나타나요. 텍스트 길이가 바뀌면 버튼 크기가 알아서 늘고 줄어요. 웹 개발에서 쓰는 Flexbox(요소를 한 줄로 늘어놓고 간격을 자동으로 잡는 방식)와 원리가 같다고 보면 이해가 빨라요.

스타일과 변수는 색·폰트·그림자 같은 값을 이름 붙여 등록해 두는 기능이에요. 화면 스무 개에 같은 파란색을 손으로 칠해두면 브랜드 색이 바뀌는 순간 스무 곳을 찾아다녀야 해요. 스타일로 등록해 두면 한 곳만 고치면 되고, 오른쪽 패널의 Variables 탭에서 값 묶음을 따로 관리할 수도 있어요. 디자인 시스템을 만든다는 게 결국 이 세 가지를 겹쳐 놓는 일이에요.

팀 라이브러리까지 얹으면 조합이 완성돼요. 팀 라이브러리에 다른 멤버가 새 요소를 올리면 자동으로 동기화돼서, 각자 파일에서 같은 부품을 쓰게 돼요. 다만 팀 라이브러리는 무료 플랜에서 쓸 수 없어요.

순서는 이렇게 잡는 게 편했어요. 오토 레이아웃을 먼저 적용하고, 그다음 컴포넌트로 등록하고, 마지막에 이름을 정리해요. 컴포넌트로 먼저 묶어 두면 오토 레이아웃을 걸 때 구조가 꼬여서 다시 푸는 일이 생기거든요.

한 화면을 끝까지 만드는 다섯 단계

심화라고 해서 처음부터 다른 걸 하는 건 아니에요. 한 화면을 제대로 끝까지 만들어두면 그 구조가 다음 화면의 템플릿이 돼요.

1단계 — 화면 틀을 프레임으로 잡아요. 상단 툴바에서 Frame 도구(F)를 고르고 오른쪽 속성 패널에서 프리셋을 선택해요. 웹이면 Desktop(1440 x 900), 모바일이면 iPhone 16(393 x 852) 같은 값이 바로 들어가요. 여기서 한 가지, 사각형(Rectangle) 도구로 화면을 만들면 안 돼요. 사각형은 단순 도형이라 오토 레이아웃도 프로토타입 연결도 걸리지 않아요.

2단계 — 그리드를 깔아요. 웹 화면이면 12 columns, margin 120px, gutter 20px 정도로 잡으면 부트스트랩 그리드와 비슷한 구조가 돼요. 8pt 그리드로 잡아도 규칙만 일관되면 괜찮아요. 이 단계를 건너뛰면 나중에 간격을 눈대중으로 맞추게 되고, 화면마다 여백이 조금씩 달라져요.

3단계 — 요소를 채워요. R로 사각형, T로 텍스트를 넣어요. 버튼은 Corner radius를 8px 정도 주면 요즘 앱에서 흔히 보는 둥근 모양이 돼요. 한글 폰트는 오른쪽 Text 섹션에서 Pretendard나 Noto Sans KR로 바꿔요. 이미지는 Ctrl(⌘)+Shift+K로 불러와서 도형 위에 클릭하면 그 도형 안에 채워져요. 마스크 작업 없이 사진을 사각형 안에 넣을 수 있어요.

4단계 — 묶고 등록해요. 요소 여러 개를 선택하고 Shift+A로 오토 레이아웃을 걸어요. 버튼처럼 반복될 요소는 Ctrl(⌘)+Alt(Option)+K로 컴포넌트 등록을 하고 이름을 Button/Primary처럼 붙여요. 임시로 요소를 묶을 때만 Ctrl(⌘)+G로 그룹을 쓰고, 화면 구조는 프레임으로 잡아요. Ctrl(⌘)+Alt(Option)+G는 선택한 요소를 프레임 안으로 넣는 단축키예요.

5단계 — 정렬하고 이름을 정리해요. 여러 요소를 선택한 뒤 Alt(Option)+H로 수평 중앙, Alt(Option)+V로 수직 중앙을 맞춰요. 요소가 두 개 이상이면 균등 분배 옵션도 떠요. 마지막으로 레이어 이름을 header-logo, cta-button처럼 바꿔둬요. Rectangle 47, Group 12 같은 이름이 백 개 넘게 쌓이면 나중에 고칠 때 찾는 데만 시간이 다 가요.

이 다섯 단계를 한 번 끝까지 해보면 두 번째 화면부터는 1·2단계를 복사해서 시작할 수 있어요.

이 작업에서 쓰는 단축키

화면 틀 만들기      F
도형 그리기         R
텍스트 입력         T
이미지 채우기       Ctrl(⌘) + Shift + K
오토 레이아웃       Shift + A
컴포넌트 등록       Ctrl(⌘) + Alt(Option) + K
프레임 안에 넣기    Ctrl(⌘) + Alt(Option) + G
그룹 묶기           Ctrl(⌘) + G
수평 중앙 정렬      Alt(Option) + H
수직 중앙 정렬      Alt(Option) + V
기능 이름으로 검색   Ctrl(⌘) + /

프로토타입과 스마트 애니메이트로 흐름을 잇기

프레임을 여러 개 만들었다면 이제 화면 사이를 연결해요. 오른쪽 패널에서 Prototype 탭으로 전환하면 연결 모드가 돼요.

방법은 간단해요. 버튼 같은 요소를 선택하면 오른쪽에 파란 원(연결 노드)이 나타나요. 그 원을 드래그해서 이동할 다음 화면 프레임 위에 놓으면 화살표가 생기고, 클릭할 때 화면이 전환되도록 설정돼요.

전환 효과는 Interaction details 패널에서 골라요. 트리거는 On click, On hover 같은 값이고 애니메이션은 Smart animate, Dissolve 같은 값이에요. 여기서 Smart animate가 핵심이에요. 이름이 같은 요소끼리 자동으로 모핑(한 모양이 다른 모양으로 자연스럽게 변하는 것) 애니메이션을 만들어줘요. 별도 설정 없이 이름만 맞추면 전환이 자연스러워져요.

그래서 컴포넌트 이름과 레이어 이름을 정리해둔 게 여기서 값을 해요. 이름이 어긋나 있으면 전환이 툭 끊기고, 이름이 맞아 있으면 손대지 않아도 부드럽게 이어져요. 심화 조합에서 이름 규칙이 계속 나오는 이유가 이거예요.

미리보기는 오른쪽 위 재생 아이콘, 단축키로는 Ctrl(⌘)+Alt(Option)+Enter예요. 새 창에서 실제 앱처럼 클릭하면서 흐름을 확인할 수 있고, 링크를 복사해 동료에게 그대로 공유할 수 있어요. Figma Mirror 앱을 설치하면 모바일 기기에서 실시간으로 미리 볼 수 있어요.

여기서 자주 나오는 실패가 하나 있어요. 로그인, 홈, 설정 화면을 한 프레임 안에 몰아넣는 경우예요. 화면 하나에 프레임 하나가 원칙이에요. 그래야 프로토타입 연결도 되고, 나중에 화면을 재배치하기도 쉬워요.

핸드오프 자동화 — Dev Mode와 내보내기, 외부 연동

디자인이 끝나면 개발자에게 넘기는 단계가 남아요. 예전에는 시안 옆에 간격과 색상 값을 문서로 따로 적어서 넘겼어요. 지금은 파일 하나로 끝나요.

Dev Mode는 오른쪽 패널을 개발자용으로 전환하는 기능이에요. 요소를 클릭하면 CSS 코드, 치수, 간격, 색상 코드, 폰트 정보가 자동으로 표시돼요. 이 버튼 크기가 몇이냐고 묻는 과정이 사라져요.

Export는 이미지와 아이콘을 PNG, JPG, SVG, PDF, WebP 형식으로 내보내는 기능이에요. 형식을 지정하고 Export 버튼을 누르면 저장돼요. 여기서 요령이 하나 있어요. 레이어 이름에 슬래시(/)를 쓰면 폴더 구조로 일괄 내보내기가 돼요. 아이콘 서른 개를 하나씩 내보내는 대신 한 번에 정리된 폴더로 받을 수 있어요.

외부 도구 연동도 이어져요. Cursor AI 같은 AI 코딩 에이전트와 피그마를 MCP(Model Context Protocol, AI가 외부 도구의 데이터를 읽도록 맞춰 놓은 약속)로 연결하면 AI가 피그마의 컴포넌트를 직접 참조해서 코드를 만들어요. 프론트엔드 작업 속도를 크게 줄이는 방식으로 쓰이고 있어요.

여기서 중요한 건 디자이너 쪽 준비예요. 레이어 이름이 Rectangle 5로 가득 찬 파일은 넘기는 순간 혼란을 만들어요. 개발 속도는 디자인이 얼마나 예쁜지보다 레이어 구조와 컴포넌트 이름이 얼마나 정돈됐는지에 직결돼요. 앞에서 이름 규칙을 강조한 이유가 여기까지 이어져요.

다만 외부 연동은 파일 내용이 다른 도구 쪽으로 넘어가는 구조예요. 어떤 파일을 연결할지는 시작 전에 정하는 게 좋아요.

Dev Mode 열기

Ctrl(⌘) + /   →  "Dev Mode" 입력해서 실행
Shift + D      →  Dev Mode 열기

AI로 초안 뽑고 사람이 다듬기

2026년 기준으로 피그마 안에 AI 기능이 들어와 있어요. Figma Make는 프롬프트를 넣으면 디자인 초안을 만들어주는 기능이에요. 로그인 화면을 만들어달라고 입력하면 입력 필드, 버튼, 로고 배치까지 자동으로 나와요. Claude Sonnet과 Opus 모델이 연동돼 있어서 한국어 프롬프트도 꽤 알아들어요.

빈 캔버스에서 첫 삽을 뜨는 게 제일 오래 걸리는데, 그 시간을 줄이는 데 쓸 만해요. 입력은 이렇게 넣어보세요.

Figma Make에 이렇게 입력해보세요

로그인 화면을 만들어줘. 이메일 입력 필드, 비밀번호 입력 필드, 로그인 버튼, 소셜 로그인 버튼 두 개 순서로 배치해줘.

결제 완료 화면. 위에는 주문 번호와 결제 금액, 아래에는 영수증 보기와 홈으로 가기 버튼을 둬.

대시보드 요약 카드 세 개를 한 줄에. 각 카드에 제목, 큰 숫자, 전월 대비 증감 표시를 넣어줘.

AI 초안에서 걸리는 지점과 배포 쪽 기능

크레딧은 여기서 걸려요. 2026년 3월 18일부터 플랜별 크레딧 제한이 본격적으로 적용돼요. 무료 플랜에도 월 크레딧이 주어지지만 한도를 넘으면 그 기능이 멈춰요. 멈추면 다음 초기화를 기다리거나 유료 구독으로 크레딧을 추가하는 방식이에요. 습관처럼 쓰기 시작하면 월 중간에 멈추니까, 자주 쓸 계획이라면 유료 전환 시점을 미리 정해두는 게 좋아요.

그리고 AI가 만든 초안은 그대로 쓰기 어려워요. 배치 수준의 결과가 나오고 레이어 이름은 정리되지 않은 상태예요. 초안을 받은 다음 컴포넌트 구조로 다시 묶고 이름을 붙이는 작업이 남아요. 이 정리 작업을 건너뛰면 화면이 늘어날수록 수정 비용이 커져요. 초안 생성은 앞단이고, 뒷단은 사람 몫이에요.

피그마 안에서 웹사이트를 배포하는 쪽도 생겼어요. Figma Sites는 Webflow나 Framer와 비슷한 노코드 퍼블리싱 기능이고, Figma Make는 프롬프트로 웹앱을 만드는 도구예요. 다만 서비스형 플랫폼에서 호스팅되는 방식이라 유연한 커스터마이징에는 한계가 있어요. 자체 서버와 도메인까지 다루려면 별도의 구현 단계가 필요해요.

여기서 오해가 하나 자주 나와요. 피그마로 아무리 완성도 높은 시안을 만들어도 그것 자체가 브라우저에서 열리는 홈페이지는 아니에요. 피그마는 디자인 도구고, 배포까지 가려면 구현 단계가 따로 있어요.

잘 되는 것과 안 되는 것

심화 조합을 써보면 기대와 실제가 갈리는 지점이 있어요. 나란히 놓고 보면 이래요.

기대와 실제

일각에서는 이런 반응도 있어요

이 주제를 다룬 국내 정리글 다섯 편을 보면 반응이 갈려요. 다섯 편 중 네 편이 협업 기능과 컴포넌트 자동 동기화를 첫 번째 강점으로 꼽았어요. 실시간 공동 편집, 개발자 핸드오프, 라이브러리 동기화가 반복해서 나와요.

조건을 다는 쪽도 있어요. 한 편은 무료 플랜의 파일 3개 제한과 버전 기록 30일 제한을 먼저 짚었어요. 개인 학습에는 충분하지만 팀 협업이나 프로젝트 여러 개를 굴리는 상황에서는 유료 전환이 현실적이라는 시각이에요.

한 편은 아예 다른 도구를 권했어요. 한국어 UI를 지원하고 Dev Mode와 비슷한 디자인-투-코드 기능을 무료로 제공하는 대안을 앞세운 글이었어요. 같은 파일에서 동시에 작업한다는 구조는 비슷하고, 가격과 언어 지원에서 차이가 난다는 이야기예요.

실수 목록을 따로 정리한 글에서는 화면 틀을 사각형으로 만드는 것, 레이어 이름을 방치하는 것, 한 프레임에 여러 화면을 몰아넣는 것, 로컬 폰트를 설치하지 않고 작업하는 것이 공통으로 나왔어요. 기능이 부족해서가 아니라 구조를 잡지 않아서 생기는 문제라는 쪽이에요.

정리하면 강점에 대해서는 이견이 거의 없고, 갈리는 건 비용과 언어 지원, 그리고 어디까지를 피그마 안에서 끝낼 수 있는가예요.

조심할 점과 맞는 사람

심화로 갈수록 사고의 크기도 같이 커져요. 한 번의 변경이 여러 화면에 반영되기 때문이에요.

심화 활용에서 걸리기 쉬운 지점

이런 사람에게 맞아요

맞는 사람

• 화면이 열 개를 넘어가고, 같은 요소를 계속 고치게 되는 프로젝트를 하는 사람
• 디자이너·기획자·개발자가 한 파일에서 만나는 팀
• 컴포넌트와 변수로 디자인 시스템을 만들려는 사람
• 시안을 코드 쪽으로 넘기는 과정을 줄이고 싶은 사람

덜 맞는 사람

• 파일 한두 개짜리 단발 작업만 하는 사람. 무료 플랜으로 충분하고 유료로 갈 이유가 크지 않아요
• 사진 보정이나 합성이 목적인 사람. 피그마는 UI에 특화된 벡터 기반 도구예요
• 시안부터 배포까지 한 번에 끝내려는 사람. Figma Sites는 커스터마이징에 한계가 있어요

오늘 해볼 건 하나예요. 반복해서 쓰는 버튼 하나를 골라 Ctrl(⌘)+Alt(Option)+K로 컴포넌트로 만들고, 이름 앞에 Button/을 붙여보세요.

시작 전 확인할 것

• 컴포넌트 이름에 슬래시(/)를 써서 Assets 패널에 폴더가 생겼는지
• 화면 틀을 사각형이 아니라 Frame 도구(F)로 만들었는지
• 프로토타입에서 이어지는 요소의 이름이 양쪽 화면에서 같은지
• 레이어 이름이 Rectangle, Group 같은 기본값으로 남아 있지 않은지
• 무료 플랜의 파일 3개·페이지 3개·버전 30일 한도에 걸리지 않았는지
• AI 크레딧이 남아 있는지, 초안 다듬기 작업을 남겨두었는지

참고 링크

• 공식 Figma Learn - Help Center — help.figma.com
• 처음 시작하는 사람을 위한 피그마 사용법 완벽 정리! | 기술정보 블로그 | 디자인키트 — designkits.co.kr
• 2026년 초보자를 위한 피그마 사용법 소개 — pixso.net
• 피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지 - 코드스테이츠 공식 블로그 — codestates.com
• 피그마 사용법 — 비전공자도 따라 하는 5단계 입문 가이드 (2026) — 똑똑한 테크 노트 — smarttechnote.com
• 피그마 사용법 핵심 총정리 — 기초·웹사이트 만들기·무료 유료 차이·UI 디자인·개발자 활용 한눈에 : 전문 칼럼 | 홈페이지 템플릿 | 웹… — temkit.kr