정보 구조 설계 플로차트 와이어프레임

정보 구조 설계

1. 정보 구조와 정보 구조 설계 
정보 구조 (Information Architecture, IA)는 사용자가 원하는 정보를 불편 없이 사용할 수 있도록 만든 뼈대라고 할 수 있다. 앱에서는 화면 내에 내비게이션 체계나 레이블링 등을 도식화한 것을 의미한다. 정보 구조를 설계하는 이유는 기획자, 개발자, 디자이너 간에 워크플로를 공유하고 파일명, 화면, 용어를 공용화해 업무 처리를 쉽게 하기 위해서이다.
정보 구조를 설계하려면 앱의 전체 구성을 한눈에 볼 수 있는 메뉴 트리를 만들어야 한다. 또한 계층 간의 구조와 파일명 및 간략한 기능을 정보 구조 기능 정의를 통해 정리하는 것이 좋다. 정보 구조를 잘 설계해야만 사용자가 목표에 쉽고 빠르게 도달할 수 있으며, 서비스를 제공하는 견해에서는 서비스의 각 기능이 어떻게 레이블링 되어 콘텐츠로 그룹화되어 있는지 전체 개요를 파악하기 쉽다.

---

SNS 정보 구조 기능 정의서

Code	INTRO	1Depth	2Depth	Memo	Status
A001	Intreo			로고 타이틀	로딩 상태 알림
A002		나의 리스트		즐겨찾기	아이콘 구분
A003		Talk	리스트	채팅방별 구분
A004		친구 찾기	푸시알림	On / Off
A005			새로고침 주기	일정 간격 유지	시간 단위 설정
A006		계정	로그인	아이디가 있는 경우
A007			회원등록	아이디가 없는 경우
A008			프로필 설정	이름/사진	이미지 등록
A009		공지사항		공지알림	숫자 알림

---

2. 플로차트 Flowchart
플로차트는 사용자에게 앱을 이용하는 동선을 알려주는 순서도이다. 정보 구조 설계에 표시하기 어려운 구체적인 동선을 작성할 수 있으므로 개발자와 상세한 부분을 논의할 때 쉽다. 디자이너 대부분은 플로차트를 그리는 일에 익숙하지 않아 메뉴 트리와 같은 형태로 그룹과 페이지를 나열한 후 화살표로 이동 동선을 연결하는 경우가 많은데, 플로차트를 그릴 때는 전 세계적으로 통용되는 표준 기호를 준수하면서 그려야 한다. 

개발자는 대부분 정보 구조 기능 정의에서보다 플로차트를 더 편하게 사용한다. 앱의 각 단계 또는 페이지에서 제공하는 기능과 조건에 따른 이동 방향을 Yes 또는 No로 따라가며 살펴봄으로써 최종 목적에 도달하는지 한눈에 볼 수 있기 때문이다. 
그러나 메뉴 트리와 같은 형태에 익숙해져 있는 디자이너는 표준 기호를 준수하면서 플로차트를 그리는 작업이 어려울 수 있다. 또한 최근의 앱은 한 페이지 안에 많은 기능을 포함하고 있어 와이어 프레임과 플로차트를 복합적으로 활용하는 와이어 플로차트를 더 선호하기도 한다. 
플로차트가 완성되면 일차적으로 프로토타이핑 테스트를 해 본다. 러프 스케치를 활용해 스마트폰 화면에 올려놓고 실제 화면이 어떻게 작동하는지 등을 살펴보는 것인데, 실제 메뉴를 탭 해 콘텐츠 간의 이동이 이루어지는 것처럼 테스트해 보는 것이다. 프로토타이핑 테스트를 단계별로 진행하다 보면 오류를 발견할 수도 있고 필요한 기능이 빠진 경우도 찾을 수 있다.

3. 와이어 프레임 Wire frame
와이어 플로차트를 만들려면 우선 와이어 프레임을 제작해야 한다. 와이어 프레임은 기획자나 디자이너의 아이디어를 거칠게 구성한 화면 디자인이다. 프로토타입이 앱의 핵심 기능에 대한 최소한의 검증이라면 와이어 프레임은 각 화면 단위의 UI를 설계하는 것으로, 화면의 설계와 화면 간의 관계 및 이동까지 모두 포함한다.
와이어 프레임은 핸드 드로잉으로 스케치하기도 하고 파워포인트나 어도비의 그래픽 소프트웨어를 이용해 그리기도 한다. 디자이너들은 와이어 프레임을 바탕으로 그래픽 소프트웨어를 이용해 세부 화면을 디자인하기 때문에 와이어 프레임을 중요한 요소로 생각하지만, 개발자들은 불필요한 부분에 시간을 허비하는 작업이라며 불평하기도 한다. 개발자 중에는 손으로 쓱쓱 그리는 것으로 충분하다고 생각하는 사람도 있다. 하지만 핸드 드로잉한 와이어 프레임은 소프트웨어로 제작한 와이어 프레임보다 수정하기 어려우므로 그래픽 소프트웨어로 와이어 프레임을 작성하는 데 정성을 기울이는 것은 결코 시간 낭비가 아니다.
최근에는 와이어 프레임 도구를 이용해 높은 충실도 High Fidelity로 작성한 후 플로를 추가하고 시안 작업으로 진행하는 것이 일반적이다. 

와이어 프레임 작성 방법

와이어 프레임을 작성하기 전에 개략적인 페이지부터 그리는 것이 좋다. 정보 구조 설계도를 바탕으로 모든 화면을 스케치한 뒤 기본적인 상호작용과 흐름을 작성하는 것이 전체 내용을 이해하는 데 도움이 된다.
기초 드로잉이 끝나면 사용자의 행동 흐름을 검토하고 불필요한 요소와 기능을 감추거나 제거해 흐름을 재정비한다. 이 과정에서 상세한 동선과 기본 레이아웃을 정의한다. 마지막으로 전체적인 페이지의 룩 앤드 필 Look and Feel을 고려해 세부 페이지별 콘텐츠의 크기를 설정하고 위치를 배치한다. 이 단계에서는 디자인의 디테일에 집착할 필요가 없다. 어떤 방법으로든 페이지의 내용을 이해할 수 있는 아이디어만 전달하면 된다.
와이어 프레임을 작성하는 목적은 앱의 전체 서비스를 명확하게 예측할 수 있도록 돕고 시각적인 문서 작업이나 업무의 방향성은 물론 팀 구성원에게 개발하려는 앱이 어떻게 동작하고 어떻게 상호작용하는지 예측하게 하는 것이다.
iOS와 안드로이드는 화면 구성이 다르므로 와이어 프레임도 각각 작성해야 한다. 이때 운영체제별 가이드라인을 준수하는 것이 좋다. 앞에서 설명한 것처럼 디자이너의 독창적인 UI 설계가 운영체제별로 구현되지 않는 때도 있기 때문이다. 그러므로 운영체제별 가이드라인을 정확히 준수하고 특정 기능은 개발자와 상의하면서 작성해야 한다. 
과거에는 안드로이드의 UI를 iOS의 UI에 적용하거나 iOS의 UI를 안드로이드의 UI에 적용하는 것을 바람직하지 않다고 하여 피했지만, 최근에는 두 운영체제의 UI를 같게 구현하는 때도 많다. 하지만 사용자 경험에 자연스럽게 스며들려면 기본 가이드라인을 준수하는 것이 좋다. 구동되는 앱의 UI는 대부분 가이드라인을 지켰다고 판단할 수 있으므로 기존의 앱 화면을 참고하는 것도 좋다. 이는 가장 쉽고 안전한 방법이다. 사용자는 새롭게 배워야 하는 화면보다는 익숙한 기능을 자유자재로 사용할 수 있는 화면을 더 좋아한다.

 

2023.04.08 - [UXUI 디자인] - 프로토타이핑

프로토타이핑

2023.04.07 - [UXUI 디자인] - 디자인 리서치 정리 : 모델링

디자인 리서치 정리 : 모델링