by
Jun 05. 2023
피그마로 서비스 기획 스토리보드 만들기
서비스 기획자로 살아가기
인트로
많은 기획자, 프로덕트 매니저들은 피그마로 스토리보드를 만들 때가 많다.
스토리보드를 작성할 때 전통적으로 사용했던 파워포인트와 피그마를 놓고 봤을 때 피그마의 가장 큰 다른 점은 무지막지하게 큰 대지(Board)에 와이어프레임, 디자인된 화면 등을 펼쳐놓는다는 것. 툴의 본질이 문서 작성이 아니라 디자이너와 개발자 간의 실시간 소통 및 협업을 위한 것인 만큼, 설계한 화면에 명세서를 함께 작성하는 것이 마냥 편하지만은 않은 툴이다.
이번 글에서는 내가 피그마를 통해 스토리보드를 만드는 방법과 스토리보드 작성 시 피그마의 간단한 팁, 그리고 복사해서 사용해 볼 수 있는 템플릿을 간단하게 공유하려고 한다.
피그마로 어떻게 서비스기획 스토리보드를 쓸 수 있을까 고민이 있는 분들께 좋은 예시가 되었으면 하는 마음.
어떤 방법이 있을까?
본인의 경우, 다른 PM분들께 '피그마 툴로 스토리보드를 어떻게 작성하나요?'라는 질문을 받으면 보통 두 가지 방법을 추천한다.
#1 피그마를 잘 못 다루시나요? 그러면 플러그인을 추천드려요.
피그마에서는 다양한 플러그인들을 제공한다. 기획자들 또한 피그마를 많이 사용하게 되면서, 피그마에 기획자를 위한 다양한 플러그인들이 나오게 되었는데 대표적으로 스토리보드를 만들 때 활용할 수 있는 플러그인은 'Annotate it!'이 있다.
링크: https://www.figma.com/community/plugin/859894273811051899/Annotate-it!'Annotate it!' 플러그인의 장점은 사용 방법이 아주 간단하다.
1. 마우스 우클릭 후 Plugin의 'Annotate it!'를 선택한 후,
2. 와이어프레임 혹은 디자인이 완료된 피그마의 Frame 혹은 오브젝트를 클릭하고
3. 플러그인 우측 상단의 [Add new] 버튼을 클릭하여 명세서를 작성하면 된다.
'Annotate it!' 플러그인을 사용해 Description 작성하기
단점은 자유도가 높지 않다. 막상 사용해 보면 실제로 넘버를 원하는 대로 휙휙 옮긴다든지, 명세서의 설명 위치를 바꾼다든지 등 동작의 흐름이 생각처럼 매끈하게 흘러가지 않는데, 이 때문에 나는 플러그인을 사용하지 않고 직접 만들어 쓴다.
#2 피그마를 사용할 줄 아세요? 그러면 직접 만드는 것을 추천드려요.
나는 앞서 말한 이유로 인해 'Annotate it!' 플러그인을 사용하지 않는다. 무엇보다 해당 플러그인을 사용하면 명세서가 작겅된 Frame이 하나 만들어지는데 원하는대로 변경하기 힘들어서 불편하다. 내가 명세서를 작성하는 Frame을 넓게 쓰거나, 혹은 일반 기능과 버튼에 대한 명세를 분리해서 작성하는 것을 선호하기 때문이기도 하다.
*기능과 버튼 명세 영역을 구분해서 사용하는 이유는 협업했던 많은 개발자들과 여러 타입을 놓고 얘기했을 때, 이 버전이 가장 스토리보드를 이해하기 쉽다는 피드백을 많이 받았기 때문이다. 틀에 얽매일 필요는 없다. 여러 타입을 개발자들과 펼쳐놓고 가장 그들이 원하는 방식으로 만들어주도록 하자.
다시 돌아가서, 'Annotate it!' 등 플러그인이 마음에 안 들면 남은 방법은 두 가지.
1. 순응한다.
2. 직접 만든다.
나는 Auto Layout을 사용해서 직접 만드는 방법을 선호한다. Auto Layout을 활용하면 1) Width는 고정해 두되, Height을 자유롭게 하는 등 자율성이 높고, 2) Auto Layout 내의 Frame 위치를 지정해 둔 규칙에 맞게 빠르게 변경할 수 있기 때문이다. 즉 내 입맛대로 커스터마이징이 편하다.
만드는 방법은 아래와 같다.
1. Description을 작성할 영역의 공간을 미리 고정해 두고, 적절한 폰트 사이즈 등을 미리 구상한다. 나는 Pretendard 폰트를 선호한다.
2. 텍스트를 감싼 Auto Layout을 하나 만든다. 이때 Width는 고정해 두고, 텍스트 박스를 Fill 처리해 두면 좋다. 그러면 텍스트가 Width를 초과하면 알아서 밑으로 떨어지게 될 것이다. (Fill, Hug, Fixed는 이 브런치를 참고하면 이해가 빠를 것이다. ☞ https://joonyou.tistory.com/72)
3. 텍스트 Auto Layout들을 모아둔 후, 수직 정렬로 Auto Layout을 하나 더 만든다. 끝.
예시 영상
위 영상과 같이 Description box를 한 번 만들어 놓으면 이후에는 편하다. 계속 복사해서 사용하면 되기 때문. 아래 영상은 Description을 작성하는 예시 영상이다. (실제로 사용할 때는 Description이 너무 길어질 때, box를 옆으로 분리한다든지 유연하게 사용하고 있다.)
Description을 작성해 봅시다.
직접 Description box를 만드는 방법은 화면에 영상처럼 직접 Description의 위치를 알려주는 Number를 붙여 넣어주거나, Description을 작성할 Auto Layout을 일일이 복사 붙여넣기를 통해 만들어줘야 한다는 수고가 존재한다.
하지만 첫 번째 단점은 피그마의 정렬 기능(Alt+A, D, S, W, V, H)을 이용해서 빠르게 해결할 수 있고, 화면에 변경이 있을 때 변경이 용이하다. 그리고 이외의 단점은 커스터마이징이 가능하다는 장점이 모두 덮어버리기 때문에 나는 큰 불편 없이 쓰고 있다.
예를 들어 스토리보드에 마킹해 둔 Number의 위치가 변경되거나 할 때 빠르게 Description의 위치 또한 수정 가능하다.
Number의 위치가 바뀌었을 때
꿀 단축키
이 영상에서 사용한 단축키를 공유하면 아래와 같다.
※ 단축키는 윈도우 기준으로 작성했다. 맥북 사용자라면 Alt는 Option으로, Ctrl은 Cmd로 대치하면 된다.
#1 정렬: Alt+A, W, S, D, V, H
피그마의 재밌는 UX 중 하나. 정렬을 왼손 방향키와 동일하게 해 두었다. 좌상하우를 AWSD로 해놨다는 말. 어릴 때 크레이지아케이드를 2인 플레이로 해본 사람들이라면 바로 이해가 될 것이다. 보통 엑셀이나 구글 시트, 한글 등에서는 좌측 정렬을 L, 우측 정렬을 R과 같이 하는데 피그마는 그렇지 않다. 단축키까지도 사용자 친화적.. 이것이 22조 인수 기업의 UX 디테일이 아닐까.
두 개의 오브젝트를 클릭하고 Alt+A, W, S, D를 클릭하면 이 오브젝트들이 정렬되는데, 만약 오브젝트가 겹쳐있다면 큰 오브젝트를 기준으로 정렬되고, 둘이 떨어져 있다면 공평하게 반반씩 이동하여 정렬된다.
수직정렬과 수평정렬은 약어를 따른다. 수직정렬은 Vertical의 V, 수평정렬은 Horizontal의 H. 결국 정렬 단축키는 Alt+A, W, S, D, V, H로 귀결된다.
오브젝트 정렬하기
#2 인터페이스 숨김: Ctrl+\
피그마의 페이지 내에 오브젝트들이 많으면 좌측 인터페이스에서 이 내용을 보여주기 위해서 연산처리를 많이 하게 된다. 이 때문에 오브젝트가 많은 상황일 때, 인터페이스가 보이면 화면의 전환 속도가 느려지기도 한다. 체감상 피그마 페이지에 화면이 200장 넘어가기 시작하니 좀 그렇더라.
이 때는 좌우 인터페이스를 숨김처리하면 렉이 덜 걸린다. 혹은 피그마 화면을 띄워놓고 프레젠테이션을 할 때 활용하면 좋다.
좌우 인터페이스 숨기기
