김 관식님의 아티클 더 보기

UI/UX

모바일 UX 라이팅, ‘작성’, ‘취소’처럼 구체적인 행위를 알려주세요

모바일 텍스트 디자인을 고려한 최적의 UX 라이팅

모바일이 대세라고 하지만 사용자 경험에 맞춘 UX 라이팅의 길은 멀기만 하다. 마침 UX 전문 블로그 모바일스푼(www.mobilespoon.net)를 운영하고 있는 UX interface 전문가 Gil Bouhnick 씨는 자신의 블로그에 모바일과 스마트워치를 감안한 UX 라이팅을 공개해 큰 반향을 불러일으킨 바 있다. 모바일 UX 라이팅으로 머리를 싸매고 있는 이가 있다면 큰 선물이 될 것으로 믿는다.

UX 라이팅을 위한 몇 가지 고급 테크닉

<이미지 1>

텍스트 문제는 종종 디자인 문제를 나타낸다. 텍스트 작업을 일찍 수행해야 한다. 그리고 간결하게 작성한다. 여기서 기억해야 할 것은 누구나 ‘쓰기는 쉽다’. 그러나 당신이 해야 할 일은 ‘틀린 말, 가독성을 해치는 말을 없애는 것’임을 기억하자. 짧고 강렬한 메시지도 좋지만 더 중요한 것은 그 안에 담고자 하는 의미가 있어야 한다. 너무 심각하거나 너무 기술적으로 작성하지 말자. 사용자와 대화를 나눈다는 심정으로 임하자.

일관성의 문제, 이제는 필수

<이미지 2>

모바일 앱에서 펼쳐지는 메시지의 일관성을 살피고 또 살핀다. 작성할 때는 잘 모른다. 검토할 때 눈에 거슬리는 부분은 과감히 도려내자. 브랜드에 충성도를 유지하되 일관된 용어를 사용하자. 더러 어느 곳은 한글, 그 다음 줄은 영어, 그리고 띄어쓰기도 통일해야 한다.
글의 톤도 중요하다. 일관된 톤을 유지하도록 해야 하며, 이는 감정선으로 나타나 UX 라이팅에 큰 영향을 미친다. 권유나 추천할 때의 톤은 정중하게 이어가고, 사용자가 다소 편안하게 받아들 일 수 있는 안내 문구 등에는 익살스럽게 라이팅해도 좋다. 정확한 사물의 이름이나 확실히 정해져 있는 서비스 문구 등도 일관성 있게 문장에 녹여내야 한다.

아무에게나 알려주지 않는 몇 가지 마이크로카피 기술

<이미지 3>
<이미지 4>

명확한 텍스트를 작성하되, 짧고 간단한 문장을 지향한다. 숫자가 관련된 경우 숫자를 사용한다(<이미지 3>의 우측3). 가능하다면 <이미지 4>처럼 날짜 대신 어제, 오늘, 내일이라는 단어를 사용하자.

<이미지 5>
<이미지 6>
<이미지 7>

버튼 텍스트를 명확하게 전달한다. 막연히 ‘예’, ‘아니요’보다는 ‘작성’, ‘취소’처럼 구체적인 버튼의 동작을 명시하는 편이 효과적이다. 올바른 텍스트는 소소한 마찰과 고민을 줄여준다. 또한 CTA 버튼 텍스트를 줄이는 대신 헤더와 결합해 선명한 메시지 전달에 집중한다. 오류 메시지를 녹여내야 할 때는 ▲무엇이 문제인지 ▲왜 그런 일이 있었는지 ▲그것을 해결하는 방법은 무엇인지 순서에 따라 펼쳐놓는다.

<이미지 8>
<이미지 9>

처음부터 현지화를 감안해야 한다. 독일어의 단어는 영어 단어보다 약 200% 더 길어질 수 있다. 되도록 화면에서 여유공간을 유지해 더욱 긴 단어를 호스팅할 수 있는지 확인해야 한다. 긴 블록의 글을 피하고 일정한 글 간격을 유지하자. 텍스트가 너무 표준 여백 좌우 가까이 치우치지 않도록 하며, 글 간격을 유지해 눈에 잘 띄도록 한다.

<이미지 10>
<이미지 11>

텍스트 정렬도 주의해야 한다(<이미지 10>). 가운데 정렬은 짧은 섹션이나 가상 구분 기호로 알맞다. 왼쪽 정렬은 읽기 쉬우므로 긴 문장에 유용하다. 또 마지막 단 한 글자, 짧은 문장은 윗줄로 올려 맞춘다(<이미지 11>). 화면의 크기와 색상에 대비해 글꼴도 신중해야 선택해야 한다. 여기서 집고 넘어가야 할 것은 텍스트의 크기와 행간 등을 고려한 레이아웃이다. 모바일 화면을 띄어놓고 가독성이 가장 좋은 부분을 최우선 반영한다.

<이미지 12>

<이미지 12>번처럼 텍스트가 너무 길거나 짧은 선은 자칫 피곤하고 산만한 느낌을 사용자에게 줄 수 있다. 각 줄의 너비를 최적화하고 40~80자 내외로 구성한다. 전체 앱 디자인에서 모든 텍스트 블록의 여백을 동일하게 가져가는 것도 기억하자.

너무 많은 폰트, 한 번에 토해내지 않기

<이미지 13>
<이미지 14>

<이미지 13>처럼 세 가지 이상의 너무 많은 글꼴을 한 화면에서 사용하면 무게감이 떨어지고 시선이 분산된다. 한두 가지 정도의 서체만으로 제목과 본문을 구분해 사용하는 것이 실용적이다. 헤드라인도 굳이 굵게 표현할 수 있겠지만 자연스레 본문에 녹일 수 있도록 서체를 고정하는 것이 좋다. 또한 <이미지 14>의 왼쪽 이미지처럼 본문의 검은색의 굵은 서체는 눈의 피로도를 증가시키기 때문에 검은색보다는 어두운 회색을 권장한다. 너무 많은 색을 섞어 사용하되, 화려한 영상을 사용하고 텍스트를 깨끗하게 유지하는 데 중점을 둔다. 굵은 글꼴을 사용하기보다는 글꼴을 키우되, 주요 단어만 적용해도 가독성이 살아난다.

모바일 사용자를 위한 사용성 테스트는 반드시 실제 모바일 장치에서 검토하고 테스트해야 한다. 가능한 한 많이 시도할수록 좋다. 항상 디자인 파일을 백업해두는 습관도 필요하다. 오타 혹은 긴급하게 변경해야 할 때 새버전의 모바일 앱을 출시하지 않고도 사본을 변경할 수 있어야 한다. 특정 성별을 사용하지 않고 사용자를 지칭하기 위해서는 ‘그들’로 칭호하며 올바른 용어를 사용하고 전문용어를 지나치게 사용하는 것을 줄여야 사용자에게 최적화된 모바일 UX 라이팅을 지향할 수 있다.

자료협조. UX 전문 블로그 모바일스푼(www.mobilespoon.net)
글. 김관식 기자