[디자인] 효율적인 기획 방법 찾아 삼만리(feat. Figma로 기획하기)

‘커뮤니케이션(=개발자와의 소통)에 정해진 방법은 없다’

라는 것을 알게 된 지 얼마 되지 않았다. 전문 기획자나 시니어 디자이너가 없던 초기 스타트업에 입사한 뒤, 나는 프로덕트 디자이너로서 나홀로 성장해왔다. 그렇게 약 2년 정도의 여정에 있어 나를 가장 혼란케했던 질문은 하나였다. 기획자로서, 디자이너로서

‘다른 사람들에게 어떻게 잘 보여주고 소통할 것인가?’

이 질문에 대한 답을 2년이 지난 이제야 찾았다. 정해진 방법이란 없다라는 것이 답이라고 말했지만, 이 말은 즉

어떤 방법이든지 다수가 잘 이해하고 최대한 작업에 효율을 높이는 방법이면 된다

라는 의미가 담겨있다.

기획 초반, 스토리보드 작성을 위해 피그마로 직접 제작한 스토리보드 템플릿.

‘Storyboard(이하 스토리보드)’는 아직까지 대한민국 IT업계에서 기획에 가장 전통적으로 쓰이는 문서이다. PPT한 장 안에 하나의 화면을 넣어두고 각각의 요소와 기능에 대해 번호를 부여하고 해당 번호마다 오른쪽 부분에 따로 설명을 써두는 방식이다. 최소 몇 십 장에서부터 많게는 몇 백 장까지 늘어나는 스토리보드 문서는 이렇듯 기본적으로 한 Deck에 1개의 화면을 설명하기 때문에

‘플로우’를 설명하기에 매우 불편하다.

또한, ‘기획-디자인-개발’ 그리고 다시 ‘개발-기획-디자인-개발…’ 순으로 계속해서 각 영역에서 수정이 반복되는 IT 업계상 수많은 문서들을 하나하나 다시 수정해야되는 작업은 숙련된 기획자들조차도 힘들어하는 부분이다. 이렇게 복잡함에도 개발자들과 이해관계자들과의 커뮤니케이션에 문제가 없다면 감수할 수도 있겠으나, 한 눈에 보기에 힘든 플로우 및 수정사항이 바로바로 반영되기 힘든 복잡한 구조는 모두의 커뮤니케이션에 많은 불편함을 초래한다. 이러한 분석 끝에 스토리보드는 현 상황(기획과 디자인이 동시에 빠르게 진행돼야하는 상황)에 맞지 않다고 판단하여 다르게 기획해보기로 한다.

소규모 스타트업에서 기획과 디자인을 동시에 하는 입장으로서, 흔히 기획자가 작성하는 기획 문서와 디자인 툴을 활용한 화면들을 각각 설계하는 것은 물리적 시간이 현저히 부족했던 상황. 나는 Hi-fi 와이어프레임을 시작으로 문서들을 생략하고 화면부터 디자인하기 시작했다. 그리고 기획문서가 있다면 존재했을 여러 기능명세, 화면 명세 등을 화면

플로우 표시

와 함께 아래 이미지와 같이 화면 밑에 적는 식으로 구성을 해 나갔다. 처음에는 이러한 방식이 꽤 효율적이라고 생각했으나, 화면 수가 계속해서 늘어가는 상황에서 그리고 기능들이 하나 둘 씩 더해져가는 상황에서 화면 아래 들어가는 설명 텍스트는 (1) 정확히 어느 부분을 설명하는지 애매모호함 (2) 어디로 얼만큼 작성될 지 모르는 텍스트 공간 및 지저분해보임 으로 인해 ‘효율적인 커뮤니케이션’에 여전히 아쉬움을 남겼다.

그럼에도 여전히 피그마로 기획하는 것은 기존 기획 방식에 비해서는 꽤나 효율높은 작업이라고 생각했다. 이 생각은 여전히 변함이 없다. 처음 기획에 손을 댈 당시에도 ‘피그마로 기획’ 하는 것은 드문 일이었기 때문에(사실 여전히 드문 일) 마땅한 레퍼런스 없이 계속해서 나만의 커뮤니케이션 방식을 찾아나가야 했다. 그리고 현재 기준(2023년 7월) 마지막으로 정착한 나만의 기획서는 이렇다.

우선 앞서 언급한 #피그마기획1 보다는 조금 더 구체화 된 설명이 번호와 함께 들어가게 되었다. 이는 곧 기존의 스토리보드 방식을 피그마 기획에 차용한 방식이다. 스토리보드에는 존재하지 않는 시각적 화면 플로우 그리고 스토르보드에만 있던 세세하고 구체적인 기능 설명방식을 합친

혼합형 기획서

인 것이다. 이 때 나는

‘Annotate it’

이라는 피그마 내

플러그인을 사용

했다. 해당 플러그인의 가장 좋은 점은 바로, 번호나 순서 등을 바꿀 때 한번에 쉽게 바꿀 수 있다는 점이다. 예를 들어, 기존 스토리보드를 사용했다고 가정해보자. 2번으로 지정한 요소를 1번으로 바꾸고 싶으면 일일이 모든 번호와 내용을 수동으로 옮겨서 다시 작성해야 한다. 하지만 이 플러그인을 이용하면 번호, 순서와 내용 등의 모든 것을 직접 이동시키지 않고도 한번에 추가, 수정, 삭제 등이 쉽게 가능하다.

피그마는 간단한 프로토타이핑이 가능해 기본 인터랙션을 구현하기에도 불편함이 없고, 프레임을 만드는 보드 크기에 제약이 없기 때문에 얼마든지 시각적으로 화면 플로우 표현이 가능하다. 다만 한가지, 문서급 작성에 필요한 툴은 따로 제작되어 있지 않다. 하지만 그러한 요소를 커버해주는 플러그인들이 충분히 많이 나와있기 때문에 기존 ‘스토리보드’ 방식의 구체적 설명 및 ‘피그마’의 화면 플로우 표현의 조합이 가능해지는 것이다.

스타트업 업계에 있으면서 갖가지 방법으로 기획 문서를 만들어가는 회사들을 많이 봐왔다. 기획 방법에 정해진 답은 없다. IT 업계에서는 ‘기획-디자인-개발’ 프로세스를 위해 서로가 말하고자 하는 바가 분명한, 즉 ‘소통’ 이 잘 되는 것이 무엇보다도 중요하다고 생각한다. 어떤 도구나 방법을 사용하든지 충분히 서로간의 이해에 도움을 주고 효율적이라고 판단되면 그게 무엇이든 중요하지 않다. 나는 고민 끝에 피그마와 플러그인을 택했지만, 지금 이 순간에 이것이 나와 팀에게 가장 효율적이었을 뿐이다. 더욱 효율적인 방법을 찾게되면 그게 또 나의 새로운 기획 방법이 될 것이다. .끝.