성공적인 프로덕트란?
단순하게 말하면, 사람들이 많이 사용하는 프로덕트가 성공적이다. 사람들이 많이 사용하려면 이해하기 쉽고 직관적이어야 한다. 이 프로덕트는 무엇인지, 내가 어디로 가서 뭘 하면 되는지 명확히 알려주지 못하면 사용자는 이탈한다.
사용자를 올바르게 안내하려면 프로덕트를 만드는 과정에서부터 팀 구성원이 같은 내용을 숙지해야 한다. 그러기 위해서는 프로덕트를 구성하는 모든 요소에 일관성이 필요하다.
일관성은 모두가 따르는 공통된 규칙에서 탄생한다. 프로덕트 전체의 공통된 규칙을 만들기 위해 필요한 준비물은 디자인 시스템, 텍스트 가이드라인, 프로덕트 랭귀지 세 가지를 들 수 있다.
세 가지의 나열 순서는 사용자의 눈에 가장 먼저 띄는 순서와 같다. 사용자는 색상, 버튼, 아이콘, 그림을 가장 먼저 인식한 뒤 이것저것 눌러본다. 그리고 글을 읽는다. 프로덕트 랭귀지는 사용자의 눈에 띄는 모든 것들이 일관성을 가질 수 있게 한다.
색상, 버튼, 아이콘은 시각적 요소로, 디자인 시스템은 프로덕트의 시각적 요소에 대해 설명한다. 사용자가 읽는 글은 UI 텍스트에 해당한다. UI 텍스트에서 일관성은 매우 중요하다. 사용자의 프로덕트 이해에 큰 영향을 주기 때문이다. 텍스트에 일관성을 가지려면 명칭, 문장 부호, 표기법 등 UI 텍스트에 관련된 모든 규칙을 담은 텍스트 가이드라인이 필요하다." (참고 자료 1)
프로덕트 랭귀지는 "프로덕트를 만드는 모든 직군이 사용하는 공통 언어로, UI를 추상화하는 규칙 및 단위를 공유해 팀 구성원이 같은 내용을 숙지하게 한다". (참고 자료 2)
디자인 시스템
디자인 시스템은 프로덕트의 시각적 요소가 무엇이며 어떻게 만드는지, 왜 그렇게 해야 하는지 설명한다. 디자인 가이드가 시각적 요소는 무엇인지 설명하는 문서라면 디자인 시스템은 '어떻게'와 '왜' 단계까지 설명하며 작업자들이 따르지 않으면 안 되는 장치 역할을 수행한다.
'어떻게', 그리고 '왜'를 설명하는 시점부터 프로덕트의 고유한 UX가 만들어지고 이는 곧 하나의 생태계로 이어진다. 전 세계적으로 가장 많이 사용되는 디자인 툴인 피그마는 디자인 시스템 구성을 아래와 같이 정리했다. (참고 자료 3)
- 시스템
- 기술적 사양
- 디자인 토큰1
- 문서
- 패턴 라이브러리
- 스타일 가이드
디자인 토큰, 레이아웃과 템플릿
디자인 토큰은 자주 쓰이는 디자인 속성에 이름을 붙여 디자인 시스템에 일관성을 가져다준다. 구글의 머터리얼 디자인 블로그에 따르면 디자인 토큰은 아래와 같은 상황에 큰 도움이 될 수 있다.
- 새로운 프로덕트를 만들거나 기존 프로덕트의 디자인을 업데이트해야 할 경우
- 디자인 시스템이 하나 이상의 프로덕트나 플랫폼에 적용될 경우
- 향후 프로덕트 스타일의 유지 및 업데이트를 쉽게 하고 싶을 경우
그런데 만일 디자인을 업데이트할 일이 없거나 디자인 시스템이 없는 경우 디자인 토큰의 효용성은 줄어든다고 한다. (참고 자료 4)
패턴 라이브러리에서 템플릿과 레이아웃은 무슨 차이가 있는지 의문이 들 수 있다. 레이아웃은 화면에서 시각적 요소(컴포넌트, 텍스트, 이미지)를 어디에 어떻게 배치할지 정하는 과정이다. 사용자에게 정보를 논리적이고 일관되게 전달하기 위한 목적으로 레이아웃을 만든다.
템플릿은 특정 레이아웃을 기반으로 만든 샘플 화면이다. 레이아웃 단계에서 정해진 배치도에 따라 시각적 요소를 넣은 템플릿은 틀과 같은 역할을 한다.
- 이어지는 편에서 계속
참고 자료
1. 전주경, "살아남고 싶다면 UX 라이팅 원칙을 지켜라", 「그렇게 쓰면 아무도 안 읽습니다」, 2023.08.25.
2. 뱅크샐러드, "Banksalad Product Language를 소개합니다", 「뱅크샐러드 블로그」, 2020.08.14. 링크
3. Figma, "Lesson 1: Welcome to design systems", 「Figma Learn」, 링크
4. Google, "Design Token", 「Material Design 3」 링크
용어 설명
- 디자인 토큰 : 색상, 글꼴, 크기, 너비와 같은 스타일 값에 디자이너와 개발자가 함께 공유하는 이름을 붙이는 것, 예를 들어 색상 코드 380B0B를 'check.button.color' 라고 명명할 수 있다. [본문으로]
- 코드 스니펫 : 재사용 가능한 소스 코드 [본문으로]
- 컴포넌트 : UI를 구성하는 요소 [본문으로]
- 시멘틱 컬러 : UI요소들의 기능 또는 정보 유형에 따라 의미를 강조하여 전달하는 등의 목적으로 보조적으로 사용하는 컬러, 사용되는 목적에 따라 각 색상에 이름을 부여한다. [본문으로]
- 타이포그래피 : 활자 서체의 배열 [본문으로]
- 한 글자의 너비 [본문으로]
'IT 서비스' 카테고리의 다른 글
| 보이스란? - 브랜드 보이스와 UX 라이팅에서의 보이스 (0) | 2024.02.02 |
|---|---|
| 프로덕트 일관성 지킴이 - 디자인 시스템, 텍스트 가이드라인, 프로덕트 랭귀지 (2편) (0) | 2024.01.30 |
| 애플 일기(Journal) 앱 리뷰 - 일기 쓰기 시작을 위해 (0) | 2023.11.29 |
| Goodnotes 분석 1편 (0) | 2023.09.08 |
