오늘 한일
-실전 UI 디자인 강의 3강 완강
-실전 UI 디자인 강의 4강 완강
-도움닫기 특강 참여
-개인 과제 3 진행
내일 할일
-개인 과제 3 진행
-도움닫기 특강 참여📕실전 UI 디자인 3강
컴포넌트 네이밍 컨벤션
:컴포넌트의 이름을 짓는 규칙
검색, 재사용, 협업, 유지보수를 위해선 일관된 네이밍 전략 필요
컴포넌트 네이밍의 핵심
- 네이밍은 구조적 사고의 표현
- 컴포넌트 네이밍은 협업, 유지보수 난이도 낮춤
네이밍 구성 예시
- Component Type:어떤 UI 요소인지 카테고리를 나타냄
- Style:위계나 스타일
- State:인터렉션이 있거나 상태가 바뀌는 경우
Default(Enable):누를 수 있는 기본 상태
Hover:포인터가 요소 위에 위치한 상태
Pressed:요소를 누른 채로 유지하는 상태
Disabled:현재 누를 수 없는 상태 - Size:크기가 다른 경우
컴포넌트 네이밍 실전 팁📌
- 누가 봐도 이해할 수 있도록 줄임말, 개인 기호 지양
- 예외 상황도 구조를 유지한 채 명확히 처리
- 검색에 강한 구조로 예측 가능한 순서 유지
- 줄여도 되는 부분, 줄이면 안되는 부분 구분
- 만드는 서비스 규모에 따라 네이밍 전략 유연히 사용
베리언츠와 프로퍼티 구조의 경계 판단
- ON/OFF 여부만 존재:BOOLEAN
- 복수 선택지(2개 이상):VARIANT
- 이미지나 컴포넌트 교체:INSTANCE SWAP
트레이드오프(Trade-off)
:어떤 것을 얻기 위해 다른 것을 표기하는 상호 교환의 선택
->정교하게 만들수록 유지보수 어렵, 간단할수록 다양하 디자인 어렵
디자인 시스템과 컴포넌트 고도화
- 디자인 시스템이 없어서 UI 정리가 안된다 생각->문제는 시스템이 아니라 정리하는 기준 X
- 정리하는 기준, 규칙만 정한다면 디자인 시스템 없어도 크게 문제 되지 X
- 디자인 시스템->기준, 규칙이 모여 하나의 매뉴얼을 만든다는 뜻
일관성 있는 UI를 위한 관리 전략
1 무조건 오토레이아웃을 쓰지 않아도 됨
2 색상, 텍스트 스타일은 3가지 정도로 시작해 보기
3 컴포넌트의 상태는 의미를 중심으로 구분하기
📢3가지만 사용해도 충분한가요?
일부 요소, 이미지 제외하면 검은색, 흰색이 기본 색상 위에 회색조의 레이아웃과 포인트 컬러 하나로 이루어져 있음, 서체 역시 최대한 본문 제목, 본문, 작은 글씨 정도에서만 사용
서체->제목, 본문, 캡션 또는 작은 본문
색상->기본 흑백, 텍스트 및 레이아웃용 그레이, 포인트 컬러
📗실전 UI 디자인 4강
프로토타입의 목적
:사용자의 목적에 맞는 흐름을 잘 만들었는지를 검증하는 것
피그마 프로토타입의 특징
장점
- 화면 간의 전환을 직관적으로 보여줄 수 있음
- 인터렉션 없이도 흐름을 빠르게 확인 가능
- 공유 링크 하나로 누구와도 쉽게 리뷰 가능
단점
- 실제 동작을 보여주는 정교한 인터렉션 구현은 어려움
- 데이터 입력, 조건 분기, 애니메이션 등 제한적
- 모바일 앱처럼 터치에 따라 반응하는 행동을 완전히 시뮬레이션하기 어려움
사용자 흐름 설게 전략 필요성
회원가입->로그인->대시보드 진입처럼 직선형 흐름이 대표적
디자이너는 종종 사용자의 행동을 너무 단순화해서 생각(사용자는 예상대로 행동X)
=>프로토타입을 통해 디자이너는 가장 이상적인 사용자 흐름뿐만 아니라 예외상황이나 오류까지 포함한 전체적인 사용자 여정을 관찰할 수 있어야 함
사용자 흐름 3가지 종류
- Happy Path:우리가 바라는 이상적인, 순조로운 사용자 흐름
- Edge Case(엣지 케이스):예상치 못한 상황에서 발생하는 예외적, 경계에 있는 흐름
- Alternate Path(얼터닛 패스)
:같은 목적을 다른 방법으로 도착하는 흐름(같은 결과에 도달하는 다른 경로)
실전에서 고려해야 할 설계 시나리오
- 회원가입 도중 앱 종료(앱 다시 켰을 때 회원가입 처음부터 다시해야 하는지)
- 입력값 오류(팝업, 헬퍼텍스트 등 어떻게 안내할지)
- 회원/비회원 조건 분기
사용자 흐름 구조적 정리
- 플로우차트(Flowchart)
:전체 행동 흐름과 분기 조건을 시각화하는 기본적인 방식 - 시나리오 플로우(와이어프레임, 사용자 여정 지도)
:사용자 페르소나별 또는 목적별 흐름을 나눠서 설계하는 방식 - 피그마 프로토타입+설명 텍스트
:실제로 움직이는 화면으로 문서에선 놓칠 수 있는 디테일한 엣지 케이스 파악 용이
프로토타입과 UX 설계 고도화
-사용자가 길을 잃지 않고 자연스럽게 다음 행동으로 넘어가게 만들기 위한 UI 전략 필요
사용자가 멈추지 않게 만드는 UI 전략 5가지
1. Dead-end(막다른 길) 제거하기🛤️
:사용자가 도달한 이후 할 수 있는 행동이 아무것도 없는 상태, 사용자가 미처 예상하지 못했거나 준비되지 않은 상태
2. Affordance(어포던스)를 확실히 전달하기🏃♂️➡️
:행동유도성, 사용자에게 가능한 행동을 시각적으로 암시, 유도하는 UI의 성질
->UI가 사용자가 할 수 있는 행동 가능성을 자연스럽게 드러내는 것
3. Nudging(넛징)📲
:강요하지 않고도 부드럽게 원하는 행동으로 유도하는 UI 전략
4. Hierarchy Back vs History Back🔙
:뒤로 가기 버튼 클릭 시 현재 화면의 맥락, 사용자가 누른 의도 파악->둘 중 적합한 것으로 제시 필요
5. 터치영역은 보이는 것보다 커야 함🔎
모바일 디자인에서 누를 수 있는 영역이 너무 작아 잘 눌리지 않는 경우 발생
- Hierarchy Back(히스토리 복귀):사용자의 방문 이력을 시간 순으로 되돌아감
- History Back(계층 복귀):기능, 계층 구조상 상위 단계로 이동
프로토타이과 커뮤니케이션
함께 제품을 만드는 구성원들과 제품 사용자에게 제품을 소개하는 과정
=>프로토타입은 종착점 ❌, 대화의 출발점 ⭕
단순히 보여주는 것이 아닌 이해하고 조율하는 도구로 사용
실무 프로토타입 활용 사례
- 디자인 리뷰
- 기획, 개발과 스펙 협의
- 유저 테스트(UT) 시나리오 구성
- 그 외 활용법
-QA, 고객지원팀에게 신기능 흐름 설명->빠른 이해 가능
-마케팅팀, 비즈니스팀에게 제품 구조 소개->좋은 자료
-새로 온 팀원에게 온보딩 자료로 활용->제품 핵심 흐름 빠른 이해 가능
