UX 라이팅: 사용자 경험을 개선하는 텍스트를 쓰는 법

By Marina Yalanska on Tibuk Blog

Tibuk Studio의 블로그에 게재된 원문을 DeepL로 번역한 후 교정한 글입니다. 교정 내역은 여기에서 보실 수 있습니다. 예시를 보여주는 이미지 자료는 재사용하지 않았으니 원문에서 확인하세요. 하이퍼링크는 원문 설정 그대로 영문 아티클로 연결됩니다.

이 글에서는 UX 라이팅을 간략히 정의하고, 효과적인 인터페이스 문구의 특징을 설명하며, 긍정적인 사용자 경험을 위한 개선에 대한 유용한 팁을 공유합니다.

언젠가 나는 꼭 맞는 단어를 찾을 것이고, 그 단어는 단순할 것이다.

UX 라이팅의 본질을 완벽하게 반영할 것이라는 생각은 못 했을 잭 케루악의 말입니다. 우리는 디자인에 대해 보통 시각적으로 매력적이고 사용하기 쉬운 것으로 생각하며 시각적 이미지를 먼저 떠올립니다. 하지만 사용자가 가장 자주, 또 다양하게 접하는 콘텐츠 유형은 바로 텍스트입니다. 오늘 글에서는 UX 라이팅의 본질과 효과적인 인터페이스 문구의 특징, 그리고 이를 개선하기 위해 잘 점검해야 할 관행에 대해 살펴보고자 합니다.

UX 라이팅이란 무엇인가요?

UX 라이팅는 웹과 모바일의 사용자 인터페이스에 들어갈 텍스트를 작성하는 전문적인 활동입니다. 여기에는 버튼과 아이콘의 짤막한 레이블부터 태그 라인, 오류 메시지, 알림, 탐색 프롬프트 및 지침, 가이드라인 등의 텍스트를 작성하는 것이 포함됩니다.

텍스트는 디자인의 일부이자 사용자 경험의 일부라는 사실을 명심해야 합니다.

‘UX 라이팅’은 종종 ‘카피라이팅’으로 대체됩니다. 두 용어가 같은 의미인가요?

기본적으로 두 용어는 서로 다른 유형의 활동을 가리킵니다. 카피라이터는 주로 제품, 서비스, 도구, 지적이고 창의적인 내용 등 무언가를 판매하는 텍스트를 씁니다. UX 라이터는 인터페이스와 사용자의 커뮤니케이션을 원활하게 하고, 사용자가 당면한 상황을 명확히 이해하게 하며, 오류가 발생하거나 상호 작용에 문제가 있을 때 부정적인 경험을 완화하는 텍스트를 쓰는 일을 합니다.

그럼에도 불구하고 광고 영역에서 '카피'라는 말이 '텍스트'의 동의어로 사용되면서 UI/UX 디자인에도 빠르게 자리 잡았습니다. 이에 따라 인터페이스용 텍스트를 작성하는 사람들도 ‘카피라이터’라고 불렀는데, 이는 'UX 라이터'라는 용어가 등장하기 훨씬 전의 일입니다. 게다가 회사에서 마케팅 텍스트와 인터페이스 텍스트를 같은 사람이 작성하는 경우가 많습니다. 두 용어는 서로 다른 업무를 가리키지만 여전히 동의어로 사용되는 경우가 많으며, UI의 텍스트는 일반적으로 카피라고 불리니 참고하세요.

모든 유형의 상호작용에 텍스트가 필요한가요?

우리는 앞서 사용자 인터페이스에서 아이콘과 문구의 관계에 관한 글에서 이 문제를 다뤘습니다. 실제로 시각 자료는 텍스트보다 훨씬 빠르게 뇌에 전달되며, 중요한 정보는 텍스트를 인식해 얻은 것이라도 뇌에서는 이미지로 고정되는 경우가 많습니다. 사용자 인터페이스에서는 기본적인 상호 작용이 몇 초 안에 이뤄져야 하기 때문에 모든 것을 그래픽으로 전환하는 이유도 이런 측면에서 이해할 수 있습니다. 한편 의미의 측면도 있습니다. 사용자가 순식간에 이미지를 인식해도 전달하는 메시지가 명확하지 않고 다른 의미로 읽힐 수 있다면, 속도가 저하돼 긍정적인 사용자 경험을 가져다주지 못합니다.

통화를 뜻하는 수화기, 메일을 뜻하는 우편 봉투, 검색을 뜻하는 돋보기 등 그래픽으로 통용되는 연상의 사례는 다수 찾아볼 수 있습니다. 물론 이런 그래픽을 사용하면 이미지 대신 문구를 사용하는 것보다 UI 기능을 훨씬 더 빠르게 인식할 수 있습니다. 하지만 아이콘의 이미지가 명확하지 않은 경우에는 신중하게 고려해야 합니다. 텍스트가 아이디어나 데이터를 더 명확하게 전달하는 경우가 있기 때문에 텍스트로 아이콘을 보조하도록 이중으로 구성하는 것이 효과적입니다.

효과적인 UX 텍스트의 4가지 기본 특징

모든 인터페이스의 문구 콘텐츠는 다음과 같은 4가지 기본 요소에 기반해야 합니다.

 

명확성 (사용자가 이해할 수 있고, 핵심 메시지가 흐릿하거나 복잡하지 않아야 함)  

간결성 (유의미하고 간결하며 의도를 잘 전달해야 하고 하나마나 한 이야기가 없어야 함)  

유용성 (사용자에게 필요한 정보를 제공하거나 상호 작용에 도움이 돼야 함)  

일관성 (하나의 디지털 제품 내 인터페이스 문구가 동일한 문체, 톤, 보이스 및 용어를 유지함)  

이제 긍정적인 사용자 경험으로 이끄는 텍스트를 작성하는 데 유용한 몇 가지 사례를 살펴보겠습니다.

UX 라이팅에 유용한 팁

1. 가능하면 처음부터 UI에 실제 문구를 입혀보자

사용자 인터페이스의 초기 버전을 작업할 때 UX 디자이너는 소위 로렘 입섬(Lorem Ipsum)으로 채워 넣곤 합니다. 라틴어처럼 보이지만 실제로는 아무 의미도 없는 일종의 플레이스홀더 텍스트로 자주 쓰이죠. 웹페이지, 모바일 화면, 잡지나 신문 페이지의 레이아웃에서 텍스트 영역을 자연스럽게 보이게 합니다.

한참 디자인을 하다 보면 문구 영역으로 배치한 위치에 그냥 이 말도 안 되는 텍스트를 복붙에 넣고 싶은 마음이 듭니다. 하지만 그렇게 하는 게 왜 별로 좋은 생각이 아닐까요?

첫째, 텍스트는 디자인의 일부입니다. 다양한 문자 조합은 서로 다르게 보입니다. 단어마다 분량과 구조가 다릅니다. 특히 웹페이지의 시각적 계층 구조에서 가장 중요한 요소 중 하나이며 상호 작용이 시작된 지 몇 초만에 눈에 들어오게 되는 태그 라인의 경우 더욱 그렇습니다. 따라서 ‘로렘 입섬’으로 채웠을 때 좋아 보이던 게 실제 페이지나 화면에 쓰일 텍스트로 채웠을 때는 그렇지 않을 수 있습니다.

둘째, 사실적인 텍스트를 쓰면 프로토타입이 진짜 같고 자연스러워집니다. 예컨대 조리 기구를 판매하는 웹사이트를 디자인 한다면, 디자인 초기 단계라도 플레이스홀더에 농기계 사진이나 일러스트를 쓰지 않을 겁니다. 왜 그럴까요? 디자인 컨셉과 제품에 필요한 디자인 목표가 연결되지 않기 때문입니다. 레이아웃의 텍스트 부분도 마찬가지입니다. 디자인에 사용하는 문구는 레이아웃의 다른 모든 요소와 통합된 하나의 이미지와 경험을 구현해야 합니다. 또한 알림 팝업, 시스템 메시지, 웹페이지의 텍스트 영역을 멋지게 꾸미기 위해 몇 시간이고 들일 수 있지만, 이 UI에 사용할 실제 문구의 길이와 구조, 심지어 메시지까지 달라진다면 그 모든 노력은 물거품이 되고 말 겁니다.

2. 사용자가 페이지 콘텐츠를 훑어보기 좋게 견고한 텍스트 계층 구조를 구축하자

훑어보기 좋은 웹 인터페이스에 관한 글에서 사용자는 페이지나 화면의 모든 텍스트 요소를 읽어가며 상호 작용을 시작하지 않는다는 이미 잘 알려진 사실을 언급했습니다. 사용자는 우선 관심을 끄는 훅을 찾아 훑어봅니다. 충분히 납득이 되고 나면 사용자는 다시 한 번 주의 깊게 자세한 내용을 살펴보기로 결정합니다. 사진은 무조건적으로 훨씬 더 눈에 잘 띄고 더 빨리 인식되지만, 의사 결정에 중요한 역할을 하는 요소는 보통 텍스트입니다. 우리가 여러 세대를 거치며 관습적으로 텍스트를 주요 정보원으로 보는 데 익숙해졌다는 점이 그 이유 중 하나죠.

그러니 상호 작용이 시작된 지 몇 초 안에 텍스트 형식으로 제시된 주요 메시지가 눈에 잘 띄어야 한다는 점을 명심하세요. 모든 텍스트 요소는 사용자가 페이지나 화면을 스캔하고 핵심 메시지를 전달하는 부분과 덜 중요한 부분을 빨리 파악할 수 있도록 타이포그래피 계층 구조에 따라 구성되어야 합니다. 또한 텍스트가 페이지나 화면의 주요 이미지(일러스트레이션, 사진, 3D 렌더링 이미지 등)와 조화를 이뤄야 합니다.

3. 숫자와 형식 요소로 시선을 사로잡자

닐슨 노먼 그룹은 사용자 행동을 파고 든 한 블로그에서 흥미로운 통찰을 공유했습니다. 시선 추적 연구에 따르면, 사용자가 웹페이지를 훑어볼 때 보통은 그냥 흘려 읽고 말 수많은 단어 사이에 끼어 있는 경우라도 숫자는 사용자의 시선을 사로잡고 붙든다는 것입니다. 사람들은 숫자를 보면 무의식적으로 사실, 통계, 크기, 거리 등 자신에게 유용할 지 모르는 무언가와 연관 짓습니다. 그렇기 때문에 문구 중에 위치한 숫자에는 쉽게 낚이지만, 숫자를 풀어 쓴 단어는 텍스트 속에서 곧잘 놓칩니다. 또 숫자가 표현하는 게 무엇이든 텍스트로 풀어 쓴 것보다 짧기 때문에 디자이너 입장에서도 콘텐츠를 더 간결하게 만들 수 있고 정보를 훑어보는 시간도 짧아집니다.

위에서 언급한 이유로 몇 가지 규칙과 습관을 깨야 할 수 있습니다. 관습적으로 문장의 첫 머리에는 숫자를 풀어 쓰고, 0부터 10까지의 숫자 역시 풀어 쓰는 등 많은 양의 텍스트로 이뤄진 기사 또는 여타 유형의 콘텐츠에서는 이러한 규칙을 모두 따르는 것이 좋습니다. 그러나 인터랙션과 함께 제공되는 텍스트의 경우 최대한 응축해야 하므로 숫자로 사용자의 주의를 끄는 편이 좋습니다.

또한 특정 정보를 굵은 글꼴과 이탤릭체, 단어 크기, 음수 공백, 다양한 색상과 강조로 표시하는 것도 잊지 마세요. 책과 잡지 디자인에서 시작해 지금까지 오랜 시간 효과를 증명해 온 방법입니다. 다만 사용자의 주의를 끌겠다며 너무 많은 요소를 무리하게 남용하지 마세요. 아론 월터는 "보는 이의 주의를 끌기 위해 전부 다 소리 치면 아무 소리도 들리지 않는다."고 말했습니다.

4. 문법은 유연하게, 정보에 집중하자

좋은 경험을 구현하려면 기본적으로 텍스트가 명확하며 문법적으로 정확해야 한다는 데 의심할 여지가 없을 것입니다. 그러나 버튼에 들어갈 마이크로 카피나 몇 안 되는 글자 수로 제한된 팝업 화면의 메시지를 작성할 때는 다른 방식이 필요할 수 있습니다. 따라서 복잡한 구조를 피하고 중요도가 떨어지는 요소를 줄이려면 문법 원칙을 어디까지 지킬지 결정해야 합니다.

예를 들어, 머티리얼 디자인(Material Design)의 글쓰기 가이드에서는 레이블, 호버 텍스트, 글머리 기호 목록, 대화 상자 본문 텍스트의 마침표나 레이블 뒤의 콜론과 같은 불필요한 구두점을 피할 것을 권장하고 있습니다.

또한 UX 문구의 경우 현재 시제를 사용하되 간결한 형태로 작성할 것을 권장합니다.

또한 가능하면 수동태 대신 능동태를 선택하는 것이 좋습니다. 대부분의 경우 능동태로 쓰는 것이 더 자연스럽고 명확해 보일 뿐만 아니라 영어에 능숙하지 않은 사용자에게도 더 친화적입니다.

모바일 및 웹 인터페이스의 텍스트의 역할은 정보를 제공하는 것임을 명심하세요. 매일 엄청난 양의 정보에 압도당하는 사용자들은 빠르고 손쉽게 정보를 얻기를 원합니다. 규칙을 어겨가며 부자연스러운 문구로 소통하라는 뜻이 아닙니다. 불필요한 내용을 걷어낸 고도의 텍스트 미니멀리즘을 구현해야 합니다. 다양한 사용자가 이해할 수 있도록 평이하고 명확한 언어를 구사해야 합니다.

닐슨 노먼 그룹은 UI 텍스트에서 피해야 할 단어와 문구를 글로 공유하기도 했습니다.

매우 (또는 기타 강조어)  

활용하다  

활성화하다  

“오늘날과 같이 발 빠르게 변화하는 세상에서…” 등 어쩌고저쩌고 늘어놓는 말들  

최종 사용자  

특히 문구를 쓸 수 있는 공간이 엄격하게 제한되어 있는 모바일 인터페이스의 경우, 사용자가 주로 이동 중에 앱을 사용한다는 점을 고려해야 합니다. 명확성과 가독성은 사용자 경험과 전환율에 직접적인 영향을 미칩니다. 그러므로 "변경 사항을 저장할까요? (Save changes?)" 같은 질문이 "변경 사항을 저장하시겠습니까? (Would you like to save changes?)"나 "변경 사항을 저장하시겠어요? (Do you want to save changes?)" 또는 "변경 사항을 저장하실 것인지 확인해 주세요. (Please confirm if you would like to save changes.)" 같은 질문보다 더 효과적이겠지요.

5. 인터랙티브 요소의 문구를 A/B 테스트 해보자

버튼 문구는 사용자 경험의 중요한 부분 중 하나입니다. UX 디자인과 라이팅에 익숙하지 않다면, 이 작지만 영향력 있는 레이아웃 요소에 얼마나 많은 시간과 노력이 드는지에 놀랄 것입니다. 버튼에 적힌 내용은 사용자 행동을 유도하고 다음에 일어날 일을 이해하게 합니다. 따라서 버튼의 색상, 배치 또는 크기와 같은 디자인 솔루션을 테스트 하듯이 버튼 레이블의 텍스트도 A/B 테스트 해보는 것이 좋습니다. 예컨대 다양한 소프트웨어와 도구를 사용하며 기술 활용 능력이 뛰어난 젊은층 사용자면서 그렇지 않은 노년층을 위해 제품을 만드는 것처럼 본인이 핵심 고객층에 속하지 않는 경우 이러한 접근이 더욱 필요합니다. 테스트를 통해 실제 사용자가 레이블을 어떻게 인식하고, 어떤 텍스트가 더 설득력 있을지 파악할 수 있습니다.

버튼은 종종 사용자에게 수락하거나 지연하거나 취소할 수 있는 선택권을 줍니다. 이러한 요소에 텍스트를 작성할 때는 닐슨 노먼 그룹이 최근 공유한 아이디어를 기억하세요. “인터페이스의 선택 항목에 사용하는 문구에 따라 사람들은 어떤 진술에 동의하게 된다. 그 문구는 보통 사용자에 관한 것이거나 그들이 취하고자 하는 행동에 관한 것이다. 사용자 경험 관점에서 보나 비즈니스 관점에서 보나 인터페이스 문구를 사용자의 의사 결정 과정에 방해가 되기 보다 도움이 되게 작성하는 것이 중요하다. 신뢰, 기대, 긍정적 자아상은 모두 사용자가 제품에 대해 갖게 될 연상을 형성한다. 선택 사항을 솔직하고 직접적으로 제시하면 신뢰와 긍정적 감정을 조성한다."

6. 자연스럽고 일관된 대화를 구축하자

텍스트로 사용자에게 선사할 수 있는 최선은 사람과 대화하는 듯한 느낌을 주는 것입니다. 명확한 커뮤니케이션 스타일과 목소리를 가진 사람이라면 도움을 주되 매번 불필요한 감동을 자아내려 애쓰지 않을 것입니다. 핵심 용어와 조작의 명칭을 정하고 모든 메시지와 알림에 일관되게 사용하세요. 예를 들어, 해당하는 경우마다 '삭제'라는 단어를 썼다면 다른 데서 같은 동작을 '제거'라는 단어로 대체하지 마세요. 긴 글이나 책에서는 동의어로 언어에 생동감을 부여하기 좋지만, 제품이 사용자의 문제를 해결하는 데 쓰이기 보다 동의어 사이의 연관성을 찾게 하느라 사용자 경험을 망칠 수 있습니다.

7. 사용자의 친구처럼 느껴지는 텍스트를 쓰자

위 내용의 연장선에서, 핵심 고객층의 기대에 부합하는 대화체를 유지하세요. 핵심 사용자가 원하는 경우가 아니라면, 언어적으로 정교한 것보다 명확하고 친근한 게 더 중요합니다. 사용자 조사를 실시하면 디자이너와 라이터가 시각 요소뿐만 아니라 문구 솔루션에 어떤 스타일이 적합할지 분명히 해준다.

8. 은어를 피하자

여기서 은어란 사용자에게 혼란을 줄 수 있는 모든 종류의 구체적이고 기술적인 용어를 의미합니다. 예를 들어, 사용자에게 동영상이 버퍼링 중이라고 알릴 때 사용자가 그 의미를 알고 있을까요? 알고 있다면 다행이지만 그렇지 않다면 더 평이한 표현을 찾아보세요. ‘활성화’보다는 대부분의 사람들이 훨씬 더 명확하게 이해할 수 있는 '켜다'가 더 낫습니다. 알프레스코 글쓰기 가이드의 예시를 확인해 보세요.

9. 대문자 표기를 잊지 마세요

대문자 표기란 기본적으로 전체를 대문자로 쓰거나 첫 글자만 대문자로 쓰는 것 (또는 인쇄하는 것)을 말합니다. 대문자 표기에는 세 가지 단계가 있습니다.  

전체 대문자 (All caps) 모든 글자를 대문자로 표기  

제목 스타일 (Title case) 4자 이하의 전치사 및 관사를 제외한 각 단어의 첫 글자만 대문자로 표기

문장 스타일 (Sentence case) 문장에서 쓰듯 첫 단어와 고유명사의 첫 글자만 대문자로 표기

제목 스타일 대신 문장 스타일로 쓰는 것이 더 친근하고 편한 느낌을 준다는 논의가 활발하게 이루어지고 있습니다. 그러나 영어 사용자가 느끼는 격식의 수준과는 별개로 텍스트 계층의 수준을 자연스럽게 드러내는 게 필요합니다. 물론 결정은 여러분의 몫이지만 대문자 표기에 대한 다음 팁을 고려하세요.  

필드 레이블, 작업, 메뉴 항목 및 페이지 제목에 제목 스타일 대문자 표기를 합니다.  

페이지 및 필드 설명이나 툴팁과 같은 긴 문구에는 문장 스타일 대문자 표기를 선택합니다.

짧은 태그 라인, 브랜드 이름, 웹사이트 헤더 내 주요 탐색 위치, 짧은 행동 유도(call-to-action, CTA) 텍스트, OK와 같은 약어 등 아주 중요한 항목에만 전체 대문자를 적절히 적용하고 다른 모든 경우에는 전체 대문자를 사용하지 마세요.

어떤 선택을 하든 가장 중요한 건 일관성을 유지하는 것입니다. 한번 결정을 내리면 전체 인터페이스에 일관되게 적용하세요. 버튼 전체에 제목 스타일 대문자 표기를 사용하기로 했다면 그 규칙을 항상 지키도록 하세요. 일관성이 없으면 사용자는 산만해지거나 짜증스러워할 수도 있습니다.

10. 가장 중요한 정보부터 시작하세요

정말 단순한 조언처럼 들리겠지만, 얼마나 많은 사람들이 이 조언을 따르지 않는지 놀라울 따름입니다. 짧은 텍스트나 지침, 메시지의 경우 오직 가치있는 정보에만 집중하고, 유도하고 흥을 돋는 텍스트로 사용자의 주의를 지나치게 분산시켜서는 안 됩니다. 물론 그렇다고 해서 무미건조하게 정보만 담아 써야 한다는 뜻은 아니지만, 보조적인 내용은 최소화하고 유효한 내용을 극대화하도록 하세요. 긴 글이나 가이드, 제품 설명 등과 같은 장문의 텍스트의 경우 저널리즘의 역피라미드 원칙이라는 원리를 활용해 보세요. 역피라미드 원칙이란 반드시 알아야 하는 내용에서 알아두면 좋은 내용으로, 핵심 메시지에서 그다지 중요하지 않을 수 있는 세부 사항으로 넘어가는 걸 말합니다.

이 글에서 다룬 모든 팁이 만병통치약은 아니므로 각 사례에 대한 연구와 분석을 바탕으로 결정하시기 바랍니다. 순수하게 디자인적인 요소부터 사용자와의 커뮤니케이션 스타일을 정의하는 전반적인 브랜드 전략에 이르기까지, 인터페이스 문구 작성에 영향을 미치는 요소는 다양합니다. 아무튼 여러분이 긍정적인 사용자 경험을 촉진하는 창의적인 문구를 작성하는 데 위 목록이 도움이 되기를 바랍니다.

 핵심 내용

UX 라이팅은 웹과 모바일의 사용자 인터페이스(UI)에 들어갈 텍스트인 카피(문구)를 작성하는 활동이다.

텍스트는 디자인의 일부이자 사용자 경험의 일부이며, 그래픽을 보조하는 UI의 구성 요소다.

효과적인 UX 텍스트는 명확성, 간결성, 사용성, 일관성을 갖춰야 한다.

모든 요소의 통합된 효과를 확인할 수 있게 초기부터 UI에 실제 문구를 입혀 작업하자.

사용자는 텍스트를 훑어보므로 중요한 정보가 눈에 잘 띄도록 명확한 계층 구조를 부여하자.

시선을 붙드는 숫자와 다양한 형식 요소를 적절히 활용해 사용자의 주의를 끌자.

문법을 유연하게 적용해 간결하고 명확하며 평이한 언어로 가독성을 높이고 정보 전달에 집중하자.

인터랙티브 UI 문구는 사용자의 의사결정과 제품인식에 영향을 미치므로 테스트로 효과성을 검증하자.

사람과 대화하는 듯한 자연스러운 문체로 일관된 용어를 사용해 명확하게 소통하자.

언어적으로 정교한 것보다 핵심 고객층에게 명확하고 친근한 대화체를 유지하는 게 중요하다.

기술적 전문 용어를 피하고 대중이 명확하게 이해할 수 있는 평이한 표현을 쓰자.

전체형, 제목형, 문장형 등 대문자 표기법을 정하고 제품 전반에 일관되게 적용하자.

짧은 텍스트에서는 유효 정보를 극대화하고, 긴 텍스트에서는 중요 정보 순으로 전개하자.