UX/UI 디자인
웹·앱·게임에서 쓰는 UX/UI의 이론과 실제다. 사람이 어떻게 보고 생각하는지(인지·지각 법칙)는 HCI와 UX 노트에 있고, 여기서는 그것을 화면과 제품으로 옮기는 방법을 다룬다.
사람의 지각·인지·운동 특성과 피츠의 법칙, 사용성 휴리스틱의 원리는 HCI와 UX 노트에 있다. 게임의 손맛과 연출은 게임 개발 노트와도 이어진다.
기초
무엇을 왜 만드나: 과정, 조사, 정보 구조
- UX와 UI, 디자인 프로세스UX와 UI가 무엇이 다르고, 문제를 찾고 답을 만드는 과정이 어떻게 흘러가는지 정리한다.UX와 UI · 더블 다이아몬드 · 디자인 씽킹 · 린 UX · 사용자 중심 설계 · 와이어프레임·목업·프로토타입 · 핸드오프 · 디자인 역할
- 사용자 조사와 문제 정의누가, 왜, 어떤 상황에서 쓰는지 알아내고 풀 문제를 정하는 방법이다.조사 방법 고르기 · 인터뷰 · 페르소나 · 여정 지도 · JTBD · 맥락 조사 · 설문 설계 · 공감 지도 · HMW 질문 · 임팩트×노력 행렬 · 표본 수
- 정보 구조와 내비게이션콘텐츠를 어떻게 나누고 이름 붙여, 사용자가 길을 잃지 않게 하는지 다룬다.정보 구조 · 카드 소팅 · 트리 테스트 · 내비게이션 패턴 · 검색 · 멘탈 모델 · 유사도 행렬 · 정보 냄새 · 깊이와 너비 · 사이트맵
화면과 인터랙션
어떻게 보이고 어떻게 반응하나: 시각, 인터랙션, 모션, 입력
- 시각 디자인: 타이포그래피·색·레이아웃글자, 색, 간격, 정렬로 무엇이 먼저 보이고 무엇이 묶이는지 정하는 법이다.타이포그래피 스케일 · 색 체계와 대비 · 그리드와 간격 · 시각적 위계 · 게슈탈트 · 한글 글꼴과 줄바꿈 · 행간과 줄 길이 · 60-30-10 · 의미 색 · 아이콘 · 다크 모드 색 조정 · CRAP
- 인터랙션과 상태누를 수 있어 보이게, 누르면 반응하게, 기다리거나 실패해도 알 수 있게 만드는 법이다.어포던스와 시그니파이어 · 컴포넌트 상태 · 피드백 · 로딩·빈 상태·오류 · 마이크로 인터랙션 · 버튼 위계 · 포커스 링 · 낙관적 UI · 실행 취소 · 메시지 표면 고르기 · 제스처
- 모션과 전환움직임으로 관계와 변화를 설명하는 법과, 지나친 움직임을 줄이는 법이다.이징 · 지속 시간 · 전환 패턴 · 애니메이션 원칙 · 움직임 줄이기 · 스프링 · 연쇄(stagger) · 프레임 예산 · 게임 UI 트윈
- 폼과 입력사용자가 덜 틀리고, 틀려도 바로 고칠 수 있게 입력을 받는 법이다.레이블 · 검증 시점 · 오류 메시지 · 입력 형식 · 모바일 키보드 · 필수·선택 표시 · 한 열 레이아웃 · 단계형 폼 · 자동 완성 · 비밀번호 필드 · 날짜 입력 · 한국 주소·전화번호 · 이중 제출 방지
제품과 시스템
여러 화면·기기·사람으로 넓히기: 반응형·접근성, 디자인 시스템, 평가
- 반응형·모바일·접근성화면 크기와 입력 방식이 달라도, 보조 기술을 써도 같은 일을 할 수 있게 만드는 법이다.반응형 레이아웃 · 브레이크포인트 · 터치 타깃 · 엄지 영역 · WCAG · 스크린 리더 · 모바일 퍼스트 · 컨테이너 쿼리 · 유동 타이포 · 반응형 이미지 · 세이프 영역 · 시맨틱 HTML과 ARIA · 포커스 순서 · 대체 텍스트 · 확대와 리플로
- 디자인 시스템같은 결정을 매번 다시 하지 않도록 토큰·컴포넌트·규칙을 모아 두는 법이다.디자인 토큰 · 컴포넌트 · 변형과 상태 · 다크 모드 · 문서화 · 토큰 3단계 · 컴포넌트 API와 슬롯 · 아토믹 디자인 · 피그마 변수와 코드 동기화 · Do/Don't 지침 · 유의적 버전 · 기여 모델
- UX 라이팅·평가·실험화면의 말을 다듬고, 설계가 실제로 통하는지 재고, 사용자를 속이지 않는 법이다.UX 라이팅 · 휴리스틱 평가 · 사용성 테스트 · A/B 테스트 · UX 지표 · 다크 패턴 · 인지적 워크스루 · 심각도 평가 · SUS · 생각 소리 내기 · HEART 프레임워크 · 퍼널 분석 · NPS · 접근성 감사
게임 UX/UI
게임에서 달라지는 것: HUD·메뉴, 온보딩·피드백·접근성
- 게임 UI: HUD와 메뉴게임 화면 위 정보를 어디에 어떻게 보여 주고, 메뉴를 컨트롤러로 다루게 하는 법이다.디제틱·비디제틱 UI · HUD 정보 위계 · 메뉴 흐름 · 컨트롤러 포커스 내비게이션 · 세이프 영역과 해상도 · 상황형 HUD · HUD 위젯 설계 · 버튼 프롬프트 · 글자 크기와 보는 거리 · 현지화와 글자 폭 · UI 드로 콜
- 게임 UX: 온보딩·피드백·접근성처음 하는 사람도 배우고, 손맛을 느끼고, 누구나 즐길 수 있게 만드는 법이다.온보딩과 튜토리얼 · 피드백과 게임 필 · 난이도와 몰입 · 게임 접근성 · 플레이테스트 · 점진적 공개 · 첫 5분 · 보상과 동기 · 확률형 아이템 표시 · 멀티플랫폼 입력