본문으로 바로가기

UX 라이팅

category software engineering/frontend 2023. 11. 19. 22:19
728x90

어플리케이션을 만드는 도중에 이런 사람이 우리팀에도 있었으면 좋겠다 싶었던게 직업으로도 있었습니다.
최근 UX 라이팅 교과서라는 책을 접하게 됐는데 제가 기록하고 싶은 내용들만 남겨보겠습니다.
 

UX 라이팅(UX Writing) 뭘까?

사용성이나 브랜드 경험을 향상시키고 최적화하기 위해서 인터넷 인터페이스 안에서 사용하는 언어와 언어의 포맷을 다루는 업무를 하는 일이라고 합니다. 그럼 카피라이팅과는 뭐가 다를까요?

UX라이팅은 카피라이팅과 다음과 같은 같은 차이가 있습니다.

  UX 라이팅 카피라이팅
정의 제품 안에서 사용하는 글 제품에 들어오도록 하는 글
성격 사용자를 돕는다 사용자를 유혹한다
대상 제품에 들어온 사용자 제품을 경험하지 못한 사용자
목표 - 서비스를 쉽게 이해하고
- 서비스를 자연스럽게 사용하고
- 서비스에 애정을 갖고
- 서비스가 원하는 행동을 하게 한다
- 제품에 들어올 수 있도록
- 제품을 매력적으로 포장한다

사용자가 어디서부터 글을 보고, 어떤 부분은 주의 깊게 보지 않았는지 그리고 그 이유는 무엇인지, 어떤 과정에서 이탈 했는지 과거 데이터를 통해 분석하겠다고 Amplitude나 Google Tag Manager를 사용해봤었지만 사실 어떤게 더 적절한지 기준을 잡기조차 어려웠습니다.

만약 UX Writer가 있었다면 어땠을까하는 아쉬움을 갖고 어떤 역할까지 수행해줄 수 있는지 보면,

  • UI/UX 카피:
    • 네비게이션 네이밍 설계
    • 앱 메뉴 구성하거나 메뉴의 특징을 간결하게 요약
    • 설명이 필요한 어려운 용어를 풀어서 씀
    • 에러 메시지나 완료 메시지
  • 콘텐츠 제작: 상품 설명, 회사 소개문, 안내/공지문, 각종 정책/약관, 사용자 친화적으로 바꿔 쓴 정책
  • 보이스앤톤 디자인: 브랜딩 메시지, 개인화 메시지, 문장의 톤, 사용자와 교감하는 글, 고객의 동기를 자극하는 글, 감성을 연결하는 글
  • 콘텐츠 전략 수립: 한 사람이 쓴것처럼 돕는 보이스앤톤 콘텐츠 스타일가이드(쇼피파이 폴라리스, 디자인 시스템), 디자인 가이드라인
  • 카피 최적화: 버튼 최적화, 이메일 뉴스레터 최적화, 배너카피 최적화

이를 통해 '읽기 좋고', '편안한' 글이 됩니다. 또 어떤걸 신경써야 할까요?
 

사용자에서 시작하는 UX라이팅

글쓰기는 사용자와의 대화라고 합니다. 대화체 인터페이스를 사용해서 '지금 어떤일을 하고 계신가요?' 라고 소개글을 작성하고 현재 직무를 입력하도록 하거나, '현재 일을 하신지 얼마나 되셨나요?' 와 같은 질문에 답변하는 것과 같은 플로우를 가져가는것도 방법이죠.
페르소나는 사용자 입장에서 글을 쓸 수 있도록 돕는 유용한 도구입니다. 현실에 있을법한 사용자 이야기를 만든 문서를 만들고, 사용자 여정지도를 이용해서 서비스에서 목적을 완수하기 위한 프로세스를 시각화한 문서를 작성할 수도 있습니다.
 

보이스앤톤 디자인

보이스앤톤 디자인은 짧은 글 하나에도 기계와 인간이 아닌 인간과 인간이 소통하는 것처럼 느끼도록 하는 라이팅 기법입니다. 이를 통해

  • 브랜드를 친근하게 느끼도록 합니다.
  • 사용자가 이 위치에서 어떤 생각과 감정을 느끼고 행동하는지 알기에 사용자 중심적인 글을 더 빨리 쓸 수 있습니다.
  • 마케팅 노력을 극대화하고 일관된 글을 쓸 수 있습니다.

예시1

우버두려움 없는 낙천주의자라는 보이스앤톤 원칙에 맞게 '대담한', '직설적인'', '마음을 담은' 세가지 세부 원칙을 정했고
토스는 사용자들이 기뻐하는 순간을 찾아 그 상황에 공감하는 글을 씁니다.
브런치작가 플랫폼 정체성 위에 따뜻한 가성을 담아 글로 잘 전달합니다.
컬리"주문완료!" 대신 "내일 아침에 만나요!" 라며 고객을 향한 마을을 보여줍니다.

더 나은 사용성

에어비앤비는 숙소 예약 단계를 한 화면에 하나만 제시합니다. "여행지 검색", "예약 형태 선택", "날짜", "일행" 과 같이 현재 무엇을 하는지 분명히 알 수 있고 이전 거쳐온 단계도 볼 수 있죠. 토스는 송금을 할 때 몇 번에 걸쳐 송금이 진행되는지 알려주고 현재 몇 번째인지 투명하게 보여줍니다.

삼성증권 환전 화면은 안좋은 예시로 나왔는데, 어떤 절차로 해야할지 그리고 어떤 단계로 진행해야 하는지 사용자들이 버튼을 클릭하며 유추해야하는 방법이었다.

실생활에서 자주 사용하는 표현을 써야하고 내부 용어, 전문 용어, 잘 쓰지 않는 표현을 지양해야 하며 순서는 논리적이고 자연스러워야 합니다. 에러 메시지 또한 중요하지만 애초에 방지하는게 가장 중요합니다. 사용자에게 정보들을 기억하도록 요구하지 않고 직관적으로 작성해야 한다. 불필요한 정보를 제거하고 핵심이 보이는 글자 디자인을 해야합니다.
 

핵심이 잘보이는 글

정보화된 패턴끼리 묶는거도 중요합니다. 카카오페이의 경우 광고, 충전, 신용 점수, 이용 내역이 Card로 패턴화되어 노출되죠.
어떻게할지 잘 모른다면 쇼피파이 폴라리스 디자인을 따라가보면 됩니다.

  • 꼭 필요한 정보만 집어넣고 나머지는 제거하는게 좋습니다. 사용자들은 읽지 않습니다.
  • 여백을 활용하여 빽빽한 글자의 장벽을 분리시키도록 합니다.
  • 연관된 정보는 근처에 배치해야 합니다.
  • 목록과 도표를 사용하면 좋습니다.

 

문장 쓰기

구글 호텔 검색은 '예약하기'에서 '빈 방 찾기'로 용어를 바꾸자 전환율이 17% 상승했다고 합니다.

  • 문맥을 반영하고 유용한것을 제공하자.
  • 불필요한 말, 장난스러운 말과 유행 타는 어휘는 피하자.
  • 중요 키워드는 앞에 사용하도록 하자.
  • 구체적으로 진실되게 중요한 내용만 명료하게 적자.

 

생성형 AI 활용

프런티튜드에서 제공하는 일관성 체크 및 추천 도구를 활용할 수 있습니다. Grammarly, 허밍웨이 에디터와 같은 툴을 활용할 수 있고 ChatGPT에게 사용 할 수 있는 프롬프트 엔지니어들도 UX 컨텍스트, 보이스 앤 톤, 간결함, 페르소나, 지침 명확성과 일관성을 잘 적는 라이팅 고수들입니다. ChatGPT를 통해 컨텍스트를 입력해두고 '사용자에게 환불이 안된다고 알리는 글을 써줘'라고 작성하면,

안녕하세요 [고객님], 먼저 문제를 겪으셔서 죄송하다는 말씀을 드리고 싶습니다. 저희 [회사 이름]은 고객님에게..

와 같이 작성하는데 도움을 받을 수 있습니다. 더 깊게 어떤 경우에 이메일을 보내고 딱딱하지 않게 인간적으로도 바꿔서 쓸수도 있죠.

'software engineering > frontend' 카테고리의 다른 글

JSX Conditional rendering && 와 삼항연산자  (0) 2023.12.31
React TypeScript Cheatsheet  (0) 2023.12.19
Event Types in React and TypeScript  (1) 2023.11.19
Vite 5.0  (0) 2023.11.17
JSX is deprecated  (0) 2023.11.17