UX/UI가 중요한 이유
- 사용자에게 편리하고 유용한 환경을 제공
- 단순한 서비스를 넘어 사업으로, 문화로 확장
WHY => WHAT, HOW
CX란 무엇일까? Customer Experience
- 고객 경험 디자인
- 고객이 제품이나 서비스를 인지, 탐색, 이용하는 전 과정에서의 경험을 설계하고 최적화 하는 작업
UX/UI의 공통점은 무엇일까?
USER, 서비스를 사용하는 사람이다.
UI
사용자 인터페이스 => 어떻게 보이고 기능하는가
실제로 사용자가 접하게 되는 부분
=> 시각적으로 드러나는 것들 디자인하는 것
UX
사용자 경험 중심적인 관점에서 웹/앱을 구상하고 설계하는 모든 단계
사용자 경험 => 사용자가 서비스를 이용하는데 느끼는 총체적 경험
UI 색상
- 어려울 수록 간결하게
- 검은 색은 검은색이 아니다. 🫨 ( 검은색은 사실 검은색이 아니다) ⬅️ 참고하면 좋은 글
UI 색상의 중요성
- 우선 순위에 따른 컬러 표현 => 채도나 명도에 따라 강조할 부분에 사용해 좀 더 이목을 끌 수 있도록
- 상황에 따른 컬러 사용(성공, 경고, 에러)
- 유효성 검사 충족된 컬러 사용(접근성) => 배경과 텍스트가 대비가 되어 사용자가 정보를 파악하는데 문제 없는지 체크
- 사용자들이 특정 컬러를 볼때 이미지나 브랜드가 연상되는 것은 기업에서 반복된 노출하여 브랜딩한 결과물
- 컬러의 황금 비율 (기본 색상: 70, 보조 색상: 25, 주제 색상: 5) => 컬러 많이 사용시 뇌리 기억 어렵
언제나 예외는 있다는 것을 기억하자!
⭐ 색상의 역할
- 브랜드 아이텐티티 각인
- 마케팅 관점에서 클릭을 유도(할인 정보)
- 방향을 제시(구매하기 버튼)
⭐ 색상의 역할 - 주색(Primary Color)
주색(Primary Color)
- UI 내에서 가장 메인으로 사용되는 색상으로 화면 내 클릭을 유도하는 버튼에 많이 사용
- 주로 브랜드의 고유한 아이텐티티 색상을 사용
⭐ 색상의 역할 - 보조색 (Secondary Color)
- 메인 컬러보다 덜 중요한 요소에 사용
- UI 콘텐츠에 사용
- 일반적으로 브랜드마다 1~5개 정도의 보조 색상이 있는데 UI 내에서는 너무 다양한 컬러를 사용X 좋다.
⭐ 색상의 역할 - 중성색 (Neutrals)
- 흰색부터 검은색까지 회색 음영을 포함
- 배경, 텍스트 색상 등에 사용
- 텍스트에 활용될때는 대비를 통한 접근성 고려하기
⭐ 색상의 역할 - 시맨틱 컬러(시스템 컬러 | Semantic Color)
- 목적을 전달하는 색상
- 성공, 경로, 에러, 정보의 상황에 따른 4가지 색으로 구성
⭐ 색상의 역할 - 확장 팔레트(Expended Plalettes)
- 다양한 사용 사례를 충족하기 위한 확장형 색상
- Primary Color와 Secondary Color에 톤을 추가하거나 결합해 사용
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
Color - Material Design 3 - Create personal color schemes
Color - Material Design 3 - Create personal color schemes
Create accessible, personal color schemes communicating your product's hierarchy, state, and brand.
m3.material.io
⭐ 색상의 역할 - 다이나믹 컬러
앨범 이미지의 컬러를 불러와서 UI에 적용하는 다이나믹 컬러 ( Material Design)
⭐ 레이아웃 - 근접성
- 연관성 있는 요소는 다른 요소들보다 가깝게 배치
- 서로 가까운 요소를 그룹으로 인식
- 여백과 간격으로 전체 모양을 디자인
- 인지 부하 감소
⭐ 레이아웃 - 전경과 배경
- 전경과 배경이 확연하게 구분되게 디자인하기
- 어둠과 그림자 이용하기
레이아웃과 그리드 시스템
Layout
화면 크기, 텍스트, 이미지, 여백 등 다양한 구성 요소를 고려해 앱 내에 정보를 시각적으로 배치
Grid System
- 여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙을 의미
- 그리드를 활용하면 시각적 통일성을 줄 수 있다
사이즈에 맞게 반응형 디자인을 작성
사이트의 성향을 정확하게 파악한다.
ex) 연령에 상관없이 누구나 사용하면서 다양한 컨텐츠를 제공하는 경우 가장 작은 모니 터를 기준으로 디자인한다
네이버(1080px), 다음(990px)
ex)디자인을 보여주거나 회사 소개인 경우 최대 1920까지
Desktop Screen Resolution Stats Republic Of Korea | Statcounter Global Stats
Desktop Screen Resolution Stats Republic Of Korea | Statcounter Global Stats
This graph shows the stats of desktop screen resolutions in South Korea based on over 5 billion monthly page views.
gs.statcounter.com
레이아웃과 그리드 시스템 / 웹
Container
컨테이너는 안에 담기는 내용물의 최대 폭
1200px 추천
🤨 12단을 사용하는 이유(웹페이지 기준)
2,3,4,6단으로 했을 때 정수로 나오기 때문에
가이드라인 잡기도 편하 고 퍼블리싱할 때도 편한다.
많은 css프레임웍에서 12단을 기본으로 사용하고 있다.
그리드 계산 사이트 ⬇️
Grid Calculator by Nicolaj Kirkgaard Nielsen
Grid Calculator by Nicolaj Kirkgaard Nielsen
gridcalculator.dk
1단 레이아웃
큰 이미지나 영상 컨텐츠를 스크롤을 통해
이용하면서 강조, 가로로 넓기 때문에
텍스트 정보도 많이 담을 수 있다.
2단 레이아웃
1단 레이아웃보다 더 많은 정보를 담을 수 있 지만
가로 폭이 좁아 텍스 정보는 한계가 있 다
3단 레이아웃
텍스트 정보 보다는
이미지 위주로 한 상품을 간단 소개하는 경우
사용 프로필이나 앨범 위주의 정보를 담거나
상품 소개를 담는 경우 사용
디자인 시승템의 이해
좁은 화면의 단점을 해결하는 레이아웃
<- 뒤에 더 있다.
즉, 가로 스크롤을 통해 해결한다.
그리드 시스템에 맞게 레이아웃을 구성해야 하는 이유
- 시각적으로 일관된 배치
- 작업 시간 단축
- 예측 가능한 화면 구성
레이아웃을 위한 그리드 시스템의 구성 요소
Column - 4단 or 6단
Gutter - 16
Margin - 16 or 20
Input & Form – 액션 버튼
- 직관적인 보조 이름
- 버튼이 필요한 경우 시각적으로 중요도를 낮추어 배치
=> 유도하고 싶은 곳은 색상을 채워 넣는다.
Input & Form – Placeholder
- 사용하지 않는 Input 외부를 것을 권장
- 접근성 X 활용하자
그 외 고려해야할 것들
- 텍스트 크기
- 커서 변화
- 색상 대비
- 컴포넌트 상태(States)
- Active
- Hover
- Success & Error
- Disabled
The Pyramid of UX Impact
The Pyramid of UX Impact - 아이콘
- 혼란스럽고 여러 의미를 가진 아이콘 지양
- 여러 의미를 지닌 아이콘 사용 피하기
- 너무 현란하거나 디테일하지 않도록 하기
- 사용자에게 도움이 될 수 있다면 레이블 사용하기
The Pyramid of UX Impact - UX 라이팅
- 의미 없는 단어(문장) 제거하기 => 사용자가 원하는 정보를 빠르게 습득할 수 있도록, 간결하게 작성
- 반드시 필요한 내용만 전달하기
- 우리만 아는 내용으로 바꾸기
The Pyramid of UX Impact - 사용성
- 정보를 모두 입력하고 나서 다음 단계로 넘어가게 하기
- 포커스 상태로 진입하게 하기
- 사용자가 이전에 입력한 정보라면, 미리 채워주기
- 모바일의 경우, 사용할 키보드 미리 세팅하기
피라미드 맨 아래 –사용자 심리
사용자
- 사용자 온보딩 - 빈 상태 고려하기
- 로딩 바/ 스켈레톤 UI 사용하기
UXUI랑 유지보수
- 성능 분석 툴
- FE/BE
- 유저 트래킹
- PageSpeed Insights
PageSpeed Insights
올바른 URL을 입력하세요.
pagespeed.web.dev
LCP(Largest Contestful Paint)
주요 컨텐츠들이 로드되는 데에 걸리는 시간
사용에 불편이 없는 시점까지
FID(First Input Delay)
반응 속도
버튼을 클릭했을때, 그에 따른 반응이 일어나는 데 얼마만큼의 시간이 걸리는지
CLS
레이아웃 안정성
요소들의 수치가 들쑥날쑥 한지, 위치의 일관성 없는지
디자인 시스템
재사용(, 효율)이 가능한 디자인 구성 요소의 모음 => 일관성
디자인의 필요성
디자인 시스템은 확장 가능성을 고민하고, 디자인 구성 요소를 반복적으로 활용하는 방법을 제공
네이버의 경우,
주요기능은 검색창 바로 아래 존재한다.
⭐ 디자인 시스템의 장점
- 일관성 향상
- 시각적 일관성
- 기능적 일관성
- 내부 일관성 => 개발자 입장 (50%는 사용자 입장)
- 외부 일관성 => 소비자, 사용자 입장
- 시간의 절약
- 공통된 페이지로의 협업
- 리스크 최적화
- 높은 향상성
⭐ 디자인 시스템의 구조
파운데이션: 가장 기초가 되는 디자인 요소의 모음
컴포넌트: 디자인 시스템에서 재사용 가능한 구성 요소
패턴: 사용자가 목표를 달성하려고 사용하는 방법
기타(Etc): 기업에 따라 커뮤니티를 구성하거나 재료를 공유하는 링크를 제공
스타일 가이드, 패턴 라이브러리, 시스템 가이드
스타일 가이드
- 일련의 디자인 원칙을 정리한 문서
- 제품의 고유한 모양과 느낌 같은 시각적 요소와 제품 전반에 걸친 콘텐츠 디자인의 표준 사례 등
이 포함 - 스타일 가이드는 디자인 시스템의 일부로서 제품에 사용하는 시각적 언어의 표준을 정의한 문서
이기 때문에 디자이너와 개발자에게 유용한 자료 - 컴포넌트(=재사용): 화면을 이루는 컴포넌트는 앱 바, 카드, 입력 필드와 같은 구성 요소
패턴 라이브러리
- 재사용이 가능하도록 기능적으로 설계한 컴포넌트의 모음
- 컴포넌트는 개별적이고 여러 UI 패턴의 일부를 형성하는 가장 작은 단위의 디자인 요소라는 점에
서 패턴 라이브러리와 구분됨 - 제목 : 컴포넌트와 패턴의 이름을 짧고 명확하게 작성함
- 사용법과 원리 : 각 패턴에는 해당 기능과 컴포넌트가 실제로 수행하는 작업이 무엇인지 설명이
필요함 - 변형 (Variations) : 일부 컴포넌트는 다른 상태를 가질 수 있기 때문에 상태에 따른 유연성을 제
공해야 함
⭐ 아토믹 디자인
- 디자이너와 개발자 사이의 협업이 용이하도록 브래드 프로스트가 고안한 디자인 시스템
- 작은거 부터 시작해서 실제 페이지를 만드는 것
- 협업을 효율적으로 하기 위해 사용한다. => 일관성 유지
아토믹 디자인의 단점
- 개발 규모가 작다.
- 초기 설계가 크다
- 구축이 느리다
- 러닝 커브
- 디자이너 <-> 개발자
디자인 시스템 프로세스
디자인 시스템의 정의와 구축, 지속적인 유지 관리에 이르기까지 디자인 시스템을 만드는 체계적이고 반복적인 접근 방식
- 시스템 가이드 구축
- 대제목, 제목, 소제목을 구분하고 지시어나 명령어, 명사 사용 형식 등 크고 작은 부분에서 일관된
규칙이 필요함 - 시스템 가이드는 지속 가능한 디자인 시스템을 구축할 때 필요한 문서임
- 디자인 시스템을 유지하고 관리할 방법을 명시하고 안전하게 사용할 수 있도록 검수 과정과 방법
을 정의함
- 대제목, 제목, 소제목을 구분하고 지시어나 명령어, 명사 사용 형식 등 크고 작은 부분에서 일관된
목표 설정
디자인 시스템을 구축하는 목표와 목적을 명확히 해야한다.
'일관성을 유지하고 효율성을 높여 협업 과정 개선'
⬇️
발견 및 조사
사용자 인터페이스까지 포함해서 조사
⬇️
구체화
디자인 시스템을 사용하는 사람은 누구인지
어떤 내용을 담을 것인지
의사 결정은 어떻게 수행할 것인지
에 대한 방법론 작성 (공유할 채널 + 배포할 시기 함께 결정하기)
⬇️
가치 설정
브랜드의 핵심 가치 설정
⬇️
키 스크린 분석
제품의 주요 화면
=> 화면에 어떤 요소들을 반복적으로 사용하고 요소가 어떻게 결합해 기능을 수행하는지 핵심 화면의 디자인 살펴보고 분석하는 단계
특정 동작과 사용자 경험을 반영해 키 스크린 구성
⬇️
구성 요소 분류
공통적인 디자인 요소와 주요 컴포넌트로 분류하여 라이브러리에 저장
⬇️
시스템 가이드 구축
과정과 방법 정의
디자인 시스템 참고할때 좋을 만한 사이트
Material Design 3 - Google's latest open source design system
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
휴먼 인터페이스 가이드라인(HIG) | Apple Developer Documentation
휴먼 인터페이스 가이드라인(HIG) | Apple Developer Documentation
HIG는 모든 Apple 플랫폼에서 탁월한 경험을 제공할 수 있도록 도움을 주는 지침과 모범 사례를 포함합니다.
developer.apple.com
Fluent 2 Design System
Develop Find installation guides and tooling tips Get started →
fluent2.microsoft.design
Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contri
carbondesignsystem.com
Gmarket Design System
G마켓의 브랜드 정체성, 사용성, 일관성을 고려한 디자인 시스템의 가이드라인을 소개합니다.
gds.gmarket.co.kr
서비스 디자인 설계
서비스 디자인
사용자의 만족을 추구하는 것
디자인 씽킹
사용자의 행동과 이해를 바탕으로 문제를 재정의하고, 프로토타입 배포와 테스트를 거쳐 해결책을 도출하는 비선형적이고 반복적인 프로세스
=> 창의적 문제 해결 방법론
공감 ➡️ 정의 ➡️ 아이디어 발굴 ➡️ 프로토 타입 ➡️ 테스트
⭐ 더블 다이아몬드 방법론
문제를 정의하고 해결책을 도출하는 두 가지 과정이 한 점에서 시작해 확산과 수렴이라는 과정으로 구조화한 방법
첫번째 다이아몬드 영역
사용자가 겪는 문제를 찾고, 디자인으로 해결할 문제를 정의하는 단계
두 번째 다이아몬드 영역
앞에서 찾은 문제를 해결할 수 있는 다양한 방안을 탐색하고 솔루션을 만들어나가는 단계
- 더블 다이아몬드 방법론을 한 번 실행해서 최종 해결책이 도출되는 것은 아님
- 사용자 의견에서 또 다른 문제를 발견했다면 다시 문제 해결을 위한 크고 작은 확산과
수렴을 반복함
⭐ 애자일 프로세스
사용자의 요구사항을 끊임없이 반영하고 점직적으로 제품을 업데이트하여 서비스가 추구하는 가치를 구현하는 프로세
⭐ 페르소나 설정
- 페르소나는 인물의 성격과 성장 배경, 환경 등의 묘사로 구성됨
- 가상의 인물이 해당 프로젝트의 서비스나 제품을 사용하는 목표와 필요 그리고 서비스
의 부재로 느꼈던 불편함 등의 내용을 포함하여 작성
⭐ 와이어프레임
화면 단위의 UI를 설계하는 작업, 화면의 설계와 화면 간의 관계와 이동 동선까지 모두 표현
핸드 드로잉 -> 낮은 충실도
소프트웨어 사용 -> 높은 충실도
'💡 URECA > 🗒️ 스터디 노트' 카테고리의 다른 글
| [URECA] Day42 | 컴포넌트와 인스턴스, 베리언트, 인터랙션 (0) | 2025.03.26 |
|---|---|
| [URECA] Day 41 | 스타일과 레이아웃, 그룹, 프레임, 컴포넌트 (0) | 2025.03.25 |
| [URECA] Day39 미니프로젝트 끝! (0) | 2025.03.24 |
| [URECA] Day 38 미니프로젝트 (0) | 2025.03.24 |
| [URECA] Day 37 미니프로젝트 (0) | 2025.03.23 |
