brunch

매거진 디자이너 어디까지 해 봤니

라이킷 220 댓글 5

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 하기로 Nov 13. 2021

UIUX 디자이너라면 필수, UX 라이팅

문장 줄이기 기술

최근 스타트업 트렌드는 UI/UX 디자이너의 경계가 더더욱 모호해지고 있는 것 같습니다. 기존의 워터폴 업무 방식은 기획자 (없을 경우 마케터)가 기획 초안 문서를 제작하고 경영진 컨펌 후 실무 단에 전달하는 방식이었죠. 이 틀은 애자일 방식이라고 해서 크게 다르지 않았습니다.

기획(워딩 및 콘텐츠 제작) - 컨펌 - 디자인 - 기획자가 커뮤니케이션 - 개발

기획 문서가 제공되면 디자이너는 디자인에만 집중할 수 있으니 키 비주얼이나 아이콘 제작하는 시간도 확보할 수 있었습니다. 분업의 긍정적 작용입니다. 그러나 워터폴 방식에만 완벽히 적응한 UI 디자이너라면 틀을 깨고 나올 필요가 있습니다. 만약 스스로 콘텐츠를 제작하거나 UX 라이팅을 하지 못하는 디자이너라면 UIUX 디자이너라는 명함을 달기에 역량이 부족하다 생각됩니다.

-우리 회사는 콘텐츠 (원고)를 주지 않고 디자인을 시킨다.

-기획서를 종이에 그려준다.

-기획서 자체가 없다.

위는 디자이너가 특히 투덜댈만한 상황들입니다. 그러나 이렇게 생각해 보세요.

-워딩을 내가 원하는 대로 쓸 수 있다.

-문장을 디자인에 맞게 매끄럽게 다듬을 수 있다. 기획자가 없으니 불필요한 커뮤니케이션이나 기싸움이 필요 없다.

-기획 능력을 키울 수 있다. 프로덕트 리드로 성장할 수 있다.

열악한 상황은 모두 여러분의 능력을 성장시키는 데 밑거름이 될 것입니다. 저 또한 어느 순간부터 기획자나 마케터 없이 일 하는 상황이 더 편해졌습니다. 프로덕트 전체를 가장 잘 이해하고 진두지휘해야 하는 사람은 기획자나 마케터가 아닌 디자이너라고 생각하기 때문입니다. 디자이너라고 콘텐츠를 제작하거나 수정하는 것을 겁내지 마세요. 오히려 마케터, 기획자가 써 준 글을 받아서 아무 생각 없이 복붙 하는 행위는 매우 위험합니다. 완성된 프로덕트의 최종 퀄리티를 책임지는 것은 어디까지나 디자이너입니다. 디자이너가 프로덕트의 최종 책임자가 되어야 해요. 프로덕트 리드로 디자이너 직군을 선호하는 회사가 많아지고 있는 점도 여러분이 글쓰기 역량을 키워야 하는 분명한 이유 중 하나입니다. 브런치도 좋은 연습 도구가 될 수 있어요!

ux 디자이너로서 반드시 키워야 하는 역량

글쓰기=라이팅

User eXperience design, 사용자 경험 디자인 - 줄여서 UX.

초기 UI/UX라는 용어가 등장할 때만 하더라도 이 둘은 혼용해서 사용되곤 했습니다. 간단히 구분하자면 UX는 UI 디자인을 하기 위한 what, why, who, where, when의 질문을 던지는 역할을 합니다. UI 디자인은 자연스레 질문의 답을 '일관되게' 실현하는 How의 과정이 됩니다. 데이터 기반 UX, 유저 저니 맵, 페르소나 설정, 기능 정의서 제작, IA (Information Architure) 제작, 로드맵 기획 등은 모두 UI 디자인의 how를 만들기 위해 선행되는 작업들입니다. 초기 서비스나 비교적 규모가 작은 서비스라면 디자이너가 UX의 why를 만든 후 UI의 how를 전개해 나가는 것이 가장 효율적이고 논리 타당할 것입니다.

이번 글에서는 UX 기획자가 하는 여러 업무 중 글쓰기 파트만 떼서 보겠습니다.

디자이너는 글과 그림을 구분해서 생각하는 성향이 있습니다. 이제는 그림 따로, 글 따로 보는 것이 아닌 디자인이 그림이라면 글(text)의 영역까지 디자인으로 고려해서 작업하는 습관을 만드는 것입니다. 이것이 ux 디자이너로 향하는 첫걸음이 되리라 생각합니다. app/web 디자인뿐만 아니라 광고 배너 하나 만들 때도 기획자로서 생각하는 연습을 하세요. :) 모두 여러분 자신에게 도움이 됩니다.

UX 라이팅의 기본

1. 필수 개념 정의

스케치나 피그마에서 제1페이지는 작업에 들어가기에 앞서 공통적으로 정의돼야 할 것들을 간단히 적습니다. (인간은 망각의 동물이니까)

- 기준 해상도

- 추구하는 UXUI의 방향

방향을 명확히 정해놓으면 추후 의사결정을 할 때 도움이 됩니다.

- UX 라이팅

공통 워딩의 기준을 마련합니다. 컴포넌트 별 어미를 통일하는 것이 중요합니다.

- 서비스에서 반복적으로 사용하는 용어 정리

이 또한 정말 중요합니다. 페이지별로 작업을 하다 보면, 그리고 의사소통을 하다 보면 같은 의미를 서로 다르게 사용하는 경우가 많습니다. 특수한 경우를 제외하고 모두 통일시키는 것을 원칙으로 합니다.

기본적으로 제가 추구하는 UX 라이팅의 방향성은 아래와 같습니다.

- 짧고 쉽다

- 유저 친화적이다

- 공통된 단어 및 어미 사용
- 직관적인 용어 (보충 설명이 필요 없는 단어를 계속 개발함)

예시 :

- 책, 도서 중 일반적으로 '책'을 사용한다.

- 대여, 대출 중 '대여'만 사용한다.

- 신청자 : 책을 대여하거나 구매하는 유저 (신청과 요청 중 신청만 사용)
- 도서 공유자 : 책을 대여해주거나 판매하는 유저

- 업체, 전문가, 파트너, 가맹점 : 전문가와 파트너를 사용

2. space에 알맞은 문장 길이 조절

디자인은 레이아웃 구조가 통일되어야 하기 때문에 워딩의 길이나 단락 구분을 디자이너가 조절하면서 문장을 다듬을 줄 알아야 합니다. 어떤 경우는 2줄, 어떤 경우는 3줄이라면 인지의 흐름을 단순하게 하기 위해 문장의 길이를 통일합니다. 이 과정에서 타이틀과 서브 타이틀 분리 여부도 디자이너가 판단합니다.

3. user flow를 고려한 타이틀 크리에이팅

새롭게 진입한 유저가 직관적으로 이해할 수 있는 워딩을 지속적으로 개발해야 합니다. 초기 유저 동선을 따라가면서 서비스를 자연스럽게 이해할 수 있도록 타이틀, 콘텐츠, 인포메이션 문구 배치 등 여러 가지 장치를 마련합니다. 어디까지나 공급자 관점이 아닌, 서비스를 처음 접하는 유저 관점에서 생각해야 합니다. 특히 양방향 플랫폼의 경우 '누구에게' 하는 말인지가 명확해야 하며, 일관된 톤 앤 매너를 유지합니다. 한 사람이 다른 한 사람에게 길을 안내한다고 가정하면 좋습니다. 프로토타이핑을 만든 후 직접 flow를 따라가면서 검수를 하는 것도 도움이 됩니다. 빈 틈이 항상 발견되거든요 :)

누구에게 하고 싶은 말인가.

누가 자주 쓰는 페이지인가.

누가 어떤 액션을 취하길 의도하는가.

4. 문장의 톤 앤 매너 통일 <특히 어미>

여기서부터는 보다 기술적인 내용입니다. 같은 사람이 쓰는 글이라도 어떤 경우는 x처럼, 어떤 경우는 y처럼 쓰는 경우가 있습니다. 자기 오류를 극복하기 위해서라도 문장의 톤 앤 매너 가이드를 정의합니다.

예: 전송, 보내기, send, 저장을 혼용해서 쓰지 않음, 보내기와 저장만 사용

버튼명 : 'xx 하기'는 56px 이상에서만 사용, 나머지는 명사형

탭 : 명사형

콘텐츠 타이틀 : 명사형

h2 이상 타이틀 : 소통하는 문장형으로 구사 (해요체)

h2 이하 타이틀 : 짧은 명사형 단어로 구사

인포메이션 : 간결하게 내용만 전달함 (다나까체) ex. 비밀번호가 일치하지 않습니다

팝업 : 타이틀 - 명사형 / 디렉션 문구 - 소통하는 문장형 (해요체) / cta 버튼명 - xx 하기

5. 유저 친화적 문장 쓰기 = 개발자 언어를 걷어내자

"요청 사항이 처리되었습니다"

"데이터 처리 중입니다"

"데이터가 없습니다"
"해당 건이 없습니다"

특히 시스템 알람 팝업에서, 미처 고려하지 못 한 case를 개발자가 직접 급한 대로 쓸 때 발생합니다. alert 팝업은 유저와 직접 소통하는 창구입니다. 따라서 기계적 워딩, 공급자 관점의 워딩이 없게 합니다. 유저 친화적 문장으로 해요체를 쓸 수 있습니다.

"ㅇㅇ이 완료되었어요."

"잠시만요! 지금 열심히 찾고 있어요!"

"상품이 없어요. 빠른 시일 내 준비할게요"

"구매 내역이 없어요"

등으로 순화된 언어를 사용해 보세요 :)

6. 팝업 멘트 고려

alert 팝업 멘트 심화 편.

버튼명과 cta (call to action) 버튼의 위치에 대해 case study 해 봅시다.

아래 이미지에서 왼쪽은 1차 버전, 오른쪽이 2차 버전입니다. 어떤가요? 1차 버전의 아니오 / 확인으로 통일시킨 경우보다 2차 버전이 훨씬 더 직관적으로 개선되었습니다. 타이틀을 굳이 읽지 않고 버튼명만 보고도 유저가 '원하는 선택'을 할 수 있게 합니다.

활동 중지, 진행 상태 중지, 회원 탈퇴 등 서비스 입장에서 결코 유저에게 권하고 싶지 않은 cta 버튼을 오른쪽이 아닌 왼쪽에 위치시키는 꼼수도 흔히 사용합니다. (일반적으로 오른쪽 버튼은 positive action, 왼쪽 버튼은 negative action을 위치시킵니다)

그러나 cta 액션 버튼을 기획 의도 하에 좌-우 혼용하여 쓰는 것보다는 유저에게 정확히 한 가지 액션을 인지시키고, 원하는 선택을 할 수 있게 하는 것도 배려라 여겨집니다. 어떤 꼼수를 쓰더라도 일단 탈퇴하기로 마음먹은 유저의 마음을 돌리기는 쉽지 않으니까요.