콘텐츠 디자이너처럼 글을 쓰는 법 — 이게 왜 중요한지에 대해

소개

UX 라이팅은 단순히 글을 쓰는 게 아니에요. 콘텐츠를 디자인하는 일이에요.

디자인에서 중요한 건 픽셀을 다루는 것만이 아니에요. UX 디자인에서 글은 정말 중요한 역할을 해요. 우리가 피그마(Figma)나 디자인 시스템에 집중하다 보면, 정작 사람들이 제품을 사용하는 진짜 이유가 콘텐츠라는 사실을 잊기 쉬워요.

대부분의 웹사이트와 앱에서 핵심이 되는 콘텐츠는 바로 텍스트예요.

당신의 글은 사용자의 이해, 행동, 그리고 제품에 대한 만족도를 결정해요.

이건 꽤 큰 책임이에요.

게다가 사용자의 행동을 보면, 대부분의 사람들이 온라인에서 글을 꼼꼼히 읽지 않고 훑어본다는 걸 알 수 있어요. 실제로 한 웹페이지에서 1/3도 채 읽지 않는 경우가 많아요.

그렇다면, 우리가 쓰는 글이 더 쉽고, 이해하기 편하며, 좋은 경험을 주려면 어떻게 해야 할까요? 다음 14가지 황금률을 따르면 돼요:

1. 사용자의 필요를 먼저 생각하기
2. 점진적 정보 공개(Progressive Disclosure) 활용하기
3. 제목을 활용해 구조 만들기
4. 시각적 계층 구조 만들기
5. 중요한 내용을 먼저 배치하기
6. 목록은 글머리 기호(•)를 사용하기
7. 쉽고 단순한 언어 사용하기
8. 글을 짧고 간결하게 쓰기
9. 기본적으로 문장은 ‘문장형 대소문자(Sentence case)’로 작성하기
10. 약어나 줄임말은 설명 추가하기
11. 링크 텍스트는 설명이 명확하고 고유하게 만들기
12. 적절한 대체 텍스트(Alt text) 작성하기
13. 마이크로카피 최적화하기
14. 일관된 톤앤매너 유지하기

1. 사용자의 필요를 먼저 생각하기

글을 쓰기 전에 먼저 스스로에게 물어봐야 해요. 사람들은 이 콘텐츠에서 무엇을 필요로 할까?

다음과 같은 질문을 해보세요:

• 누가 이 글을 읽을까?
• 왜 이 글이 필요한 걸까?
• 무엇을 하려는 걸까?
• 이 글이 어떻게 도움을 줄까?
• 다음으로 어디로 가야 할까?

이 질문들은 UX 라이팅에서 기본이 되는 질문이에요. 만약 이 질문에 답할 수 없다면, 아직 글을 쓸 준비가 안 된 겁니다.

계획을 세우세요: 사용자가 궁금해할 질문들을 정리하고, 중요한 순서대로 배열하세요. 이렇게 하면 글의 뼈대가 완성됩니다.

예를 들어, UX 디자이너 채용 공고 페이지를 만든다고 가정해볼게요. 사용자는 이런 질문을 할 수 있어요:

• 어떤 회사이고, 어떤 직무인가요?
• 근무 형태는 오피스 근무인가요, 원격인가요, 하이브리드인가요?
• 연봉은 얼마인가요? 협상이 가능한가요?
• 어떤 자격, 기술, 경험이 필요한가요?
• 지원 절차는 어떻게 되나요?
• 이 역할은 어떤 사람에게 적합한가요?
• 실제로 어떻게 지원할 수 있나요?
• 지원 마감일은 언제인가요?

이렇게 사용자가 가장 궁금해하는 질문을 정리한 뒤, 중요한 순서대로 배열하면 글의 흐름이 자연스러워져요.

그리고 이제, 가장 중요한 정보부터 시작해 글을 쓰면 돼요!

2. 점진적 정보 공개 (Progressive Disclosure) 활용하기

마치 90년대 데미 무어 스릴러 영화 제목 같지만, 점진적 정보 공개는 사실상 역피라미드 구조의 변형이에요.

피라미드 구조: 핵심 내용을 먼저 제공하고, 세부 사항은 차츰 추가하는 방식

이 개념은 간단해요: 사용자에게 가장 중요한 정보를 먼저 제공하고, 필요하면 추가 정보를 탐색할 수 있도록 하면 됩니다.

콘텐츠 디자이너들은 탭(Tab), 아코디언(Accordion), 스크롤(Scrolling) 같은 다양한 UI 패턴을 활용해 점진적으로 복잡하거나 덜 중요한 정보를 공개합니다.

좋은 예로 GOV.UK의 공휴일 안내 페이지가 있어요. 대부분의 사용자는 잉글랜드와 웨일스의 다음 공휴일을 알고 싶어 하므로, 이 정보가 크고 굵게 강조되어 눈에 잘 띄도록 되어 있습니다. 반면, 미래의 공휴일이나 다른 지역의 공휴일 정보도 제공되지만, 숨겨져 있거나 덜 두드러지게 표시됩니다.

이 아티클 또한 점진적 정보 공개 방식을 사용합니다. 가장 중요한 정보인 규칙이 도입부에서 먼저 제시되고, 독자는 원하는 경우 전체 내용을 탐색할 수 있습니다.

점진적 정보 공개의 장점은 다음과 같습니다.

• 한 번에 너무 많은 정보를 처리해야 하는 인지 부하를 줄여줍니다.
• 사용자가 콘텐츠를 이해하는 데 드는 시간과 노력을 줄여줍니다.
• 중요한 정보나 시급한 내용을 놓칠 위험을 낮춰줍니다.

점진적 정보 공개의 단점은 사용자의 추가 상호작용이 필요하다는 점입니다. 하지만 그 장점을 고려하면 충분히 가치 있는 선택입니다.

3. 제목을 활용해 구조를 만들기

제목은 콘텐츠를 쉽게 훑어볼 수 있도록 도와줍니다. 따라서 설명적이고 계층적인 제목을 사용해 글의 구조를 정리하세요.

좋은 제목 구조는 레이어 케이크 읽기 패턴을 지원합니다. 사용자는 콘텐츠를 훑어보며 가장 상위 ‘레이어’인 제목을 먼저 읽고, 전체적인 내용을 빠르게 파악합니다.

이렇게 하면 됩니다:

• 콘텐츠 제목에는 Heading 1을 사용하세요.
• 본문을 여러 섹션으로 나누려면 Heading 2를 사용하세요.
• 각 H2 섹션 내에서 세부적으로 나누려면 Heading 3을 사용하세요.
• 필요할 경우, 더 작은 하위 섹션을 만들기 위해 Heading 4를 활용하세요.

이러한 접근 방식은 특히 스크린 리더 같은 보조 기술을 사용하는 사람들이 콘텐츠를 빠르게 탐색하고 내용을 이해하는 데 도움이 됩니다.

온라인에서 사람들이 F-패턴으로 읽는다고 들어본 적이 있을 것입니다.

이는 사실이지만, 그보다 더 복잡한 요소도 있습니다. UI 레이아웃이 발전하면서 다양한 읽기 패턴도 함께 변화해왔습니다.

4. 시각적 계층 구조 만들기

시각적 계층 구조는 콘텐츠를 더 쉽게 훑어볼 수 있게 해주는 또 다른 구조적 기법입니다.

시각적 계층 구조는 레이아웃 요소를 조직하여 사용자가 콘텐츠를 특정 순서대로 따라갈 수 있도록 유도하는 방식입니다.

우리는 시각적 계층 구조에 무의식적으로 반응하며, 단순히 위에서 아래로 읽는 순서가 아니라 시각적 레이아웃을 기반으로 설계된 UI 패턴을 따릅니다.

하지만 시각적 계층 구조를 만드는 것은 UI 디자이너만의 일이 아닙니다. 이는 UX 라이팅과 콘텐츠 디자인에서도 활용할 수 있는 기법입니다.

제목, 본문, 굵은 텍스트와 같은 다양한 포맷팅 요소를 활용하여 시각적 계층 구조를 만들 수 있습니다. 이렇게 하면 독자가 콘텐츠를 특정 순서대로 읽도록 유도하고, 레이어 케이크와 같은 읽기 패턴을 지원할 수 있습니다.

5. 텍스트 앞부분에 중요한 정보 배치하기

쉽게 훑어볼 수 있도록 하는 또 다른 기법은 텍스트의 앞부분에 중요한 정보를 배치하는 것입니다.

텍스트 앞부분에 중요한 정보 배치하기는 헤딩이나 목록에서 키워드를 먼저 배치하는 것을 의미합니다.

예를 들어, '텍스트 앞부분에 중요한 정보 배치하기'는 '텍스트가 앞부분에 배치되었는지 확인하기'보다 더 나은 제목입니다. 사용자가 콘텐츠를 스캔할 때, 키워드를 먼저 배치하는 접근법이 각 섹션의 내용을 가장 적은 노력으로 이해하는 데 도움이 됩니다.

만약 모든 제목이 '에 대한 정보...'와 같은 방식으로 시작된다면, 사용자는 해당 섹션이 무엇에 관한 것인지 파악하기 위해 더 많은 시간과 노력을 들여야 합니다.

이 원칙은 페이지 제목에도 적용됩니다. 앞부분에

중요한 정보를 배치하면 인지 부하를 줄이고, 검색 엔진 결과를 확인할 때처럼 스캔을 더 빠르고 쉽게 만듭니다.

6. 목록에는 글머리 기호 사용하기

목록을 작성할 때는 항상 글머리 기호로 포맷팅하세요. 목록이 문장 내에서 쉼표로 구분된 것보다 깔끔하게 왼쪽 정렬된 형태일 때 더 쉽게 처리할 수 있습니다.

목록의 순서에 대해 신경을 써야 합니다. 직렬 위치 효과(Serial Position Effect)에 따르면, 사람들은 순서에서 첫 번째와 마지막 항목을 가장 잘 기억하는 경향이 있습니다.

따라서 사용자가 나중에 기억하길 원하는 중요한 세부 사항이 있다면, 목록의 상단과 하단에 배치하는 것을 고려하세요.

글머리 기호 대신, 특정 순서대로 일어나는 일들에 대해서는 번호 매기기 목록을 고려해 보세요. 예를 들어, 단계별 설명이 있을 때 유용합니다.

7. 간단하고 쉬운 언어 사용하기

세상에서 가장 잘 구조화되고 쉽게 훑어볼 수 있는 콘텐츠를 갖추었을지라도, 사용자가 그 정보를 실제로 이해할 수 없다면 의미가 없습니다.

따라서 콘텐츠는 읽기 쉬워야 합니다.

읽기 쉬움은 접근 가능하고 사용하기 쉬운 콘텐츠의 기본적인 요구 사항입니다. 이는 모든 UX 작가나 콘텐츠 디자이너의 근본적인 목표입니다.

왜 이것이 중요할까요?

많은 사람들이 온라인 정보를 이해하는 데 어려움을 겪기 때문입니다. 특히 숫자나 통계가 포함되어 있을 경우 더 어렵습니다. 예를 들어:

• 영국의 16%는 문해 능력이 매우 낮습니다 (평균 9살 수준 이하)
• 대부분의 영국 성인의 독해 수준은 11~14세 아동 수준이고, 숫자 이해 능력은 9살 아동 수준입니다.

낮은 문해력/수리 능력을 가진 고위험 그룹에는 다음과 같은 도전 과제를 가진 사람들이 포함됩니다:

• 언어 장벽 — ‘기본’ 언어에 능숙하지 않은 사람들
• 인지 장애 — 뇌 손상이나 치매와 같은 문제
• 학습 장애 — 난독증, 운동 실조증, ADHD(주의력결핍과다활동장애) 등
• 낮은 교육 수준 — (대개 사회경제적 배경이 낮은 사람들로, 디지털 포용에 또 다른 장애물이 됩니다.)

해결 방법은 무엇일까요?

• 간단한 영어로 작성하세요 — 익숙하고 일상적인 단어를 사용합니다. (사용성 휴리스틱 시스템과 현실 세계의 일치을 따릅니다)
• 전문 용어나 기술적인 정보, 법률 용어는 피하세요 — 만약 이를 피할 수 없다면, 그 옆에 간단한 영어 설명이나 요약을 제공하세요.
• 구체적이고 정확하게 작성하세요 — 모호하고 애매한 언어는 피합니다.
• 숫자는 숫자 형태로 작성하세요. 예: 7은 'seven' 대신, 20,000은 'twenty thousand' 대신 사용합니다 (큰 숫자에는 항상 쉼표를 포함하세요).

중요한 점은 간단하고 쉬운 언어가 문해 능력이 낮은 사람들뿐만 아니라 모두에게 유익하다는 것입니다.

8. 간결하게 작성하기

간결한 글쓰기는 스캔과 읽기 모두에 도움이 됩니다.

간결성은 중복을 제거하는 커뮤니케이션 원칙입니다 — 정보를 가장 적은 단어로 전달하는 것입니다.

콘텐츠를 간결하게 만드는 방법은 무엇일까요?

• 불필요한 단어를 잘라내세요, 예: 폼 필드 레이블 — ‘이메일’ 대신 ‘귀하의 이메일 주소’ 사용
• 짧고 간단한 단어를 사용하세요, 예: ‘use’ 대신 ‘utilise’
• 문장을 짧게 (25단어 이내) 유지하고, 짧은 단락을 사용하세요 — 때로는 한 줄도 가능합니다
• Hemingway Editor와 같은 글쓰기 도구를 사용하여 중복 단어와 긴 문장을 강조 표시하세요.

이 글은 가능한 한 간결하거나 간단하게 작성되지 않았습니다. 하지만 때로는 특정 규칙을 굽히거나 깨는 것이 적절한 상황도 있습니다. 예를 들어, Medium에서 전문 UX/콘텐츠 디자인 독자를 대상으로 글을 쓸 때는 그럴 수 있습니다.

9. 기본적으로 문장 대문자 사용하기

대문자에는 세 가지 주요 유형이 있습니다:

• 제목 대문자 — 책이나 저널 제목에 사용, 예: The Catcher in the Rye 또는 The Journal of User Experience
• 문장 대문자 — 문장의 첫 글자와 고유명사만 대문자로 사용, 예: Why UX design principles will be forever relevant
• 전체 대문자 — 모든 단어가 대문자로 작성된 형태 (‘올 캡스’라고도 불립니다)

어떤 스타일이 더 읽기 쉬운지에 대한 합의는 없습니다. 연구 결과가 상충된 증거를 보여주기 때문입니다. 그러나 UX 라이팅에서 기본 스타일로 문장 대문자를 추천하는 데는 좋은 이유가 있습니다.

문장 대문자는 더 간단하고 깔끔하며, 제품이나 시스템 전반에 걸쳐 일관성을 유지하기 더 쉽습니다.

이러한 이유로 문장 대문자는 영국 정부, 건강, 교육 관련 콘텐츠 가이드라인에서 기본 스타일로 사용됩니다. 그러나 UI/UX 디자인에서 다른 대소문자 사용에 대한 사례도 존재합니다.

10. 약어와 두문자어 설명하기

사용자가 콘텐츠에 접근할 때, 제품, 서비스 또는 시스템에 대한 사전 지식이 있다고 가정하지 마세요.

약어와 두문자어는 콘텐츠에서 처음 언급할 때 전체 버전으로 작성하세요.

예를 들어: ‘보건사회부(Department of Health and Social Care, DHSC)는…’ 그 이후부터는 DHSC를 사용하면 됩니다.

이 규칙의 예외는 약어나 두문자어로 더 잘 알려진 것들입니다. 예를 들어 BBC, NHS, GP, MP와 같은 경우입니다. 이 경우, 전체 이름을 작성하는 것은 불필요한 단어를 추가할 수 있습니다.

11. 설명적이고 고유한 링크 텍스트 작성하기

사용자들은 링크를 제목처럼 스캔합니다. 하지만 좋은 링크 텍스트를 작성하는 것은 단순한 최선의 UX 라이팅 실천법이 아닙니다 — 그것은 접근성 요구 사항이기도 합니다.

웹 콘텐츠 접근성 지침(WCAG) 기준 2.2.4 링크 목적(문맥 내)에는 다음과 같이 명시되어 있습니다: “각 링크의 목적은 링크 텍스트만으로 알 수 있어야 합니다.”

이 말은 링크가 다른 문맥 없이도 독립적으로 이해될 수 있어야 한다는 뜻입니다. 다시 말해:

링크 텍스트는 해당 링크를 클릭했을 때 무엇이 일어날지 명확하게 알 수 있도록 작성하세요.

예를 들어, ‘Texthelp readability guidance’는 콘텐츠를 훑어보는 사람들에게는 불분명하지만, ‘Texthelp readability guidance’는 목적지와 그곳에 도달했을 때 기대할 수 있는 내용을 모두 암시합니다.

좋은 링크 텍스트를 작성하려면:

• 일반적인 링크 텍스트, 예: ‘여기를 클릭하세요’를 피하세요.
• 목적지가 다른 링크에 대해 같은 텍스트를 반복하는 것을 피하세요, 예: 서로 다른 URL로 이동하는 페이지에서 ‘Read more’를 사용하는 것.
• 링크를 전체 URL로 서식 지정하지 마세요 — 스크린 리더는 전체 URL을 읽어들입니다.
• 오해를 불러일으키는 링크 텍스트를 피하세요, 예: ‘Pay now’라는 링크가 실제로 결제를 완료하는 것이 아니라 5단계 결제 절차를 시작하는 경우 — 대신 ‘Checkout’을 사용하세요.
• 일부 링크를 동사를 사용하여 동작을 유도하는 텍스트로 변환하는 것을 고려하세요, 예: ‘파일 다운로드’, ‘웹사이트 방문’, ‘보고서 읽기’ 등.

A/B 테스트를 수행할 예산이나 리소스가 없다면, 다음으로 좋은 방법을 시도해보세요: 사람들에게 다양한 버전을 보여주고, 어떤 버전에 더 많이 반응할지 물어보세요.

저는 무엇보다 engagement를 극대화하는 것을 권장하지 않습니다. 클릭베이팅은 사용자 신뢰를 떨어뜨리고, 평판을 해칠 수 있으며, 브랜드에 장기적인 피해를 줄 수 있습니다.

14. 일관된 톤과 목소리 사용하기

객관적으로 올바른 톤은 없습니다 — 모든 것은 문맥에 달려 있습니다. 특정 유형의 사용자를 목표로 하는 한 브랜드에서 잘 통하는 톤이 다른 브랜드에는 맞지 않을 수 있습니다.

·          ·          ·