서비스 기획에 필요한 것들

오늘 이 글에서는 서비스 기획자에게 필요한 이론과 개념들을 정리해보려 한다. 사실 나는 와이어프레임과 프로토타입 정도만 만들어본 초짜였기에 프로젝트를 하면서도 구글링을 하며 배웠고, 여전히 배우는 중이다. 

 

 

UI/UX

UI란 User Interface로, 시각적인 디자인을 말한다. 즉 우리가 사용하는 웹이나 앱의 보여지는 화면들(아이콘, 버튼 등)이 모두 UI라고 볼 수 있다. UX란 User Experience로, 사용자가 앱을 사용하면서 겪는 모든 경험을 뜻한다. 

즉, UI는 외관 즉 디자인, UX는 사용자의 편의성에 초점을 맞추는 것이라고 볼 수 있다. 한 때 나는 UX의 중요성을 몰랐었다. UX 디자이너와 UI 디자이너가 왜 구별되는지도 몰랐다. 프로젝트를 하면서, 그리고 이 글을 쓰면서 결국 서비스 사용자를 끌어들이고 유지시키는 것은 UX라는 걸 깨달았다. UX 디자이너는 순 방문자 수(UV), 페이지 뷰 수(PV)를 활용해 추이를 분석하여 개선하는 역할을 한다고 한다.

 

 

플로우차트

플로우차트는 서비스를 사용하기 위해 수행하는 단계들을 시각적으로 표현한 차트이다. 

출처: smartdraw

 

플로우차트에 사용되는 도형에는 각 의미가 있다.

1. 둥근 사각형: 각 프로세스 시작과 끝을 표현

2. 평행사변형: 데이터의 입출력 표시 

3. 사각형: 일련의 동작이나 처리 표시

4. 마름모: 유저나 시스템이 판단하는 경우 (입력, 선택 등)

 

 

위 사진은 우리 프로젝트의 플로우차트다. 물론 플로우가 최근까지도 계속 바뀌면서 지금과는 다른 예전 버전이긴 하지만, 꽤 긴 플로우를 가지고 있다. 

 

 

정보구조도

정보구조도는 IA(Information Architecture)이라고도 하며, 서비스가 어떤 구조로 되어 있으며 각 화면에서 어떤 정보를 보여주는지를 나타낸다. 

 

우리 프로젝트의 정보구조도이다. 구글 스프레드시트로 제작했다. 사실 플로우를 바꾸면서 노션에 새로 작성했으나(그런데 플로우가 또 바뀌면서 이것조차 구버전이 되어버린..) 사진 크기 상(?) 저걸 첨부한다.

Depth는 서비스의 깊이이며, 우리 프로젝트의 경우 Depth00에 해당하는 메뉴들이 웹의 메인 GNB에 해당한다. Depth안에는 또 다른 Depth가 존재하며, 앞선 Depth에 따른 화면이 그 다음 Depth로 존재한다.

 

 

이건 공모전에 참여했던 다른 프로젝트의 IA인데, 이렇게 트리 구조로 작성했다. 트리 구조가 더 직관적이고 작성하기 쉬운데, 아무래도 더 상세하고 구체적인 건 엑셀 형식의 IA인 것 같다.

 

 

기능명세서

기능명세서는 구현해야 하는 기능을 설명한 문서이다. 주 기능과 상세 기능, 그리고 어떤 식으로 구현되어야 하는지를 기술한다.

 

 

프로젝트 기능명세서의 일부분이다. 기능을 구현하기 위해 필요한 것들(검색 창, 팝업 창 등)이 하나하나 설명되어 있다.

 

 

와이어프레임

와이어프레임은 프로토타입 제작 전에 뼈대를 제작하는 것을 말한다. 디자인적 요소는 없더라도 어떤 화면에 어떤 요소가 어디에 들어갈지 같은 전체적인 틀을 구상하는 것을 말한다.

 

 

이렇게 칙칙한 와이어프레임들은 이후 디자인 과정을 거쳐 예뻐진다. 아무리 와이어프레임이라도 디자이너분들이 이해할 수 있도록 충분히 정보와 기능을 표현해야 하는 것 같다.

 

프로토타이핑

마지막으로 프로토타이핑이다. 프로토타입이란 시험용으로 미리 만들어보는 물건을 말하는데, 서비스 런칭에서 프로토타이핑이 와이어프레임을 바탕으로 실제 화면처럼 UI를 구성하는 것을 말한다.

 

 

아직 배포 전이라 피그마 화면을 살짝 잘라서 올려본다. 실제로 개발될 화면이다.

 

 

이외에도 화면설계서 등의 기획자 문서가 더 있는 것 같긴 하지만,, 이 정도면 의사소통과 구현에 문제 없지 않을까? ㅎㅎ...

 

 

기획자의 툴

기획자들이 사용하는 대표 툴로는 Jira, Figma, Slack, Notion, Google Docs가 있다. 사실 나머지는 자주 사용해서 익숙한데 Jira는 한 번도 써본 적이 없다. 기회가 된다면 Jira도 써보고 싶은 마음이 크다.

그리고 Figma는 사용한 지 1년이 넘긴 했지만 내가 모르는 기능도 여전히 많은 것 같아서 시간이 되면 나중에 본격적으로 배우고 싶다.