디자인 알 못도 '쉽게' 전자책 만들기 - 피그마편

피그마? 

피그마는 인터페이스 디자인을 위한 협업 웹 / 앱 디자인 프로그램으로 굉장히 다양한 기능을 '무료'로 제공해주는 고마운 툴. 특히 피그마는 커뮤니티의 존재 덕분에 디자이너가 만들어준 '컴포넌트' 혹은 '에셋'등을 불러와 매우 손쉽게 웰메이드 디자인 프로덕트를 협업할 수 있는 셈.

물론 여기에는 약간의 허들이 존재하는데

1. 피그마는 해외 제품이다 보니 한국어 메뉴가 없다.

2. 클라우드 기반으로 쉽게 사용 가능하지만 '폰트'의 사용은 앱 설치가 강제된다.

3. 컴포넌트, 에셋에 대해 정확히 이해하지 못하면 정해진 프레임을 온전히 활용하기 어려움. (디자이너의 의도 파익이 필요.)

아무튼 이 3가지 조건이 유용한 툴임에도 입문 혹은 사용을 망설이게 만드는 가장 큰 원흉 중에 하나이다. 나 또한 피그마를 알게 된지는 언 1년이 넘어감에도 불구하고 많은 기능을 활용하기보다는 정말 정해진 기능, 일부 기능만 활용하고 있다.

 

피그마 활용 시작하기. 일단 가입부터

당연히 가입부터 해야 사용이 가능하다. 

https://www.figma.com/

Figma: the collaborative interface design tool.

 

피그마 홈페이지 우측 상단의 'Get started'를 눌러 시작해주자. 구글 계정으로 쉽게 가입이 가능하니 참고 하자.

 

상단의 Continue with Google로 편리하게 가입하면 바로 사용가능!

 

가장 왼쪽에 보이는 New design file 버튼을 클릭해서 시작해주면 새로운 draft 파일을 만들 수 있다.

 

이게 바로 피그마의 디자인 파일을 시작하는 것인데 여기서부터 조금씩 어려운 개념을 배울 필요가 생긴다.

디자인에 대해 잘 모르기도 하고 이런 영역을 분리하는 '프레임' 개념이 익숙하지 않기도 하기 때문.

 

왼쪽 상단의 #처럼 생긴 프레임을 클릭해보면 원하는 크기에 맞는 프레임을 만들 수 있는데 해당 프레임을 설정하고 나면 여러 가지 내용을 담을 수 있게 된다.

다만 여기서부터는 디자인의 영역이기 때문에 우리는 빠르게 '전문가'가 만든 와이어 프레임을 활용하도록 하자.

피그마 커뮤니티에서 내게 필요한 디자인 파일 찾기.

https://www.figma.com/community/

Figma

 

피그마 커뮤니티는 고품질 콘텐츠가 정말 많다. 이 중에서 내게 필요한 콘텐츠를 빠르게 찾는 법은 검색하거나

메인에 위치한 각각의 버튼을 클릭해서 일일이 찾는 방법도 있다.

혹은 구글 검색에서 필요한 내용을 피그마 키워드와 함께 검색하는 것인데 예를 들어서 프로필 샘플이 필요하다고 하면,

이런 식으로 검색 후 나오는 디자인 에셋을 바로 'Copy' 해서 활용할 수도 있다는 것.

대부분 피그마는 디자이너를 위한 툴로 여겨지고 있기도 하고, 아무래도 디자이너에게 편리한 것은 사실이지만

PPT 대용, 혹은 고품질 제안서 등을 만들 때에도 화질 저하 없이 활용할 수 있다는 점은 굉장히 큰 메리트이다.

간단하게 제안서 양식을 무료로 풀고 있는 커뮤니티들부터, 해당 프레임을 정말 정교하게 디자인해놓은 파일까지 피그마에서는 모든 게 가능한 지경.

 

본격적으로 피그마를 다루는 콘텐츠를 따라오기 전에 자신이 필요한 에셋이나 파일 등을 검색 후 이것저것 먼저 눌러보다 보면 아무래도 좀 더 피그마를 익혀봐야겠다는 생각이 빠르게 들지 모른다. 피그마에서 이미지 넣는 법, 디자인된 컴포넌트를 활용하는 방법은 다음 콘텐츠에서 계속된다~!