오늘 한일
-11시 디자인 숙련 발제 참여
-디자인 숙련 1강 완강
-디자인 숙련 2-2까지
-8시 AI 특강 참여
내일 할일
-디자인 숙련 2강 완강
-디자인 숙련 3강 시작
-디장니 숙련 1강 실습 질문 작성📕실전 UI 디자인 1강
UI:User Interface
인터페이스:사용자가 시스템과 만나는 첫 장면이나 사용자의 행동을 유도하는 설계된 접점
- UI 디자인 목적
-버튼, 이미지 카트 하나, 검색창의 위치 등 인터페이스를 배열, 강조, 흐름을 만드는 것
-사용자가 서비스를 사용하는 모든 순간에 우리가 원하는 행도을 선택하도록 유도
사용자 흐름 설계
-디자이너가 설계하는 것은 예쁜 구성, 텍스트 정렬이 아닌 사용자가 어떤 행동을 위해 자연스럽게 움직이도록 돕는 흐름
- ❌UI 디자인의 잘못된 접근❌
장바구니 UI가 보기 불편, 메뉴 화면 UX가 별로->디자이너가 결과물을 먼저 생각해버린 판단 - ⭕UI 디자인의 올바른 접근⭕
장바구니까지 갔는데 왜 결제를 안 했을까?
메뉴 화면에서 왜 오래 머물렀을까?
->결과물보다 먼저 사용자의 행동을 봐야 함, 모두 왜?라는 질문의 형태
좋은 디자인
-사용자가 원하는 바를 더 빠르게 얻을 수 있는 디자인이 좋은 디자인
사용자 행동의 중심 요소
사용자가 원하는 바를 더 빠르게 얻게 하려면 사용자 행동을 중심으로 설계 가능해야 함
-앱을 사용할 때 구체적으로 원하는 무언가에 무사히 도착하게 하는 것
행동 설계의 3가지 중심 요소
- 목표:사용자가 이루고자 하는 목적
- 행동:목적을 이루기 위한 단계별 액션
- 흐름:액션을 연결하는 정보 구조
사용자의 단편적 행동->실제 숨은 필요 꺼내주는 것 필요
🎇북극성 지표(North Star Metric)
-데이터를 분석하여 사용자 문제가 없는지 파악하기 위해 올바른 방향으로 가고 있는지 확신할 수 있는 기준->사용자 목적 수치화하여 표현
=>제품에서 서비스, 제품이 가야 할 방향을 알려주는 기준
북극성 지표 봐야 하는 이유
-사용자가 이 앱을 왜 쓰는가?에 대한 근복적 이유 파악 가능
-회사가 어느 방향으로 성장해야 하는지 알려줄 수 있음
-단순 클릭 수, 노출 수보다 더 의미 있는 행동이 무엇인지 분석 가능
인게이지먼트 게임의 개념
:제품과 사용자 목적에 따라 핵심 지표의 유형이 달라지는 것으로 사용자가 어떤 행동 패턴으로 제품에 몰입하게 되는지를 정의한 틀
인게이지먼트 게임 유형🕹️
- Attention Game:오래 머무를수록 이득이 발생(ex.SNS)
-사용자가 더 오래, 더 자주 앱을 사용하도록 유도
-체류시간, 스크롤 깊이, 페이지뷰 등을 관찰
->콘텐츠 소비를 통한 몰입이 핵심, 사용자가 ‘더 보고 싶어지는‘ 경험을 느끼도록 UI 설계 - Transaction Game:거래가 발생할수록 이득이 발생
-사용자가 앱 안에서 어떤 거래, 결과를 만들어 내도록 유도
-물질 재화, 무형 서비스로 구분되며 주문 수, 완료율, 구매 전환율 등을 관찰
->사용자가 빠르게 목적 달성할 수 있도록 빠르고 명확한 흐름 설계 중요 - Productivity Game:업무를 완수할수록 이득이 발생
-사용자가 앱 안에서 생산적인 활동을 하도록 유도
-업무, 특정 작업을 돕는 형태의 서비스
-생성된 콘텐츠 수, 정리된 데이터 수, 공유 빈도 등을 관찰
->사용자에게 무언가를 만들어 가는 의미, 효율적으로 무언가를 끝마치는 성취감이 원동력
사용자 행동 흐름 만들기
※우리 서비스 안에서 사용자가 반드시 해야 할 행동이 무엇인지 파악하고 그 행동을 많이 하도록 유도하는 디자인을 해야겠다는 생각 필요
인게이지먼트 게임과 사용자 행동 흐름
-사용자가 서비스를 사용하는 목적은 인게이지먼트 게임과 맞닿아 있음
->이 목적이 어떻게 행동으로 흘러가야 할지
->그 행동이 어떤 화면에서 어떤 구조로 이어져야 할지 고민 필요
문제 정의의 이해
사용자는 어떤 이유로 그 행동을 하는지, 어떤 걸 원해서 그 행동을 하는지->문제
그 문제를 찾아서 지목하는 것->문제 정의
-문제 정의는 무엇을 어떻게 해결할지 결정하는 기준, 서비스가 존재하는 이유 그 자체
-문제 정의는 결과가 아니라 구조를 보는 시야
📗실전 UI 디자인 2강
정보 구조화
:화면 안의 정보를 체계적으로 분류해 사용자가 자연스럽게 따라올 수 있도록 하는 것
- 정보 구조와 UI의 관계
-사용자는 행동을 판단할 때 그다음을 예상하면서 행동함
-정보를 목적에 따라 정리하는 정보 구조화 필요 - 정보 구조를 짜기 위한 UI 설계
-UI는 사용자의 행동 흐름에 따라 정보를 어떤 순서로 보여줄지 정하는 것 중요
-즉 사용자의 목적, 행동이 정보 우선순위를 결정함
클러스터링(Clustering):정보 구조 덩어리를 뭉치는 것
- 중복 관계:지시 대상은 같으나 요업이 다른 유의 관계로 가장 일반적(어머니:엄마:모친)
- 인접 관계:지시 대상도 다르고 쓰이는 용법도 다름, 동일한 위치에 있는 단어지만 서로 성질이 달라 다른 말로 대체할 수 없음(밥:진지, 머리:대가리)
- 상하 관계:유개념과 총개념의 관계에 있는 유의어를 의미함(사람:아이:소년)
-정보에도 더 가깝고 먼 관계가 존재
->클러스터링의 개념은 게슈탈트 원리 중 근접성의 원리와 유사
시각적 흐름 구조
시각적 흐름은 사람이 화면을 인식하는 순서
-사람은 화면 전체 한 번에 보지 못함, 인식에 필요한 에너지를 최대한 아끼기 위해 중요한 정보만 먼저 보려고 함
-그래서 시선이 먼저 머무는 지점부터 차례로 정보를 인식하고 판단을 내림
-같은 정보라도 먼저 보이는 순서에 따라 사용자의 판단이 달라질 수 있음
시선 흐름을 만드는 3가지 요소
- 타이포그래피
- 색상, 채도 및 명도
- 정렬과 여백
✏️타이포그래피
-글자의 크기, 굵기, 문장의 간격 등을 조정해 읽는 순서를 만들 수 있음
*크기나 스타일이 너무 다양하거나 복잡하면 혼란 유발 가능
타이포 스타일 이름 짓기
- 네이밍 컨벤션(Naming Convention):이름을 짓는 규칙
-디자인 시스템에서 타이포그래피 스타일 네이밍은 협업과 유지보수의 효율성을 좌우
-혼란 없이 스타일을 확장, 재사용하려면 스타일 이름 짓는 규칙 만드는 것이 좋음
스타일 위계 분류 방법
- Display:가장 큰 제목 스타일(브랜드 메시지, 메인 타이틀 등)
- Title:일반적인 타이틀 텍스트(카드, 페이지 제목)
- Subtitle:부제목, 보조 타이틀(짧은 설명, 서브 섹션 헤드라인 등)
- Body:일반적인 본문 텍스트
- Caption:날짜, 태그, 설명 등 작은 보조 정보
🖍️색상, 채도 및 명도
- 강조할 정보는 더 진하고 선명한 컬러로 표현
-강조할 정보에 포인트 컬러 사용, 경우에 따라 지시 명확한(거절, 승인 등)에 색상 사용 가능 - 배경색과 글자색 확실한 구분 필요
-배경색, 글자색의 대비는 최소 3:1 권장
-너무 흐린 색상은 비활성화된 정보로 보일 위험도 존재 - 같은 컬러여도 밝기 차이로 위계 표현 가능
-중요한 정보는 컬러 대비, 명도를 조합해 강조
-덜 중요한 정보는 옅은 회색 계열로 처리하면 자연스러운 위계 표현 가능
*너무 강한 원색 조합은 피로도 높일 수 있음
📝정렬과 여백
-정렬과 여백은 UI의 질서를 시각적으로 보여주는 핵심 요소
-요소 간 간격을 일정하게 유지하면 정보 덩어리의 구분이 명확해짐
-정렬은 기본적으로 왼쪽 기준으로 왼쪽 정렬을 하는 것이 좋음
(가운데 정렬의 경우->순간적 시선 집중 필요시에)
-여백은 어디서 어디까지가 한 덩어리인지 인지하는 기준이 됨
