피그마 컴포넌트, PPT 마스터 슬라이드 개념으로 10분 만에 마스터하기
PPT를 오래 사용한 IT 기획자라면 마스터 슬라이드라는 개념이 익숙할 수 있습니다. 공통 로고, 글꼴, 제목 위치를 한 번 정리해두면 여러 슬라이드에 같은 기준을 적용할 수 있는 기능입니다.
.png "PPT 마스터 슬라이드 개념으로 10분 만에 마스터하기")
피그마의 컴포넌트(Component)도 비슷하게 이해하면 쉽습니다. 반복해서 쓰는 버튼, 입력창, 메뉴, 카드 UI를 원본으로 만들어두고 여러 화면에서 재사용하는 방식입니다.
피그마 컴포넌트란 무엇인가요?
컴포넌트는 피그마에서 반복해서 사용하는 화면 요소입니다. 예를 들어 로그인 버튼, 검색창, 상단 메뉴, 상품 카드, 알림 팝업처럼 여러 화면에 계속 등장하는 요소를 컴포넌트로 만들 수 있습니다.
쉽게 말하면 컴포넌트는 재사용 가능한 UI 원본입니다. 버튼을 화면마다 매번 새로 만들지 않고, 기준이 되는 버튼을 하나 만들어 여러 화면에서 가져다 쓰는 방식입니다.
PPT 마스터 슬라이드와 무엇이 비슷할까요?
| 구분 | PPT 마스터 슬라이드 | 피그마 컴포넌트 |
|---|---|---|
| 역할 | 공통 레이아웃과 스타일 관리 | 반복 UI 요소 관리 |
| 예시 | 로고, 제목 위치, 글꼴 | 버튼, 입력창, 메뉴, 카드 |
| 장점 | 슬라이드 전체 기준 통일 | 화면 전체 UI 일관성 유지 |
| 수정 방식 | 마스터 수정 후 슬라이드에 반영 | 메인 컴포넌트 수정 후 인스턴스에 반영 |
PPT 마스터 슬라이드가 발표 자료의 공통 틀을 잡아준다면, 피그마 컴포넌트는 서비스 화면의 공통 부품을 잡아줍니다.
메인 컴포넌트와 인스턴스 이해하기
피그마 컴포넌트를 이해하려면 두 단어만 알면 됩니다. 메인 컴포넌트와 인스턴스입니다.
- 메인 컴포넌트: 기준이 되는 원본 UI입니다.
- 인스턴스: 메인 컴포넌트를 복사해 실제 화면에서 사용하는 요소입니다.
예를 들어 “저장 버튼”을 메인 컴포넌트로 만들었다고 생각해 보겠습니다. 여러 화면에서 이 버튼을 인스턴스로 가져다 쓰면, 버튼의 높이나 기본 스타일을 통일하기 쉽습니다.
메인 컴포넌트는 원본 도장이고, 인스턴스는 그 도장으로 찍은 결과물입니다. 원본 도장을 바꾸면 앞으로 찍히는 기준도 달라집니다.
IT 기획자가 확인해야 할 포인트
IT 기획자가 컴포넌트를 직접 많이 만들 필요는 없습니다. 하지만 컴포넌트가 왜 필요한지 이해하면 디자이너, 개발자와 회의할 때 훨씬 편해집니다.
- 같은 기능의 버튼이 화면마다 다르게 보이지 않는가?
- 공통 메뉴가 여러 화면에서 일관되게 사용되는가?
- 삭제, 저장, 취소 버튼의 기준이 정리되어 있는가?
- 컴포넌트 이름이 기능 기준으로 이해하기 쉬운가?
- 개발자도 공통 UI 기준을 확인할 수 있는가?
초보자가 자주 헷갈리는 부분
피그마 초보자는 컴포넌트를 단순 복사와 헷갈리는 경우가 많습니다. 일반 복사는 화면마다 따로 존재하는 요소입니다. 반면 컴포넌트 인스턴스는 원본과 연결된 복사본입니다.
| 구분 | 일반 복사 | 컴포넌트 인스턴스 |
|---|---|---|
| 원본 연결 | 없음 | 있음 |
| 일관성 관리 | 어려움 | 쉬움 |
| 실무 활용 | 임시 작업에 적합 | 반복 UI 관리에 적합 |
기획자 관점에서는 “이 버튼이 그냥 복사된 것인지, 공통 컴포넌트 기준인지”를 이해하는 것만으로도 충분합니다.
결론
피그마 컴포넌트는 어렵게 생각할 필요가 없습니다. PPT 마스터 슬라이드가 공통 레이아웃을 관리하듯, 피그마 컴포넌트는 반복되는 UI 요소를 관리합니다.
IT 기획자에게 중요한 것은 컴포넌트를 직접 멋지게 만드는 능력이 아닙니다. 같은 기능은 같은 기준으로 보이고 작동해야 한다는 점을 이해하는 것입니다.
컴포넌트를 이해하면 화면마다 버튼 모양이 다른 이유, 메뉴 구조가 바뀐 이유, 개발자가 공통 UI 기준을 묻는 이유를 더 쉽게 이해할 수 있습니다. 피그마 세계의 공통 부품 창고를 발견한 셈입니다. 열쇠만 알면 생각보다 질서정연합니다.
FAQ
Q1. 피그마 컴포넌트는 꼭 알아야 하나요?
IT 기획자가 직접 만들 필요는 없지만 개념은 알아두는 것이 좋습니다. 반복되는 버튼, 메뉴, 입력창이 어떤 기준으로 관리되는지 이해할 수 있습니다.
Q2. 컴포넌트와 인스턴스는 무엇이 다른가요?
컴포넌트는 원본이고, 인스턴스는 그 원본을 가져다 실제 화면에서 사용하는 복사본입니다. 인스턴스는 메인 컴포넌트와 연결되어 있어 일관성 관리에 유리합니다.
Q3. PPT 마스터 슬라이드와 완전히 같은 개념인가요?
완전히 같지는 않습니다. 다만 공통 기준을 만들어 여러 곳에 적용한다는 점에서 비슷하게 이해할 수 있습니다. PPT는 슬라이드 레이아웃 중심이고, 피그마는 UI 요소 중심입니다.
Q4. 기획자는 컴포넌트에서 무엇을 확인해야 하나요?
같은 기능의 버튼이나 메뉴가 화면마다 일관되게 쓰이는지, 공통 UI 기준이 개발자에게 전달될 수 있는지 확인하면 됩니다.
참고 자료
Figma Help Center - Guide to components in FigmaFigma Help Center - Create and insert component instances
Microsoft Support - PowerPoint의 슬라이드 마스터란 무엇인가요?
Google Search Central - Meta descriptions
다음 글 예고
다음 글에서는 피그마 인스턴스란? 반복되는 버튼과 UI 요소를 효율적으로 관리하는 법을 다룹니다.