좋아 보이는 UX Writing의 비결 2
2. 글자가 돋보이는 디자인
좋아 보이는 UX Writing 시리즈로 콘텐츠 포맷을 강조하던 지난 글에 이번에는 콘텐츠가 돋보이는 디자인을 다뤄 보려 한다.
콘텐츠 형태가 영상, 이미지로 다변화되고 있다지만 핵심 정보를 전달하는 도구로서 글자의 중요성은 과소평가할 수 없다. UX Writing의 황금률인 simple, clear, concise는 글자의 내용을 규정하지만 이 글에서는 지난 글에 이어 글자가 담기는 틀에 초점을 맞추려고 한다. (simple, clear, concise 원칙은 하나 하나가 세밀한 연구가 필요한 내용이니 추후에 자세히 다룰 예정이다.)
내용이 아닌 틀에 초점을 맞출 예정이므로 '어떻게 써야 핵심을 잘 전달할까?", "어떻게 써야 사용자 필요가 충족될까?"에 대한 답을 주지는 못한다. 대신 '이 글자가 화면에서 얼마나 잘 보일까?'하는 "물리적인 주목도"를 다룰 것이다.
그럼 이제부터 글자가 돋보이는 디자인 요소에 대해 살펴보자.
들어가며
지난 글에서 "명예의 전당"으로 선정한 토스의 화면을 계속 활용한다.
이미지 출처. 토스"누가 글자를 읽어요" 시대에 이미지를 최소화하고 대부분 텍스트로 구성했지만 글자가 눈에 콕콕 잡힌다. 역시나 글자를 드러나게 하는 디자인 요소들이 효과적으로 적용되었다.
글자를 돋보이게 하는 디자인 요소들1. 포맷: 포맷을 세우고 반복
2. 여백: 50 % 이상을 차지하는 넉넉한 여백
3. 정보의 하이어아키: 정보들간의 분명한 수직적 관계
4. 폰트 강조: 폰트 강조 도구를 절제하여 사용
5. 비쥬얼 도구: 내용을 보조하지만 압도하지 않는 비쥬얼 도구
그럼 위의 내용을 하나 하나 짚어 보자.
1. 포맷
이 부분은 이전 글, 좋아 보이는 UX Writing 의 비결 1에서 자세히 다루고 있으니 그 글을 참고하기 바란다.
2. 여백
여백이 넉넉하면 글자를 읽기 편해진다.
이미지 출처. 토스, 여백의 비중카피해커스와 겟업리프트에서 발간한 "The Conversion Copywriter's Guide to Persuasive Design" 에서는
여백은 머릿속에서 정보를 처리하는 공간을 제공한다.
고 말한다.
여백은 미적인 깔끔함을 넘어 읽은 글자들을 머릿속에서 처리할 여유를 제공함으로써 가독성을 높인다.
'짧게 쓰자', '긴 정보를 여러 개의 짧은 단락으로 나누자'는 의미는 '사용자가 긴 글을 잘 읽지 않는다', '핵심을 담자'는 의미가 가장 크지만, 이를 통해 여백을 확보할 수 있다는 측면에서도 중요하다.
위의 토스앱에서 텍스트 공간과 여백 공간을 비교해 보자.
이미지 출처. 토스, 텍스트 공간 vs 여백 공간여백을 표시한 상자와 동일한 크기의 상자를 넣었더니 텍스트 공간과 여백 공간이 정확히 반반을 차지하는 것을 볼 수 있다. 글자와 여백 사이의 간격을 감안하면 빈 자리는 50%를 넘어선다.
다른 핀테크 앱들은 여백이 얼마나 되는지 살펴보자.
디지털 문법에 강한 신생 핀테크 기업들은 핵심만 간단히 전달함으로써, 또는 구획 분할을 통해 비교적 넓은 여백을 확보했다.
전통 금융 기업의 앱들도 보자.
글자들이 좀더 많다는 느낌은 들지만 이 화면만으로 신생, 전통 기업으로 분류할 만큼 확연한 차이라고 보기는 어렵다.
여백은 다른 콘텐츠로 시선이 분산되는 것을 막아주기 때문에 정보가 더 눈에 잘 띄게 만든다.
물론 여백을 위해 필요한 내용까지 다 지워버리라는 말은 아니다. 그보다는 '이 내용이 정말 사용자에게 필요한가?', '핵심만 담았는가?', '이 글자가 꼭 필요한가?' 등과 같은 고민에 더 가깝다고 할 수 있다.
콘텐츠 디자인의 선구자이자 존경하는 재니스 래디쉬 여사님이 콘텐츠 디자인에 대해 하신 말씀을 한 시도 잊지 말자.
CUT! CUT! CUT!
또 이렇게 덧붙이신다.
Ruthlessly Cut!
3. 정보의 하이어아키
카피해커스와 겟업리프트의 "The Conversion Copywriter's Guide to Persuasive Design" 에서는
텍스트에 비쥬얼 하이어아키를 부여하라.
사람들은 더 크고 진한 것에 눈길을 준다.
따라서 명확한 비쥬얼 하이어아키는
사람들이 훑어 보기 쉽게 만든다
토스앱에서는 정보의 하이어아키를 부여하기 위해 어떤 디자인을 적용했는지 분석해보자.
이미지 출처. 토스이 섹션에서 정보의 수직 계열은 레벨 1에서 3까지 존재한다. 정보의 레벨을 변별하기 위해 적용한 디자인 요소는 다음과 같다.
이미지 출처. 토스레벨 1 정보는 가장 큰 검은색 볼드체
레벨 2 정보는 레벨 1보다 작은 검은색 볼드체
레벨 3 정보는 레벨 2보다 작은 회색
군복만 보며 계급을 알 수 있는 것처럼 화면에 표시되는 형태로 특정 텍스트의 레벨을 정확히 알 수 있다. 정보의 수직 구조를 위한 디자인 가이드라인이 존재하고, 일관되게 적용하고 있다는 반증이다.
이미지 출처. 토스, 정보 하이어아키 디자인카카오뱅크도 살펴보자. 카카오뱅크의 상품/서비스 섹션으로 들어가면 아래의 콘텐츠 포맷이 반복된다.
이미지 출처. 카카오뱅크정보의 수직적 구조는 레벨 1에서 3까지로 나뉜다. 여기에 레벨 2의 정보를 부가적으로 설명하는 레벨 2 변형이 존재한다.
정보의 레벨을 규정한 가이드라인은 다음과 같다.
이미지 출처. 카카오뱅크1 레벨 정보는 가장 크고 진하다.
2 레벨은 상위 레벨보다 크기가 작고 진하다.
3 레벨은 2레벨보다 작은 회색이다.
레벨 2 변형은 레벨 2와 형태적 가중치는 비슷하고 파란색을 사용한다.
콘텐츠의 전체 섹션에 걸쳐 하이어아키 가이드라인이 일관되게 적용되어 이 화면에서도 정보들의 '계급'을 바로 파악할 수 있다.
핀트의 정보 하이어아키 디자인은 어떨까.
이미지 출처. 핀트가장 윗 줄에 주 메뉴가 보이고 그 아래 정보 배너, 또 그 아래로 입출금 관리, 투자 관리와 같은 서비스 항목들이 열거된다. 수직적 구조가 확 드러나는 대신 각개의 분리된 기능들이 나란히 열거된 듯이 보인다. 콘텐츠의 구조와 성격이 드러나지 않으니 이 화면에서 할 수 있는 것을 알아보기 위해 하나 하나 내려봐야 한다.
화면의 주요 기능으로 파악되는 콘텐츠 영역 하나를 불러본다.
이미지 출처. 핀트입출금 관리라는 상위 정보가 입금, 출금, 연결계좌와 같은 하위 정보보다 작고 흐리다. 상위 카테고리는 잘 보이지 않고 볼드체로 강조된 하위 항목들만 도드라져 길게 나열되고 있다.
이미지 출처. 핀트만약 '모의투자'라는 항목을 찾아야 한다면 나는 어떤 카테고리로 가야 하나? 카테고리가 눈에 띄지 않으니 긴 목록을 하나 하나 내려가며 찾아볼 도리 밖에 없다.
신한카드앱의 서비스 카테고리도 살펴보자. 여기에서도 정보들의 수직적인 구조는 보이지 않고 서비스 항목이 병렬적으로 나열된다.
이미지 출처. 신한카드콘텐츠의 "유형"은 파악할 수 있으나 각각의 글자들이 어디에 속하고 어떻게 묶이는지 유기적인 관계가 보이지 않는다.
이미지 출처. 신한카드주목도 높은 몇 개의 글자들을 캡쳐해보자.
이미지 출처. 신한카드이 글자들에 미세한 디자인적인 차이는 있으나 관계가 보일 만큼 확연하지는 않다.
"이벤트" 항목은 NEW&HOT에 포함되는가? 하위의 서비스 목록에 포함되는가?
"이벤트"라는 글자에 파란색을 쓴 것은 그 아래 항목들과 성격이 다르다는 뜻인가? 아니면 열거된 항목 중에서 이것이 가장 중요하다는 뜻인가? "인기/추천카드" 항목이 이 리스트에 포함되는 것이 맞나?
정보들의 하이어아키가 디자인으로 분명히 드러나지 않으면 콘텐츠를 이해하기 어렵다. 또한 정보가 그룹으로 묶이지 않고 개별적으로 존재하기 때문에 화면을 스캐닝하기도 어렵다. 따라서 정보를 찾는 데에 더 오래 걸리거나, 찾지 못하고 그 화면을 떠난다.
4. 폰트 강조 도구
폰트 강조 도구란 '다른 텍스트에 비해 이 텍스트가 좀더 중요하다'라고 알리는 디자인적인 장치이다.
겉으로 보이는 모습은 하이어아키와 비슷해 보일 수 있지만 다르다. 하이어아키는 정보들의 수직적 관계를 보여주기 위해 상위 레벨의 정보를 하위 레벨의 정보보다 더 비중을 크게 만드는 것이고, 폰트 강조는 수평적인 항목들 중에서 한 항목을 다른 항목들보다 중요하다고 강조하는 것이다.
많이 쓰는 디자인으로
1) 볼드체
2) 다른 색상
3) 아이콘
4) 느낌표 등의 문자 기호
5) 혼합
이 외에도 밑줄, 글자 크기, 배경색 등의 다양한 방식이 존재한다.
중요한 알림이나 정보가 있을 때 텍스트를 강조할 필요가 있다. 문제는 과도한 사용이다. 나를 봐달라고 아우성치는 글자들 속에서 정작 중요한 내용이 묻힌다.
일반인 안에 있는 미녀는 쉽게 알아챌 수 있다. 하지만 그 미녀가 모델 대회에 나가 다른 모델과 함께 있으면 어지간해서는 눈에 띄지 않는다. 경쟁의 현장에서는 기준선이 계속 올라가다 어느 순간 최상급이 기준이 되어 버린다. 모든 글자들이 강조 도구를 공유하다 모두가 공멸하는 공유지의 비극이 벌어지는 것이다.
'낄끔하다'는 앱을 보면 짧고 내용이 간결할 뿐만 아니라 강조 도구 또한 담백하게 사용했음을 볼 수 있다.
이미지. 토스앱비쥬얼적인 장치만 간결하게 이용할 뿐 수직적인 관계를 보여주는 텍스트 디자인 외에는 그 어떤 텍스트 강조 장치를 사용하지 않는다.
카카오뱅크도 마찬가지다.
이미지 출처. 카카오뱅크부가적으로 강조하고 싶은 콘텐츠는 배너 형태로 분리했다. 이 배너들도 일관된 가이드라인에 따라 움직인다.
나는 텍스트를 강조할 때 꼭 필요한 곳에만, 한 가지 방식만, 일관되게 쓰는 것을 추천한다. 불가피한 상황이나 서비스가 복잡한 경우라면 두 가지까지 괜찮다. 세 가지를 넘어가는 순간부터 본질은 안보이고 겉모습만 보이는 화면이 등장하기 시작한다.
왜 나의 금쪽같은 자식(콘텐츠)들을 치열한 경쟁의 장으로 내모는가. 평소 제 역할을 잘 하게 놔두었다가 정말 드러내야 할 필요가 있을 때 반 발짝만 앞으로 내보내자. 이것으로 충분하다.
5. 비쥬얼 도구
비쥬얼 도구는 텍스트의 의미를 보조하기 위한 이미지 장치를 의미한다.
토스앱에서는 비쥬얼 장치를 어떻게 활용할까.
토스는 텍스트 앞에 글머리 기호처럼 텍스트 내용에 해당하는 아이콘을 사용했다.
이미지 출처. 토스대체로 글자와 아이콘 내용이 일치한다. 이미지만 보고도 내용을 짐작할 정도의 명료함을 추구하는 대신 예쁜 글머리 기호같은 역할을 한다. 이미지나 색상이 다양하지만 가독성을 방해하지 않을 정도의 비중이므로 텍스트를 훑는데 무리가 없다. 텍스트만으로 자칫 지루할 수 있는 화면에 생동감을 부여하는 역할을 한다.
애매한 곳은 이 부분이다.
이미지 출처. 토스각 항목 앞에 놓인 색상 아이콘은 막대 그래프의 색과 일치한다.
이미지 출처. 토스그래프를 표기하는 일반적인 관행과 달라 그래프 색과 아이콘 색이 같은 의미라는 사실을 깨닫기까지 시간이 걸렸다. 일반적인 그래프 표기의 관행에 따랐다면 더 빠르게 핵심을 파악했을 것이다.
막대그래프의 일반적인 표기 방식원형 그래프도 이 정보를 담기에 적절해 보이나 전체 화면에서 다른 콘텐츠와의 조화를 반드시 확인해야 할 것이다.
파운트는 비쥬얼 도구를 어떻게 활용하는지 보자.
이미지 출처. 파운트글로벌 테마파크는 대관람차, 추격자는 추격하는 사람, 땅 묻기는 땅을 파는 그림 등 텍스트 키워드와 이미지를 일차원적으로 매칭한다. 이미지가 정보의 본질을 정확히 잡아내지 못한다. 본질을 담지 못한 데 비해 이미지 비중이 커서 텍스트로 가는 시선이 분산된다. 텍스트로 가는 시선을 방해할 정도로 이미지 비중이 크다면 이미지만 보고도 내용을 파악할 수 있을 정도로 좀더 심혈을 기울여 만들어야 옳다. 그렇지 않다면 차라리 이미지를 빼자.
신한카드 서비스 카테고리에서는 아이콘을 다음과 같이 활용한다.
이미지 출처. 신한카드아이콘 하나 하나는 깔끔하고 예쁘지만 텍스트로 가는 시선을 빼앗는다. 게다가 큰 아이콘이 공통된 디자인 요소 없이 줄지어 서있으니 어떤 아이콘도 보이지 않고, 화면만 복잡해졌다.
페이북의 비쥬얼 장치도 보자.
이미지 출처. 페이북일러스트가 이해하기 어렵다. 텍스트와 일대일 매칭조차 안된다. 어떤 의미도 없이 알록 달록한 색상만 화면에 추가한 셈이다.
매우 한정적인 공간을 효율적으로 활용하려면 신중을 기해 비쥬얼 장치를 써야 한다. 꼭 필요한 데에만, 꼭 필요한 만큼, 정확하게 사용하자. 개인적으로 텍스트로 충분하다면 비쥬얼 도구를 사용하지 않거나, 글머리 기호 정도로 간결하게 보여주는 편을 선호한다.
어떤 비쥬얼 도구도 없이 텍스트로만 정보를 구성한 카카오뱅크 화면이다.
이미지 출처. 카카오뱅크나가며
이 글에서는 텍스트가 돋보이는 외형적인 디자인에 초점을 맞춰 보았다. 글을 좋은 틀에 담으면 사용자들은 글의 내용을 더 잘 파악할 수 있고, 따라서 콘텐츠를 더 많이 접할 수 있다. 글을 돋보이게 하는 디자인적인 요소들을 요약해 보면:
1. 포맷: 콘텐츠가 담길 틀을 만들고, 이 틀을 반복적으로 사용하라.
2. 여백: 여백을 넉넉하게 둬서 사용자가 정보를 처리할 수 있는 인지적 여유를 제공하라.
3. 정보의 하이어아키: 정보의 수직적 관계가 명확히 드러나는 디자인 가이드라인을 정하라.
4. 폰트 강조 도구: 지나친 강조를 피하라. 강조가 필요할 때만 절제하며, 통일되게 써라.
5. 비쥬얼 도구: 비쥬얼 도구는 꼭 필요한 때 필요한 만큼만 사용하라.
