UX 디자인의 설계도
IA와 플로우 차트 그리고 화면 설계
A님과 함께 화면 설계 좀 해주세요
UX팀으로 와서 처음 받은 업무였다. 몇 가지 예시와 무엇을 하는 건지 설명을 들었다.
그리고 A님과 난 여전히 이 일을 진행 중이다...(그래서 브런치를 할 겨를이 없었다...)
A님에게 죄송하지만 난 이 일로 많이 배우고 있다;;
이 일을 하면서 몇 가지 알게 된 점과 스스로 생각한 바를 풀어보도록 하겠다.
IA(Information Architecture), 플로우 차트, 화면 설계(WireFrame)
이 업무를 하면서 알게 된 개념들이다. 3개는 조금씩 다르지만 모두 연결되어 있다. 제목을 'UX 디자인의 설계도'라고 했지만 사실상 어플이든 웹이든 누군가 쓰는 소프트웨어를 실제로 만들기 위해서 필요한 것들로 생각된다(하드웨어에서도 필요한지는 잘 모르겠다;;)
이제 각 개념을 설명해야 하는데, 우리에게 너무도 익숙한 '카카오톡'을 예시로 한번 접근해보면 좋을 듯하다. (아래 내용이 틀릴 수도 있지만 애초에 난 정답을 모르기 때문에, 내 나름의 이해를 나눠보는 걸로)
'카카오톡' 화면설계하기1단계: 어디에 쓰는 물건인가?-이용 목적, 청사진
좀 생뚱맞지만 이게 제일 중요하다고 생각한다. IA, 플로우 차트, 화면 설계를 하기 전에 이 애플리케이션이 어떤 목적인지, 어떤 의도가 있는지 나아가서 어떻게 사용자들에게 쓰였으면 좋겠는지 머릿속으로 그려볼 필요가 있다. 이 목적을 분명히 세우면, 앞으로 진행할 IA, 플로우 차트, 화면 설계에서 각각의 이정표, 목적지 역할을 해준다. 실제로 A님과 작업할 때도 일 중간에 이 부분을 함께 정하고 나서 일이 더 매끄럽게 진행될 수 있었다.
그럼 카카오톡의 목적은 무엇일까? 당연히 '커뮤니케이션'이다. 실시간 채팅이 아니지만 서로 메시지를 주고받는 것이 가장 중요하다. 이 목적은 카카오의 IA, 플로우 차트, 화면 설계에서 모두 고려되었을 것이다. 현재 카카오톡이 굉장히 다양한 서비스를 하지만, 여전히 카카오톡의 아이콘은 위에 있는 '말풍선 속의 Talk'이고 하단의 탭 메뉴에서도 총 4가지 중 2가지가 '친구'와'채팅'이다.
친구/채팅/채널/더보기 중 2개2단계: 어떤 구조로 되어있어야 할까? IA(Information Architecture) 설계
이번에도 Naver의 힘을 빌렸다...습관이 무서워IA의 사전적 정의다. 내용이 길지만, 눈에 보이는 건 '모듈로 조직화', '제품 분류 구조', '정보 설계' 등이다. 이렇게 사전을 찾은 이유는 내가 IA랑 친하지 않다. 왜냐면 실제 업무는 플로우 차트와 화면 설계만 했기 때문이다. 하지만 플로우 차트를 작업 중 자연스럽게 어떤 구조가 만들어져야 한다는 느낌은 들었다. 그리고 구글을 통해 검색해보면서 내가 느낀 IA는 일종의 Hierarchy(계층 구조)를 만드는 걸로 생각된다. 한번 '카카오톡'으로 IA를 만들어보면 좋을 듯하다(같이 공부해요 ㅜㅜ)
1단계에서 우린 카카오톡의 목적을 '커뮤니케이션'으로 삼았다. 그러면 필요한 게 무엇일까? 대화를 나눌 사람, 대화를 주고받을 공간이 필요하다. '사람'과 '공간'이 제일 큰 분류다. 이제 사람은 나와 다른 사람을 구분해야 한다. 이런 구분을 보통 ID로 하고, ID만 있으면 도용 위험이 있으니까 비밀번호도 필요하겠네. 그리고 ID는 보통 영어만 쓰니까 닉네임도 있어야 할 것 같다. 다음은 '공간'이다. 공간에 누가 있는지 알아야 하니까 대화 참여 ID 정보를 저장해야 되고, 커뮤니케이션하니까 대화 내용이 필요하겠네....
상위: 사람 / 공간
하위: ID, 비밀번호, 닉네임 / 대화 참여 ID 정보, 대화 내용
처음 카카오톡을 만들 때 뭐 이런 식으로 진행하지 않았을까 한다. 몇 가지만 말했지만 위와 같이 일종의 계층이 형성될 것이다.
넘나 악필이다이게 맞는지 모르겠지만, 현재 카카오톡을 보면서 IA를 그려보았다. 카카오톡 서비스에서 필요한 Data를 그룹핑 해야하는 건데, 점차 눈에 보이는 '채팅하기', '보이스톡'같은 기능들을 적고 있었다;;(IA에 Data만 쓰는 건지, 기능들도 써야하는지 잘 모르겠다) 여하튼 IA를 보면 카카오톡이 전체적으로 어떤 의도나 목적으로 만들어졌는지 짐작할 수 있다고 생각한다.(나만의 생각인가;;)
정리하자면 IA는 해당 제품의 목적에 맞는 큰 구조를 만드는 것이고, 이 빅 피쳐가 실제로 의도한 대로 돌아가도록 만드는 게 플로우 차트가 하는 일이다.
3단계: 이용자가 어떻게 움직일까? 플로우 차트
플로우 차트다. 순서도라고도 부른다. 한 가지 주의할 점은 플로우 차트에 '정해진 모양'들이 있었다;; 알고리즘 순서도 기호로 전 세계에서 통용되는 표준화된 기호인 듯하다.
출처: 수원IT컴퓨터학원플로우 차트는 유저의 손에서 어떻게 이용될지 동선을 그리고 확인하는 것이다. 개인적으로 IA보다 더 구체적인 구조를 짜는 걸로 생각된다. 왜냐면 화면 단위로 어떤 액션(기능)을 이용해서 다른 화면으로 이동할지를 고려하고 고민해야 하기 때문이다. 역시나 카카오톡으로 플로우 차트를 고민해보면 더 쉽게 이해되지 않을까 한다.
ㅜㅜ악필_2.jpg일단 축약한 플로우 차트를 그려보았다. 카카오톡을 키면 '로고'가 나오고 '친구/채팅/채널/더보기'로 큰페이지가 있고 우린 각 페이지에서 다양한 액션(채팅하기, 링크타고 넘어가기 등) 한다.
일반적으로 아는 플로우 차트는 각 조건에 따라 'Yes/No'로 나눠지며, 대부분 일방향으로 이뤄진 것으로 알고 있다. 아래 그림처럼 말이다.
이런 느낌의 플로우 차트FM대로라면 각 화면 이동에 대한 조건이 무엇인지 기술해야 하고 모든 화면이 어딘가로 이어져 있어야만 할 것이다(실무자 분들은 어떤 식으로 짜시는지 궁금합니다. 일단 저는 A님과 저런 식으로 그렸습니다;)
개인적으로 플로우 차트의 중요한 점은 각 단계나 페이지에서 어떤 기능이 있고, 어디로 이동하는지 개관하는 것 그리고 전체 흐름에서 원래 목적에 부합하는지라고 생각된다. 카카오톡의 경우, 대부분 '채팅'과 '친구' 페이지로 집중되어 있다.
한 가지 우려되는 점은 서비스 중인 카카오톡을 예시로 삼아서 그런지 모르겠지만, IA와 플로우 차트가 굉장히 흡사하다.
1) IA가 'data 구조 설계도'이고, 플로우 차트가 IA를 바탕으로 한 '화면 흐름 설계도'이기 때문에 비슷하다
2) 내가 잘못 알고 있다.
1번 아니면 2번인데, 부디 1번이길 바란다.....(잘못 알고 있는 거라면 부디 조언 부탁드립니다)
4단계: 이용자가 대면하는 화면이 어때야 할까? 화면 설계(WireFrame)
드디어 마지막 단계다. 화면 설계다. 말 그대로 사용자가 직접 마주하는 화면을 설계하는 것이다. 앞서 했던 플로우 차트의 각 네모칸에 잘 어울리는 화면을 설계하면 된다. 너무나 쉽게 말하고 있지만 어렵다....
화면설계 예시, 출처는 bypeople의 'Best wireframe tools' 화면 설계는 무엇을 어디에 배치할 것인지, 어느 것을 밖에 드러내고, 숨겨 놓을 것인지에 대한 선택과 결정을 해야 한다. 그 선택의 기준은 1단계에서 정한 목적일 수도 있고, 우리 제품이 제공하는 기능의 수, 플로우 차트의 동선상 복잡도, 우리 제품의 플랫폼(PC/모바일)이 무엇인지 등 다양하게 고려해야 한다. 외부적으로는 사람들이 선호하는 아이콘이나 UI, 혹은 트렌드에 부합하는지 등 고려할 것 투성이다.
카카오톡은 개인적으로 화면 설계가 잘 되어 있는 듯하다. 점점 카카오 사업이 많아지고 있지만 '카카오톡'본래 기능을 헤치지 않는 선에서 녹여놓은 듯하다. (이모티콘 리스트에 이모티콘 상점 링크, 개인 프로필상의 선물하기, 채팅방의 #검색 등 사용할만한 상황에 관련된 사업 링크를 제공한다) 우측 상단은 이름은 다르지만(관리, 편집) '친구 삭제', '채팅방 나가기'으로 기능적으로 유사하다.
지금까지 IA, 플로우 차트, 화면 설계에 대해서 얘기해 보았다.
이 3가지를 한꺼번에 얘기한 이유는 '3가지 다 유사하다'는 개인적인 생각 때문이다.
결국 어떤 목적을 세우고 그 목적이 잘 도달할 수 있도록 만드는 설계도들이다.
IA> 플로우 차트> 화면 설계 순으로 더 구체적인 설계를 하는 느낌이다.
IA는 전체 제품에서 필요한 'Data 단위'로 크게 분류/조직화하고, 플로우 차트는 '화면, 기능 단위'로 동선을 설계하고, 마지막으로 화면 설계는 '개별 화면 단위로 Data를 배치, 배열'하는 것 같다.
뭐 이렇게 나름 정의를 내려보았지만 제일 중요한 건 '목적에 부합하고', '협업하는 개발자분들이 이해하기 쉬운 문서면 장땡' 아닐까 한다.....
일단은 내 마음대로 이해한 것이기 때문에 틀릴 가능성이 농후하다. 잘못 이해한 점이 있다면 피드백을 부탁드립니다.
