구글에서 말하는 UX 라이팅 원칙 3가지

UX 라이팅이란 웹 또는 앱 방문자에게 사이트를 쉽게 사용할 수 있도록 하고 사용자 만족도를 증진시키는 글쓰기를 의미합니다. 본 포스팅에서는 UX 라이팅의 의미와 구글에서 제시하는 UX 라이팅 원칙에 대해 살펴보겠습니다.

UX 라이팅이란?

UX 라이팅이란 웹 또는 앱 방문자에게 사이트를 쉽고 직관적이게 사용할 수 있도록 만들기 위한 글쓰기를 의미합니다. 가령 버튼, 경고창 등에 나오는 글쓰기가 UX 라이팅에 속합니다. UX 라이팅의 목적은 웹 사이트 카피라이팅을 통해 사용자들이 웹 사이트를 사용하는 데 있어, 쉽고 직관적으로 만들어 전체적인 사용자 경험의 만족도를 높이는 데 있습니다. UX 라이팅의 상세한 예시는 다음과 같습니다. 사이트 내 각 요소에 글쓰기가 들어갑니다. 이와 같이 사이트 요소 내 글쓰기를 UX 라이팅이라고 합니다.

  • 버튼의 글
  • 메뉴 글
  • 푸시 알림 글
  • 성공 메시지
  • 오류 메시지
  • 양식 지침
  • 주의사항
  • 404(알 수 없는 페이지) 오류

ex) Gmail에서 메일 삭제 시 구글 UX 라이팅

구글UX라이팅



구글의 UX 라이팅 원칙 3가지

UX 라이팅은 웹 사이트를 보다 쉽게 방문자가 인지하고 숙지할 수 있도록 하는 것, 앱의 오류가 발생했을 때 불쾌한 감정이 들지 않도록 하는 것 등 서비스가 지향하는 핵심 가치를 전달합니다. 따라서, UX 라이터는 웹 사이트에서 사용자와 의사소통을 하는데 목표를 둔다고 할 수 있습니다. 사용자가 공감할 수 있는 문구 및 글쓰기를 진행해야 하고 그들의 불만사항과 필요를 카피라이팅으로 해결할 수 있는 지점까지 가야합니다. 이에 대해 구글은 UX 라이팅 원칙을 3가지 키워드로 정의합니다.

구글의 UX 라이팅 3원칙

  • 사용자 맥락에 맞는 ‘명확성’
  • 글을 읽는 것이 아닌 스캔하기에 필요한 단어를 짧게 말하는 ‘간결성’
  • 별도 안내 메뉴얼 없이 어떤 행동을 해야할지 생각하게 만드는 ‘유용성’

UX 라이팅은 글쓰기라는 행위지만 사용자가 글을 읽는 것이 아닌 전체적인 맥락을 스캔한다는 점에서 구글은 ‘간결성’과 ‘명확성’을 강조합니다. 또한, 별도 메뉴얼 없이 어떤 행동을 할지 생각하도록, ‘유용성’을 가져야 한다고 강조합니다.


구글 매터리얼 디자인 가이드 – 라이팅

구글 매터리얼 디자인 가이드 라이팅에서 제시하는 UX 라이팅 기법은 다음과 같습니다. 원문을 살펴보고자 한다면 [여기]를 클릭해주세요.

글쓰기

  • 글은 문화와 언어에 관계없이 누구든지, 어디서든지 이해하기 쉬워야 합니다.

글쓰기 원칙

  • UI 텍스트는 사용자 인터페이스를 더욱 사용성있게 만들 수 있습니다. 이는 사용자와의 신뢰를 구축할 수 있습니다.
  • 텍스트는 쉽고 정확하고 간결해야 합니다.


1. 간결성

어느 정도 제한된 컨셉에 초점을 맞춰 짧고 스캔 가능한 글쓰기를 해야 합니다.

휴대전화와 함께 제공된 설명서를 읽어보세요자세한 지침은 휴대전화와 함께 제공된 설명서를 참조하세요
(O) 정확한 핵심 메시지에 초점을 맞춘 지침입니다.(X) 설명이 깁니다.
UX 라이팅 – 간결성 예시




2. 직관성

콘텐츠를 이해하기 쉽게 만들어야 합니다. 간단하고 직관적인 언어를 사용해야 합니다.

유권자 등록유권자를 등록해야 투표를 할 수 있습니다.
(O) 현재 행위에 초점을 맞춘 텍스트입니다.(X) 작업을 전달하는 데 필요한 텍스트보다 긴 지침은 불필요합니다.
UX 라이팅 – 직관성 예시

3. 명확성

웹 사이트에 따라 가장 적합하고 명확한 ‘귀하’, ‘여러분’, ‘나’ 등 사용자를 지칭하는 단어를 사용합니다. 상황에 따라 적절하고 명확성에 초점을 맞춰 사용자에게 2인칭(you, your) 또는 1인층(I, my)으로 호칭합니다.

2인칭(you, your) : 마치 사용자에게 옆에서 말하는 것과 같은 상황에 적절합니다.

1인칭(I, my) : 콘텐츠나 액션에 대한 사용자의 오너십을 강조합니다.

서비스 약관을 따르는데 동의합니다.내 계정당신의 장소
(O) 1인칭을 사용해 행동의 소유권을 강조합니다.(O) 1인칭을 사용해 콘텐츠 소유권을 강조합니다.(O) 2인칭을 사용해 사용자에게 직접 말했습니다.
UX 라이팅 – 명확성 예시



4. 필수 세부정보 전달성

사용자가 자신의 행동에 집중할 수 있도록 필수 세부정보만을 전달합니다.

로그인 중…
휴대전화로 연락 중입니다. 최대 5분이 소요될 수 있습니다.
로그인 중…
계정에 로그인하려면 휴대전화가 Google 서버와 통신해야 합니다. 최대 5분이 소요될 수 있습니다.
(O) 현재 상태를 이해하는 데 필수적인 세부 정보를 전달했습니다.(X) 현재 상태를 이해하는 데 사용자가 알아야 할 필요 없는 세부정보는 제공할 필요가 없습니다.
UX 라이팅 – 세부정보 전달성 예시



5. 모든 읽기 수준을 고려하기

모든 읽기 수준을 고려한 글쓰기는 글쓰기에서 가장 중요한 점 중 하나입니다. 명확하고 쉽게 이해할 수 있는 일반적인 단어를 사용합니다. 특정 기능을 설명하기 위해 업계 전문용어 또는 명칭은 사용하지 않습니다.

동영상 준비 중버퍼링
(O) 일반적인 단어를 사용했습니다.(X) 문맥을 이해하는 데 중요한 경우가 아니면 전문 용어를 사용은 지양해야 합니다.
UX 라이팅 – 모든 읽기 수준을 고려하기 예시

6. 현재 시제로 작성

현재 시제로 동작 또는 행위로 설명합니다. 미래 시제를 사용하지 마세요. 과거형이나 미래형으로 써야 할 때 간단한 동사 형태를 사용하세요.

메시지 전송 됨메시지가 전송되었습니다.
(O) 현재 시제로 작성하였습니다.(X) 현재 완료 시제를 사용했습니다. 현재 시제의 다른 변형으로 사용하지 마세요.
UX 라이팅 – 현재 시제로 작성 예시



7. 숫자 사용

하나, 둘, 셋이 아닌 1, 2, 3와 같은 숫자를 사용하세요. 숫자를 사용해야 사용자가 글자를 스캔할 때 직관적이며 유용합니다.

메시지가 3개 있습니다.메시지가 세 개 있습니다.
(O) 숫자를 사용했습니다.(X) 숫자를 한글로 쓰는 것을 지양해야 합니다.
UX 라이팅 – 숫자 사용 예시



8. 불필요한 구두점 생략하기

사용자들이 텍스트를 한 번에 스캔하도록 만들기 위해 필요하지 않은 곳에 구두점 사용은 지양합니다.

  • 레이블, 호버 텍스트, 불릿 리스트, 다이어로그 바디 텍스트에선 단독 문장에 마침표를 사용하지 않습니다.
  • 여러 문장들이거나 링크 뒤에 오는 문장인 경우 마침표를 사용합니다.
  • 길거나 복잡한 문장은 문맥상 적합할 경우 마침표를 사용할 수 있습니다.
  • 레이블 뒤에 콜론(:)은 생략합니다.
실행 취소 하시겠습니까?
변경한 모든 것이 이전 상태로 돌아갑니다
실행 취소 하시겠습니까?
변경한 모든 것이 이전 상태로 돌아갑니다.
(O) 마침표를 찍지 않았습니다.(X) 마침표를 찍지 마세요.
UX 라이팅 – 숫자 사용 예시


콘텐츠 구조

1. 목표부터 시작하기

문구를 작성할 때 목표와 이를 달성하는 데 필요하는 조치를 먼저 설명합니다.

이 사진첩에서 사진을 삭제하려면 휴지통으로 드래그 하세요.이 사진첩에서 제거하려면 사진을 휴지통으로 드래그 하세요.
(O) 목표(사진 삭제)로 문장을 시작하고 사용자 작업(휴지통으로 드래그)로 끝냈습니다.(X) 목표(사진 삭제) 전에 사용자 작업(휴지통으로 드래그)를 언급하지 마세요.
UX 라이팅 – 목표부터 시작하기 예시



2. 필요에 따라 세부정보 공개

필요에 따라 세부정보를 점진적으로 공개합니다. 사용자와의 첫 번째 상호작용에서 모든 세부사항을 설명할 필요 없습니다. 사용자가 기능을 탐색하고 더 많은 정보가 필요할 때 기능에 대한 상세한 정보를 표시해도 충분합니다.

다운로드한 책을 삭제합니까?다운로드한 책을 삭제합니까? 온라인 상태가 아니면 액세스할 수 없습니다.
(O) 세부정보 없이 필요한 문장만 사용했습니다.(X) 세부정보는 필요 시 공개합니다.
UX 라이팅 – 필요에 따라 세부정보 공개 예시

3. 일관성

웹 사이트에서 일관성 있는 단어를 사용합니다. 예를 들어, 웹 사이트 내 ‘사진첩’이라고 표현한 기능이 있다면 UX 라이팅 시에도 ‘사진첩’이라고 표현해야 합니다. 웹 사이트에선 사진첩이라고 표현하는데 알럿창에 ‘사진보관함’이라는 일관성과 거리가 있는 단어가 나오면 곤란합니다.

4. 레이블별 UI 요소와 컨트롤 나타내기

레이블이란 버튼 위의 텍스트와 같이 컨트롤 또는 특정 요소가 무엇을 하는지를 나타냅니다. UI 컨트롤 또는 요소를 나타내기 위해 레이블 텍스트를 사용해 설명합니다. 이때 요소 또는 컨트롤의 유형을 명시해서는 안됩니다.

계속 클릭하세요계속 버튼을 클릭하세요
(O) ’버튼’이라는 레이블 요소를 언급하지 않았습니다.(X) ‘버튼’이라는 레이블 요소를 언급할 필요는 없습니다.
UX 라이팅 – 레이블별 UI 요소와 컨트롤을 나타내기 예시

error: Content is protected !!
Scroll to Top