프로덕트 일관성 지킴이 - 디자인 시스템, 텍스트 가이드라인, 프로덕트 랭귀지 (2편)

디자인 시스템, 텍스트 가이드라인, 프로덕트 랭귀지 세 가지는 프로덕트 전체의 공통된 규칙을 만들기 위해 필요한 준비물이다. 규칙이 있어야 일관성을 갖추고 이해하기 쉬운 프로덕트로 거듭날 수 있다.

 

항목 세 가지는 사용자의 눈에 가장 먼저 띄는 순으로 나열했다. 사용자는 색을 인식하고, 버튼을 눌러본 뒤, 글을 읽는다.

 

프로덕트의 시각적 요소를 설명하는 디자인 시스템은 이전 편에서 다루고 있다. 이번 편에서는 사용자가 읽는 글을 만드는 데 필요한 텍스트 가이드 라인에 대해 알아보겠다.

---

사용자가 읽는 글 - UI 텍스트 

 

사용자가 읽는 글은 UI(User Interface) 텍스트로, 프로덕트를 사용할 때 화면에 표시되는 문구를 말한다. UI 텍스트는 사용자에게 정보를 전달하는 역할을 하며, 전달하는 정보는 아래와 같이 크게 세 가지로 나눌 수 있다. (참고 자료 1) 

• 프로덕트 전체 구조 
• 프로덕트의 기능, 개념, 콘셉트  
• 사용자가 처한 상황

UI 텍스트의 핵심은 "사용자의 행동에 따라 텍스트가 비선형적으로 등장한다는 점이다." (참고 자료 2) 비선형적이라는 단어는 원인과 결과가 서로 영향을 주고받으며 복잡하게 얽힌 모양새를 뜻한다. 오직 한 가지의 행동을 취해서 한 가지의 결과만 얻을 수 있다면 원인과 결과가 직선 관계로, 선형적이다. 반면 여러 가지의 행동을 취할 수 있고 행동마다 결과가 각기 다르다면 그건 비선형적이다.

 

프로덕트는 사용자의 반응에 따라 화면, 표시 문구가 달라진다. "UI 텍스트는 상대의 반응에 따라 달라질 수 있는 상호작용을 위한다." (참고 자료 2) 그렇기에 텍스트 일관성은 중요하다. "정보를 전달할 때마다 같은 대상을 다른 용어로 지칭하거나 같은 상황에서 다른 메시지를 표시한다면 사용자는 프로덕트를 이해하지 못하고 결국 이탈하게 된다." (참고 자료 3) 

---

텍스트 가이드라인

 

UI 텍스트를 통해 사용자에게 전달되는 정보는 프로덕트 설계 단계에서 구성된다. 내용에 설계자들의 의도가 반영되었는데 텍스트 일관성을 맞추기 위해 수정 · 보완해야 한다면, 텍스트에 대한 규칙이 필요하다. 그래야 설계자들과 합리적으로 논의할 수 있으며 다른 스타일 사용을 지양하도록 설득할 수 있다. 여기서 필요한 규칙이 텍스트 가이드라인이다. (참고 자료 4)

 

텍스트 가이드라인은 공통 규칙으로, "프로덕트 메이커들이 텍스트에 대해 같은 이해를 할 수 있도록 돕는다". (참고 자료 5) 텍스트 가이드라인은 아래와 같은 내용이 포함된다. (참고 자료 6)

• UI 텍스트의 목적
• 주요 대상 고객 
• 보이스 ^[각주:1]  
• 문체^[각주:2]  
• 사동^[각주:3] 및 피동법^[각주:4]의 사용
• 들여쓰기 및 줄 바꿈
• 단어 끊어 쓰기 규칙 (Word-wrap)
• 프로덕트 핵심 용어 목록  
• 표기법^[각주:5]  

더 상세한 가이드라인은 컴포넌트 별 텍스트 규칙을 포함한다. 프로덕트만의 특정 기능, 개념, 오류 상황에 대한 텍스트 규칙도 추가할 수 있다. 텍스트 가이드라인에서 형식과 분량은 중요하지 않다. 프로덕트 메이커들이 다 같이 공감하고 이해하느냐가 중요하다. (참고 자료 7)

---

줄바꿈과 단어 끊어쓰기 

 

텍스트 가이드라인에 포함되는 내용 중 '줄 바꿈'과 '단어 끊어 쓰기'의 차이는 무엇일까? 줄 바꿈은 텍스트 한 줄이 끝나고 새 줄이 시작되는 위치를 작성자가 임의로 결정하는 것이다. 내용의 흐름이나 가독성을 고려해 글의 문단^[각주:6]을 구분할 때 사용된다. 

 

단어 끊어 쓰기(Word-wrap)는 텍스트 한 줄 전체를 화면에 담는 방법으로, 사용자에게 불편한 가로 스크롤 없이 내용을 전달하기 위해 행한다. 텍스트를 어떻게 끊어 쓰느냐에 따라 전해지는 느낌이 조금씩 다르므로 이에 대한 규칙을 텍스트 가이드 라인에 포함하는 것으로 보인다. 

 

A) 

1만원 혜택에 무료배송까지!
지금 바로 클릭해보세요.

B)
1만원 혜택에
무료배송까지!
지금 바로
클릭해보세요.

 

사용자 입장에서 봤을 때 A는 안정적으로 정보 전달을 하고 B는 역동적으로 흥미를 끈다.

---

참고 자료

 

- 따옴표 친 부분은 책의 문장을 직접 인용함.

1. 전주경,「그렇게 쓰면 아무도 안 읽습니다」, (주)윌북, 2023, p.64
2. 위의 책, p.27 
3. 위의 책, p.85
4. 위의 책, p.91
5. 위의 책, p.93
6. 위의 책, p.92
7. 위의 책, p.94

용어 설명 

1. 보이스 : 어떠한 상황에서도 변하지 않는 서비스 고유의 목소리, 사용자가 보이스를 통해 서비스의 성격을 유추할 수 있음. [본문으로]
2. 문체 : 해요체와 하십시요체 [본문으로]
3. 사동법 : 주어가 다른 사람이나 동물 또는 사물에게 어떤 동작을 하게 하거나 어떤 상태에 이르게 하는 것. '~게 하다'와 같은 표현. 예를 들어 사자가 사슴을 먹게 하다. [본문으로]
4. 피동법 : 주어가 다른 사람이나 동물 또는 사물의 동작을 받거나 어떤 상태에 이르게 되는 것. '~게 되다'와 같은 표현. 예를 들어 '사슴이 사자에게 먹혀지게 되다.' [본문으로]
5. 표기법 : 문장부호, 기호, 숫자, 약어, 외국어, 고유명사, 경로 표기법 [본문으로]
6. 문단 : 글을 내용상 끊어서 구분한 하나하나의 토막이다. 둘 이상의 문장이 모여 하나의 문단을 이룬다. 문단이 여러 개 모여 의미 있는 하나의 내용을 구성하면 그것은 단락이다. [본문으로]