[UX 특강(조엘 마쉬)] 정보 구조 (#09~11)

#09

지금까지 우리는 대부분 UX 디자인을 이해하고 계획하는 방법에 대해 얘기했습니다. 이 글에서는 실제 똥을 만들어보기 시작할 거에요. 진짜 해결책을 디자인하는 첫 단계는 사물의 일반적인 구조를 파악하는 거에요. 즉 이런 얘기를 접하실 때가 된 건데…

정보 설계란 무엇인가?

“정보”에 “구조”를 만든다는 얘기를 처음 듣는다면, 이 슬라이드가 시작하는 데에 도움이 될 거에요. Understanding Information Architecture.

정보 설계 (IA: Information Architecture)는 작은 프로젝트에선 꽤 단순할 수도 있지만, 큰 프로젝트에서는 어마어마하게 복잡할 수도 있습니다.

정보 설계는 겉으로 보이지는 않아요. 그래서 이 일을 하려면 사이트 맵을 그려야 합니다. 다음은 간단한 예시에요.

위의 예는 페이지가 여섯 개인 웹사이트를 보여줍니다. 홈페이지 하나, 메인 메뉴의 섹션 두 개, 세 개의 서브 섹션 페이지, 이렇게요. 각 페이지 사이의 선은 해당 페이지들끼리 내비게이션 (메뉴와 버튼)으로 연결되어있음을 나타냅니다.

주의사항: 사용자가 백만 명이라고 프로필 페이지가 백만 개인 것은 아녜요. 프로필 페이지는 단 한 개죠. 그 페이지에 어느 유저의 프로필이든 나타낼 수 있는 거고요.

이렇게 족보처럼 정리한 페이지들을 가리켜, “계층 (hierarchy)”이나 “트리 (tree)”라고 불러요. 대부분의 사이트나 앱은 이런 식으로 정리하곤 합니다. (이게 유일한 방법은 아니지만요.)

****

사이트 맵을 그릴 때 지켜야 하는 “규칙”은 없지만, 일반적인 가이드라인을 적어볼게요.

단순해보인다고 말이 되는 건 아니다.

명확하고 읽을 수 있게 유지하라.

보통은 위에서 아래 방향으로 그린다. 왼쪽에서 오른쪽으로 그리지는 않는다.

사이트 맵을 “팬시”하게 그리지 말라. 이건 기술 문서지, 패션 쇼가 아니다.

****

깊거나 평평하거나, 그 중간은 없어요.

일반적으로 여러분의 사이트 맵은 굉장히 “평평”하거나 “깊을” 겁니다. 평평하다는 건 메뉴에 섹션이 많고 가장 아래 단계까지 클릭을 덜 할 수 있다는 거죠. 깊다는 건 메뉴가 좀 더 단순한 대신 원하는 페이지에 가려면 클릭을 좀 더 해야한다는 겁니다.

 

위 예시의 어느 쪽이든 페이지 숫자는 동일하다는 걸 확인하세요. 양은 똑같지만 다를 뿐이죠.

월 마트처럼 제품이 굉장히 많은 사이트들은 구조가 “깊어야” 합니다. 안 그러면 메뉴가 말도 안 되게 엉망이 될 테니까요. 유튜브 같은 사이트는 사용자와 동영상만 다루면 되기 때문에 보통은 좀 더 “평평”합니다.

여러분의 사이트가 깊은 동시에 평평하다면 그건 안 좋아요. 여러분의 목표를 좀 더 단순하게 만들거나(#02 ‘사용자 목표와 사업 목표’ 참조), 핵심 기능으로 검색 기능을 훌륭하게 만들어야 합니다.

****

잘못된 고정 관념: 모든 것은 언제나 “3 클릭 안에” 갈 수 있어야 된다고 얘기하는 사람들을 봤을지도 모르겠네요. 그 얘긴 그 사람들이 UX를 90년대에 배웠고 그 뒤로 새로운 것은 아무 것도 공부하지 않았다는 뜻이에요. 대신 사용자에 집중하세요. 자신이 어디에 있는지, 자신이 어디로 갈 수 있는지 사용자가 늘 이해할 수 있도록 하세요. 내비게이션이 쉽고 명확하다면 클릭을 몇 번 하는지는 중요한 게 아니에요.

****

다음 글에서는 메뉴의 분류를 어떻게 결정할지 (아니면 분류를 아예 없앨지) 알아볼게요. 즉, 정보 설계의 종류 말예요.

 

#10

정보 설계를 늘 쉽게 설명할 수는 없답니다. 여러분의 팀과 정보 설계에 대해 얘기해보면 도움이 될 거에요. 그리고 여러분 머리 속에서 쉽게 생각해보시고요. 그러니 이번 글에서는 요걸 배워봅시다.

사용자 스토리 & 정보 설계의 유형

사용자 스토리는 사용자가 여러분의 사이트나 앱에서 선택할 수 있는 행동 경로 한 가지를 설명하는 거에요. 짧지만 완전해야 합니다. 전체 디자인을 설명하려면 사용자 스토리가 많이 필요할 거에요.

Google.com의 기본적인 사용자 스토리는 다음과 같겠죠.

사용자는 메인 검색 페이지에 도착한다. 사용자는 아무 검색어나 입력하고 마우스나 키보드로 전송한다. 다음 페이지에서는 검색 결과를 목록으로 보여주는게 검색어와 가장 관련성이 높은 것부터 위에서 표시한다. 사용자는 링크를 눌러 적절한 사이트로 이동할 수 있다. 또는 뭔가 쓸만한 것을 찾을 때까지 더 많은 결과 페이지들을 넘나들 수도 있다.

주의사항: 좀 다소 너무 단순하게 했지만, 무슨 말인지는 아시겠죠?

해당 행위들을 어떻게 해결하고 디자인할지, 구체적인 것은 스토리에서 아무것도 얘기하지 않는다는 것을 확인하세요. 스토리에서 얘기하는 것은 해당 행위들이 가능하다는 것 뿐이에요. 이런 스토리들은 흐름을 기술하기 위한 것입니다. 즉, 사용자가 선택하는 순서 말예요. 최종 UI 결과물을 얘기하는 게 아니에요.

흐름이 단순하고 효율적이라면, 여러분은 잘 하고 계신 겁니다. (지금까지는요.)

어떤 매니저들은 사용자 스토리를 디자이너에게 UX를 이렇게 만들어달라고 지시하는 방식으로 생각하곤 해요. 하지만 완전히 틀린 얘기에요. 왜냐고요? 사용자 스토리는 기본적으로 기능이나 동작의 목록들이에요. 그리고 이것들이 최종 해결책에 큰 영향을 끼치는 것이죠. UX 디자이너가 사용자 스토리를 쓰는 거에요. 팀과 소통하기 위해서요.

거꾸로 하면 안 돼요. 그건 마치 밥 로스에게 어떤 색깔을 쓰라고 말하는 거나 다름없다고요!

(원래는 미켈란젤로라고 쓰려고 했는데, 솔직히 말해서 밥 로스 쪽이 더 좋죠?)

****

자, 그럼 이제 여러분이 사용자 스토리를 쓸 수 있으니, 정보 설계(#09 참고)를 여기에 다시 가져와보죠. 여러분 페이지의 구조가 사용자 스토리의 단계를 결정짓습니다. 그리고 페이지의 구조를 만드려면, 어떤 유형의 정보 설계로 작업할 것인지 골라야 합니다. (유형이 꼭 하나가 아닐 수도 있지만, 지금은 일단 단순하게 해보죠.)

정보 설계의 유형에는 다음과 같은 것들이 있습니다.

분류

할 일

검색

시간

사람

여러분을 위해 하나씩 브렉-다운해보겠습니다. (DJ는 음악 좀 주세요!)

* 분류 

H&M 같은 판매점을 생각해봅시다. 이 곳의 메뉴는 아마도 분류겠죠? “남성복, 여성복, 아동복, 세일 품목” 등등. 콘텐츠의 종류 말예요. 이 분류를 클릭하면 해당 분류에 맞는 콘텐츠들이 나타날 것이라고 예상할 겁니다.

이는 정보 설계에서 가장 흔한 유형입니다. 하지만 금융 상품, 산업용 화학물질, 아님 섹스토이 (친구가 말해줬어요.)처럼 분류가 복잡하다면, 분류명을 보고 여러분이 생각하는 것과 사용자들이 생각하는 것이 같지 않을 수도 있고, 그럼 혼란이 일어납니다. 제가 만약 항문 삽입 도구를 사고 싶다면, 이건 “배터리 동작” 품목에 있을까요, 아님 “야광 제품” 품목에 있을까요? 인생은 어려운 질문으로 가득차있답니다.

* 할 일

사이트나 앱을 조직화하는 또다른 방법은 사용자가 달성하고 싶어하는 목표에 따라 정리하는 것입니다. 은행이라면 “저축, 대출, 투자, 상담, 신규 계좌 개설” 정도면 좀 더 단순한 메뉴가 될 수 있겠죠. 자신이 바라는 것이 무엇인지 사용자가 알고 있다면, 이 방법은 여러분의 디자인을 구조화하기에 아주 좋습니다. 하지만 조심하세요… 사용자가 자신의 모험을 떠날 정도로 늘 잘 알고 있는 건 아니랍니다.

이런 걸 생각해보면, 같은 회사의 사이트라도 할 일에 기반한 사이트와 분류에 기반한 사이트가 얼마나 달라 보일지 깨닫게 될 겁니다. 굉장히 중요한 선택이죠.

* 검색

사이트가 아주 복잡하거나 사용자들이 만든 콘텐츠로 가득하다면, 검색 기반의 설계가 좀 더 말이 됩니다. 유튜브처럼요. 유튜브가 ‘웃김, 슬픔, 광고, 영화, 기타’처럼 분류만 있었다면 쓰기가 정말 어려웠겠죠. 그 분류를 올바르게 유지하는 데에도 엄청난 일이 필요할 테고요.

* 시간

UX를 이제 막 시작하는 거라면, 이 얘긴 조금 깰 수도 있겠네요. 정보 설계를 시간 변화에 따라 디자인할 수도 있습니다. 가장 단순한 예는 여러분의 ‘받은 편지함’이 되겠네요. 거기에선 메시지들이 받은 순서대로 표시되잖아요. 그게 바로 “시간 기반의” 정보 설계 디자인입니다. 그런 사이트에는 “실시간 인기, 보관함, 나중에, 최신” 등의 페이지들이 있겠죠. 레딧이나 페이스북 뉴스 피드가 이런 시간 기반 디자인의 또다른 예겠네요.

* 사람

페이스북이나 다른 소셜 네트웍 사이트들은 사람에 기반한 정보 설계입니다. 모든 페이지들이 해당 정보가 누구에 대한 것인지, 그들 사이의 관계는 어떤지에 맞춰 디자인됩니다.누군가의 프로필 페이지에 도착하면 페이스북은 다른 콘텐츠 유형을 정리하기 위해 ‘사진, 친구, 장소’라는 분류를 사용합니다.

그리고 아마도 다른 유형도 있을 겁니다! 하지만 이번 글은 이미 제법 길어졌네요.

다음 글에서는 모든 UX 책임들 중 가장 성스러운 것에 대해 알아보겠습니다. 와이어프레임 말입니다!

 

#11

UX라고 하면 대부분의 사람들은 선과 상자가 있는 도표, 우리가 와이어프레임이라고 부르는 걸 떠올리곤 합니다. 안타깝게도 와이어프레임을 만드는 게 UX를 만드는 것과 같다고 생각하는 사람들이 많아요. 그래서 이번 글에서는 다음을 다뤄보죠.

와이어프레임은 무엇인가?

이 특강을 처음부터 여기까지 보셨다면, UX는 빙산이라는 걸 아셨을 겁니다. 여러분이 보는 건 전체 문제의 아주 작은 부분일 뿐이죠.

시작하기 전에 ‘와이어프레임이 아닌 것 (What Isn’t a Wireframe)’을 먼저 보세요. 여러분의 작업 과정, 아니면 여러분 회사 작업 과정에 나쁜 버릇이 남아있을 지도 모르니까요.

일반적인 생각:

와이어프레임은 기술 문서입니다. 위의 예시처럼요. 하지만 위의 것처럼 “예뻐야만” 하는 것은 아닙니다. 선, 상자, 라벨, 색깔 한두 가지. 그게 전부에요.

와이어프레임은 종종 건축 설계도와 비교되기도 합니다. 목적이 비슷하거든요.

건축 설계도는 현장에서 설계자의 계획을 어떻게 실행할 지 알려줍니다. 벽지는 뭘로 할 지, 가구는 뭘로 할 지 같은 게 아녜요. 그리고 설계도는 중요하게 받아들여집니다. 설계도는 그저 제안하는 게 아니고, “간략한 스케치”도 아니고 “빠르게 만들어본 모형”도 아닙니다.

여러분이 화이트보드나 브레인스토밍 중에 그린 모든 스케치들은 가치있습니다. 하지만, 그건 와이어프레임이 아닙니다. 그건 여러분이 나중에 만들게 될 와이어프레임에 대한 여러분의 생각인 거죠.

와이어프레임은 한 시간이면 그릴 수도 있습니다. 하지만 와이어프레임을 계획하는 데에는 몇 주나 몇 달이 걸립니다. 여러분의 동료나 클라이언트가 그걸 이해하는 게 중요합니다.

UI 개발자나 UI 디자이너가 여러분의 “와이어프레임”을 아직 사용할 수 없다면, 그건 와이어프레임이 아닙니다. 그냥 스케치죠. 계속해볼게요.

****

전부 다 쓴 것 같지는 않지만, 일단 여기에서 멈추겠습니다.

이 특강 시리즈의 거의 절반인, 다음 12개의 글에서는 여러분의 와이어프레임을 향상시키는 법을 다루겠습니다. 여러분의 디자인이 그저 좋아 보이는 게 아니라 잘 동작하게 만들어서요.

****

다음 글에서는 사람들의 시선을 바라는 대로 옮길 수 있는 다섯 개의 교훈 중 첫번째 것을 다루겠습니다. 바로 시각적 무게감 말이죠.

 

출처

https://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals

https://imseongkang.wordpress.com/2014/04/28/uxcrash31korean/