brunch

매거진 UX 디자인의 모든 것

라이킷 84 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 11. 2016

문구를 디자인하는 UX 7가지 팁

UX 디자인 배우기 #34

Today UX 아티클

Medium에 게재된 John Saito의 글 Howto design words를 소개하고자 합니다.

글쓴이는 드롭박스에서 문구를 디자인하는 일을 담당하고 있다고 합니다. 사실 그는 어릴 때부터 ‘읽는 것’을 싫어했는데 이런 약점이 앱이나 웹사이트의 인터페이스 텍스트를 쓰는 일을 하는데 도움이 되었다고 합니다. 인터페이스 텍스트를 쓰는 것은 디자인에 훨씬 가까운 것으로, 읽기 싫어하는 사람들을 위해 디자인하는 것이라고 합니다.

사람들은 인터페이스를 읽지 않는다

사람들은 웹을 읽지 않는다는 건 이미 수많은 연구 결과가 보여준 결과라고 합니다. 앱이나 게임 등 유저가 상호작용하는 모든 스크린에서도 마찬가지라고 합니다. 대부분은 훑어보고 여기저기서 단어를 골라서 본다고 합니다.

얼마나 많은 사람들이 “Contunue”를 클릭하는지 알면 놀랄 것이라고 합니다.

글을 얼마나 잘 쓰느냐와 상관없이 유저는 읽지 않기 때문에, 인터페이스에 문구를 써넣을 때 그냥 막 쓰고 복사해서 붙여 넣으면 안 된다고 합니다. 만일 어떤 액션을 몇 개의 단어로 설명할 수 없다면 디자인이 너무 복잡하다는 뜻일 수도 있다고 합니다. 바꿔 말하면, 의미 없는 글들로 공간을 채워 넣으면 안 되고 문구도 디자인해야 한다고 합니다.

문구를 디자인하는 7가지 팁

글쓴이는 인터페이스 라이터(interface writer) 경험을 살려 문구를 좀 더 읽기 쉽게 만드는 팁을 7가지 제시하고 있습니다.

줄인다

사람들이 읽을 수 있도록 돕는 데 가장 중요한 것은 텍스트를 ‘줄이는 것’이라고 합니다. 초안을 작성한 후에 다듬고, 다듬고, 또 다듬어야 한다고 합니다. 디테일은 잘라내고, 간단한 단어를 사용하고, 바로 요점으로 들어가야 한다고 합니다. 가차 없이 쳐내야 한다고 합니다.

텍스트를 줄일수록 읽을 가능성은 올라갑니다.

제목(headings)을 추가한다

더 이상 텍스트를 줄일 수 없을 때는 텍스트를 단어 몇 개로 요약하여 제목을 만들 수 있는지 생각해보라고 합니다. 유저가 찾고 있을 것으로 예상되는 키워드를 사용하라고 합니다. 그럼 유저가 더 알고 싶은 경우에 읽어볼 것이라고 합니다.

제목은 콘텐츠를 더 훑어보기 쉽게 만들어 줍니다.

리스트를 만든다

웹 페이지를 볼 때 우리 눈은 위아래로 훑어보는 경향이 있다고 합니다. 때문에 문단보다는 리스트가 더 읽기 쉽다고 합니다. 문단에 “그리고” 혹은 “또는”이 많이 쓰였다면 리스트로 바꿔보라고 합니다.

리스트가 더 읽기 쉽쉽니다.

쉼을 준다

콘텐츠가 많은 앱 같은 제품은 문단이 많아 계속 읽다 보면 읽기가 힘들어지는 경우가 있다고 합니다. 많은 내용을 담아 글을 쓸 때는 행 바꿈, 이미지, 제목 등의 ‘시각적 휴식(visual relief)’을 더해서 끊어주는 것이 좋다고 합니다. 그럼 사람들이 숨을 쉴 수 있고, 필요한 부분인지 넘어갈 부분인지 생각할 수 있다고 합니다.

시각적 휴식처를 중간 중간 뿌려줍니다.

문구의 우선순위를 정한다

단어 선택만큼 중요한 것이 어떻게 문구를 보여줄지 정하는 것이라고 합니다. 문구를 디자인할 때는 스크린상에서 가장 중요한 문구가 무엇인지, 덜 중요한 것을 어떻게 덜 강조할 것인지 생각해봐야 한다고 합니다. 즉, 시각적 계층 구조(visual hierarchy)를 정하는 것입니다.

폰트 비중, 사이즈, 색상, 타이포그래피, 대소문자 사용, 자간, 정렬, 움직임 등은 모두 사람들이 문구를 읽을지 말지에 영향을 미치는 것이므로 잘 고려해야 한다고 합니다.

어떤 것이 더 읽기 쉬운가?

천천히 드러낸다

유저에게 무언가 하는 방법을 교육하고자 할 때, 그냥 안내문을 던져주면 사람들은 읽지 않을 것이라고 합니다. 대신 두 가지 방법이 있다고 합니다. 하나는 정보를 쪼개서 단계별로 조금씩 보여주는 것이라고 합니다.

텍스트가 너무 많은가?조금씩 보여줘보자.

또 다른 방법은 좀 더 세부적인 정보는 제거하고 도움말로 연결해주는 링크를 걸어주는 것이라고 합니다. 많은 제품에서 “Learn more” 링크를 만들어 링크를 클릭하면 핵심적인 세부사항을 정리한 문서로 연결한다고 합니다.

문서작성 툴 말고 목업 툴로 작성한다

인터페이스에 넣을 문구를 쓸 때는 전체 맥락을 보는 것이 대단히 중요하다고 합니다. 다른 것들과 함께 문구가 어떤 조화를 이룰 것인지 봐야 하기 때문에 구글 독스나 드롭박스 페이퍼 같은 문서 작성 앱을 이용하지 말고 목업 툴로 작성하는 것이 좋다고 합니다. 그러면 문구 작성 의사 결정을 내리는 데도 도움이 된다고 합니다.