✍ 기획자의 글쓰기 시리즈 [📝UX writing 텍스트 패턴 | 한성규 | 커리어리

한성규'지금 써보러 갑니다' 운영자

3달 전

✍ 기획자의 글쓰기 시리즈 [📝UX writing 텍스트 패턴 11가지] (👀간단 요약) 서비스에 들어가는 UX 텍스트는 특정한 패턴을 갖고 있다. 이 패턴의 목적은 질 좋은 텍스트를 빠르게 양산하는 데에 있다. 과거에 성공적이었던 텍스트의 패턴을 분석하여, 효율적으로 다음 텍스트를 쓰기 위한 툴이다. UX 텍스트 패턴에는 11가지가 있다. 한 가지 기준이 아닌, 목적이나 형태 등 여러 가지 기준으로 나눈 항목이기 때문에 일부 중복되는 텍스트가 있을 수 있다. 이때는 좀 더 도드라진 특성을 가진 항목 쪽으로 구분한다. ✓ 타이틀(Title) ✓ 인터랙티브 텍스트(Button and other interactive text) ✓ 디스크립션(Description) ✓ 공백 상태(Empty state) ✓ 레이블(Label) ✓ 조작(Control) ✓ 텍스트 입력 필드(Text input field) ✓ 전환 텍스트(Transitional Text) ✓ 확정 메시지(Confirmation message) ✓ 알림(Notification) ✓ 에러(Error) 📌 타이틀(Title) 타이틀은 한 덩이의 콘텐츠 혹은 페이지 전체를 대변하는 내용을 담는 텍스트 패턴이다. 유저가 취해야 할 액션 혹은 콘텐츠의 맥락을 명확하게 제공하는 것이 목적이다. ✓ 브랜드명 타이틀 브랜드명을 타이틀로 사용하는 경우다. 자사 서비스 내에서 브랜드 이름이 어디에 박혀있는지(박힐지) 아는 것이 중요하다.(이에 따라 전체 페이지에, 또는 일부에 사용 할 수 있기 때문) ✓ 콘텐츠명 타이틀 블로그 포스트나 소셜 미디어 포스팅, 이미지 등의 콘텐츠를 기반으로 구성된 화면에 쓰이는 타이틀이다. ✓ 복수 테스크 타이틀 한 화면 내에서 여러가지 액션이 가능할 때, 모두를 포괄적으로 설명하는 타이틀이다. ✓ 단일 테스크 타이틀 하나의 액션만 있는 화면에 사용한다. 혹은 여러 액션이 있더라도, 가장 우선순위가 높은 액션 하나를 강조하고 싶을 때 사용한다. 📌인터랙티브 텍스트(Button and other Interactive text) 인터랙티브 텍스트는 클리커블(clickable)한, 즉 눌렀을 때 특정 액션이 수행되는 텍스트 패턴이다. 유저가 액션을 취하도록 유도하는 것이 목적이다. 인터랙티브 텍스트는 이해하기 쉽고 구체적이면서도 행동을 유도할 수 있어야 한다. ✓ 버튼 레이블 버튼에 사용되는 텍스트를 의미한다. 일반적으로는 두 세 단어 내로 완성한다. ✓ 메뉴/리스트 레이블 리스트나 드랍다운 메뉴, 탭 등의 컴포넌트에 쓰이며 명사형, 한 단어로 간결하게 표현하는 것이 일반적이다. ✓ 링크 텍스트 단독으로 쓰이는 경우가 많으며, 보통 컬러나 언더라인 등으로 표시한다. 📌 디스크립션(Description) 디스크립션은 타이틀과 인터랙티브 텍스트를 잘 수행할 수 있도록 보조 역할을 하는 텍스트 패턴이다. 유저가 서비스 내에서 원활하게 다음 단계로 움직일 수 있도록 돕는 것이 목적이다. (액션을 취하면 얻을 수 있는 베네핏 등) ✓ 필요한 내용을 빠르게 캐치할 수 있도록 간결하게 쓰는 게 좋다 ✓ 한 줄에 50자, 세 줄 이하로 쓸 것을 권장하고 있다 ✓ (별표)표시는 지양하는 것이 좋다. 왜냐하면, *표시를 자주 사용하면, 메인 텍스트에 대한 신뢰도가 떨어지기 때문 📌 빈 상태(Empty state) 빈 상태는 빈 화면이 오류가 아님을 알려주는 텍스트 패턴이다. 당황스러워하지 않도록 현재 상황을 잘 안내해야 한다. ✓ 유저가 해결할 수 있는 상황 해결책을 이해하기 쉽게 제시한다. "X를 하기 위해서는, Y를 해보세요." ✓ 유저가 해결할 수 없는 상황 404 페이지가 대표적. 유저가 안 좋은 감정으로 이탈하지 않도록 에러가 발생한 이유와 해결 방법을 충분하게 설명해주는 것이 좋다. ✓ 유저가 해결할 수 없는 상황 + 다른 콘텐츠 제공 한 번의 액션으로 해결하기 어려울 경우 자세한 설명이 있는 곳으로 링크를 해주거나, 유저가 흥미 있어할만한 다른 콘텐츠를 제공할 수도 있다. (장바구니가 비어 있는 상태 등) 📌 레이블(Label) 레이블은 정보를 이름 짓거나 설명하는, 명사 혹은 형용사구를 뜻한다. 경험을 이해하는 데에 드는 노력을 최소화하는 것이 목적이다. 많은 정보를 콤팩트한 포맷으로 전달한다. 디스크립션은 주로 온전한 문장으로 쓰이며, 구두법도 완벽하게 지킨다. 또한 타이틀, 버튼 등 서비스 전반에서 공통적으로 사용된다. 반면, 레이블은 주로 단일 명사나 명사구로 쓰이고 아이콘 설명, 섹션명 등 특정 스크린에만 해당하는 내용이다. 레이블은 디스크립션보다 간결하고, 테크니컬하며, 다양한 변수를 고려해야 한다. 📌 조작(Control) 조작은 유저가 조작할 수 있는 컴포넌트임을 알리는 텍스트 패턴이다. ✓ 조작 컴포넌트 상태값 유저들 대부분이 이미 라디오 버튼, 체크 박스, 스위치, 슬라이더, 인디케이터 등 코어한 메타포를 인지하고 있다는 점을 기억하면 좋다 ✓ 조작 컴포넌트 옵션 해당 조작 컴포넌트가 어떤 내용을 조작하는 것인지에 대한 레이블. 항목이 여러가지 일 경우 스캔하기 쉽도록 최대한 통일되고 간결하게 쓰되, 각 브랜드의 보이스 규칙에 따라 조금 길어져도 된다. 📌 텍스트 입력 필드 텍스트 입력 필드는 텍스트 필드에 필요한 텍스트들을 의미한다. 유저가 정확한 정보를 입력하도록 돕는 것이 목적이다. ✓ 유저가 입력할 정보를 아는 경우 가장 좋은 방법은 정확한 정보를 텍스트 필드 내에 미리 써두는 것이다. 하지만 이는 유저로부터 얻고 싶은 정보의 형태나 내용을 이미 아는 상황(연락처 등)에만 적용 가능하다. ✓ 유저가 입력할 정보를 모르는 경우 유저가 어떤 정보를 입력할지 알 수 없는 상황에선, 텍스트 필드 바깥에 어떤 정보가 올바른 형태인지에 대한 힌트를 써둔다. (입력되어야 하는 정보명, 입력되어야 하는 정보의 사례, 정보를 입력하도록 요구, 유저가 어떻게 하면 성공할 수 있을지 안내) 📌 전환 텍스트 전환 텍스트는 로딩 등 화면이 전환됨을 알리는 텍스트 패턴이다. 유저가 자신이 누른 액션이 잘 반영되었는지 알게 하고, 시스템의 오류로 인지하지 않도록 설명하는 것이 목적이다. 📌 확정 메시지(Confirmation message) 확정 메시지는 유저에게는 보이지 않는 시스템이 돌아가고 있음을 알리는 텍스트 패턴이다. 유저가 기대하는 진행 상황이나 결과가 완료되었음을 알리는 것이 목적이다. ✓ 실시간으로 진행 상황을 알려주어야 할 때 (클라우드 등) 유저가 로컬에 저장되는 메시지를 쓸 때, 이 정보가 저장되는 것인지 아닌지 불안할 때가 있다. 이때, 확정 메시지와 전환 메시지를 함께 활용하면 좋다. ✓ 하나의 액션에 초점을 맞출 때 유저가 중요한 액션을 수행했을 경우, 완료 메시지를 전달하기 위해 한 화면 전체를 사용하는 경우가 있다. "이미지가 담긴 포스팅이 완료되었습니다." 등의 문장형으로 길게 설명할 필요 없이, "제출 완료!"같은 단일 단어로 대체할 수 있다. ✓ 액션에 대한 결과가 늦게 나올 때 1:1문의 등 몇 시간, 길게는 며칠이 지난 뒤 결과를 받아볼 수 있는 액션의 경우 해당 기간에 대한 언급을 디스크립션으로 달아줘야 한다. 📌 알림(Notification) 알림은 푸시, 배너 등의 컴포넌트에 쓰이는 텍스트 패턴이다. 조직이 어필하고 싶은 경험에 좀 더 집중하도록 알리고, 상기하는 것이 목적이다. 주로 9번 확정 메시지보다 우선순위가 높다. 다양한 종류의 알림이 어떻게 표시될 수 있는지를 고려해야 한다. 똑같은 텍스트가 각각의 컴포넌트에 쓰였을 때 어떤 맥락으로 유저에게 닿을 수 있는지를. 📌 에러(Error) 에러는 그들이 처한 에러 상황에 대해 설명하고, 가능하다면 해결책까지 제시하는 텍스트 패턴이다. 사용성 휴리스틱 9번에 의하면, 에러가 발생했을 때는 유저가 인지, 진단, 해결까지 매끄럽게 진행할 수 있도록 도와야 한다. ✓ 인라인 에러(Inline Error) 짧고 명확하며, 경험의 맥락을 끊지 않고 해결할 수 있는 에러에 대한 메시지다. ✓ 디투어 에러(Detour Error) 팝업, 스낵바 등을 띄워 유저의 주의를 진행 중인 경험보다 해당 에러에 집중 시키고, 해결 방법을 제시한다. ✓ 블라킹 에러(Blocking Error) 주로 앱 내에서 해결하지 못하는 에러가 있을 때(인터넷 연결 끊김, 시스템 에러 등), 전체 화면을 사용해서 알린다. (👋중요한 이유가 뭔가요?) 상황에 따른 메시지를 내보내야 한다는 사실은 기획자도, 디자이너도 잘 알고 있는 사실 중 하나에요. 하지만 기능 구현 등이 늘 우선이기에 디테일하게 신경쓰지 못하는 것도 사실이죠. 그래서 저는 요즘 기존의 스트링 문서 대신 우리 서비스, 프로젝트만의 Writing 기록이 가능한 문서를 계속 만들어보고 있어요. 본문에서 나눠놓은 11가지 패턴 외 우리 서비스만 갖고 있는 카테고리를 찾고, 각 성격에 맞는 표현이 적용 되어 있는지를 확인해보는 것으로 시작, 동일한 성격의 기능이나 화면이 추가 되었을 때 기존의 내용들과 일관성이 유지되도록 연결해보는 것인데요. 이와 같은 작업을 하게 될 경우 같은 상황, 다른 문구가 적용될 가능성이 낮아지게 되고, 문구를 변경할 때 역시 일괄적으로 수정 할 수 있다는 장점이 있습니다. 물론, 이를 전사적으로 적용하기 까지는 꽤 오랜시간이 걸릴 수 있어요. 이미 서비스 중인 상태라면 더더욱. 서비스 초기라면 지금 바로, 활발히 서비스 중인 상태라면 아예 메인 업무로 잡아 놓고 시간을 투자해보는 것을 추천드립니다. 그만한 가치가 있다는 사실을 오늘 소개한 글을 통해서도 충분히 알 수 있기 때문! (💌함께 읽어보세요!) ✓ 글이 디자인이 될 때 - UX Writing : https://news.publy.co/comments/9316 ✓ 좋은 Microcopy를 위한 7가지 팁 : https://news.publy.co/comments/9131

UX writing 텍스트 패턴 11가지

brunch

200명이 넘는 전문가가 해석하는 트렌드를
피드에서 확인해 보세요