UX writing 텍스트 패턴 11가지
전략적 UX writing 4부: UX 텍스트 패턴
이 시리즈는 책 <Strategic writing for UX>에서 발췌한 내용을 요약 및 정리한 글이다. 저자 Torrey Podmajersky는 마이크로소프트에서 8년간 UX writer로 일하고, 현재 구글에서 근무하고 있다.
1부: 우리 서비스에서 UX writing은 언제 필요할까? - 콘텐츠 선순환 사이클
2부: 좋은 UX writing을 구분하는 법 - 보이스 차트
3부: UX writing 문장을 쓸 때 고려해야 할 4가지 - 에디팅 프로세스
4부: UX writing 텍스트 패턴 11가지 - UX 텍스트 패턴
*썸네일, 본문 내 모든 이미지의 출처는 책 <Strategic writing for UX>입니다.
4부: UX writing 텍스트 패턴 11가지 - UX 텍스트 패턴
서비스에 들어가는 UX 텍스트는 특정한 패턴을 갖고 있다. 이 패턴의 목적은 질 좋은 텍스트를 빠르게 양산하는 데에 있다. 과거에 성공적이었던 텍스트의 패턴을 분석하여, 효율적으로 다음 텍스트를 쓰기 위한 툴이다.
즉, 이 패턴은 1,2,3부에서 다루었던 것처럼 문장을 어떻게 써야 한다든가, 실제 문제를 해결하는 방식 등을 구축하기 위한 툴이 아니다. 그보다는, 현재 있는 텍스트를 좀 더 쉽게 카테고라이징하여 분석하는 것이 목적이다.
UX 텍스트 패턴 11가지
UX 텍스트 패턴에는 11가지가 있다. 한 가지 기준이 아닌, 목적이나 형태 등 여러 가지 기준으로 나눈 항목이기 때문에 일부 중복되는 텍스트가 있을 수 있다. 이때는 좀 더 도드라진 특성을 가진 항목 쪽으로 구분한다.
1. 타이틀(Title)
2. 인터랙티브 텍스트(Button and other interactive text)
3. 디스크립션(Description)
4. 공백 상태(Empty state)
5. 레이블(Label)
6. 조작(Control)
7. 텍스트 입력 필드(Text input field)
8. 전환 텍스트(Transitional Text)
9. 확정 메시지(Confirmation message)
10. 알림(Notification)
11. 에러(Error)
1. 타이틀(Title)
타이틀은 한 덩이의 콘텐츠 혹은 페이지 전체를 대변하는 내용을 담는 텍스트 패턴이다. 유저가 취해야 할 액션 혹은 콘텐츠의 맥락을 명확하게 제공하는 것이 목적이다.
자주 사용하는 패턴은 크게 네 가지로 분류할 수 있다. 목적에 따라 화면에서 어떤 것을 강조하고 싶은지 정하고, 그에 맞는 타입을 사용하여 활용하면 된다.
1) 브랜드명 타이틀
브랜드명을 타이틀로 사용하는 경우다. 많은 앱들은 브랜드와 직접적으로 연관이 있는 페이지(온보딩 등)에만 상단에 로고를 배치하는데, 특정 앱(커뮤니티성이 강하거나 소수만 사용하는 앱 등)의 경우 모든 페이지에 브랜드 로고나 이름을 배치할 수도 있다. 자사 서비스 내에서 브랜드 이름이 어디에 박혀있는지(박힐지) 아는 것도 중요하다.
2) 콘텐츠명 타이틀
블로그 포스트나 소셜 미디어 포스팅, 이미지 등의 콘텐츠를 기반으로 구성된 화면에 쓰이는 타이틀이다. 화면에 담긴 콘텐츠를 강조하는 것에 큰 목적을 두며, 콘텐츠를 만든 사람의 이름 등이 사용될 수 있다.
콘텐츠 제작자(수상자)인 Bluster를 페이지 타이틀로 썼다.3) 복수 테스크 타이틀
한 화면 내에서 여러가지 액션이 가능할 때, 모두를 포괄적으로 설명하는 타이틀이다.
프로필 사진 변경, 콘텐츠 업로드, 라이크 등 다양한 테스크가 모인 페이지4) 단일 테스크 타이틀
복수 테스크 타이틀과 달리, 하나의 액션만 있는 화면에 사용한다. 혹은 여러 액션이 있더라도, 가장 우선순위가 높은 액션 하나를 강조하고 싶을 때 해당 테스크를 타이틀로 사용하기도 한다.
2. 인터랙티브 텍스트(Button and other Interactive text)
인터랙티브 텍스트는 클리커블(clickable)한, 즉 눌렀을 때 특정 액션이 수행되는 텍스트 패턴이다. 유저가 액션을 취하도록 유도하는 것이 목적이다.
인터랙티브 텍스트는 크게 세 가지로 구분할 수 있다.
1) 버튼 레이블
버튼에 사용되는 텍스트를 의미한다. 일반적으로는 두 세 단어 내로 완성하지만, 필요에 따라 그 이상의 단어를 사용하며 문장형으로 쓰기도 한다.
2) 메뉴/리스트 레이블
텍스트 단독보다는 리스트나 드랍다운 메뉴, 탭 등의 컴포넌트에 쓰이며 명사형, 한 단어로 간결하게 표현하는 것이 일반적이다.
3) 링크
텍스트 단독으로 쓰이는 경우가 많으며, 보통 컬러나 언더라인 등으로 표시한다.
인터랙티브 텍스트는 이해하기 쉽고 구체적이면서도 행동을 유도할 수 있어야 한다. 그러기 위해서는 유저가 텍스트를 한 눈에 스캔하기 쉽도록, 하나 혹은 둘 정도의 단어만으로 구성하면 좋다. 이때, 사람들이 일상에서 자주 사용하는 단어 위주로 쓰면 좋다.
많은 경우, 타이틀과 인터랙티브 텍스트만으로는 유저의 행동을 이끌어내기가 어렵다. 그런 경우를 위해 필요한 것이 디스크립션이다.
3. 디스크립션(Description)
디스크립션은 타이틀과 인터랙티브 텍스트를 잘 수행할 수 있도록 보조 역할을 하는 텍스트 패턴이다. 유저가 서비스 내에서 원활하게 다음 단계로 움직일 수 있도록 돕는 것이 목적이다. 액션을 취하면 얻을 수 있는 베네핏이나, 브랜드를 어필하는 문구, 법적 이슈 등 부가적인 정보들이 여기에 포함된다.
한 줄에 적절한 글자 개수(출처: 구글 머터리얼 디자인 시스템)유저는 대부분 디스크립션을 자세히 읽기를 원하지 않으므로, 필요한 내용을 빠르게 캐치할 수 있도록 간결하게 쓰는 게 좋다. 한 줄에 50자, 세 줄 이하로 쓸 것을 권장하고 있다. 텍스트를 간결하게 유지하고 전달할 내용을 스캐너블한 덩어리로 나누는 것은, 유저들이 그들의 이해도와 이 서비스를 활용하는 능력에 대해 신뢰를 갖게 만든다.
콘텐츠를 청크(덩어리) 단위로 나누는 것이 중요한 이유
https://www.nngroup.com/videos/chunking/
*(별표)표시는 지양하는 것이 좋다. 왜냐하면, *표시를 자주 사용하면, 메인 텍스트에 대한 신뢰도가 떨어지기 때문이다. 테스크를 성공적으로 수행하는 데에 꼭 필요한 정보가 아니라면 최대한 덜어내자.
4. 빈 상태(Empty state)
빈 상태는 빈 화면이 오류가 아님을 알려주는 텍스트 패턴이다. 유저가 비어있는 화면을 보고 '로딩이 덜 되었나?' 혹은 '잘못 들어왔나?' 같은 생각으로 당황스러워하지 않도록 현재 상황을 잘 안내해야 한다.
빈 상태는 상황에 따라 세 가지 타입으로 구분할 수 있다.
1) 유저가 해결할 수 있는 상황
복잡하지 않은 절차로 에러를 해결할 수 있는 경우, 해결책을 이해하기 쉽게 제시한다. "X를 하기 위해서는, Y를 해보세요."
2) 유저가 해결할 수 없는 상황
대표적인 예로 404 페이지가 그러한 것인데, 시스템 오류이므로 유저가 할 수 있는 건 뒤로가기나 웹 사이트를 끄는 것밖에 없다. 여기서 유저가 안 좋은 감정으로 이탈하지 않도록 에러가 발생한 이유와 해결 방법을 충분하게 설명해주는 것이 좋다.
3) 유저가 해결할 수 없는 상황 + 다른 콘텐츠 제공
한 번의 액션으로 해결하기 어려울 경우 자세한 설명이 있는 곳으로 링크를 해주거나, 유저가 흥미 있어할만한 다른 콘텐츠를 제공할 수도 있다. 이를테면 쇼핑 앱의 신규 유저의 장바구니는 비어있을 텐데, "비어있으니 채우러 가볼까요?"(1)라는 텍스트로 다른 페이지로 링크할 수도 있지만 베스트 상품이나 추천 상품 리스트를 장바구니 빈 상태에 채워놓을 수도 있다.
5. 레이블(Label)
레이블은 정보를 이름 짓거나 설명하는, 명사 혹은 형용사구를 뜻한다. 경험을 이해하는 데에 드는 노력을 최소화하는 것이 목적이다. 많은 정보를 콤팩트한 포맷으로 전달한다.
디스크립션과 레이블의 차이는 길이와 목적이다. 디스크립션은 주로 온전한 문장으로 쓰이며, 구두법도 완벽하게 지킨다. 또한 타이틀, 버튼 등 서비스 전반에서 공통적으로 사용된다. 반면, 레이블은 주로 단일 명사나 명사구로 쓰이고 아이콘 설명, 섹션명 등 특정 스크린에만 해당하는 내용이다.
메타 데이터 레이블 사례다시 말해, 레이블은 디스크립션보다 간결하고, 테크니컬하며, 다양한 변수를 고려해야 한다. (위 이미지처럼 일정/가격 등 메타 데이터가 들어갈 경우, 어떤 내용이 올지 모르기 때문에) 간결한 점은 인터랙티브 텍스트와도 비슷하지만, 레이블은 인터랙티브 하지 않으므로 위계가 디스크립션과 비슷하다. 즉, 화면 내에서 기능상 '꼭' 읽어야 하는 텍스트는 아니다.
6. 조작(Control)
조작은 유저가 조작할 수 있는 컴포넌트임을 알리는 텍스트 패턴이다.
크게 두 가지 종류가 있다.
1) 조작 컴포넌트 상태값
조작 컴포넌트 상태값 텍스트를 쓸 때는, 유저들 대부분이 이미 라디오 버튼, 체크 박스, 스위치, 슬라이더, 인디케이터 등 코어한 메타포를 인지하고 있다는 점을 기억하면 좋다. 이를 고려하면 각 컴포넌트의 상태값을 모두 텍스트로 쓰지 않고, 비주얼의 역할로 남겨둘 수 있다.
이를테면 스위치에 on/off를 쓰지 않고 on일 경우 초록색, off일 경우 빨간색으로 처리하는 것이다. (회색으로 처리해도 좋지만, 만약 한 가지 맥락 내에 여러 개의 스위치가 있는데 그 중에 inactive한 상태의 스위치가 있다면 또 다른 시각적 힌트를 고안해야 할 것이다. 이렇게 비주얼로 해결이 어려운 부분이 있다면 그땐 조작 텍스트를 써도 좋다.)
2) 조작 컴포넌트 옵션
해당 조작 컴포넌트가 어떤 내용을 조작하는 것인지에 대한 레이블. 항목이 여러가지 일 경우 스캔하기 쉽도록 최대한 통일되고 간결하게 쓰되, 각 브랜드의 보이스 규칙에 따라 조금 길어져도 된다.
7. 텍스트 입력 필드
텍스트 입력 필드는 텍스트 필드에 필요한 텍스트들을 의미한다. 유저가 정확한 정보를 입력하도록 돕는 것이 목적이다.
1) 유저가 입력할 정보를 아는 경우
가장 좋은 방법은 정확한 정보를 텍스트 필드 내에 미리 써두는 것이다. 하지만 이는 유저로부터 얻고 싶은 정보의 형태나 내용을 이미 아는 상황(연락처 등)에만 적용 가능하다.
2) 유저가 입력할 정보를 모르는 경우
유저가 어떤 정보를 입력할지 알 수 없는 상황에선, 텍스트 필드 바깥에 어떤 정보가 올바른 형태인지에 대한 힌트를 써둔다. 단, 힌트 텍스트를 미리 채워진 텍스트로 착각하여 그대로 쓰는 경우도 있으니 주의해서 작성하자.
힌트 텍스트는 주로 네 가지 옵션을 많이 사용한다.
입력되어야 하는 정보명
입력되어야 하는 정보의 사례
정보를 입력하도록 요구
유저가 어떻게 하면 성공할 수 있을지 안내
8. 전환 텍스트
전환 텍스트는 로딩 등 화면이 전환됨을 알리는 텍스트 패턴이다. 유저가 자신이 누른 액션이 잘 반영되었는지 알게 하고, 시스템의 오류로 인지하지 않도록 설명하는 것이 목적이다(사용성 휴리스틱 1번, 시스템 가시성 - 유저가 시스템에서 무슨 일이 일어나고 있는지 항상 알려주어야 한다).
닐슨 노먼 사용성 휴리스틱 10
https://www.nngroup.com/articles/ten-usability-heuristics/
이 텍스트는 화면 전환이 끝나면 자동으로 사라지는데, 이때 과정이 성공적으로 완료되었음을 알리는 텍스트가 필요하다(9번).
9. 확정 메시지(Confirmation message)
확정 메시지는 유저에게는 보이지 않는 시스템이 돌아가고 있음을 알리는 텍스트 패턴이다. 유저가 기대하는 진행 상황이나 결과가 완료되었음을 알리는 것이 목적이다.
일반적으로, 확정 메시지는 액션을 가장 잘 설명할 수 있는 동사를 사용하여, 과거형 문장으로 쓰인다. 이를테면 8번 전환 텍스트에서는 진행형을(ex.제출중), 9번 확정 메시지에서는 과거형을(ex.제출완료) 쓰는 식이다. 비슷한 세트로는 전송중/전송완료, 삭제중/삭제완료, 제거중/제거완료, 포스팅중/포스팅완료 등이 있다.
확정 메시지를 사용하는 곳은 크게 세 가지 상황을 예로 들 수 있다.
1) 실시간으로 진행 상황을 알려주어야 할 때
유저가 로컬에 저장되는 메시지를 쓸 때, 이 정보가 저장되는 것인지 아닌지 불안할 때가 있다. 이때, 확정 메시지와 전환 메시지를 함께 활용하면 좋다.
이를테면 유저가 내용을 입력할 때는 "입력 중..." 혹은 "저장 중..."등의 전환 텍스트를 쓰고, 타이핑을 잠깐 멈추면 "저장 완료" 등의 확정 메시지를 제공함으로써 유저의 불안을 덜어주는 것이다. 구글 닥스나 마이크로소프트 워드에서도 이러한 기능이 실시간으로 제공되고 있다.
2) 하나의 액션에 초점을 맞출 때
유저가 중요한 액션을 수행했을 경우, 완료 메시지를 전달하기 위해 한 화면 전체를 사용하는 경우가 있다. 이때는 유저가 집중할 수 있는 정보가 하나 뿐이어서 맥락이 복잡하지 않으므로, "이미지가 담긴 포스팅이 완료되었습니다." 등의 문장형으로 길게 설명할 필요 없이, "제출 완료!"같은 단일 단어로 대체할 수 있다.
3) 액션에 대한 결과가 늦게 나올 때
1), 2)의 경우 대기 시간이 몇 초, 길어봐야 몇 분에 지나지 않을 것이다. 하지만 1:1문의 등 몇 시간, 길게는 며칠이 지난 뒤 결과를 받아볼 수 있는 액션의 경우 해당 기간에 대한 언급을 디스크립션으로 달아줘야 한다.
10. 알림(Notification)
알림은 푸시, 배너 등의 컴포넌트에 쓰이는 텍스트 패턴이다. 조직이 어필하고 싶은 경험에 좀 더 집중하도록 알리고, 상기하는 것이 목적이다. 주로 9번 확정 메시지보다 우선순위가 높다.
알림은 언제나 유저에게 베네핏을 주거나, 긴급한 메시지이거나, 적어도 적절한 타이밍의 내용이어야 한다. UX 라이터는 다양한 종류의 알림이 어떻게 표시될 수 있는지를 고려해야 한다. 똑같은 텍스트가 각각의 컴포넌트에 쓰였을 때 어떤 맥락으로 유저에게 닿을 수 있는지를.
이미지 소셜 미디어 'appee(가상 서비스)의 푸시 알람일반적으로 타이틀-디스크립션의 페어링 형태로 사용되며, 브랜드 톤에 따라 재미 요소를 추가할 수도 있다. 이미지 소셜 미디어 서비스(가상) `appee는 시간 제한을 두고 이미지를 올리는 챌린지 피쳐를 제공한다. 이때, 위트 있는 브랜드 보이스 톤을 살려 미션이 되는 키워드를 이모지로 가려서, 알림을 열어보지 않을 수 없게 만들었다.
11. 에러(Error)
에러는 그들이 처한 에러 상황에 대해 설명하고, 가능하다면 해결책까지 제시하는 텍스트 패턴이다. 사용성 휴리스틱 9번에 의하면, 에러가 발생했을 때는 유저가 인지, 진단, 해결까지 매끄럽게 진행할 수 있도록 도와야 한다.
https://www.nngroup.com/videos/usability-heuristic-recognize-errors/
에러 텍스트를 사용하는 형태는 상황에 따라 세 가지로 분류할 수 있다.
1) 인라인 에러(Inline Error)
짧고 명확하며, 경험의 맥락을 끊지 않고 해결할 수 있는 에러에 대한 메시지다.
2) 디투어 에러(Detour Error)
팝업, 스낵바 등을 띄워 유저의 주의를 진행 중인 경험보다 해당 에러에 집중 시키고, 해결 방법을 제시한다.
3) 블라킹 에러(Blocking Error)
주로 앱 내에서 해결하지 못하는 에러가 있을 때(인터넷 연결 끊김, 시스템 에러 등), 전체 화면을 사용해서 알린다.
UX 텍스트 패턴 게더링 시트
이상 서비스 내에서 자주 쓰이는 UX 텍스트의 패턴을 살펴보았다. 서두에서 말했듯 형태 및 목적별로 중복되는 항목이 있을 수 있으나, 이 템플릿을 기반으로 자사 서비스에 맞게 카테고리를 커스터마이징하여 사용할 것을 추천한다. 11가지 패턴별로 수집을 한 뒤, 필요에 따라 패턴 내에 있는 여러가지 타입별로 한 번 더 분류를 하여 분석하면 된다.
텍스트 패턴 수집이 막막한 분들을 위해 게더링 시트를 제작해보았다. 템플릿 이해를 돕기 위해, 토스 앱(금융 앱이 비교적 화면에서 텍스트가 차지하는 비율이 높으므로)의 화면 중 하나를 사례로 작성해보았다. 러프하게 작성한 것이므로 자사 서비스에 맞게 내용을 가공 및 추가하여 사용해보시길.
(본 시트는 책 내용 및 저자와 전혀 관련이 없으며, 필자의 이해도를 바탕으로 편의를 위해 임의로 제작된 것임을 밝힙니다.)
1) UX 텍스트 패턴 11가지
2) 화면명
화면별로 컬럼을 나눈다. (ex.메인, 상세 페이지, 구매 페이지 등) 텍스트 패턴이 아닌 화면을 X축에 둠으로써, 각 화면별로 주로 어떤 텍스트 패턴이 많이 쓰이는지, 또 같은 텍스트 패턴인데 다른 화면에서 다른 규칙을 적용하고 있지는 않은지를 한 눈에 확인할 수 있다.
3) UX 텍스트
변수가 있는 레이블의 경우 {중괄호}에 내용을 넣고 옆에 사례를 하나 기입한다.
4) 메모
텍스트에서 발견한 인사이트나 문제점, 해결책 등을 메모한다.
5) 피쳐
피쳐별로 시트를 나눈다.
3) UX 텍스트를 작성할 때는 해당 화면을 캡처해서 넘버링하여 텍스트를 수집하면 중복 및 누락을 방지하기 쉽다.
자세한 내용은 하단 링크를 통해 스프레드 시트에서 확인할 수 있으며, 보기 전용이므로 복사하여 사용하기 쉽도록 엑셀 파일을 첨부했다.
추후에 추가할 내용이 있다면 더 쓰겠지만, 처음에 계획했던 전략적 UX writing 시리즈는 여기까지! 이 시리즈가 UX writing을 고민하는 분들께 많은 도움이 되길 바라며, 국내에서 UX writing에 대한 논의가 활발해지는 계기가 된다면 더더욱 좋겠습니다. 저도 아직은 공부하는 단계이므로, 글에서 이해가 되지 않는 부분이나 더 좋은 방향으로 수정할 수 있는 부분이 있다면 언제든 편하게 댓글 부탁드립니다.
감사합니다.
김강령 드림
같은 시리즈, 다른 글 읽으러가기
1부
https://brunch.co.kr/@thinkaboutlove/354
2부
https://brunch.co.kr/@thinkaboutlove/358
3부
https://brunch.co.kr/@thinkaboutlove/359
