1. CX (Customer Experience) 디자인이란?
CX는 단순한 화면 디자인이 아니라 사용자가 서비스를 경험하는 모든 순간을 설계하는 것이다. UI/UX는 CX의 하위 개념이다.
💡 핵심은 계속 쓰게 만드는 것이다. 사용자가 앱을 다시 열고 싶게 만드는 경험 설계가 최우선이다.
온보딩의 중요성
첫 경험이 전부다. 온보딩을 어떻게 설계하느냐에 따라 사용자의 재방문율이 크게 달라진다.
가이드와 튜토리얼을 충실히 설계하자.
모바일 vs 웹 배치는 다르다
모바일과 웹은 화면 크기뿐 아니라 사용 맥락, 인터랙션 방식, 정보 우선순위 배치가 완전히 다르다.
각각의 기기에 맞는 설계가 필요하다.
2. 색(Color) 설계
색의 역할
- 브랜드 아이덴티티 각인 - 서비스를 기억하게 만드는 시각적 각인
- 마케팅 관점에서 클릭 유도 - 할인 정보, 프로모션 배너 등
- 방향 제시 - 구매하기 버튼, 다음 단계 안내 등
키 컬러는 생각보다 적게 쓴다
키 컬러(Primary Color)는 포인트로만 사용한다.
스타벅스나 이마트도 매장에서 초록색·노란색이 넘쳐나지 않는다. 로고, 간판, 핵심 CTA 버튼 등 꼭 필요한 곳에만 집중 배치하기 때문에 오히려 눈에 잘 띄는 것이다.
색의 종류
| 종류 | 설명 |
|---|---|
| Primary Color | 핵심 액션, 브랜드 아이덴티티 |
| Secondary Color | 보조 강조 색상 |
| Neutrals | 배경, 구조, 텍스트 |
| Semantic Color | 성공 · 경고 · 에러 등 상태 표현 |
| Extended Palettes | 브랜드 확장 팔레트 |
알아두면 좋은 것들
1. 검은색은 검은색이 아니다 : 그림자와 오버레이에 순수한 #000000 대신 브랜드 컬러가 살짝 섞인 어두운 색을 사용하면 훨씬 자연스럽고 세련된 결과가 나온다.
2. 그림자에 다양한 색을 시도해보자 : 검정 그림자 외에도 보라, 파랑 등 다른 색을 써보면 깊이감과 개성을 줄 수 있다.
3. 돈 관련 프로젝트는 보수적으로 : 금융 서비스에서는 화려한 색보다 신뢰감 있는 중립적 색상 설계가 더 중요하다.
3. 사용성 (Usability)
좋은 사용성이란 사용자가 기대하는 동작을 그대로 구현하는 것이다.
- 엔터키로 로그인 - 버튼 클릭 없이도 동작해야 한다
- 정보를 모두 입력한 후 다음 단계로 - 필수 입력값이 빠진 상태에서 다음 단계로 넘어가지 않도록
- 스켈레톤 UI - 로딩 중에도 레이아웃을 유지해 사용자의 불안감을 줄여준다
4. 디자인 시스템
디자인 시스템 장점 4가지 ⭐
- 시각적 일관성 : 동일한 형태로 제작, 유사한 모양의 구성 요소들이 일관된 시각적 패턴을 형성
- 기능적 일관성 : 같은 동작은 항상 같은 방식으로 작동
- 내부 일관성 : 서비스 내부에서 서로 다른 영역 간의 통일성
- 외부 일관성 : 타 서비스나 플랫폼 관습에 맞춰 사용자 기대를 충족
디자인 시스템의 구조 ⭐
- 개요 (Overview) : 일련의 디자인 원칙(Design Principles)을 문서화
- 파운데이션 (Foundation) : 가장 기초가 되는 디자인 요소의 모음 (아이콘, 폰트 크기, 색상, 폰트)
- 컴포넌트 (Component) : 디자인 시스템에서 재사용 가능한 구성 요소
- 패턴 (Pattern) : 사용자가 목표를 달성하려고 사용하는 방법의 모범 사례
- 기타 : 기업에 따라 커뮤니티를 구성하거나 자료를 공유하는 링크 제공
5. 아토믹 디자인 (Atomic Design) ⭐
브래드 프로스트(Brad Frost)가 고안한 디자인 시스템으로, 디자이너와 개발자 사이의 협업이 용이하도록 UI를 원자 단위부터 계층적으로 구성한다.
원자(Atom) → 분자(Molecule) → 유기체(Organism) → 템플릿(Template) → 페이지(Page)- 원자 : 버튼, 인풋, 아이콘 등 더 이상 쪼갤 수 없는 최소 단위
- 분자 : 원자가 모여 하나의 역할을 하는 단위 (ex. 검색창 = 인풋 + 버튼)
- 유기체 : 분자가 모여 독립적인 영역을 이루는 단위 (ex. 헤더, 카드 리스트)
- 템플릿 : 유기체를 배치한 페이지 레이아웃
- 페이지 : 실제 콘텐츠가 채워진 최종 화면
6. 디자인 프로세스 방법론
더블 다이아몬드 (Double Diamond) ⭐
문제를 발산과 수렴 두 단계로 반복하며 접근하는 방법론이다.
| 단계 | 핵심 질문 | 내용 |
|---|---|---|
| 발견 · 정의 | 무엇을 / 왜? | 문제를 탐색하고 정의하는 단계 |
| 개발 · 전달 | 어떻게? | 해결책을 탐색하고 구현하는 단계 |
애자일 프로세스 (Agile Process) ⭐
사용자(이때의 사용자는 진짜 사용자가 아닌 해당 제품을 요구한 회사)의 요구사항을 끊임없이 반영하고 점진적으로 제품을 업데이트하여 서비스가 추구하는 가치를 구현하는 프로세스
린 프로세스 (Lean Process) ⭐
기업이 가정한 시장 상황을 테스트하기 위해 프로토타입을 만들고, 일반 사용자의 피드백을 받아 빠르게 발전시키는 프로세스
📝 차이 포인트: 애자일의 '사용자'는 클라이언트(요청 기업), 린의 '사용자'는 실제 최종 사용자다.
7. 와이어프레임 (Wireframe) ⭐
디자인의 뼈대를 잡는 단계로, 색상이나 비주얼 없이 레이아웃과 구조, 정보 우선순위를 결정한다.
실제 개발 전에 방향을 확인하고 수정 비용을 줄이는 데 핵심적인 역할을 한다.
| 종류 | 설명 |
|---|---|
| Lo-fi (저충실도) | 손스케치 수준, 빠른 아이디어 검증에 적합 |
| Hi-fi (고충실도) | 실제 UI에 가까운 상세 구성, 개발 전 최종 확인용 |
마치며
오늘 수업이 꽤 흥미로웠다. 디자인이 단순히 예쁜 것을 만드는 게 아니라, 사용자가 편하게 쓸 수 있어야 한다는 것. 그리고 색상도 그냥 쓰는 게 아니라 Primary, Semantic 등 역할이 정해져 있다는 게 신기했다. 앞으로 프로젝트할 때 디자인을 어떻게 접근해야 할지 감이 좀 잡힌 것 같다.
