디자이너가 보낸 피그마 링크를 열었는데, 어디를 눌러야 할지 몰라 화면만 멍하니 바라본 적 있으신가요? 쏟아지는 레이어와 복잡한 도구들 사이에서 내 의견 하나 남기기도 조심스러웠던 그 마음을 잘 알고 있습니다. 이제 당당하게 의견을 제안하고 협업의 주인공이 될 수 있도록, 왕초보를 위한 핵심 피그마 사용법을 아낌없이 전해드립니다.
협업 효율을 결정짓는 피그마 기초 조작법
디자인 도구라는 편견 때문에 시작도 전에 겁을 먹는 분들이 많지만, 피그마는 사실 웹 브라우저를 다루는 것만큼이나 직관적인 도구입니다. 협업 현장에서 가장 먼저 부딪히는 장벽은 방대한 캔버스 위에서 길을 잃는 것입니다. 피그마 사용법의 기초는 디자이너가 작업 중인 위치를 빠르게 찾고, 내가 원하는 영역으로 화면을 옮기는 법을 익히는 데서 시작합니다. 스페이스바를 누른 채 마우스를 드래그하는 ‘핸드 툴’ 조작 하나만 익혀도 화면 안에서 자유로운 이동이 가능해집니다.
캔버스 탐색과 뷰어 모드 적응
피그마에 처음 초대받으면 보통 ‘뷰어(Viewer)’ 권한으로 시작하게 됩니다. 이 모드에서는 실수로 디자인을 수정할 걱정 없이 마음껏 요소를 눌러볼 수 있습니다. 왼쪽의 레이어 패널에서 특정 이름을 더블 클릭하면 해당 요소가 화면 중앙으로 오게 되며, 컨트롤(Ctrl) 키와 마우스 휠을 조합하여 확대와 축소를 조절하는 법만 알아도 피그마 사용법 절반은 마스터한 셈입니다.
| 조작 종류 | 단축키 및 마우스 동작 | 주요 활용 목적 |
|---|---|---|
| 화면 이동 (Pan) | Space + 마우스 드래그 | 캔버스 내에서 상하좌우로 자유롭게 이동 |
| 확대 및 축소 (Zoom) | Ctrl + 마우스 휠 또는 +/- | 작은 텍스트 확인이나 전체 레이아웃 파악 |
| 선택 요소 중앙 배치 | 레이어 패널에서 요소 더블 클릭 | 복잡한 화면 속에서 특정 버튼이나 이미지 찾기 |
| 전체 화면 보기 | Shift + 1 | 현재 페이지에 배치된 모든 디자인 요소를 한눈에 확인 |
| 선택 영역 확대 | Shift + 2 | 선택한 프레임을 화면에 꽉 차게 확대하여 상세 검토 |
팀원들과 원활하게 소통하는 피그마 커뮤니케이션 기술
피그마가 강력한 협업 도구로 불리는 이유는 실시간 소통 기능 때문입니다. 피그마 사용법 중에서 가장 핵심적인 소통 수단은 ‘코멘트(Comment)’ 기능입니다. 이메일이나 메신저로 캡처 화면을 보낼 필요 없이, 디자인 요소 위에 직접 의견을 남김으로써 의사소통의 오류를 획기적으로 줄일 수 있습니다. 피그마를 처음 접하는 기획자나 마케터가 가장 먼저 익혀야 할 협업 기술입니다.
효과적인 피드백을 위한 코멘트 활용 가이드
의견을 남길 때는 단순히 ‘수정해 주세요’라고 하기보다 구체적인 위치를 지정하는 것이 좋습니다. 단축키 C를 눌러 말풍선 아이콘이 나타나면 원하는 위치를 클릭하여 내용을 입력하면 됩니다. 특정 팀원을 태그(@)하여 직접적인 알림을 보낼 수도 있으며, 해결된 이슈는 ‘Resolve’ 버튼을 눌러 깔끔하게 정리하는 습관이 중요합니다.
- 단축키 C를 눌러 코멘트 모드로 전환하고 의견을 남길 위치를 선택합니다.
- @ 기호를 입력한 뒤 팀원의 이름을 검색하여 실시간 알림을 보냅니다.
- 이모지를 적극적으로 활용하여 딱딱할 수 있는 텍스트 피드백에 활력을 불어넣습니다.
- 디자이너의 의도를 묻는 질문부터 문구 수정 제안까지 자유롭게 의견을 게시합니다.
- 논의가 끝난 코멘트는 Resolve 처리를 통해 작업 중인 화면의 혼잡도를 낮춥니다.
개발자와 기획자를 위한 피그마 실무 활용 분석
단순히 구경하는 수준을 넘어 실제 데이터를 추출하거나 기획 의도를 확인하는 단계로 넘어가면 피그마 사용법의 가치는 더욱 빛납니다. 특히 개발자라면 ‘데브 모드(Dev Mode)’를 통해 디자인 요소를 코드로 변환하거나 정확한 수치를 파악할 수 있습니다. 기획자는 텍스트 레이어를 직접 확인하여 오타를 수정하거나 글자 수를 가늠해보는 작업을 수행할 수 있습니다.
직군별 맞춤형 피그마 활용 전략
각자의 역할에 맞게 필요한 정보만 골라내는 요령이 필요합니다. 디자인 전체를 공부할 필요 없이 내 업무에 직접적으로 연결되는 기능에 집중하는 것이 시간 대비 효율을 극대화하는 피그마 사용법의 노하우입니다.
| 활용 직군 | 주요 사용 기능 및 도구 | 실무 적용 기대 효과 |
|---|---|---|
| 개발자 (Developer) | 데브 모드(Dev Mode) 및 인스펙트 | CSS 값 추출 및 이미지 자산(Asset) 즉시 다운로드 |
| 기획자 (Planner) | 프로토타입 재생 및 텍스트 검토 | 실제 앱 구동 흐름 파악 및 기획안 정합성 확인 |
| 마케터 (Marketer) | 이미지 추출 및 배너 사이즈 확인 | 디자이너 요청 없이 간단한 이미지 소스 직접 확보 |
| 프로젝트 매니저 | 버전 히스토리 및 코멘트 요약 | 전체 작업 공정 파악 및 히스토리 관리 효율화 |
| QA 담당자 | 측정 도구 및 디자인 대조 | 기획서와 실제 구현 화면 사이의 치수 오차 점검 |
수치 확인과 가이드 라인 파악법
디자인 요소 사이의 간격을 확인하고 싶다면 요소를 선택한 상태에서 알트(Alt) 키를 눌러보세요. 마우스 커서가 위치한 다른 요소와의 거리(Pixel)가 빨간색 선으로 표시됩니다. 이러한 정교한 피그마 사용법은 디자인 가이드라인을 수동으로 제작할 필요가 없게 만들어주며, 결과물의 완성도를 높이는 데 결정적인 역할을 합니다.
- 요소를 선택하고 Alt 키를 눌러 다른 요소와의 정확한 간격을 확인합니다.
- 오른쪽 인스펙트(Inspect) 패널에서 색상 코드(HEX)와 폰트 크기를 복사합니다.
- 에셋(Assets) 탭으로 이동하여 아이콘이나 이미지를 원하는 형식으로 내보냅니다.
- 프로토타입(Prototype) 실행 버튼을 눌러 화면 전환 애니메이션을 미리 봅니다.
- 레이어 이름을 확인하여 디자인 시스템 상의 컴포넌트 명칭을 정확히 파악합니다.
업무 속도를 높여주는 피그마 고급 기능과 플러그인
피그마의 기본 기능만으로도 충분히 강력하지만, 전 세계 개발자들이 만든 플러그인을 활용하면 피그마 사용법의 차원이 달라집니다. 반복적인 텍스트 입력을 대신해주거나 실제 데이터를 디자인에 바로 입혀주는 플러그인들은 협업 과정에서 발생하는 소모적인 수작업을 획기적으로 줄여줍니다. 팀 전체의 생산성을 높이기 위해 유용한 도구들을 미리 세팅해 두는 것이 좋습니다.
- Content Reel 플러그인을 사용하여 실제 이름, 날짜, 주소 등 더미 데이터를 한 번에 채웁니다.
- Iconify를 통해 필요한 아이콘을 외부 사이트 검색 없이 피그마 안에서 바로 가져옵니다.
- Unsplash 연동으로 고품질 배경 이미지를 드래그 한 번으로 슬라이드에 적용합니다.
- LottieFiles를 사용하여 복잡한 애니메이션 파일을 디자인에 직접 임베드하여 확인합니다.
- Spelll 플러그인을 통해 영어 및 다국어 텍스트의 오타를 실시간으로 교정합니다.
- Mapsicle로 실제 지도를 특정 구역에 원하는 크기와 비율로 삽입하여 기획에 활용합니다.
지식의 폭을 넓혀줄 관련 추천 참고 자료 및 레퍼런스
- 피그마 공식 홈페이지 및 브라우저 실행 서비스
- 피그마 공식 도움말 센터 및 기능별 가이드라인
- 스매싱 매거진 제공 전문 디자인 시스템 및 협업 분석
- 미디엄 글로벌 디자인 커뮤니티의 실무 피그마 활용 사례
- 카카오 브런치 국내 현업 디자이너들의 피그마 협업 후기
피그마 협업 관련 자주 묻는 질문(FAQ)
피그마 사용법을 전혀 모르는데 디자인을 망가뜨릴까 봐 무서워요.
협업을 위해 초대받을 때 ‘Can view’ 권한으로 초대받았다면 아무리 클릭해도 디자인이 수정되지 않으니 안심하셔도 됩니다. 피그마는 뷰어 권한 사용자에게 수정 권한을 엄격히 제한하고 있으므로, 마음껏 요소를 눌러보고 수치를 확인해도 됩니다. 피그마 사용법의 첫걸음은 두려움 없이 캔버스를 탐색하는 것입니다.
화면에 디자이너의 마우스 커서가 너무 많아서 정신없어요.
동시에 여러 명이 접속하면 화면에 이름표가 달린 커서들이 돌아다니게 됩니다. 이를 끄고 싶다면 우측 상단의 도구 모음에서 ‘Show multiplayer cursors’ 옵션을 해제하거나 단축키(Ctrl + Alt + )를 누르세요. 피그마 사용법 중 하나인 커서 숨기기 기능을 활용하면 오직 디자인 작업물에만 집중할 수 있는 쾌적한 환경이 조성됩니다.
특정 화면을 캡처하지 않고 동료에게 보여줄 방법이 있나요?
피그마의 가장 큰 장점은 링크 공유입니다. 특정 프레임을 선택한 상태에서 우측 상단의 ‘Share’ 버튼을 누르고 ‘Link to selected frame’ 옵션을 체크해 보세요. 상대방이 링크를 클릭하면 내가 선택한 그 화면이 바로 정중앙에 뜨게 됩니다. 피그마 사용법 중 링크 공유는 소통 시간을 단축해 주는 최고의 기능입니다.
아이콘이나 이미지를 파일로 내려받으려면 어떻게 하나요?
원하는 요소를 선택한 뒤 오른쪽 패널 하단의 ‘Export’ 섹션을 확인하세요. + 버튼을 누르면 PNG, JPG, SVG, PDF 중 원하는 형식을 선택할 수 있으며, Preview를 통해 어떤 이미지가 저장될지 미리 볼 수 있습니다. 피그마 사용법을 통해 디자이너에게 매번 이미지 파일을 요청하지 않고 직접 추출하여 업무 시간을 단축해 보세요.
이전 작업 상태로 되돌리고 싶은데 방법이 있나요?
피그마는 실시간 자동 저장을 지원하며 강력한 ‘Version History’ 기능을 제공합니다. 상단 파일 이름을 누르고 ‘Show version history’를 선택하면 시간대별 작업 기록이 나타납니다. 실수로 내용을 지웠거나 이전 기획안을 확인해야 할 때 피그마 사용법의 버전 관리 기능을 활용하면 소중한 작업 데이터를 안전하게 복구할 수 있습니다.
컴퓨터에 프로그램을 꼭 설치해야만 사용할 수 있나요?
아니요, 피그마는 클라우드 기반 도구이므로 크롬이나 웨일 같은 웹 브라우저에서도 설치형 프로그램과 동일한 기능을 모두 사용할 수 있습니다. 컴퓨터 사양이 낮거나 공용 PC를 사용해야 하는 상황에서도 피그마 사용법만 알고 있다면 로그인만으로 즉시 협업에 참여할 수 있다는 것이 가장 큰 장점 중 하나입니다.
