일반인을 위한 피그마 사용법 (기초편)
피그마. 이미 IT 업계에선 유명한 툴입니다. 초반에 디자이너를 위해 만들어진 툴이지만 지금은 기획자, 개발자 모두 사용하고 있습니다. 2023년에 28조로 어도비에 인수되는 사건(?)이 있기도 했었죠. 이 글에서는 디자이너가 아닌 일반인을 위한 피그마 사용법에 대해 소개합니다.
피그마 무료인가요?
사실 회사에서 팀 단위로 작업을 하려면 유료 플랜을 구독해야 합니다. 팀 라이브러리 기능, 작업자 권한 관리, 브랜치 기능 등 여러가지 편리한 기능들이 존재하기 때문입니다. 하지만 IT직군이 아닌 분들이 사용하거나 개인적인 용도로 사용할때 유료 플랜을 구독할 필요가 없습니다. 기본적으로 피그마는 ‘무료’로 사용할 수 있도록 제공되기 때문이죠.
피그마 공식 웹사이트 가격페이지의 해당 부분을 살펴보겠습니다. 이 말은 팀작업용으로 피그마 파일이 3개까지만 생성할 수 있다는 말입니다. 아마 피그마를 사용해보지 않으신 분들은 잘 이해가 되지 않으실겁니다.
피그마는 기본적으로 클라우드 저장 방식으로 운영 됩니다. 이때 팀용과 개인용을 구분짓게 되는데, 3개 제한은 팀용을 말하는 것이므로 개인적으로 사용할때는 ‘무제한’ 사용이 가능하다고 보시면 됩니다.
피그마 접속하기
본격적으로 피그마 사용법을 소개하기 전에 Figma 공식 웹사이트에 방문하여 회원가입을 하고 로그인 합니다.
‘Drafts’를 선택하고 우측 상단의 ‘Design file’을 클릭하여 새 피그마 파일을 생성합니다. 이제 Drafts를 선택하고 생성하는 파일은 모두 여기에 쌓이게되며, 무제한 생성이 가능합니다.
다만 Drafts에 있는 파일은 무료 버전을 사용할 경우 클라우드에 영구적으로 보관이 되지 않습니다. 한달 주기로 중요한 파일은 데스크톱에 파일로 저장하세요. 데스크톱에 파일을 저장하는 방법은 아래에서 설명드리겠습니다.
일단 피그마는 디자이너가 아닌 경우에도 사용할 수 있는 곳이 매무 많습니다. 매번 웹사이트를 접속하여 로그인 하는것이 불편하므로 앱을 다운로드 받아 설치하는것을 권장합니다.
피그마, 어디에 어떻게 사용하나요?
물론 피그마의 본질은 IT 웹 기반의 협업 툴 입니다. 하지만 앞서 말씀드린대로 이 글은 비IT직군을 대상으로 작성되었습니다. 그렇다면 기획자, 개발자, 디자이너가 아닌 사람들은 피그마를 어떻게 사용할까요?
1. 프리젠테이션 및 문서 제작
피그마를 사용하여 독창적이고 시각적으로 매력적인 프리젠테이션을 제작할 수 있습니다. 또는 문서를 제작할 수 있습니다. 템플릿을 사용해도 되고 처음부터 디자인을 만들 수 있습니다.
2. 아이디어 시각화
피그마의 캔버스를 활용하여 브레인스토밍을 진행하거나, 아이디어 전략을 시각적으로 정리하고 공유할 수 있습니다.
3. 협업 및 커뮤니케이션
피그마의 협업 기능을 이용하여 팀원들 또는 지인들과 실시간으로 아이디어를 공유하고 피드백을 주고받을 수 있습니다. 피그마의 코멘트 기능을 사용하면 자유롭게 대화할 수 있습니다.
여기서 팁! 코멘트처럼 지속적인 대화외 가벼운 휘발성 대화도 가능합니다. 예를 들어 피그마에 접속했는데 우리 팀원이 접속해 있다면 ‘안녕하세요~ㅎㅎ’라고 인사를 할 수도 있습니다. 또는 아이디어 회의 시 기록이 필요하지 않은 휘발성 대화들이 필요할 때가 있습니다. 이때는 키보드의 슬래시(/)를 쳐보세요. 말풍선이 생기고 여기서 타이핑을 하면 이 텍스트는 시간이 지나면 자연스럽게 사라집니다.
4. 마케팅 자료 제작
소셜 미디어 그래픽, 뉴스레터 레이아웃, 광고 디자인 등 다양한 마케팅 자료를 쉽게 제작할 수 있습니다. 이러한 자료 제작시 대부분 캔바 또는 미리캔버스를 이용합니다. 하지만 캔바와 미리캔버스도 대부분의 소스나 템플릿을 유료로 제공하고 있습니다. 무료로 이용할 경우 매우 많은 사람들이 이 템플릿이나 소스를 이용하므로 차별화된 이미지를 제작하는데는 한계가 있습니다.
피그마의 기본 사용법을 익혀보세요. 캔바와 미리캔버스만큼 쉽습니다. 또한 피그마 커뮤니티에서 방대한 무료 소스를 사용하실 수 있습니다. 필자 역시 피그마로 블로그 썸네일을 제작하고 있습니다.
5. 조직도 및 프로세스 다이어그램
회사 조직도나 워크플로우, 다이어그램 등을 만들고 관리할 수 있습니다.
6. 사내 교육 자료 개발
교육 자료, 튜토리얼, 가이드라인 등을 시각적 관점에서 효과적으로 제작할 수 있습니다.
피그마는 사용이 쉽고 직관적인 인터페이스를 가지고 있어, 디자인 경험이 없는 사람도 쉽게 사용할 수 있습니다. 또한, 다양한 템플릿과 자원을 이용해 빠르게 원하는 결과물을 만들 수 있는 장점이 있습니다.
피그마 사용법: 기본편
1번은 피그마의 기본툴을 선택할 수 있는 영역입니다. 좌측부터 순서대로 선택, 프레임 생성, 도형, 펜툴, 텍스트, 리소스, 핸드, 코멘트 버튼이 나열되어 있습니다.
2번 영역을 클릭하면 현재 파일의 이름을 지정할 수 있습니다.
3번은 레이어와 에셋 패널입니다. 이후 작업을 하게 되면 모든 레이어가 이곳에 쌓입니다.
4번은 디자인 패널인데요. 이 패널에서 선택한 디자인의 세부설정을 할 수 있습니다.
설명할것이 많지만 이번 글에서는 여기까지 소개하고 다음 글에서 더 자세하게 알아보도록 하겠습니다.
상단의 ‘#’ 모양 아이콘을 클릭하면 프레임을 생성할 수 있습니다. 프레임을 선택하면 우측 패널에 다양한 사이즈의 프레임이 나옵니다. 인스타그램 포스트를 선택해 보았습니다. 캔바, 미리캔버스와 다를게 없죠? 어렵지 않습니다. 이제 이 프레임안에 원하는것을 디자인하면 됩니다. 디자인이라고 해서 거창한데 사실 이것도 매우 쉽습니다.
좌측 상단에 집모양의 아이콘을 클릭하여 우리가 처음 접속했던 피그마의 ‘홈’으로 이동합니다. 좌측 하단에 보시면 ‘Explore Community’ 작은 버튼을 클릭하면 커뮤니티에 접속이 됩니다.
아직 무엇을 디자인할지 정해지지 않았기 때문에 매우 원시적이고 비창의적인 방법으로 검색을 해보겠습니다. 그냥 ‘instagram post’라고 검색을 합니다. 수많은 인스타그램 포스트 템플릿이 나옵니다.
저는 이 템플릿이 마음에 들어서 선택해봤습니다. 템플릿을 클릭하여 ‘Open in Figma’를 클릭하면 템플릿 파일이 열립니다. 여기서 가져올 대상을 선택합니다. 좌측은 레이어 패널로 내가 선택한 레이어를 보여줍니다. 여기서 그룹이나 프레임은 여러개의 레이어를 포함할 수 있습니다.
쉽게 말하면 파워포인트에서 여러 요소들을 그룹으로 묶는 행위를 하죠? 피그마에서 그룹과 프레임이 그런 역할을 합니다. 여기서 각각의 요소를 가져올 수도 있고, 저처럼 그룹 통째로 가져올수도 있습니다. 가져오는 방법은 간단합니다. 우리에게 매우 익숙한 ctrl+C, 그리고 다시 내 파일로 와서 ctrl+V. 끝입니다.
이제 내 파일에서 원하는 요소를 수정, 삭제, 추가합니다. 요소를 선택하는 방법은 처음 선택하면 그룹이 선택되고, 원하는 영역을 더블클릭 하면 그룹에 포함된 이미지나 텍스트를 선택할 수 있습니다. 텍스트 더블클릭 하여 글자를 수정하면 됩니다.
편집을 끝냈다면 전체 프레임을 선택합니다. 프레임 선택 후 좌측 패널 하단에 ‘Expot’라는 항목이 생깁니다. 여기서 버튼을 누르면 이미지를 저장 할 수 있습니다.
1x라고 표시된 부분은 이미지의 배수를 설정하는 곳입니다. 1x는 현재 이미지 사이즈의 1:1 비율로 저장되며, 2x를 선택 후 저장하면 현재 사이즈의 2배 큰 이미지로 저장됩니다.
파일 확장자도 선택할 수 있습니다. PNG, JPG, SVG, PDF 포멧을 지원하여 손쉽게 문서를 만들 수도 있습니다.
이 외에 너무나 방대한 기능들이 있습니다. 한 포스팅에서 다 다룰수 없기 때문에 이번 글에서는 매우 기초적인 이미지를 제작하여 저장하는 방법만 소개합니다.
데스크톱에 파일 백업하기
피그마를 사용하다보면 초기에 접속한 Drafts에 계속하여 파일이 쌓여갑니다. 무료 버전은 클라우드의 영구적 지원을 보장받지 못하므로 중요한 파일은 틈틈히 백업을 합니다.
상단 메뉴의 파일에서 save as .fig를 클릭하여 파일을 데스크톱에 저장합니다. 파일은 .fig 확장자로 저장되며 피그마에서만 열 수 있습니다.
불러오는 방법은 홈 화면에서 우측 상단의 ‘Import’를 클릭하면 아래와 같은 대화창이 뜨는데, 저장한 fig파일을 해당 영역으로 드래그하면 됩니다.
결론
오늘은 피그마를 처음 접하는 분들을 대상으로 한 피그마 사용법에 대해 알아보았습니다. 사실 피그마는 어떤 용도로 사용하느냐에 따라 그리고 어떻게 활용하느냐에 따라 결과물에서 많은 차이를 발생시킬 수 있습니다. 또한 자유 자재로 플러그인을 사용하게 되면 시간을 많이 절약하며 최상의 결과물을 얻을 수 있습니다. 이번 포스팅으로 피그마와 조금 친해지셨나요? 피그마 사용법 대해 궁금한 점이 있다면 언제든 댓글로 문의주세요!
