피그마(Figma)로 화면설계서(스토리보드) 작성하기

PPT형식의 화면설계서(스토리보드)로 여전히 실무에서 많이 활용한다.
요구사항을 기준으로 작성한 화면에 설명을 붙이려면 글의 양이 많아질 수 밖에 없어 PPT형식에 사용되는 양식은 
PPT뿐만 아니라 Figma 등에도 동일한 구성으로 사용된다.

직접 가독성 좋은 화면설계서를 만드는 것도 좋지만, 시간 상 이미 좋게 다듬어진 것을 찾아 수정 혹은 활용하는 것이 빠르다.

그 중 Figma에 있는 커뮤니티를 사용해 좋은 화면설계서(스토리보드)양식을 활용하는 법을 공유하려고 한다.

 

왜 하필 Figma인지

나의 개인적인 기준으로는 유료 PPT형식 템플릿을 찾거나, 굳이 그렇게 찾지 않아도 Figma의 커뮤니티를 사용하는 것이 빨랐다.

그리고 PPT보다 가독성있게 만든 템플릿을 제작 혹은 활용하여 Figma를 사용해 팀 내 공동 작업을 진행하거나, 디자이너 혹은 개발자와 같은 이해관계자들에게 공유할 때도 원하는 방식으로 언제든 내보낼 수 있다.

PPT로 작업하는 회사들이 여전히 많지만, Figma를 이용해 화면설계서(스토리보드)를 작성하는 경우도 늘고 있다.
Figma 내에서 PPT형식과 같은 구성을 활용하거나 아니면 와이어프레임 화면을 그리고 그 옆에 설명을 작성하는 경우 등 다양하다.

어느 경우든 가독성이 높아지긴 한다. 

제일 좋은 점은 활용할 수 있는 단축키, 컴포넌트(아이콘), 레이아웃, 고급 기능 등 굉장히 많아서 좋다.

 

기획자 피그마 활용 방법

피그마는 아래 링크를 접속해 보면 가입이 가능한데, 개인이 혼자서 작업하는 것은 무료다.
자세한 피그마의 플랜과 정책은 별도로 찾아보길 바란다.
무료기 때문에 부담없이 가입 후 사용해 보면 금방 알 수 있다.

이 글에서는 피그마 가입을 전제로 커뮤니티 활용 방법을 공유한다.

https://www.figma.com/

Figma: The Collaborative Interface Design Tool

 

1. 가입 후 아래와 같이 홈 화면으로 이동된다.

피그마 로그인 시 나오는 화면

 

2. 위의 화면이 나오면 아래의 버튼을 누른다.

커뮤니티 페이지로 이동하는 버튼

 

3. 원하는 템플릿, 컴포넌트, 효과, 프로토타이핑 등 다양한 양식을 서칭하여 활용한다.

 

"Wireframe"이라고 검색 시 아래와 같이 다양한 템플릿이 나온다.

피그마 활용 팁

나는 주로 가독성이 중요한 브레인스토밍, 플로우차트, 화면설계서를 작성할 때 많이 활용한다.

피그마를 이해관계자들이 사용하지 않더라도 pdf내보내기가 가능하므로 Figma에서 가독성이 높고 트렌드가 반영된 여러 문서 양식을 활용 및 수정해 작성하고 이를 pdf로 내보내기 한다.

PPT보다 단축키도 많고 기능이 정말 많기 때문에 시간 단축이 될 뿐만 아니라 트렌드도 반영한 문서가 된다.

피그마의 모든 기능을 하나의 글에 설명할 수 없어 활용 방법만 공유하지만,
정말 편하고 좋은 고급 기능(디자인 에셋, 라이브러리 등)도 많기 때문에 적극 추천한다.

어디까지나 Figma도 사용하는 도구일 뿐이다. 기획하는 시간(생각하고 찾아보고 고민하는 시간)을 확보할 수 있는 방법이 되므로 많이 활용되었으면 좋겠다.