IT 기획자가 피그마에서 꼭 알아야 할 기본 기능 7가지
피그마를 처음 여는 IT 기획자는 화면보다 먼저 당황합니다. 메뉴는 많고, 캔버스는 넓고, 디자이너는 익숙하게 움직이는데 기획자는 어디를 눌러야 할지 잠시 멈춥니다.
하지만 IT 기획자가 피그마의 모든 기능을 배울 필요는 없습니다. 디자인을 직접 완성하는 것보다 중요한 것은 화면을 읽고, 흐름을 확인하고, 피드백을 남기고, 개발자에게 기준을 전달하는 것입니다.
이번 글에서는 피그마를 처음 쓰는 IT 기획자가 실무에서 꼭 알아야 할 기본 기능 7가지를 정리했습니다. 기능 설명서가 아니라, 회의실에서 바로 써먹는 작은 도구함처럼 보시면 됩니다.
1. 프레임: 서비스 화면 하나를 읽는 기준
피그마에서 프레임은 하나의 화면 단위입니다. PPT의 슬라이드처럼 이해할 수 있지만, 실제로는 서비스의 한 화면에 더 가깝습니다.
예를 들어 로그인 화면, 회원가입 화면, 목록 화면, 상세 화면이 각각 하나의 프레임이 될 수 있습니다. IT 기획자는 프레임을 보며 “이 화면이 어떤 기능의 어느 단계인가?”를 먼저 확인해야 합니다.
- 프레임 이름이 기능 기준으로 명확한가?
- 기본 화면과 오류 화면이 구분되어 있는가?
- PC, 모바일 화면이 따로 필요한가?
- 개발 기준으로 볼 최종 프레임이 표시되어 있는가?
2. 레이어: 화면 요소가 쌓인 구조
레이어는 화면을 구성하는 각각의 요소입니다. 버튼, 텍스트, 아이콘, 이미지, 입력창이 모두 레이어가 될 수 있습니다.
PPT에서 도형과 텍스트를 앞으로 보내고 뒤로 보내는 것처럼, 피그마에서도 여러 요소가 순서대로 쌓여 화면을 만듭니다.
기획자가 모든 레이어를 자세히 볼 필요는 없습니다. 다만 버튼, 입력값, 오류 문구, 안내 문구가 화면에 제대로 있는지는 확인해야 합니다.
3. 컴포넌트: 반복 UI를 관리하는 원본
컴포넌트는 반복해서 사용하는 UI 요소의 원본입니다. 저장 버튼, 검색창, 상단 메뉴, 카드 UI처럼 여러 화면에 반복되는 요소를 하나의 기준으로 관리할 때 사용합니다.
PPT의 마스터 슬라이드가 공통 레이아웃을 잡아준다면, 피그마 컴포넌트는 공통 UI 부품을 잡아준다고 이해하면 쉽습니다.
- 같은 기능의 버튼이 같은 기준으로 사용되는가?
- 공통 메뉴가 화면마다 다르게 보이지 않는가?
- 삭제, 저장, 취소 버튼의 역할이 일관적인가?
4. 프로토타입: 버튼 클릭 후 흐름 확인
프로토타입은 정적인 화면을 클릭 가능한 흐름으로 연결하는 기능입니다. 버튼을 누르면 다음 화면으로 이동하고, 취소 버튼을 누르면 이전 화면으로 돌아가는 흐름을 확인할 수 있습니다.
IT 기획자는 프로토타입을 볼 때 정상 흐름만 보면 안 됩니다. 실패했을 때, 취소했을 때, 권한이 없을 때의 흐름까지 확인해야 합니다.
| 확인 항목 | 기획자 질문 |
|---|---|
| 버튼 클릭 | 클릭 후 이동 화면이 맞는가? |
| 취소 | 입력 중인 내용이 있을 때 확인 팝업이 필요한가? |
| 오류 | 실패 후 사용자가 다시 시도할 수 있는가? |
| 완료 | 저장 후 목록으로 이동하는가, 상세에 남는가? |
5. 댓글: 화면 위에 남기는 피드백
피그마 댓글은 화면 위에 남기는 피드백입니다. 메신저에 “오른쪽 버튼 수정”이라고 쓰는 대신, 실제 버튼 위에 댓글을 남길 수 있습니다.
기획자에게 댓글은 작은 회의록입니다. 수정 요청, 질문, 결정 사항, 개발 확인 항목을 화면 위치에 붙여둘 수 있기 때문입니다.
[수정] 신규 등록 흐름이므로 버튼명을 “저장”보다 “등록”으로 변경 검토 부탁드립니다.
6. 공유 링크: 화면 전달의 시작점
피그마 공유 링크는 단순한 URL이 아닙니다. 개발자와 디자이너가 같은 화면을 볼 수 있게 해주는 전달 도구입니다.
기획자는 링크를 보낼 때 파일 링크인지, 프로토타입 링크인지, 특정 프레임 링크인지 구분해야 합니다.
- 전체 화면 구조 공유: 파일 링크
- 사용자 흐름 확인: 프로토타입 링크
- 개발 기준 화면 전달: 특정 프레임 링크
또한 링크를 보내기 전에 보기 권한, 댓글 권한, 편집 권한을 확인해야 합니다. 링크만 보내고 상대가 열지 못하면 회의 시작 전부터 작은 늪이 생깁니다.
7. Dev Mode: 개발 전달 기준 확인
Dev Mode는 개발자가 디자인을 구현할 때 필요한 정보를 확인하는 데 도움을 주는 화면입니다. 기획자가 개발자처럼 깊게 사용할 필요는 없지만, 개발자가 어떤 기준으로 화면을 보는지 이해하면 커뮤니케이션이 쉬워집니다.
기획자는 Dev Mode를 볼 때 아래 항목을 확인하면 좋습니다.
- 개발 기준 프레임이 명확한가?
- Ready for dev 상태로 정리된 화면이 있는가?
- 컴포넌트, 인스턴스, 프레임 기준이 정리되어 있는가?
- 개발자가 확인해야 할 댓글이나 변경 사항이 남아 있는가?
기획자용 피그마 기본 기능 체크리스트
| 기능 | 기획자 관점 핵심 | 회의 전 확인 질문 |
|---|---|---|
| 프레임 | 화면 단위 | 이 화면이 최종 기준인가? |
| 레이어 | 화면 요소 | 버튼, 문구, 입력값이 빠지지 않았는가? |
| 컴포넌트 | 반복 UI 원본 | 같은 기능이 같은 기준으로 쓰이는가? |
| 프로토타입 | 화면 이동 흐름 | 클릭 후 이동 화면이 맞는가? |
| 댓글 | 화면 위 피드백 | 질문과 수정 요청이 화면 위치에 남아 있는가? |
| 공유 링크 | 화면 전달 | 상대방이 열 수 있는 권한인가? |
| Dev Mode | 개발 전달 기준 | 개발자가 기준 화면을 확인할 수 있는가? |
결론
IT 기획자가 피그마에서 꼭 알아야 할 기본 기능은 많지 않습니다. 프레임, 레이어, 컴포넌트, 프로토타입, 댓글, 공유 링크, Dev Mode 이 7가지만 이해해도 실무 협업이 훨씬 쉬워집니다.
중요한 것은 피그마를 디자이너처럼 다루는 것이 아닙니다. 기획자는 피그마에서 화면을 읽고, 흐름을 확인하고, 누락된 정책을 찾고, 협업자에게 정확히 전달할 수 있어야 합니다.
피그마는 처음 보면 넓은 작업판처럼 보이지만, 필요한 기능만 알고 보면 꽤 친절한 실무 지도입니다. 지도 전체를 외울 필요는 없습니다. 먼저 길 잃지 않을 7개의 표지판만 익히면 됩니다.
FAQ
Q1. IT 기획자가 피그마를 어디까지 배워야 하나요?
처음에는 화면을 읽고, 프로토타입을 실행하고, 댓글을 남기고, 공유 링크를 전달할 수 있는 정도면 충분합니다. 이후 개발 전달을 위해 Dev Mode 개념을 이해하면 좋습니다.
Q2. 피그마에서 가장 먼저 익힐 기능은 무엇인가요?
프레임과 프로토타입을 먼저 익히는 것이 좋습니다. 프레임은 화면 단위이고, 프로토타입은 사용자 흐름을 확인하는 기능이기 때문입니다.
Q3. 기획자가 컴포넌트까지 알아야 하나요?
직접 만들 필요는 없지만 개념은 알아두는 것이 좋습니다. 반복되는 버튼, 메뉴, 입력창이 같은 기준으로 관리되는지 확인할 수 있습니다.
Q4. Dev Mode는 개발자만 쓰는 기능 아닌가요?
주로 개발자가 활용하지만, 기획자도 개발 기준 프레임과 전달 상태를 이해하면 개발자와의 회의가 쉬워집니다.
FAQ
Figma Help Center - Share files and prototypes
Figma Help Center - Guide to prototyping in Figma
Figma Help Center - Comment on prototypes
Figma Help Center - Guide to Dev Mode
Google Search Central - Meta descriptions