들어가며
저희 파트는 협업 시 기획, 디자인 파트와 다이렉트로 연결된 부분들이 많기에 다양한 툴을 접하게 되는데요. 그 중 디자인뿐만 아니라 모션가이드까지 같이 전달 가능한 피그마에 대해 접하게 되면서 말로 설명하는 것보다 시각화시켜줌으로써 보다 높은 이해도와 설명이 가능할 것 같아 협업 툴로 간단하게나마 알아두면 커뮤니케이션 시 좋을 듯하였고 UX 적인 접근 또한 쉬워질 것 같다는 생각에 피그마에 대해 알아보고자 합니다.
첫 장은 기본적인 사항들, 설치 방법과 화면 구조, 간략한 사용법(프레임 생성 및 화면 그리기) 등을 소개하겠습니다.
피그마 맛보기는 총 2편의 시리즈로 구성되어 있습니다.
- 피그마 맛보기 #1 (현재글)
피그마 설치 방법 및 화면 구조
설치를 해볼까요
다행히 피그마는 무료이기에 부담 없이 진행하시면 됩니다. (부분 유료화)
피그마 정식 사이트에 접속하신 후 Sign up을 누르면 구글 로그인 또는 Create account를 하셔서 로그인하시면 됩니다. (계정이 있으셔도 뜨는 건 유사합니다.)
피그마는 웹 브라우저 기반의 디자인 툴이기 때문에 따로 설치가 필요 없이 로그인만 하면 바로 사용할 수 있어 편리합니다. 꼭 PC가 아니더라도 사용할 수 있겠죠? (아이패드로 해보고 있는데 잘되네요. ㅎ)
‘나는 브라우저보다는 설치해서 쓰고 싶어!’라고 하신다면
로그인 전 - Products 메뉴에서 downloads
로그인 후 - Header 영역의 가장 우측 드롭다운 메뉴 중 Get desktop app
에서 다운 받으시면 됩니다.
다만 인터넷이 안 되면 동기화 관련 기능 사용 불가 / 로컬 기능만 사용 가능하니 참고하셔서 작업하시면 좋을 것 같네요.
기본적인 화면 구조
로그인했다면 이제 피그마의 화면 구조를 간단하게 볼까요?
로그인 후 아래와 같은 화면이 보이실 거예요.

최상단에는 기본적인 내 정보와 검색 및 알림 영역입니다.
내 정보 : 본인 계정 표기
검색 : 검색 시 viewed 영역에 검색 단어와 관련된 파일이 파일명 순으로 결과 출력
알림 / 세부 선택 사항 : 알림 내용 리스트 / 본인 프로필, 커뮤니티를 통해 설치한 플러그인, 계정에 대한 설정 창, 피그마 앱 다운로드, 계정 추가, 로그인 등 사용자가 선택하여 확인할 수 있도록 드롭다운으로 메뉴 표시
좌측 영역은 파일을 제어하는 영역이라고 보시면 좋을 것 같습니다.
Recent : 말 그대로 최근 본 파일 리스트
Drafts : 아이디어 성 / 아직 정리되지 않은 / 어디에도 속하지 않은 파일. 정리되면 관련 프로젝트에 이동시킬 수 있음
Community : Figma에서 사용할 수 있는 플러그인 및 디자인 오픈 소스를 다운받을 수 있는 곳으로 새 창 이동됨
Team & Project : Team을 생성하면 기본적으로 Project가 1개 생성됨.
Team > Project > File의 트리구조로 파일을 생성한다고 생각하시면 될 것 같습니다
구성 방법이 더 보고 싶으시다면 참고 문서의 링크를 확인해보세요
- 참고 문서 : Figma에서 파일과 프로젝트를 구성하는 방법 https://graphcms.com/blog/how-we-organize-our-files-and-projects-in-figma
우측 영역은 타이틀 옆 아이콘을 클릭하여 파일을 Import 해오거나 새로운 타입의 파일을 생성 또는 템플릿을 선택하여 사용할 수 있습니다.
피그마 사용법
대충 화면 구조가 파악되었다면 본격적으로 피그마가 어떤 기능들이 있는지 알아봐야 하겠죠?
이번 편에서는 화면을 그릴 수 있는 상단 툴 부분을 설명해 드리도록 하겠습니다. 아마 해당 영역만 아셔도 화면을 그리는 것에는 문제가 없으실 거예요.
피그마는 우측 하단 구석에 ? 를 눌러보시면 친절하게도 Help Center에서 Getting Started 문서를 지원하고, YouTube videos를 눌러보시면 튜토리얼 영상들도 제공하고 있어 보다 자세한 내용을 보고 싶으시다면 말씀드린 곳을 확인해보시는 것도 좋을 것 같습니다.
파일 생성 및 상단 툴 설명
우측 New File 영역에서 Design File을 선택하시면 신규 Untitled(무제) 파일이 생성됩니다. 파일 내부로 진입하면 상단 영역이 툴바로 변경되며 좌측 패널에 레이어가 우측 패널에 세부 속성 제어 관련 창이 뜨게 됩니다.

상단 툴(좌측)
상단 툴(중앙)
선택한 오브젝트에 따라 다르게 나타나며 주로 나타나는 메뉴들을 표기해두었습니다.
상단 툴(우측)
상단 우측 영역에는 참여한 인원, 공유 설정, 프레젠테이션 버튼, 화면(뷰) 확대 % 조절 등이 있습니다.
참여 인원 : 참여 인원의 프로필을 선택하면 해당 인원이 작업 중인 영역에 포커스가 이동합니다.
공유 설정 : 협업 구성원을 초대하거나 선택 프레임 또는 해당 파일을 전체 공개할지 아니면 초대한 인원들만 볼 수 있게 할지 설정도 가능합니다. Copy link 를 선택하여 해당 파일을 외부로 공유하거나 Get embebd code를 선택하여 블로그나 웹사이트에 미리보기를 할 수 있도록 소스코드를 제공할 수도 있습니다.
프레젠테이션 : 선택한 화면을 미리보기 할 수 있습니다.
뷰 옵션: 화면 확대축소 비율을 조절할 수 있습니다.
마치며
저도 피그마를 다뤄본 적이 없어 공부하면서 보다 보니 아직 많은 부분이 익숙지 않아 간략하게 설명해 드렸습니다. 포토샵과 비슷한 기능들이 많아서 어느 정도는 사용할 수 있으실 것 같지만 그래도 리마인드 겸 설명한 부분들이 많습니다. 이어지는 글에서 저희가 알면 좋을 법한 프로토타이핑 기능 및 개발 관련 기능에 대해 말씀드려보려고 합니다. 아마 길어진다면 나누어 설명해 드릴 수도 있을 것 같으니 그 부분은 양해 부탁드리겠습니다. ㅎ
읽어주셔서 감사합니다.😊
그럼 안녕히…👋 -To be continued-