50호가 도착했어요! (읽는 데 6분) 12.01의 캡처프레이즈
1️⃣ [아티클] 청킹은 어떻게 콘텐츠 처리 과정을 돕는가 |
|
|
1️⃣ 오늘의 아티클
NN 스터디 6편 - 청킹은 어떻게 콘텐츠 처리 과정을 돕는가(2016)
Kate Moran - How Chunking Helps Content Processing (원문 보기)
|
|
|
🤸 에디터 신비:
안녕하세요 캡찹님! 벌써 12월이네요. 캡처프레이즈는 벌써 50호를 맞았고요. 날씨가 부쩍 추워졌는데 다들 잘 싸매고 다니고 계신가요?
수능이나 어학점수를 따기 위해 영어 공부를 해본 경험이 있다면, 리딩 파트에서 "글을 / 이렇게 / 끊어서 읽었던 / 기억" 다들 하나씩 있죠? 영어 문장의 문장 성분과 구조를 파악하기 위해 샤프로 빗금을 그어가며 문장을 읽곤 했었잖아요.
아니면 11자리 개인 휴대전화번호를 붙임표(-)로 구별해 010-1234-5678라고 쓰는 것이, 번호를 기억하는 데 도움이 된다는 말을 들었던 기억은요? 이처럼 주어진 정보를 의미 있는 단위로 분류하는 것을 인지심리학 분야에서는 청킹이라고 부르는데요.
오늘의 아티클은 '청킹'을 단순한 문자열뿐만 아니라 여러 형태의 콘텐츠에 적용해 콘텐츠 효율을 높이는 원리와 방법, 예시를 담고 있어요.
그럼 오늘도 재밌게 봐주세요.
|
|
|
요약: 청킹은 인지 심리학 분야에서 유래한 개념입니다. UX 전문가는 사용자가 더 잘 처리하고, 이해하고, 기억할 수 있도록 텍스트 및 멀티미디어 콘텐츠를 작은 덩어리로 나눌 수 있습니다.
청크와 청킹
정의: 일반적으로 '청크'는 하나의 조각 또는 더 큰 것의 일부를 의미합니다. 인지심리학 분야에서 청크는 기억의 조직적 단위를 의미합니다.
청크는 활성화 수준이 다양할 수 있습니다 - 즉, 더 기억하기 쉬울 수도, 어려울 수도 있습니다. 정보가 메모리에 들어갈 때, 관련 개념이 하나의 청크로 묶이도록 다시 코딩될 수 있습니다. 이 과정을 '청킹'이라고 하며, 종종 기억 기법으로 사용됩니다. 예를 들어 청킹된 전화번호 (+1-919-555-2743)는 긴 숫자 문자열 (19195552743)보다 기억하기 쉽고 스캔하기도 쉽습니다.
UX에서의 정의: UX 디자인 분야에서 '청킹'의 일반적인 개념은 최소 단위로 나뉜 정보 항목을 서로 구별하기 어려운 덩어리로 제시하는 것과는 반대로, 콘텐츠를 작고 뚜렷한 정보 단위(또는 '청크')로 나누는 것을 의미합니다.
청크 단위로 콘텐츠를 보여주면 사용자가 더 쉽게 스캔할 수 있고, 콘텐츠를 이해하고 기억하는 사용자의 능력이 향상될 수 있습니다. 실제로 청킹은 ‘더 큰 전체’의 맥락에서 의미 있고 시각적으로 구분되는 콘텐츠 단위를 만드는 것입니다.
텍스트 콘텐츠 청킹하기
사용자는 청킹된 텍스트 콘텐츠를 좋아합니다. 청크는 부담스럽거나 시간이 오래 걸릴 수 있는 텍스트 벽*을 피하는 데 도움이 됩니다. 청킹을 사용하면 사용자가 선호하는 온라인 읽기 방식인 스키밍*을 쉽게 할 수 있습니다.
텍스트 콘텐츠를 청킹하는 데 가장 일반적으로 사용되는 몇 가지 방법은 다음과 같습니다:
- 공백으로 구분한 짧은 단락(50자 내외)
- 짧은 텍스트 줄(약 50~75자)
- 관련 항목을 함께 그룹화한 명확한 시각적 계층 구조
- 비밀번호, 라이선스 키, 신용카드 또는 계좌 번호, 전화번호, 날짜 등의 문자 또는 숫자 문자열로 뚜렷한 그룹화(예: 14487324534 vs 1 (448) 732 4534)
* 텍스트 벽(walls of text): 하나의 페이지에 공백이나 디자인 요소, 색 변화 없이 텍스트만 빽빽한 화면을 지칭하는 웹 디자인 용어예요.
* 스키밍(skimming): 글의 내용을 빠르게 파악하는 것에 초점을 맞춘 독해법을 의미해요.
사용자 실수를 최소화하기 위해 청킹된 문자열은 각 데이터 유형에서 가장 일반적인 형식을 사용해야 합니다. 예를 들어 신용카드 번호는 일반적으로 4자리씩 4개 청크로 표시됩니다(예: 4111111111111111 대신 4111 1111 1111 1111). 일부 문자열의 표준 형식은 국가마다 다를 수 있으니 조심하세요.
|
|
|
서식을 지정하면 스캔 가능성은 향상되지만 타이핑이 더 어려워집니다. 사용자가 서식 문자를 입력할 필요 없이 양식에 자동 서식을 사용해 입력 필드가 자동으로 사용자의 입력을 청킹해야 합니다.
|
|
|
Apartments.com: 이 부동산 웹사이트의 문의 양식은 가장 위에 있는 중개업소 전화번호를 적절하게 청킹해두었습니다. 또 사용자가 숫자를 입력하면 전화번호가 자동으로 청킹됩니다.(단, 레이블은 인풋 박스 안에 쓰지 않는 것이 좋습니다.)
단순히 텍스트를 청크로 묶는 것만으로는 충분하지 않으며, 청크의 요점을 빠르게 식별할 수 있도록 사용자의 텍스트 스캔을 도와야 합니다. 아래 나오는 방법으로요:
- 나머지 텍스트와 명확하게 대비되는 제목과 부제목(볼드, 크게 등)
- 강조 표시된 키워드(볼드, 이탤릭 등)
- 불릿 또는 숫자 목록
- 아티클과 같이 긴 텍스트 섹션에는 짧은 요약 쓰기
|
|
|
ApartmentGuide.com: 부동산 검색 엔진 홈페이지의 이 텍스트 벽에는 텍스트는 길면서 강조 표시도 부제목도 없습니다. 어떤 사용자는 청킹되지 않은 이 텍스트 벽을 보고 "여기 글씨가 너무 많아요. 저는 여기에 관심이 없어요. 지저분해 보이거든요."라고 말하더군요. 이 사용자가 이 페이지를 설명하는 데 사용한 단어는 세 개였습니다: "바쁘다(busy)", "장황하다(wordy)", "반갑지 않다(unwelcoming)"
|
|
|
BBC는 짧은 단락, 많은 공백, 부제목, 짧은 요약을 사용하여 기사를 짜임새 있게 구성합니다. 또한 각 주제 소제목에는 관련 사진과 옅은 구분선이 있어 섹션 간 구분을 더욱 명확하게 해줍니다. 한 사용자는 몇 초 동안 페이지를 훑어본 후 "아주 잘 나뉘어져 있네요. 분명 읽기 쉬운 글이에요. 기사에서 다루는 다섯 가지 주제가 무엇인지 말하고 이를 잘 나누어 설명했습니다."라고 말했어요. 그런 다음 그녀는 실제로 기사 전체를 읽었습니다. 그건 그녀의 말보다 이 기사 성공적인 청킹에 대해 더 많은 걸 말해줍니다.
|
|
|
멀티미디어 콘텐츠 청킹하기
멀티미디어 콘텐츠(텍스트는 물론 이미지, 그래픽, 동영상, 버튼 및 기타 요소)를 효과적으로 청킹하기 위한 핵심은 게슈탈트 심리학의 근접성의 법칙에 따라 관련 있는 것들을 서로 가깝게 배치하고 정렬하는 것입니다. 배경색, 구분선, 공백을 쓰면 사용자가 관련 있는 내용과 그렇지 않은 내용을 시각적으로 구분하는 데 도움이 됩니다.
|
|
|
메일침프의 미니멀한 디자인은 청크를 표시하는 미묘한 방법에 의존합니다. 부제목과 아래 문단이 가까이 붙어 있어 명확한 연관성이 드러납니다. 소제목과 아래 문단에는 같은 너비가 적용되어 보이지 않는 정렬을 만듭니다(모두 500px 너비의 HTML 컨테이너에 배치됨). 한눈에 어떤 텍스트가 중간에 있는 스크린샷을 설명하는지 구분하기 어렵습니다. 좀 더 자세히 보면 이미지가 맨 위 단락에 더 가깝다는 것을 알 수 있습니다.
다른 유형의 콘텐츠(예: 동영상 또는 그래픽)도 청킹할 수 있습니다. 청킹의 기본 개념은 정보를 유사한 것끼리 명확하게 구별되는 그룹으로 나누는 것임을 기억하세요. 동영상 콘텐츠를 예로 들면, 내용을 챕터 또는 주제별로 청킹해서 개별적으로 접근할 수 있게 함으로써 사용자가 영상 콘텐츠를 쉽게 탐색할 수 있도록 할 수 있습니다. 또는 복잡한 애플리케이션 툴바에서 관련 툴을 그룹화하여 사용자가 해당 툴을 어디서 찾을 수 있는지 기억하도록 할 수도 있고요.
|
|
|
TED.com: 테드의 인터랙티브 대본은 긴 영상을 탐색 가능한 개별 세그먼트로 분할합니다. 사용자는 텍스트를 스캔해 동영상의 다른 지점으로 이동할 수 있습니다. 하지만 이 대본의 아쉬운 점도 있어요. 소제목과 강조 표시된 텍스트로 각 청크의 주요 아이디어를 강조하고 사용자의 콘텐츠 탐색을 더 잘 지원하는 기회를 놓친 것이죠.
신화적인 숫자, 7
인지심리학자 조지 밀러로 인해 유명해진 '마법의 숫자 7'에 대해 들어보셨을 것입니다. 1956년 밀러는 대부분의 사람들이 단기 기억에 약 7개의 정보 덩어리를 기억할 수 있다는 사실을 발견했습니다. 하지만 밀러가 흥미를 느낀 건 숫자 7 자체가 아니었습니다. 바로 청크의 길이는 중요하지 않다는 것, 그러니까 7개의 개별 글자를 기억할 수도, 4글자씩 7개 그룹으로 묶인 28개의 글자를 기억할 수도 있다는 사실이었지요.(전자의 경우 서로 관련이 없는 글자 하나하나가 덩어리로 계산되는 반면, 후자의 경우 각 단어가 덩어리로 계산됩니다.)
사용자 경험 분야에서 밀러의 마법의 숫자 7은 인간이 한 번에 7개의 청크만 처리할 수 있다는 의미로 오해되는 경우가 많습니다. 그 결과, 혼란스러운 디자이너는 이 사실을 오용해 불필요한 디자인 제약을 정당화하기도 합니다.
예를 들어, 디자이너는 마법의 숫자 7을 위반할까 봐 글로벌 내비게이션 바(GNB)에 옵션을 7가지 이상 추가하지 않으려 할 수 있습니다. 그러나 메뉴의 핵심은 기억보다 인식에 의존하는 것입니다. 사용자는 사용 가능한 옵션이 끊임없이 화면에서 나타나는 것을 보게 되므로, 모든 메뉴 항목을 단기 기억에 저장할 필요가 없습니다. 따라서 메뉴 항목 수를 7개로 제한한다고 해서 사용성이 향상되는 것은 아닌 것이지요. 옵션이 의미 있는 방식으로 구성되어 있다면 7개 이상의 선택 항목이 있어도 메뉴를 쉽게 사용할 수 있습니다.UX 전문가를 위한 밀러의 연구에서 얻을 수 있는 시사점은 다음과 같습니다: 인간의 단기 기억력은 제한되어 있으므로 사용자가 더 많은 정보를 기억하도록 하려면 정보를 의미 있는 덩어리로 묶어야 합니다. 사용자에게 한 번에 여러 정보를 단기 기억에 저장하도록 요구하지 마세요. 또, 7이라는 숫자에 집착하지도 마세요. 밀러는 자신의 논문 제목을 "마법의 숫자 7, 플러스 또는 마이너스 2: 정보 처리 능력에 대한 몇 가지 한계"라고 지었습니다. 다른 연구자들은 적절한 숫자는 3에서 6 사이 정도라고 제안했고요.
단기 기억의 평균 용량이 얼마인지는 모르지만, 사람마다 구체적인 용량은 다를 수 있습니다. 한 번에 많은 정보를 메모리에 저장해야 하는 개발자의 경우 '7+1' 또는 '7+2' 유형에 속할 수 있겠네요.(사실 프로그래밍을 한다고 두개골에 무리가 갈 정도로 뇌가 커지는 건 아닙니다. 오히려 두뇌 용량이 큰 사람들이 많은 정보를 기억해야 하는 직업에 매력을 느끼는 거예요.) 반대로 많은 사람이 '7-1' 또는 '7-2'에 해당하는 사람일 수 있으며, 이는 기억하기 쉬운 것을 기억하는 데에도 큰 어려움을 겪을 수 있음을 의미합니다. 단기 기억력의 한계는 사용자의 맥락(context), 즉 사용자가 인터페이스를 사용하는 동안 어디에 있는지, 주변에서 어떤 일이 일어나고 있는지에 따라 영향을 더 받을 수도 있습니다. 이는 개인이 느끼는 디자인의 쉬움 또는 어려움만으로 사용성을 판단해서는 안 되는 중요한 이유 중 하나입니다.
|
|
|
hp.com: 이 사이트는 사용자가 각 청크(각 노트북)를 시각적으로 구별할 수 있도록 옅은 배경색과 공간 분할(negative space)을 쓰고 있지만, 한 페이지에 옵션을 21개나 표시하고 있습니다. 그건 잘 들어맞는 결정(21개 표시)인데, 사용자는 아마 이 페이지에서 검색 기능을 이용하거나 여기저기 돌아다닐 것이고 그들이 개별 노트북을 일일이 기억할 필요가 없기 때문입니다.
결론
청킹은 사용자가 콘텐츠를 쉽게 이해하고 기억하는 데 매우 중요합니다. 텍스트와 멀티미디어 콘텐츠 모두에 청킹을 사용함으로써, 사용자가 정보들 간의 기본 관계와 계층 구조를 이해하는 데 도움이 됩니다. |
|
|
이 글을 쓴 Kate Moran ✍️
Kate Moran은 IBM에서 콘텐츠 매니저, 프론트엔드 개발자를 거쳐 현재 닐슨 노먼 그룹에서 리서치&콘텐츠 부서의 부 리드로 일하고 있어요. 닐슨 노먼 그룹에 9년 가까이 일하며 다양한 UX 강의 영상과 아티클을 만들었어요. |
|
|
오늘 뉴스레터 어땠나요?
캡처프레이즈 모아보기
|
|
|
캡처프레이즈를 만드는 사람들
🤸 신비 🙉 숀 🔥 쑤 👻 점점 |
|
|
협업 문의: capturephrase@gmail.com |
|
|
헤어지게 되어 아쉬워요.
다시 만날 수 있겠죠?
|
|
|
|
|
