차례
1부 · 눈
보는 법 — 화면은 읽히기 전에 보인다
- 01UI와 UX는 다르다UI(User Interface) 는 접점이다. 버튼, 글자, 색, 간격처럼 눈에 보이고 손에 닿는 것들이다. UX(User Experience) 는 여정 전체…1분
- 02사용자는 읽지 않는다눈동자 추적 연구가 수십 년째 같은 걸 보여 준다. 사람들은 웹페이지를 읽지 않고 훑는다. 왼쪽 위에서 시작해 F자 모양으로 첫 줄 몇 개만 가로로 읽고, 나머…1분
- 03위계 — 중요한 것부터 보이게시각 위계는 "무엇을 먼저 볼지"를 디자이너가 정해 주는 일이다. 도구는 넷이다. 크기, 굵기, 색, 위치. 이 넷을 안 쓰면 사용자가 스스로 중요도를 추리해야…1분
- 04여백은 낭비가 아니라 문법이다초보의 화면은 요소가 많아서가 아니라 간격이 균일해서 어지럽다. 여백은 두 가지 일을 한다. ① 관련 있는 것을 붙여서 덩어리 를 만들고(근접성), ② 덩어리…1분
- 05타이포그래피 — 화면 글의 8할웹 화면의 대부분은 결국 글자다. 그래서 타이포만 바로잡아도 화면의 8할이 좋아진다. 외울 숫자는 몇 개 안 된다.1분
- 06색 — 예쁨보다 역할색은 감각이 아니라 배역 부터 정한다. ① 바탕과 글(무채색 계열), ② 브랜드색 하나 (이 블로그의 민트), ③ 의미색(성공·경고·위험). 흔한 배분은 60:…1분
- 07정렬 — 보이지 않는 선잘 만든 화면에는 눈에 안 보이는 세로선 몇 개가 있고, 모든 요소가 그중 하나에 딱 붙어 있다. 2px 어긋난 정렬은 의식으로는 못 집어내도 "어딘가 엉성하다…1분
2부 · 뇌
사람이 작동하는 법 — 법칙은 뇌에서 나온다
- 08게슈탈트 — 뇌는 묶어서 본다사람의 뇌는 낱개를 보기 전에 무리부터 짓는다. 이걸 정리한 게 게슈탈트 원리이고, 화면 설계에서 매일 쓰는 건 넷이다.1분
- 09어포던스 — 눌리는 건 눌리게 생겨야 한다문 손잡이가 "당기세요"라고 말하지 않아도 당기게 생긴 것, 그게 어포던스다. 화면에서는 눌리는 것은 눌리게, 안 눌리는 것은 안 눌리게 생겨야 한다. 화면이…1분
- 10피드백 — 무응답이 최악이다버튼을 눌렀는데 0.5초 동안 아무 일도 없으면 사람은 다시 누른다. 그 두 번째 누름이 중복 결제를 만든다. 모든 입력에는 즉각적인 반응 이 있어야 한다. 성…1분
- 11인지 부하 — 선택지가 많으면 안 고른다결정에 걸리는 시간은 선택지 수에 따라 늘어난다(힉의 법칙). 잼 24종을 늘어놓은 매대보다 6종 매대에서 구매가 훨씬 많았다는 실험이 유명하다. 화면도 같다.…1분
- 12피츠의 법칙 — 크고 가까우면 빠르다목표물에 닿는 시간은 멀수록, 작을수록 길어진다. 1954년 실험실에서 나온 법칙인데 70년째 모든 화면에 들어맞는다. 직접 느껴 보자.1분
- 13야콥의 법칙 — 사용자는 남의 사이트에서 산다사용자는 하루의 대부분을 다른 서비스 에서 보낸다. 그래서 그들이 아는 방식이 곧 그들이 기대하는 방식이다. 로고는 왼쪽 위(누르면 홈), 장바구니는 오른쪽 위…1분
3부 · 손
만드는 법 — 원칙을 화면에 옮기기
- 14모바일 — 엄지의 세계트래픽의 절반 이상이 폰이다. 폰의 조종간은 마우스가 아니라 엄지 하나 이고, 엄지가 편하게 닿는 곳은 화면 아래쪽 절반 이다. 위쪽 구석은 그립을 고쳐 쥐어야…1분
- 15접근성 — 모두를 위한 설계가 제일 좋은 설계다접근성은 소수를 위한 부가 기능이 아니다. 자막은 청각장애인을 위해 태어나 지하철의 모두가 쓰고, 경사로는 휠체어를 위해 태어나 유모차와 캐리어가 쓴다. 장애는…1분
- 16마이크로카피 — 버튼은 동사다화면의 짧은 글들, 그러니까 버튼, 라벨, 에러, 빈 화면 안내가 마이크로카피다. 작지만 전환과 이탈을 가르는 건 대체로 이 작은 글들이다.1분
- 17상태 설계 — 화면은 다섯 벌이다디자인 시안은 보통 데이터가 알맞게 찬 '이상적인 상태' 한 벌만 그린다. 실제 화면은 최소 다섯 벌이다. 이상적 · 빈 · 로딩 · 에러 · 부분(데이터가 이…1분
- 18전환 — 팔리게 하되 속이지 마라파는 화면(랜딩·판매 페이지)의 문법은 따로 있다. 원칙은 하나다. 행동은 하나만 요구하고, 그 행동의 마찰을 전부 치운다.1분
- 19디자인 시스템 — 한 번 정하고 재사용한다화면마다 색과 간격을 새로 고민하면 느리고, 결과도 제각각이다. 잘하는 팀은 토큰 (색·글꼴·간격의 이름 붙은 값)과 컴포넌트 (버튼·카드·입력칸)를 한 번 정…1분
4부 · 길
성장하는 법 — 감을 실력으로 바꾸기
- 20측정 — 감을 데이터로 바꾼다"더 좋아진 것 같다"는 감상이다. UX는 측정할 수 있다. 과업 성공률 (끝낸 사람 비율), 소요 시간 , 이탈 지점 (깔때기 어디서 새나), 재방문 . 파는…1분
- 21프로세스 — 다섯 명이면 85%가 보인다완성하고 보여 주면 늦다. 순서는 문제 정의 → 종이 스케치 → 프로토타입 → 사용자 테스트 → 만들기 다. 비싼 단계(코드)를 마지막으로 미루고, 싼 단계(종…1분
- 22공부 지도 — 책 세 권과 매일 훈련혼자 공부할 때 읽을 책 세 권, 즐겨찾기할 사이트 셋, 하루 15분 훈련과 시간 배분을 한 장에 모았다.1분
5부 · 심화
한 층 더 — 자주 틀리는 네 자리
- 23모션 — 움직임에도 문법이 있다화면의 움직임이 하는 일은 셋이다. ① 인과 (이 패널이 어디서 나와서 어디로 갔나), ② 피드백 (입력을 들었다는 대답), ③ 성격 (브랜드의 몸짓). 넷째…1분
- 24폼 — 묻는 만큼 잃는다가입·문의·결제·검색, 서비스의 결승선은 대부분 폼이다. 그리고 입력칸 하나하나가 마찰이다. 칸이 줄면 완료율이 오른다는 건 가장 재현이 잘 되는 UX 실험 중…1분
- 25정보 구조 — 이름과 길정보 구조(IA)는 세 가지 일이다. 무엇을 어떻게 부르고 (이름), 어디에 두고 (분류), 어떻게 잇나 (길). 화면 이전의 설계라 눈에 안 보이지만, 사용자…1분
- 26신뢰와 보안 — 안심은 설계다돈과 개인정보 앞에서 사용자의 기본값은 불신이다. 그리고 신뢰는 "믿어 주세요"라는 문구가 아니라 작은 신호들의 합 으로 생긴다. 주소창의 자물쇠(https),…1분
내보내기 전 점검표 — 20문
화면을 배포하기 전에 이 목록을 한 바퀴 돈다. 체크는 이 브라우저에 저장된다. 떠났다 와도 그대로다(17강 '상태 설계'의 실물이다).
0 / 20 통과
눈
뇌
손
길
20개가 다 켜진 화면은 드물다 — 몇 개가 꺼져 있는지 아는 게 실력이다.
마지막 한 줄 — UI/UX는 재능이 아니라 결정의 목록이다. 크기·간격·색·문구, 하나하나가 이유 있는 결정이 되는 순간부터 실력이다. 오늘 만든 화면에서 결정 하나만 설명할 수 있게 되면 오늘 공부는 끝난 것이다.