분류
디자인
화면을 보는 눈과 만드는 손을 모았다. 위계·여백·타이포그래피·색에서 피드백·접근성까지, 읽고 그 자리에서 만져 보는 UI/UX 교과서다.
26편 · 글 0 · 강 26 · 마지막 글 2026.08.07
디자인 글
26편 중 1–12
UI와 UX는 다르다
UI(User Interface) 는 접점이다. 버튼, 글자, 색, 간격처럼 눈에 보이고 손에 닿는 것들이다. UX(User Experience) 는 여정 전체다. 어떤 목적으로 들어와서, 헤맸는지, 해냈는지, 다시 오고 싶은지까지. UI는 UX의…
사용자는 읽지 않는다
눈동자 추적 연구가 수십 년째 같은 걸 보여 준다. 사람들은 웹페이지를 읽지 않고 훑는다. 왼쪽 위에서 시작해 F자 모양으로 첫 줄 몇 개만 가로로 읽고, 나머지는 세로로 스캔하며 걸리는 단어만 줍는다. 첫 방문에서 페이지의 20~28% 정도만 읽는…
위계 — 중요한 것부터 보이게
시각 위계는 "무엇을 먼저 볼지"를 디자이너가 정해 주는 일이다. 도구는 넷이다. 크기, 굵기, 색, 위치. 이 넷을 안 쓰면 사용자가 스스로 중요도를 추리해야 하고, 대부분은 추리하는 대신 떠난다.
여백은 낭비가 아니라 문법이다
초보의 화면은 요소가 많아서가 아니라 간격이 균일해서 어지럽다. 여백은 두 가지 일을 한다. ① 관련 있는 것을 붙여서 덩어리 를 만들고(근접성), ② 덩어리 사이를 벌려서 단락 을 만든다. "안쪽 여백 < 바깥 여백", 이 부등식 하나가 여백 문법…
색 — 예쁨보다 역할
색은 감각이 아니라 배역 부터 정한다. ① 바탕과 글(무채색 계열), ② 브랜드색 하나 (이 블로그의 민트), ③ 의미색(성공·경고·위험). 흔한 배분은 60:30:10 이다. 바탕 60, 보조 30, 강조 10. 강조색이 화면의 10%를 넘으면 더…
정렬 — 보이지 않는 선
잘 만든 화면에는 눈에 안 보이는 세로선 몇 개가 있고, 모든 요소가 그중 하나에 딱 붙어 있다. 2px 어긋난 정렬은 의식으로는 못 집어내도 "어딘가 엉성하다"는 인상으로 남는다. 신뢰는 이런 데서 샌다. 특히 돈 내는 화면에서.
어포던스 — 눌리는 건 눌리게 생겨야 한다
문 손잡이가 "당기세요"라고 말하지 않아도 당기게 생긴 것, 그게 어포던스다. 화면에서는 눌리는 것은 눌리게, 안 눌리는 것은 안 눌리게 생겨야 한다. 화면이 평평해지면서(플랫 디자인) 이 신호가 약해졌고, 그래서 더 의식적으로 챙겨야 한다.
피드백 — 무응답이 최악이다
버튼을 눌렀는데 0.5초 동안 아무 일도 없으면 사람은 다시 누른다. 그 두 번째 누름이 중복 결제를 만든다. 모든 입력에는 즉각적인 반응 이 있어야 한다. 성공이든 실패든, 하다못해 "하는 중"이든.
인지 부하 — 선택지가 많으면 안 고른다
결정에 걸리는 시간은 선택지 수에 따라 늘어난다(힉의 법칙). 잼 24종을 늘어놓은 매대보다 6종 매대에서 구매가 훨씬 많았다는 실험이 유명하다. 화면도 같다. 메뉴 12개짜리 내비게이션은 자유가 아니라 숙제 다.
피츠의 법칙 — 크고 가까우면 빠르다
목표물에 닿는 시간은 멀수록, 작을수록 길어진다. 1954년 실험실에서 나온 법칙인데 70년째 모든 화면에 들어맞는다. 직접 느껴 보자.
조건에 맞는 글이 없다. 브루니가 숨었나 보다.