[Day40] 사용자 경험(CX)디자인 - 기초
일주일동안 프로젝트하느라 밀린 수업 노트를 다시 쓸 예정이다 !
오늘부터 day34부터 조금씩 쓰면서 지난 프로젝트 회고도 함께하면 좋을거같다.
오늘은 미니 프로젝트끝나고 새로운 강사님이 오셨다
디자인 수업 끝에 포트폴리오 하나가 나올 수 있다고 하셔서 기대가 된다.
아주 직관적인 UI/UX에 대한 설명
- UI (User Interface) : 어떻게 보이고 기능하는가
- UX (Uxer experience) : 사용자가 서비스를 이용하는 데에 느끼는 총체적 경험
그전에 CX는 뭘까?
CX (Customer Experience) : 고객 경험 디자인 
UI - 색상의 중요성
- 컬러를 많이 사용할 수록 지루해 하고 뇌리에 기억시키기 어렵다
- 앱 UI 내에서도 강조해야 할 곳에만 사용해서 이목을 끌 수 있다.
🔹 포트폴리오에 주제 색상을 많이 써뒀는데 수정해야겠다. (무조건적인 정답은 아님 !)
색의 역할 ⭐️
- 브랜드 아이덴티티 각인
- 마케팅 관점에서 클릭을 유도(할인 정보)
- 방향을 제시(구매하기 버튼)
색의 역할 - Primary Color
UI 내에서 가장 메인으로 사용되는 색상으로 화면 내 클릭을 유도하는 버튼에 많이 사용된다. 주로 브랜드의 고유한 아이덴티티 색상을 사용.
색의 역할 - Secondary Color
- 메인 컬러보다 덜 중요한 요소에 사용된다.
- UI 콘텐츠에 사용
- 일반적으로 브랜드마다 1~5개 정도의 보조 색상이 있는데 UI 내에서는 너무 다양한 컬러를 사용하지 않는게 좋다.
색의 역할 - Neutrals
- 흰색부터 검은색까지 회색 음영를 포함한다.
- 배경, 텍스트 색상 등에 사용
- 텍스트에 활용될 때는 대비를 통한 접근성을 고려해야한다.
색의 역할 - Semantic Color
- 목적을 전달하는 색상
- 성공, 경로, 에러, 정보의 상황에 따른 4가지 색으로 구성되어 있다.
색의 역할 - Expended Palettes
- 다양한 사용 사례를 충족하기 위한 확장형 색상
- Primary Color와 Secondary Color에 톤을 추가하거나 결합해서 사용
색의 역할 – 다이나믹 컬러
- 앨범 이미지의 컬러를 불러와서 UI에 적용하는 다이나믹 컬러
레이아웃 - 근접성
레이아웃 - 폐쇄성
레이아웃 - 전경과 배경
Input & Form – Placeholder
LCP(Largest ContestfulPaint)
- 주요컨텐츠들이로드되는 데에걸리는시간
- 사용에불편이없는 시점까지
🔹 LCP 측정 사이트 Google PageSpeed Insights
내 포트폴리오에서 이미지가 많은 메인페이지를 넣어보니까 
기존에 계속 고민했던 페이지 렌더링 시간 때문에 성능 점수가 낮다.
여기서 성능 향상 시키는거를 고민하는것도 좋은 포트폴리오가 될거같다. 이걸 어찌해야할까.. aws를 써야할까 고민이된다..
아래 내용부터는 수업을 들으며 UI/UX 디자인이 쉬워지는 디자인 시스템 실무 with 피그마를 읽고 중요한 내용만 정리한 내용입니다.
디자인 시스템의 이해
디자인 시스템이란 ? 디지털 제품의 상요 기준을 명확하게 정의한 재사용 가능한 디자인 구성 요소의 모음
장점 ⭐️
1. 일관성의 향상
- 시각적 일관성 : 동일한 형태로 제작되고 시각적으로 유사한 모양의 구성 요소는 시각적 일관성을 높여준다.
- 기능적 일관성 : 제품을 사용하는 사용자의 상호작용은 늘 동일해야 한다.
- 내부 일관성 : 시각적, 기능적 일관성
- 외부 일관성 : 다른 플랫폼이나 시스템과 같은 모든 컨텍스트에서 외부 일관성 유지
2. 시간의 절약
3. 공통된 페이지로의 협업
4. 리스크 최소화
5. 높은 향상성
6. 브랜드 구축
디자인 시스템의 구조
디자인 시스템은 기업의 가치와 제품, 서비스에 따라 다양한 형태로 구성되며, 일반적으로 다음과 같은 요소로 구성된다.
- 개요: 디자인 원칙과 브랜드 정체성을 포함하며, 업데이트된 기능을 소개함.
- 파운데이션: 색상, 아이콘, 간격, 타이포그래피 등 기본적인 디자인 요소와 공통 가치 및 원칙을 포함.
- 컴포넌트: 재사용 가능한 UI 요소로 구성되며, 기능별 카테고리로 구분 가능.
- 패턴: 사용자가 목표를 달성하는 모범 사례로, 특정 컴포넌트 조합을 활용하여 정의.
- 기타: 커뮤니티 구성, 자료 공유 등의 추가 요소.
디자인 시스템 관련 개념
- 스타일 가이드: 색상, 타이포그래피 등 디자인 원칙 정리.
- 패턴 라이브러리: 일관된 사용자 경험을 위한 디자인 패턴 모음.
- 시스템 가이드: 디자인 시스템을 적용하는 방법과 원칙을 설명.
디자인 시스템 구축 방법론
아토믹 디자인 ⭐️⭐️⭐️
브래드 프로스트가 고안한 디자이너와 개발자 사이의 협업 중심 디자인 시스템으로, 컴포넌트를 다음과 같이 계층화함.
- 화학의 원리를 이용해
- 원자(Atoms) → 분자(Molecules) → 유기체(Organisms) → 템플릿(Templates) → 페이지(Pages)
서비스 디자인
사용자의 요구를 파악하고, 이를 해결하는 과정을 설계하여 실행 가능한 서비스나 제품으로 구현하는 것을 말한다.
더블 다이아몬드 방법론 ⭐️⭐️⭐️
문제를 정의하고 해결책을 도출하는 두 가지 과정이 한 점에서 시작해 확산과 수렴이라는 과정으로 구조화한 방법
애자일 프로세스 ⭐️⭐️⭐️
사용자의 요구사항을 끊임없이 반영하고 점진적으로 제품을 업데이트하여 서비스가 추구하는 가치를 구현한다.
사용자 시나리오
사용자 시나리오는 현재 사용자들의 행동을 묘사하고 페르소나가 자신의 목적을 달성하는 방법으로 제품을 어떻게 사용할지 시나리오로 작성하는 것을 말한다.
페르소나
페르소나는 인물의 성격과 성장 배경, 환경 등의 묘사로 구성되는데 가상의 인물이 해당 프로젝트의 서비스나 제품을 사용하는 목표와 필요 그리고 서비스의 부재로 느꼈던 불편함 등의 내용을 포함해 작성한다.
와이어프레임
와이어프레임은 각 화면 단위의 UI를 설계하는 작업으로, 화면의 설계와 화면 간의 관곙와 이동 동선까지 모두 표현한다.
핸드 드로잉 -> 낮은 충실도
sw 사용 -> 높은 충실도
Reference
이 포스트는 아래 게시글의 정보 및 이미지가 사용되었습니다.
- 참고 도서 “UI/UX 디자인이 쉬워지는 디자인 시스템 실무 with 피그마”