요즘 실무에서 피그마를 활용하는 분들이 점점 많아지고 있습니다. 설문조사에서 UI 디자이너의 70% 이상이 피그마를 사용한다고 답했을 정도로 UI 도구 가운데 압도적인 우위를 차지하고 있습니다. 최근 우리나라에서도 피그마를 사용한 프로젝트가 폭발적으로 늘어나고 있습니다.
디자이너가 아니라도 IT 관련 프로젝트를 진행하다 보면 피그마로 된 결과물을 심심찮게 보게 됩니다. 특히 요즘에는 디자이너 뿐 아니라 마케터, 기획자, 심지어 개발자들까지 피그마를 활용하는 경우가 많습니다. 시각적인 커뮤니케이션을 위한 문서 작성에 피그마가 독보적인 우위를 점하고 있기 때문이죠. 이렇게 비디자이너들의 피그마 활용 니즈도 점점 커지고 있습니다.
이에 디자이너가 아닌 기획자, 마케터 들이 실무에서 피그마를 활용할 수 있는 방법을 간단히 소개해 보려고 합니다.
피그마란?
피그마는 웹기반 디자인 협업툴입니다. 주로 UI 디자인에 특화된 툴로 웹 및 앱 디자인 등에 강점이 있습니다. 태생이 디자인툴이기 때문에 디자인 관련된 많은 기능이 있지만 여기서는 비디자이너들의 실무를 위한 간단한 기능만 알아보려고 합니다.
디자인툴이라고 어려워 할 필요는 없습니다. 워드, 파워포인트 같은 문서 제작 툴로 접근하면 좋습니다. 일반 문서 툴이 텍스트와 도형을 보기 좋게 배치하는 도구인 것과 마찬가지입니다. 피그마는 도형 사용 빈도가 조금 높을 뿐, 역시 텍스트와 도형을 배치한다는 기본적인 기능은 동일합니다.
피그마가 좋은 점
피그마는 웹기반입니다. PC에 파일을 저장하고, 그 파일을 메일이나 메신저로 보내서 공유하는 과정이 필요없습니다. 웹기반이므로 작업하는 모든 과정이 실시간으로 적용되고, 그 링크만 공유하면 언제나 최신본을 확인할 수 있. 파일저장이나 버전 관리가 불필요하다는 큰 장점이 있습니다.
무엇보다 쉽습니다. 파워포인트 같은 문서 제작툴을 사용해 봤다면 피그마도 쉽게 빠르게 적응하고 사용할 수 있습니다. 특히 기획자나 마케터들은 기본적인 도형과 텍스트 넣는 법만 알면 1시간만에라도 충분히 사용 가능합니다.
템플릿과 플러그인이 강력합니다. 전세계 피그마 사용자 커뮤니티를 피그마 안에서 바로 접근할 수 있습니다. 이 커뮤니티에서 검색하면 수많은 템플릿과 플러그인을 바로 내 작업창에 불러와서 사용할 수 있습니다. 필요한 템플릿을 마치 레고처럼 끼워 맞추기만 해도 훌륭한 UI 기획서를 뚝딱 만들어낼 수 있습니다.
피그마 실습
그럼 피그마에서 직접 실습해 보겠습니다. 먼저 피그마를 설치하세요. 웹버전도 있지만 설치 버전이 더 안정적이고 편리합니다. 여기(www.figma.com/downloads/)에서 설치할 수 있습니다.
간단한 가입과정 후에 피그마를 실행합니다. 참고로 가입은 무료이며 피그마 파일 3개 까지는 무료로 만들 수 있습니다.
프로젝트 및 파일 만들기
좌측 상단의 My Project 를 누르면 나오는 ‘+Create new’ 버튼을 눌러서 새로운 프로젝트를 생성합니다.
새로운 프로젝트 화면에서 우상단의 ‘+Design file’ 을 누릅니다.
이제 실제로 작업할 화면이 생성됩니다. 상단에 Untitled라고 되어 있는 부분을 누르면 제목을 입력할 수 있습니다. 왼쪽은 프로젝트 이름, 오른쪽이 지금 작업하게되는 이 파일의 이름이 됩니다.
프레임
이제 프레임을 만들어 봅니다. 프레임은 말 그대로 앱이나 웹사이트 화면의 틀입니다. 모바일앱을 만든다고 가정하고 아이폰 14 크기의 프레임을 만들어 봅니다. 상단의 프레임 메뉴를 누르면 오른쪽 Design 패널에 다양한 크기의 프레임들이 나타납니다. 여기서 Phone 아래에 있는 iPhone14 (390X844)를 선택합니다.
그러면 아래와 같이 아이폰 14 크기의 프레임이 생성됩니다. 프레임의 모서리 부분을 드래그해서 크기를 조절할 수도 있습니다. 정확한 수치로 수정하려면 오른쪽 패널에서 W(넓이)와 H(높이) 값을 직접 입력할 수도 있습니다. 이 프레임 안에 기획의도에 맞게 텍스트와 도형을 적절히 배치하기만 하면 스토리보드가 만들어집니다.
텍스트
이제 텍스트를 입력해 보겠습니다. 상단의 텍스트 메뉴를 선택하고, 텍스트를 넣을 위치에 마우스를 드래그 합니다. 텍스트 영역에 커서가 깜박이면 텍스트를 입력합니다.
입력한 텍스트의 폰트, 크기, 정렬, 색상 등 다양한 속성을 오른쪽 설정 패널에서 조정할 수 있습니다.
도형
이제 도형을 넣어봅니다. 상단 도형 메뉴에서 원하는 도형 모양을 선택합니다.
맨 위의 사각형을 선택합니다. 로그인 페이지의 아이디, 비밀번호 넣는 입력창을 표현하기 위해 가로로 긴 직사각형을 그립니다. 원하는 위치에 드래그 하여 사각형을 입력합니다.
사각형을 위 예시와 같이 넣고 우측 설정 패널에서 도형색(Fill), 외곽선(Stroke) 색상 등을 설정합니다. 사각형 위에 아이디, 비밀번호 텍스트를 입력합니다.
이제 로그인 버튼을 만들어봅니다. 아이디, 비밀번호 영역 아래에 사각형을 넣습니다.
우측 패널에서 라운드 값을 10으로 입력하면 모서리가 둥근 사각형이 됩니다. 값이 클수록 더 둥근 모양이 됩니다. 도형색을 검은색으로 설정합니다. 이 도형 위에 로그인 텍스트를 입력하고 색상을 흰색으로 설정합니다. 텍스트와 검은 사각형을 함께 선택하고 가운데 정렬을 해주면 버튼이 완성됩니다.
이렇게 텍스트와 도형을 입력하는 방법을 알아보았습니다. 프레임안에 텍스트와 도형만 적절히 넣을 수 있으면 기본적인 스토리보드 제작이 충분히 가능합니다.
템플릿 활용법
앞서 언급했듯이 피그마의 큰 장점중의 하나가 템플릿입니다. 템플릿은 다른 사람이 이미 만들어둔 피그마 파일이라고 보면 됩니다. 피그마 템플릿은 검색 엔진에서도 찾을 수 있지만 피그마 커뮤니티에서 가장 쉽게 구할 수 있습니다. 상단 홈(집모양) 탭을 누른 후에 좌측 하단 ‘Explore Community’를 누릅니다(이 위치는 피그마 업데이트에 따라 바뀔 수 있습니다).
여기서 로그인 화면 템플릿을 찾기 위해 검색창에 ‘login’을 입력해 봅니다.
검색결과에서 마음에 드는 템플릿을 선택합니다. 템플릿을 확인하고 마음에 들면 우상단의 ‘Open in Figma’ 버튼을 누릅니다.
그럼 선택한 템플릿 파일이 아래처럼 피그마로 열립니다.
이렇게 열린 피그마 파일의 모든 요소를 자신의 피그마 파일에 자유롭게 복사하여 사용할 수 있습니다. 통째로 복사해서 사용해도 되고, 버튼이나 입력창, 구글 로고 같은 개별 요소들만 복사할 수도 있습니다.
위에서 받은 템플릿을 수정해 봅니다. 영어로 되어 있던 텍스트를 한글로 바꾸니 아래처럼 훌륭한 로그인 페이지가 완성되었습니다.
필수 플러그인
플러그인은 피그마를 더 쉽게 활용할 수 있도록 추가 설치하는 기능입니다.
대표적으로 활용도 높은 플러그인 3가지를 소개합니다. (템플릿과 마찬가지로 커뮤니티에서 검색한 후 설치해야 합니다)
각종 아이콘을 쉽게 찾고 사용할 수 있도록 돕는 플러그인입니다.
플러그인 메뉴에서 Iconfy를 선택하면 작은 창이 뜹니다. 검색창에 아이콘을 검색합니다. 전화기 모양 아이콘을 찾기 위해 phone을 검색합니다. 아래 여러가지 모양의 전화 아이콘이 나타납니다. 마음에 드는 아이콘을 더블클릭하면 화면에 입력됩니다. 크기, 색상 등을 조절하여 사용하면 됩니다.
다음은 무료 이미지를 제공하는 Unsplash입니다. 플러그인을 실행하고 원하는 이미지를 검색한 후에 마음에 드는 이미지를 더블클릭하면 이미지가 입력됩니다. 도형을 선택한 후에 플러그인에서 이미지를 선택하면 선택한 도형 안에 이미지가 자동으로 들어갑니다.
Remove BG는 말 그대로 이미지의 배경을 지우는 플러그인입니다. 이미지를 선택한 상태에서 플러그인을 실행하면 주요 피사체를 제외한 배경이 투명하게 바뀝니다.
공유&코멘트
이제 만들어진 피그마 파일을 공유하고 코멘트하는 방법을 알아봅니다.
우상단의 Share 버튼을 누르면 아래와 같이 공유 설정 창이 나타납니다. 여기서 초대할 사람의 이메일을 입력하고 Invite 버튼을 누르면 됩니다. 공유된 파일을 보려면 피그마에 가입한 회원이어야 합니다.
링크를 전달하여 누구나 볼 수 있도록 하려면 위 화면에서 ‘Only those invited’를 누르면 나오는 아래 창에서 ‘Anyone’을 선택하고 ‘Save’를 누릅니다.
저장후 다음 창의 우상단에 있는 Copy link를 눌러 복사된 링크를 전달하면 됩니다.
공유된 파일에 초대되거나 링크를 받은 사람은 코멘트를 남길 수 있습니다. 메뉴에서 코멘트를 선택하고 코멘트할 위치를 클릭하면 아래와 같이 글을 입력할 수 있습니다. @를 눌러서 사람을 지정하여 코멘트를 남길수도 있습니다.
지금까지 피그마의 간단한 사용법을 알아봤습니다. 이 정도의 기본만 알아도 간단한 앱 화면 기획이나 마케팅, 브랜딩을 위한 랜딩 페이지 초안 작성은 기획자나 마케터 스스로 충분히 할 수 있습니다. 이 기본 사용법을 시작으로 다양한 시도를 해보면 짧으면 일주일안에 피그마에 익숙해질 수 있습니다.
이렇게 피그마를 활용하여 비주얼 커뮤니케이션을 위한 업무 생산성을 높여보세요.
PS. 피그마 무료 템플릿 모음 바로가기 (이 글을 읽는 분들을 위해 특별히 제공합니다)
유료템플릿으로 더 편리하게 스토리보드를 만들어 보세요.
https://kmong.com/gig/498254
