brunch

라이킷 21 댓글 6

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 우잉 Oct 18. 2022

콘텐츠를 ‘청크’하면 사용자 이해가 높아진다구요?

닐슨 노먼 그룹 모바일 UX 스터디 (8)

들어가기에 앞서….

이 아티클은 닐슨 노먼 그룹이 발행하는 <심리학 및 UX 아티클 & 비디오> 카테고리의 '청킹이 콘텐츠 처리를 돕는 방법(How Chunking Helps Content Processing)' 내용을 요약한 글입니다.

How Chunking Helps Content Processing

Break your text and multimedia content into smaller chunks to make it easier for users to understand and remember information.

www.nngroup.com

(기사가 2016년 3월에 작성되었기 때문에 내용 및 수치가 오늘과 다를 수 있음을 말씀드립니다.)

여기 두 개의 번호가 있습니다. 이중 어떤 번호가 더 기억하기 편하신가요? 아마 대부분의 사람들은 오른쪽 번호를 선택할 것입니다. 이처럼 정보를 인지할 때 이해하기 쉽거나 기억하기 쉽도록 덩어리 짓는 것을 ‘청크’라고 합니다. 그렇다면 '덩어리 짓는 것'이란 정확히 무엇을 의미할까요? 구체적인 사례를 알아보기 전 청크의 개념에 대해 짚고 넘어가겠습니다.

1. 어이~ 청크 동상! 아잇~ 청킹 형님!

먼저 청크(Chunk)는 사전적 의미로 ‘말의 덩어리’를 뜻합니다. 이러한 말의 덩어리가 ‘의미를 가질 수 있도록 묶는 것’을 청킹(Chunking)이라고 하는데요. 이해를 돕기 위해 영어 문장으로 예를 들어보겠습니다.

‘Wooing is at the company’ 문장의 청크는 무엇일까요? 정답은 바로 ‘Wooing is(우잉은)’와 ‘at the company(회사에서)’입니다. 크게 두 가지의 말 덩어리로 나뉘기 때문입니다. 여기서 주의할 점은 각 청크는 독립된 의미로 존재한다는 것입니다. 그렇다면 ‘Wooing is at the company’ 문장의 청킹은 무엇일까요? 정답은 바로 ‘Wooing is at the company(우잉은 회사에 있다)’입니다. 두 가지 말 덩어리가 묶여 하나의 의미를 가지기 때문입니다. 즉, 개별 의미를 가진 청크가 그룹 지어져 하나의 의미를 가진 청킹이 된 것입니다.

정리하자면 청크는 크고 작은 여러 개의 말 덩어리를 의미하고 청킹은 이러한 청크를 유의미하게 묶는 것을 뜻합니다. 청크에 따라 문장을 분리하다 보면 쉽게 내용을 이해하고 기억할 수 있습니다.(실제 청크는 보편적인 암기법 중 하나입니다) 이러한 청크는 인지심리학에서 ‘기억의 단위’를 의미하지만, UX 분야에선 ‘콘텐츠를 시각적으로 그룹 짓는 것’을 뜻합니다. 앞선 번호 예시와 같이 콘텐츠를 의미에 따라 그룹 지으면 사용자가 내용을 보다 쉽게 이해하고 기억하기 때문입니다. 그렇다면 콘텐츠를 청크하는 방법은 무엇일까요? 이를 텍스트 콘텐츠와 멀티미디어 콘텐츠로 나눠 설명드리겠습니다.

2. 텍스트 콘텐츠를 청크하는 법

아마 저를 포함한 여러분은 긴 글 보다 작은 단위로 끊어진 글을 선호할 가능성이 큽니다. 많은 연구 결과가 사용자는 스키밍(스치듯 날리는 듯한)해서 읽히는 콘텐츠를 선호하는 경향이 있음을 말하기 때문입니다. 또한 텍스트가 청크되어 있을 경우 대부분의 사용자는 콘텐츠를 끝까지 읽을 확률이 높습니다. 텍스트 콘텐츠를 청크하는 가장 일반적인 방법은 다음과 같습니다.

• 단락과 단락을 구분하는 공백 영역

• 50~70자 정도의 짧은 텍스트

• 관련 항목들이 그룹화된 명확한 시각 계층 구조

• 고유한 문자열의 그룹화 (ex. 전화번호, 카드번호, 계좌번호, 라이센스번호 등)

특히나 고유한 문자열의 경우 사용자 실수를 최소화하기 위해 각 유형에 알맞은 형식을 제공해야 합니다. 그러나 서식을 지정하게 되면 가독성이 향상되지만 입력 비용이 높아지는(ex. 텍스트 필드 이동을 위해 추가 클릭이나 탭을 해야 하는) 문제가 생기므로 사용자가 입력한 텍스트에 따라 자동으로 문자가 청크되는 게 좋습니다.

(이미지 : Apartments.com)

아파트먼츠 웹사이트의 경우 문의를 위해 핸드폰 번호를 입력할 경우 자동으로 문자열이 청크됩니다.

그러나 위의 예시는 작은 범위의 텍스트 청크로 볼 수 있습니다. 이것만으로는 사용자 이해를 높이는데 충분하지 않습니다. 주요 요점을 보다 쉽게 식별하기 위해선 큰 범위의 텍스트 청크가 필요합니다. 텍스트 콘텐츠를 큰 범위로 청크하는 방법은 다음과 같습니다.

• 제목과 본문의 명확한 구분

• 문단의 핵심 키워드 강조

• 글 목록에 글머리 기호 및 번호 표기

• 각 단락에 짧은 요약문 제공

그렇다면 위 내용을 바탕으로 청크가 잘 적용된 좋은 예와 적용되지 않은 아쉬운 예를 살펴보도록 하겠습니다.

1) 아쉬운 예

(이미지 : ApartmentGuide.com)

아파트먼트가이드 웹사이트의 경우 제목과 본문의 명확한 구분이 가지 않습니다. 본문 또한 길이가 길며 핵심 키워드가 강조되어 있지 않습니다. 닐슨 노먼 그룹에서 해당 페이지를 사용자 인터뷰한 결과 “많은 글이 있어 지저분해 보이며, 읽고 싶은 마음이 들지 않는다”라는 피드백을 받았습니다.

2) 좋은 예

(이미지 : BBC)

비비씨 웹사이트 기사의 경우 짧은 단락, 넓은 공백, 제목 및 부제목의 사용, 내용 요약 등 텍스트 콘텐츠를 청크했습니다. 닐슨 노먼 그룹에서 해당 페이지를 사용자 인터뷰한 결과 “분할이 잘 되어 있어 읽기가 편했고, 말하고자 하는 내용이 무엇인지 빠르게 파악할 수 있었다”라는 피드백을 받았습니다.

3. 멀티미디어 콘텐츠를 청크하는 법

그렇다면 텍스트 외의 사진과 영상 콘텐츠를 효과적으로 청크하는 방법은 무엇일까요? 결론부터 말씀드리면 게슈탈트 법칙에 근거해 관련 항목을 서로 가깝게 배치하는 것입니다. 즉, 정렬, 공백, 배경색 등을 활용해 관련 있는 항목과 관련 없는 항목을 시각적으로 구분하는 것입니다. 그럼 아래의 예를 보고 청크가 잘 적용된 부분과 적용되지 않은 부분을 살펴보도록 하겠습니다.

1) 메일 침프 웹사이트의 기능 소개 페이지

(이미지 : MailChimp)

• 좋은 점
- 제목과 본문, 단락과 단락이 명확하게 구분되어 있습니다.
- 여백을 효과적으로 사용해 콘텐츠에 집중할 수 있습니다.

• 아쉬운 점
- 사진이 단락 중앙에 배치되어 있습니다.
- 보다 명확한 구분을 위해 사진을 위나 아래 단락과 청크하는 게 필요합니다.

2) 테드 웹사이트의 비디오 스크립트 페이지

(이미지 : TED.com)

• 좋은 점
- 헤더의 비디오 콘텐츠 영역이 청킹되어 있어 텍스트 콘텐츠와의 명확한 구분이 가능합니다.

• 아쉬운 점
- 타임라인 텍스트의 경우 각 단락의 구분이 명확하지 않습니다.
- 보다 명확한 구분을 위해 단락의 여백을 넓히거나 타임라인 시간을 강조하는 게 필요합니다.
- 각 스크립트에 소제목이나 강조 표시된 키워드가 있다면 사용자 탐색 경험이 나아질 것입니다.

4. 잠깐! 기억보다 인식이 중요해요

인지 심리학자인 조지 밀러(George Miller)가 1956년에 진행한 실험에 따르면 대부분의 사람은 단기 기억력으로 약 7개의 청크를 기억할 수 있습니다. 여기서 흥미로운 점은 청크의 개수가 아닌 청크의 크기인데요. 사람들은 한두 개의 단어로 이루어진 7개의 청크를 기억할 수도, 여러 개의 단어로 이루어진 7개의 청크를 기억할 수도 있습니다. 이를 밀러의 ‘마법의 숫자 7’로 부릅니다.

사용자 경험 분야에서 밀러의 마법의 숫자 7은 인간이 주어진 시간 안에 처리할 수 있는 청크의 개수가 7개라는 한계의 의미로 사용되곤 합니다. 때문에 불필요한 설계를 정당화하기 위해 UX 디자이너는 이를 종종 오용하는 경우가 있습니다. 예를 들어 마법의 숫자 7을 위반한다는 전제로 내비게이션 바에 7개 이상의 옵션을 추가하는 것이 옳지 않다는 결론을 내리는 것입니다.

사용자는 서비스를 사용함에 있어 ‘기억’보다 ‘인식’에 의존합니다. 모든 메뉴가 화면에 계속 표시되기 때문에 사용자는 메뉴를 기억하고 있을 필요가 없습니다. 따라서 내비게이션 바에 7개 이상의 옵션을 추가하는 것은 마법의 숫자 7을 위반한 것이 아닙니다. 즉, 기억력 관점으로 접근할 경우 잘못된 논리라고 볼 수 있습니다.(아이콘의 마진이 좁아져 탭 경험이 좋지 않은 논리와 스와이프 하는 액션이 추가돼 입력 비용이 증가한 논리와는 별개입니다)

그렇다면 밀러의 연구에서 얻을 수 있는 인사이트는 무엇일까요? 밀러의 연구에서 얻을 수 있는 주요 결론은 다음과 같습니다. "인간의 단기 기억력은 제한되어 있으므로 사용자가 더 많은 정보를 기억(이해) 하기 원한다면 정보를 의미 있는 덩어리로 묶어한다." 따라서 많은 정보가 담겨있는 콘텐츠의 경우 맥락 없는 설계는 절대적으로 지양해야 합니다. 사용자의 이해를 위해서는 기억할 수 있는 콘텐츠의 개수보다 정보 자체를 쉽게 인식할 수 있는 설계가 중요합니다.

(이미지 : hp.com)

에이치피 웹사이트의 경우 랩톱을 찾게 되면 한 페이지에 21개의 제품이 노출됩니다. 이들은 넓은 여백과 배경색을 사용해 기기를 명확히 구분할 수 있도록 청크했습니다. 이를 통해 각 랩톱에 대한 정보를 기억할 필요 없이 손쉽게 비교할 수 있도록 했습니다.

5. 글을 마무리하며···.

모든 화면 설계에는 특정 목적이 있습니다. 번호를 청크하는 것도 기입 과정에서 실패율을 낮춰 가입이나 결제 등 최종 액션에 빠르게 도달하기 위함이며 콘텐츠를 잘 읽히게 하는 것도 더 많은 클릭률과 잔존율을 달성하기 위함입니다. 따라서 정보를 청크하여 제공하는 것은 사용자의 특정 행동을 유도할 수 있기에 매우 중요한 설계입니다. 이는 기본적으로 사용자가 서비스에 효용 가치를 느껴야 가능한 부분이므로 디자이너는 에셋의 크기, 색, 여백 등을 적절히 활용해 콘텐츠를 인지하기 용이하도록 화면을 구성해야 합니다. 그룹핑에 따라 경험이 달라질 수 있음을 경계하면서 청크와 관련된 글은 여기서 마무리 짓도록 하겠습니다. 긴 글 끝까지 읽어주셔서 감사합니다. 저는 다음 스터디 글로 찾아뵙겠습니다. :)