웹 디자인 UX 라이팅에서 당신이 알아야할 그 모든 것
이 글은 Gapsy 블로그의 ‘Everything You Need to Know About UX Writing In Web Design’ 을 번역한 글 입니다.
글과 디자인의 만남은 성공적인 사용자 경험과 최적의 사용성을 보장한다.
UI/UX 디자인은 최근 몇년간 지속적으로 성장 해 왔고, 여러 기업의 중요한 직무로 자리매김 했다. 모든 기업은 사용자가 쉽고 편안한 여정을 즐길 수 있도록 좋은 웹사이트를 만들기를 원한다. 그러나 대부분의 사용자들이 웹사이트를 방문하는 이유는 디자인 때문이 아니다. 바로 사이트 속 정보 때문이다. 다시 말해, 색상과 같은 디자인 요소나 사용자 심리학에 기반한 디자인 접근 방법들 모두 텍스트와 조화를 이룰 때만 의미가 있다.
이 아티클은 웹사이트를 위해 고품질의 UX 라이팅을 작성하는 방법에 관심 있는 분들을 위해 작성 되었다.
UX 라이팅이란 무엇일까?
UX 텍스트는 사용자가 사이트, 애플리케이션, 프로그램을 탐색하고 사용할 때 마주 할 수 있는 모든 텍스트를 의미한다.
- Small labels (스몰라벨)
- CTA 버튼
- 아이콘
- 슬로건
- 에러 메세지
- 푸시 알림
- 팁과 가이드 등
UX 텍스트는 사용자의 여정을 따라 가이드 하고, 목적을 달성하고, 경고를 주거나 격려를 북돋아 주는 역할을 한다. 애플워치 에서는 “축하합니다! 오늘의 운동량을 달성했어요!” 라는 UX 라이팅도 옅볼 수 있다.
UX 텍스트는 사용자 경험과 디자인 두 영역 모두에 포함 되어있다.
따라서,
- 이해가 쉽게 되어야하고: 쉽고 직관적으로 읽혀야 한다.
- 짧은 문장: 해당분야에서 필수적인 단어들로 구성 및 작성되어야 한다.
- 유용성: 사용자의 질문에 유익한 답변을 주어야 한다.
- 통일성: 같은 문장 구조와 스타일을 유지해야한다.
인간의 뇌는 텍스트보다 이미지를 60,000배 더 빨리 처리하고, 그렇게 습득한 90 퍼센트의 정보력은 시각적으로 저장된다. 심지어, 단어도 이미지 형태로 데이터를 저장한다. 그래서, 일부 디자이너들은 모든 사용자 인터페이스를 그래픽으로 구축하려는 시도를 하기도 한다.
Facebook(페이스북) 이나 Airbnb(에어비앤비) 같은 거대 기업들도 사용자가 원하는 것을 얻을 수 있도록 돕기 위해, 인터페이스 내 최대한 ‘간결하고 명료한’ 텍스트를 사용하는 방식을 적용하고 있다.
‘140자 글자 수’ 제한을 두고 있는 Twitter(트위터)는 사용자가 자신의 생각과 아이디어를 간결하게 적도록 유도한 최초의 사례다. 사람들은 더이상 많은 글자들을 나열 할 수 없었고 대신, 몇 단어 만으로 아이디어를 표출하는 방법을 배웠다. 결과적으로 짧은 메시지에 익숙하게 된 것이다.
UX 라이터가 하는 일은 무엇일까?
UX 라이터는 제품을 사용하거나, 제품과 상호 작용을 하는 사용자를 돕기 위해 필요한 텍스트를 작성한다. 어떤 회사에서는 동일한 사람이 마케팅과 UX 텍스트를 모두 작성하기도 하여, 두 용어를 교차해서 사용하기도 한다. 하지만, UX 라이팅은 카피 라이팅이 아니다.
카피라이터는 목표 오디언스의 이목을 끌기 위한 아이디어를 내고 텍스트를 작성한다. 반면 UX 라이터는 사용자들이 제품과 보다 쉽게 상호작용 할 수 있도록 텍스트를 작성한다.
UX 라이팅은 제품을 위해 작성되고, 사용자가 제품 인터페이스로부터 대부분을 이해 할 수 있도록 돕는다. 반대로 카피 라이팅은 광고 및 마케팅의 일부로서, 잠재 고객 또는 기존 고객 유지를 위한 작업이다.
UX 라이팅과 카피라이팅은 전혀 다른 목표를 지향한다, 이는 곧 각 분야의 작가들에게 각자의 다른 능력을 요구하기도한다. UX 라이터는 상대적으로 적은 공간 그리고 제한된 글자수가 있지만 웹 또는 앱 디자인 초기부터 관여 한다.
UX 라이터는 타겟 오디언스의 니즈와 불만사항을 정확히 이해하기위해 UX 디자이너와 업무를 함께 진행한다. 가치있고, 일관성있는 마이크로카피를 작성하려면 디자이너처럼 생각하고 사용자 인터페이스 역학 및 구조를 이해할 필요가 있다.
사람들의 행동을 파악하려면, UX 라이터는 사람들을 관찰하고 그들의 얘기를 들어보는 것도 좋은 공부가 될 수 있다. 이러한 관찰을 통해 제품 내에 올바른 단어들로 하여금 UX 라이터가 원하는 행동을 하게끔 만들 수도 있다.
UX 라이팅이 왜 중요할까?
UX 라이팅의 중요성은 아래 두가지 예시에서 볼 수 있다.
- 구글의 UX 라이팅 그룹장(Lead)인 Maggie Stanfil(매기 스텐필)은 당사의 퍼포먼스를 효과적으로 이끈 새로운 프론트앤드(front-end) 라이팅 접근에 대해서 얘기했다. 그의 팀이 찾은 케이스 중에 하나는 호텔예약을 원하는 사용자들을 대상으로 “Book a room (룸 예약하기)” 버튼은 다소 딱딱하게 보일 수 있다고 생각했다. 그래서 그의 팀은 Check Available Options (가능옵션 알아보기) 로 교체하기로 했다. 이 결과, 사용자가 호텔을 찾고 있을때 라이터가 놓치고 있었던 부분을 확인하게 되었다. 이는 고객들이 가능 숙박 날짜 그리고 가격을 함께 고민하고 있다는 것을 알게 되었다.
- 404 오류는 사용자가 어느 사이트를 방문하던 겪을 수 있는 좋지 않은 경험이다. 어떻게 하면 달갑지 않은 결과를 뒤집어서 이점으로 보일 수 있을까? Dribble 이라는 플랫폼은 404 오류를 모아 단색의 장면들로 구성한 애니메이션을 선보인다. 이는 사용자가 색상 팔레트를 전체적으로 볼 수 있게 만들고, 사용자에게 좀 더 밝고 소통 가능한 이미지를 제작하게 되면서 시선을 분산시킬 수 있다. 더불어 사람들의 창의적인 작업물도 볼 수 있게 만든다.
UX 라이팅 팁! 어떻게 하면 더 효과적일 수 있을까?
퀄리티 있는 UX 라이팅의 키포인트는 무엇일까? 당신의 UX 카피가 조금 더 효과적이고 강력하게 보일 수 있는 팁들을 모아두었다. UX 텍스트는 인터페이스의 일부분이다. 두 가지 요소 모두 서로에게 상응될 수 있고, 사용자에게 호소력 있는 전달력이 필요하다.
그러기 위해선,
1) 첫번째 개발 단계에서부터 정확한 텍스트로 답하라!
디자이너들은 인터페이스 작업 시 보편적인 로렘입슘(Lorem Ipsum text)를 사용하는데, 일반적으로 실제 텍스트와 다르다. 정확한 텍스트가 출력되지 않을 수 있는데, 이는 웹디자인을 다시 해야 하거나 텍스트를 다시 써야하는 일이 생긴다.
다시 확인하는 수고스러움을 덜기위해서는 라이터는 사용자 경험 디자인을 처음부터 관여해야한다.
2) 텍스트를 구성하라!
사용자가 쓱 훑어보는 도중 의미를 파악하려면 텍스트의 구조를 잘 나누는 것이 중요하다. 이는 제목과 부제목 그리고 본문이 다른 사이즈의 문단으로 나누어져 스크린의 그림과 잘 어울리도록 배치 되어야한다.
이것은 ASOS(아소스) 앱에서 처럼 보여지는 제품정보이다. 이것은 텍스트가 잘 구성되고 유머러스한 좋은 예시이다.
3) 숫자와 마크로 이목을 집중 시켜라!
만약 숫자와 텍스트가 있다면 숫자를 먼저 등장시키는 것이 공간의 구조와 이목을 집중할 수 있는 방법이다.
독자는 우선 숫자에 먼저 집중하고 이를 중요한 정보로 인식하게 된다. 강조할 부분을 분리된 공간에 넣을 수 있다. 필수적인 요소지만 지나치게 이용해서도 안된다.
중요한 의미나 포인트는 볼드체를 사용하거나 표시할 수 있다. 올바른 예시로는 Booking(예약)을 볼 수 있다. 필수적인 수는 숫자 적고, 필수적인 텍스트는 개인 프로필 페이지에서 눈에 띄게 하라.
하지만 중요하게 기억해야할 한가지는, 더 “중요” 한 부분이 있다면, 각각의 흩어진 문단에는 이목이 덜 집중될 수도 있다는 사실이다.
4) 현재형으로 작성하라
광고 및 정보성 텍스트에서 카피라이터는 클라이언트가 정보를 인식 할 수 있도록 특정 날짜를 사용한다. 현시점에서 사용자는 제품과 바로 소통을 하기 때문에 UX 텍스트에서는 오늘/내일/어제 를 명시하는 것이 좋다, 고객이 날짜를 헷갈릴 수 도 있기 때문이다.
5) 기록을 추적하라
일련의 제목과 기타 문장에 한 가지 스타일을 사용하라.
세가지 옵션 중
- 모든 텍스트는 대문자로 써라.
- 또는 각 새로운 단어를 대문자써라 (라틴 문자 독자에게 적절함)
- 문장, 이름 및 제목의 첫 글자를 제외한 모든 글자는 소문자로 쓴다.
가장 중요한 것은 이들 중 하나를 선택해서 전체 웹 페이지와 모든 응용프로그램 창에 붙이는 것이다.
좋은 UX 라이팅의 체크리스트
매끄럽게 (SEAMLESS)
텍스트는 인터페이스를 통해 눈에 거슬리지않고 사용자를 잘 안내해야한다. 영화에서의 편집은 매끄럽고, 일관된 이미지를 만드는것 처럼, 좋은 UX 라이팅은 읽고 이해하는데 많은 시간이 소요되서는 안된다.
정형화 (STREOTYPE)
사용자가 친숙한 시각적 이미지에 라이터의 목소리를 녹여내는 것이 필수적이다. 시각의 패턴을 이해하고 이를 적용하는 것도 중요한 포인트이다.
적절한 인터페이스는 표준 시각적 구조에 구축되어 무엇을 해야할지 생각할 필요가 없다. UX 라이팅도 마찬가지이다. 사람들이 바로 읽었을 때 공통적으로 공감하고 “집에서” 처럼 편안함을 느끼는 단어가 있다.
배려 (CARE)
사용자가 잘못된 비밀번호를 입력하거나 존재하지 않는 페이지에서 겪는 불편한 경험을 최소화 할 수 있다. 대신, 해결책을 제시하거나 상황을 유머러스하게 대처하는 것도 중요하다.
간단하게 (SIMPLICITY)
화려한 단어보다는 기본적이면서 의미전달이 정확한 단어로 대체하는 것이 바람직하다. 한번 시험해보고 싶다면, 6세 아이가 텍스트를 이해할 수 있는지 생각해 보시길 바란다.
글을 마치면서…
UX 라이터는 디자이너의 일을 더 쉽게 만들고, 더 나은 제품을 만드는데 도움이 된다. UX 라이터는 단순히 텍스트 만을 작성하는 일이 아니라 인터페이스를 개선하고 사용자에게 도움이 되는 환경을 구축한다.
UX 라이팅은 디지털 제품 사용의 변화에 대응하여 그 자체로 하나의 학문으로 부상했다. 전통적인 카피라이팅과 UX 디자인 경계에 위치한 UX 라이팅은 제품 개발에서 기본 단계 중 하나가 되었다. 크리에이티브 카피라이팅과 달리, 이미 제품을 사용해 본 경험이 있는 사용자와 함께 작업하는 것을 목표로 한다. 가장 주목해야할 부분은 인터페이스내의 최대한의 편안함을 제공하여 고객들의 기대에 부응하는 것이다.
