1. 시작하기 전에
Material Design의 커뮤니케이션 안내를 알아보세요.
명확하고 간결한 글쓰기는 사용자 환경의 품질에 중요한 역할을 합니다. Material Design의 UX 작성 가이드라인을 알아보고 사용자가 원하는 곳으로 이동할 수 있도록 지원하는 UI 텍스트 원칙을 적용해 보세요.
Material의 커뮤니케이션 섹션에는 UX 작성보다 훨씬 많은 내용이 포함되어 있습니다. 데이터 시각화부터 온보딩, 빈 상태 패턴에 이르기까지 다양한 주제를 살펴보세요.
작가처럼 생각하세요.
UX 작성자 또는 콘텐츠 전략가와 협력하는지 여부와 관계없이 이 Codelab에서는 누구나 인터페이스에 적합한 언어를 선택할 수 있는 방법을 소개합니다. 라벨, 알림과 같은 사용자 대상 텍스트의 명확성, 간결성과 같은 제품 경험을 개선하기 위해 작가가 집중할 수 있는 질문을 하는 방법을 배우게 됩니다.
학습할 내용
- UX 라이팅이란 무엇이며 왜 중요한가요?
- 다양한 맥락에 적합한 어조와 음성을 결정하는 방법
- 구성요소별 작성 고려사항
- 추가 학습을 위한 리소스
필요한 항목
- 문서를 시작하거나 종이를 준비하여 Codelab 연습을 따라 합니다.
기본 요건
이 실습은 Material Design의 기본적인 글쓰기, 문법, 디자인 개념을 기반으로 합니다. UI의 대화형 요소에 대한 일반적인 이해가 있으면 도움이 됩니다.
영어에 중점을 두지만 광범위하게 유용함
이 실습에서는 더 나은 사용자 환경을 위한 커뮤니케이션 원칙을 다룹니다. 하지만 예시와 단어 선택은 미국 영어의 관례를 기반으로 합니다.
컨텍스트와 문화의 변화에 민감하게 반응하는 이 가이드는 모든 언어의 UI에 적용할 수 있습니다. 9단계에 나열된 리소스에서 영어 이외의 언어에 관한 고려사항을 자세히 확인할 수 있습니다.
2. UX 작성이란 무엇인가요?
개요
UX writing (UXW)은 콘텐츠 전략 또는 콘텐츠 디자인이라고도 합니다. 사용자 인터페이스의 텍스트를 뒷받침하는 분야이며, 명확한 설명, 단어 선택, 정보 계층 구조 등을 통해 사용자 환경을 개선하는 수단으로 언어를 바라보는 별도의 분야입니다.
UX 작성자처럼 생각하면 작업 완료, 사용자 만족도, 전반적인 사용 편의성을 높일 수 있습니다.
UX 작성의 차별점은 무엇인가요?
UX 글쓰기는 실제 사용자를 위한 글쓰기입니다.
사용자 환경을 위한 글쓰기는 UI 텍스트의 기본 목표는 사용자 여정을 지원하는 것이라는 가정에서 시작해야 합니다.
텍스트의 단어 선택, 길이, 스타일, 구조는 사용자가 기능과 작업의 목표와 이점을 얼마나 잘 이해하는지에 영향을 미칠 수 있습니다.
스타일
글쓰기 스타일은 독자의 요구사항과 목표를 따라야 합니다. UXW는 공식 글쓰기의 학문적 규칙 (신문이나 논픽션 책에서 읽는 내용)과 사람들이 온라인에서 소통할 때 사용하는 덜 공식적인 스타일 (이메일, 문자, 채팅)을 결합합니다.
앱과 인터페이스를 위한 글쓰기는 다음 두 가지 주요 이유로 덜 형식적인 어조를 사용합니다.
- 온라인 커뮤니케이션은 인쇄물이나 학술적 글쓰기보다 덜 형식적입니다.
- UI 텍스트는 화면 공간에 의해 제한되며 글자 수가 제한됩니다.
사용자 중심 글쓰기, 즉 '작동하도록 만들기'
UX 작성에서는 문법 준수보다는 목표 지향적인 스타일을 우선시합니다. 문법이 명확성과 일관성에 유용하지 않다는 의미는 아니지만, 먼저 사용자 요구사항을 고려하고 문법 결정을 따르는 것이 좋습니다.
단어 선택과 스타일의 경우 스타일 결정의 기본 원칙은 간단히 작동하도록 만들기일 수 있습니다. 인터페이스에 가장 적합한 선택이 공식적인 글쓰기 규칙과 항상 동일하지는 않습니다.
사람들이 읽는 방식에 맞춰 작성
UXW는 여러 언어의 독자가 전체 단락을 읽는 대신 F자 모양으로 페이지를 스캔하는 방식을 반영해야 합니다. 독자 행동을 예측하면 텍스트가 실제로 경험되는 방식으로 글을 쓸 수 있습니다.
웹 콘텐츠의 경우 짧은 단락, 스캔 가능한 설명 제목, 전략적 서식으로 이어지는 경우가 많습니다.
온라인 읽기 패턴 연구의 시선 추적 예시 nngroup.com (2006, 2017)의 이미지 및 연구
테스트
동일한 텍스트로 다양한 문화권이나 연령대의 요구사항을 충족하기는 어려울 수 있습니다. 메시지를 전달하기 위한 적절한 단어를 찾는 것은 간단해 보일 수 있지만 언어와 이해는 매우 주관적입니다.
글이 의도한 대로 전달되도록 하려면 테스트를 통해 실제 명확성, 의미, 효능을 평가하는 것이 중요합니다.
접근 방식
간편하고 저렴함
- 작성한 내용을 소리 내어 읽어 보세요. 실제 사람에게 말하는 것처럼 들렸나요? 그렇지 않으면 다시 작성해 보세요.
- 다른 사람에게 내 말을 읽고 내 말이 무슨 뜻인지 설명해 달라고 요청하기
- UI 맥락에서 작성한 글의 예시를 사용하여 여러 사람을 대상으로 설문조사
- Google 트렌드 또는 Google 도서 Ngram Viewer를 사용하여 특정 단어나 구문이 다른 단어나 구문보다 더 일반적인지 알아봅니다.
광범위한 콘텐츠 테스트에서는 다음과 같은 휴리스틱을 사용합니다.
- 이해도 및 가독성
- 작업 완료 및 작업 시간
- 어조 및 인식 평가
3. 원칙
개요
Material의 글쓰기 가이드라인의 원칙은 정확하고 간결한 언어를 통해 신뢰를 구축하고 명확성을 개선하도록 설계되었습니다. Material의 원칙을 추가하거나 빼서 자체 요구사항을 충족할 수 있습니다.
가이드라인을 사용하면 여러 사용자가 그룹으로서 더 일관된 결정을 내릴 수 있습니다.
간결하되 로봇처럼 딱딱하지 않게
제한된 수의 아이디어에 초점을 맞춘 짧고 스캔 가능한 텍스트 세그먼트를 작성합니다.
단순하고 직접적으로 작성합니다.
텍스트를 이해하기 쉬운 간단하고 직접적인 언어를 사용하세요. 글을 쓸 때마다 아이디어를 더 쉽게 표현할 방법이 있는지 자문해 보세요.
사용자에게 명확하게 알립니다.
영어에서는 2인칭 (you 또는 your)이 더 직접적이고 명확한 경우가 많습니다. 소유권을 강조해야 하는 경우 첫 번째 사람 (나, 내)을 사용할 수 있습니다.
'나' 및 '내'는 사용자를 지칭하는 더 직접적인 방법입니다.
'나' 또는 '내'는 사용자의 위치나 음성과 앱의 음성을 결합하므로 혼동을 줄 수 있습니다. '나' 또는 '내'는 콘텐츠 또는 작업의 명확한 소유권을 강조하는 데 사용할 수 있습니다.
1인칭과 2인칭을 혼용하지 마세요.
혼동을 방지하려면 '나'/'내'와 '너'/'네'가 동일한 문구에 포함되지 않아야 합니다.
핵심적인 세부정보를 전달합니다.
사용자가 여러 옵션을 해석하는 대신 당면한 작업에 집중할 수 있도록 특정 맥락에 필요한 세부정보만 전달하세요. 대화상자나 알림에서 작업과 중요한 결과를 설명하는 데 필요한 정보를 고려하세요.
4. 음성 및 어조
개요
경험을 위해 만들고 싶은 어조와 목소리를 고려하지 않고는 일관성과 명확성을 달성하기 어렵습니다.
다섯 문장을 함께 읽는데 각 문장은 다른 네 문장을 보지 못한 서로 다른 사람이 작성했다고 가정해 보세요. 개인이 자신의 어조와 스타일로 작성하기 때문에 UI를 탐색할 때 일관성이 없다고 느껴질 수 있습니다.
여러 사람이 제품에 텍스트를 제공하는 경우 어조 및 음성에 관한 가이드라인을 통해 의미와 목적을 공유하면서 단어를 선택할 수 있습니다.
명확하고 포괄적인 어조를 사용하며 직접적인 톤을 사용하는 이전 Android 캠페인의 예
어조란 무엇인가요?
목소리는 환경 전반에서 일관되어야 하지만 어조는 맥락에 따라 달라질 수 있습니다.
음성
어조는 경험 전반에 걸쳐 전달되는 분위기, 태도 또는 관점을 의미합니다. 브랜드의 '개성'을 나타내는 한 측면이며, 제품이 '어떻게 들리는지'를 파악할 수 있습니다.
어조 원칙은 단어 선택을 안내하며, 어조가 실제로 사용되는 예를 함께 제시할 때 가장 효과적입니다. 예시가 없으면 원칙이 너무 추상적이어서 그룹의 스타일 결정을 안내하기 어려울 수 있습니다.
다음은 음성 원칙의 몇 가지 일반적인 예입니다.
- 유용성: 기계가 아닌 사람처럼 작성합니다. 오류를 설명하고 해결 방법을 제안합니다.
- 접근성: 신규 사용자가 텍스트를 쉽게 이해할 수 있도록 합니다. 기술 용어나 고급 용어가 설명되거나 대체되었는지 확인합니다.
- 영감을 주는: 경험 전반에 걸쳐 혜택과 성과를 강조합니다. 목표와 결과를 긍정적이고 능동적인 어조로 표현합니다.
어조
글의 어조는 의도와 관계없이 분위기와 감정을 전달합니다.
예를 들어 음성이 '도움이 되는' 및 '인간적인'으로 정의된 경우, 해당 목표를 강화하는 어조는 요구적이고 간결하기보다는 지원적이고 캐주얼할 수 있습니다.
궁극적으로 개인마다 '지지적이고 캐주얼'하다고 생각하는 내용도 다르기 때문에 단어 목록과 콘텐츠 매트릭스를 사용하면 어조를 실행 가능하게 만들 수 있습니다. 이 내용은 6~8절에서 자세히 설명합니다.
중요한 이유
적절한 어조는 사용자의 신뢰와 자신감을 높일 수 있습니다. 예를 들어 오류 메시지가 지원이 아닌 농담의 형태를 취하는 경우 가벼운 어조로 인해 사용자의 불만이 합리적이고 해결 가능하다는 점을 보여주지 못할 수 있습니다.
톤 맵 만들기
어조 지도를 사용하면 음성과 어조를 조정하는 전략을 계획하고 문서화할 수 있습니다.
사용자 여정의 주요 지점을 고려하는 것부터 시작하세요. 게임, 금융 도구, 쇼핑 앱 등 무엇을 만들든 온보딩, 확인, 오류와 같은 사용자 여정의 지점에 따라 어조가 달라져야 합니다.
예를 들어 루틴 확인을 위한 재미있는 알림은 처음에는 좋은 아이디어처럼 보이지만 다섯 번째 수신되면 기쁨이 짜증으로 빠르게 바뀔 수 있습니다.
오류 상태는 톤 매핑이 캐주얼하고 대화적인 톤에서 지원적이고 자세한 톤으로의 전환을 알리는 데 도움이 되는 또 다른 예입니다.
1. 먼저 원하는 톤의 범위를 나타낼 수 있는 두 가지 측정기준 또는 스펙트럼을 선택합니다.
UX 글쓰기에서 어조의 중요한 축에 관한 몇 가지 아이디어는 다음과 같습니다.
- 장난스러운 분위기 vs. 진지한 분위기
- 간결한 표현과 자세한 표현
- 감정적 vs. 중립적
- 캐주얼 vs. 엄격
2. 교차하는 두 선으로 그리드를 그리고 전략을 세우려는 톤의 측정기준 하나로 각 축을 식별합니다.
아래 예에서 재미있는 vs. 진지한과 간결한 vs. 자세한은 지도의 측정기준입니다.
3. 다음으로 자주 사용하는 메시지 유형 또는 패턴을 나열합니다. 매핑할 수 있는 메시지 유형은 다음과 같습니다.
- 온보딩
- 확인 및 승인
- 고객센터
- 오류
- 알림
- 라벨
- 빈 상태
4. 각 메시지 유형을 두 축을 기준으로 지도에 배치합니다.
다음은 몇 가지 고려사항입니다.
- 특정 메시지에 사용할 수 있는 화면 공간은 얼마나 되나요?
- 메시지 유형에 대한 이해가 얼마나 중요하거나 필수적인가요? 파괴적인 조치가 관련되어 있나요?
- 메시지 유형의 의도와 관련하여 사용자가 알아야 하거나 느껴야 하는 것은 무엇인가요? 예를 들어 온보딩에는 가볍지만 실용적인 의도가 수반되는 경우가 많습니다.
5. 완성된 예시
다음은 일반적인 앱 환경에 따라 차트로 표시된 메시지 유형의 예입니다.
앱이 결제 또는 법적 문제를 다루는 경우 이해가 중요한 상황에서는 어조를 더 심각하고 자세하게 조정할 수 있습니다. 반대로 개인 정보 보호나 재정 문제가 아니고 고객센터에서 자세한 정보를 확인할 수 있는 경우 더 간결하게 작성할 수 있습니다.
5. 콘텐츠 구조
개요
명령문의 구조는 이해도를 높이고 사용자가 현재 작업에 집중하는 데 도움이 될 수 있습니다. 이미지를 텍스트와 페어링할 때 정보 구조의 또 다른 목표는 접근성을 향상하는 것입니다.
목표로 시작하기
사용자의 목표로 문장을 시작합니다. UX 작성은 작업 지향적이므로 문구의 일반적인 패턴은 작업의 동기 부여 프레임을 설정하는 목표를 강조한 다음 작업을 완료하는 데 필요한 작업을 문장에서 자세히 설명하는 것입니다.
필요에 따라 세부정보 표시
필요에 따라 상황에 맞게 정보를 표시합니다. 이 접근 방식을 점진적 공개라고도 합니다. 사용자가 기능을 살펴보고 추가 정보가 필요할 때 기능에 관한 세부정보를 표시합니다.
정보를 전략적으로 공개하려면 사용자 여정의 모든 지점에서 정보 요구사항을 신중하게 고려해야 합니다. 목표는 특히 실행 취소할 수 없는 작업의 결과와 같은 내용을 숨기거나 누락하는 것이 아니라 당면한 작업에 즉시 집중할 수 있도록 하여 사용자에게 도움을 주는 것입니다.
액세스 가능한 콘텐츠 디자인
효과적인 글쓰기는 시력이 낮은 사용자나 스크린 리더를 사용하는 사용자를 위한 이미지와 텍스트 페어링 고려사항까지 포함합니다. Material의 접근성 작성 섹션에는 페이지의 콘텐츠 디자인이 모든 사용자에게 적합하도록 이미지와 캡션을 페어링하는 방법에 관한 안내가 포함되어 있습니다.
표시되는 텍스트와 표시되지 않는 텍스트
접근성 텍스트에는 다음이 포함됩니다.
- 표시되는 텍스트: UI 요소 라벨, 버튼, 링크, 양식의 텍스트
- 표시되지 않는 텍스트: 화면에 표시되지 않는 설명 (예: 이미지의 대체 텍스트)
표시되는 텍스트와 표시되지 않는 텍스트가 모두 설명적이고 의미가 있으면 사용자가 화면의 제목이나 링크를 사용하여 탐색하는 데 도움이 됩니다. 스크린 리더를 사용하면 접근성 텍스트를 테스트하고 접근성 텍스트를 추가할 수 있는 위치를 파악할 수 있습니다.
대체 텍스트
대체 텍스트는 시각적 UI를 텍스트 기반 UI로 변환하는 데 도움이 됩니다. 대체 텍스트는 이미지를 볼 수 없는 사용자를 위해 이미지를 설명하는 코드의 짧은 라벨 (최대 125자)입니다.
아래 예에서 화면 리더는 이미지의 가장 필수적인 설명자를 제공하여 주변 텍스트의 맥락을 제공합니다.
대체 텍스트는 이미지에만 사용되므로 대체 텍스트에 '이미지' 또는 '사진'을 추가할 필요가 없습니다. 스크린 리더는 이미지를 대신하여 대체 텍스트를 소리 내어 읽어줍니다.
6. 단어 선택
개요
화면 공간이 제한적인 경우 메시지와 어조를 전달하기 위해 적절한 단어를 선택하는 것이 중요합니다. 동일한 단어를 일관되게 사용하면 사용자가 환경에 익숙해지는 데 도움이 됩니다.
모든 수준의 독자를 위해 작성합니다.
모든 독서 수준에서 명확하고 쉽게 이해할 수 있는 일반적인 단어를 사용하세요.
전문 용어 없음
더 간단한 문구로 동일한 아이디어를 비슷하게 전달할 수 있는 경우 업계별 용어나 UI 기능을 위해 만들어진 이름을 사용하지 마세요.
일관된 단어 사용
UI 기능 전반에서 일관된 방식으로 단어를 사용합니다.
현재 시제로 작성
현재 시제를 사용하여 제품 동작을 설명합니다. 제품이 항상 작동하는 방식을 설명할 때는 미래 시제를 사용하지 마세요.
과거 또는 미래 시제로 작성해야 하는 경우 단순 동사 형태를 사용하세요.
라벨로 UI 요소 및 컨트롤 참조
라벨은 컨트롤 또는 요소의 기능을 식별합니다. 버튼이나 스위치의 텍스트와 같이 컨트롤 자체에 표시되거나 컨트롤 근처에 표시됩니다. UI 컨트롤이나 요소를 언급하려면 라벨 텍스트를 사용하여 언급하세요. (요소 또는 컨트롤의 유형을 명시하지 않음)
핵심적인 세부정보를 전달합니다.
사용자가 작업에 집중하는 데 필요한 세부정보만 전달합니다.
핵심 내용
- 모든 수준의 독자를 위해 작성합니다.
- 새로움을 위해 단어를 사용하지 말고 일관되게 사용하세요.
- 현재 시제
- 숫자 사용
7. 구성요소를 위한 글쓰기
개요
Material 구성요소는 UI에 의도가 있으며 특정 구성요소에 맞게 작성하면 의도를 강화할 수 있습니다.
이러한 구성요소에는 Material.io에 작성 가이드가 있습니다.
대화상자
대화상자는 다음 용도로 사용됩니다.
- 앱의 정상적인 작동을 차단하는 오류
- 특정 사용자 작업, 결정 또는 확인이 필요한 중요한 정보
구성요소 | 우선순위 | 사용자 작업 |
스낵바 | 낮은 우선순위 | 스낵바는 자동으로 사라집니다. |
배너 | 눈에 띄는 중간 우선순위 | 배너는 사용자가 닫거나 배너를 유발한 상태가 해결될 때까지 유지됩니다. |
Dialog | 최고 우선순위 | 사용자가 대화상자 작업을 실행하거나 대화상자를 종료할 때까지 대화상자가 앱 사용을 차단합니다 (사용 가능한 경우). |
제목
대화상자의 목적은 제목과 버튼 텍스트를 통해 전달해야 합니다.
제목에는 간결하고 명확한 문장이나 질문이 포함되어야 합니다.
스낵바
스낵바에는 실행 중인 프로세스와 직접 관련된 텍스트 라벨이 포함됩니다. 휴대기기에서 라벨에는 최대 두 줄의 텍스트가 포함될 수 있습니다.
스낵바는 사용자가 앱에서 실행한 프로세스에 대해 조치를 취할 수 있는 단일 텍스트 버튼을 표시할 수 있습니다.
8. 콘텐츠 매트릭스에 모두 넣기
개요
콘텐츠 매트릭스는 글쓰기에서 사용하고 재사용할 단어와 선택사항을 추적하는 표입니다. 콘텐츠 매트릭스는 구문을 일관되게 작성하고 추적하는 데 중요한 리소스이며 향후 작성자를 위한 참고 자료로도 사용됩니다.
스프레드시트의 멋진 이름입니다('전문 용어 없음'이라는 단어 선택 가이드라인을 위반함).
콘텐츠 매트릭스 설정
효과가 좋고 반복할 수 있는 문구와 단어를 추적할 수 있는 스프레드시트 또는 표를 만듭니다.
콘텐츠 매트릭스의 목표는 메시지가 다음에 어떻게 연결되는지 파악하고 문서화하는 데 도움을 주는 것입니다.
- 사용자 목표 및 컨텍스트
- 특정 목표를 지원하는 정보 요구사항을 명시적으로 설명합니다.
- 정보 요구사항을 간결하고 전문 용어가 없는 언어로 다시 설명하는 초안 및 최종 UI 텍스트
콘텐츠 매트릭스의 UI 텍스트 결정에는 다음 사항도 반영되어야 합니다.
- 어조 및 음성 원칙
- 구성요소 유형
마지막으로 콘텐츠 행렬에는 단어 목록이 포함될 수 있습니다.
- 기능, 작업, 목표를 설명하는 데 사용해야 하는 단어와 용어를 나열합니다.
- 동의어 또는 유용하지 않은 문구로 피해야 할 단어를 나열합니다.
주의사항:
- 기술 용어 바꾸기 또는 정의하기
- 동작이나 명사에 가장 일반적인 단어 선택 사용
9. 고급 주제 및 리소스 (선택사항)
개요
이 Codelab에서는 UX 작성 시작을 위한 권장사항과 방법을 다룹니다. 이것은 빙산의 일각에 불과합니다.
리소스
10. 축하합니다.
수고하셨습니다. 명확하고 효과적인 UI 텍스트를 작성할 수 있습니다.
