화면을 다 만들었는데 어딘가 어수선하신가요? 색을 바꿔 보고 폰트를 바꿔 봐도 그대로라면, 고칠 곳은 꾸밈이 아닐 가능성이 큽니다.
이 글에서는 UI 디자인할 때 자주 쓰는 UX 법칙 다섯 개를 원래 연구가 말한 내용, 화면에서 바꿀 것, 지나치게 쓰면 생기는 문제 순서로 정리했습니다.
결론부터 말씀드리면, UX 법칙은 외우는 공식이 아니라 "사용자가 다음에 할 일이 바로 보이나"를 따지는 질문 다섯 개입니다.
다섯 법칙 전에 할 일이 하나 있어요. 이 화면에서 사용자가 해야 할 행동을 한 문장으로 적는 겁니다. 결제하기, 관심사 고르기, 책 정보 입력하기 같은 식이죠.
이게 정해져야 다음 결정이 됩니다. 선택지를 줄일지, 버튼을 키울지, 간격을 벌릴지 전부 이 행동이 기준이거든요.
행동이 안 정해진 화면에는 어떤 법칙을 대도 답이 안 나옵니다.
법칙 | 한 줄로 | 화면에 던지는 질문 |
|---|---|---|
힉의 법칙 | 선택지가 많을수록 결정이 늦다 | 지금 다 보여줄 필요가 있나 |
피츠의 법칙 | 멀고 작을수록 누르기 어렵다 | 중요한 버튼이 크고 가까운가 |
제이콥의 법칙 | 사람들은 다른 앱에서 배운 대로 기대한다 | 익숙한 자리에 있나 |
근접성의 법칙 | 가까운 것끼리 한 묶음으로 본다 | 간격이 묶음을 말해 주나 |
폰 레스토프 효과 | 하나만 다르면 그게 기억된다 | 강조가 정말 하나뿐인가 |
그럼 첫 번째, 선택지 개수부터 보겠습니다.
1952년 윌리엄 힉, 1953년 레이 하이먼이 실험으로 정리한 법칙입니다. 선택지의 수와 복잡도가 늘수록 결정하는 데 시간이 더 걸린다는 내용이에요.
가입할 때 관심사를 고르는 화면을 떠올려 보세요. 카페 투어부터 팝송까지 태그 열여덟 개를 한 화면에 깔면 친절해 보입니다. 그런데 사용자는 하나를 고르기 전에 열여덟 개를 다 훑어야 하죠.
고치는 방법은 지우는 게 아닙니다. "먹고 마시기", "TV와 영화"처럼 묶고, 묶음마다 대표 몇 개만 보여준 다음 나머지는 더보기 안에 둡니다. 고를 수 있는 건 그대로인데 한 번에 판단할 양이 줄어요.
여기서 자주 틀리는 지점이 있습니다. 메뉴처럼 이름을 하나씩 읽어 내려가며 찾는 목록에는 힉의 법칙이 잘 안 맞습니다. 그때는 훑어 읽는 시간이 더 크게 작용하거든요. 개수를 줄이기보다 순서와 묶음을 정리하는 게 맞습니다.
Laws of UX도 "추상적인 수준까지 단순화하지 말라"고 따로 적어 두었어요.
선택지를 정리했다면 다음은 그 선택을 실제로 누르는 손가락 차례입니다.
1954년 폴 피츠가 발표한 법칙입니다. 목표물을 누르는 데 걸리는 시간은 목표까지의 거리와 크기로 정해져요. 멀수록, 작을수록 오래 걸리고 잘못 누르기 쉽습니다.
구매 화면에서 결제 버튼이 오른쪽 위 구석에 작게 붙어 있다고 해 보죠. 한 손으로 폰을 쥔 사람은 손가락을 끝까지 뻗어야 합니다. 같은 버튼을 화면 아래에 가로로 길게 놓으면 엄지가 그냥 닿고요.
크기는 감으로 정하지 않으셔도 됩니다. 공식 기준이 있거든요.
애플 휴먼 인터페이스 가이드라인 : iOS 기본 컨트롤 44×44pt, 최소 28×28pt
안드로이드 접근성 도움말 : 누르는 요소는 가로세로 최소 48dp(약 9mm)
웹 접근성 지침 WCAG 2.2 (2.5.8) : 포인터로 누르는 대상은 최소 24×24 CSS 픽셀
하나 헷갈리기 쉬운 게 있어요. 마우스에서는 화면 가장자리가 유리합니다. 커서가 벽에 막혀 멈추니까요. 그런데 닐슨 노먼 그룹은 터치 화면에서는 반대로 가장자리 대상을 누르는 데 더 오래 걸린다고 적었습니다.
PC에서 통하던 배치를 모바일에 그대로 옮기면 안 되는 이유죠.
버튼을 어디 둘지 정했다면, 이번엔 사용자가 그 버튼을 "어디서 찾을 거라고 기대하는지"를 볼 차례입니다.
2000년 제이콥 닐슨이 정리한 말이에요. 사용자는 대부분의 시간을 다른 사이트에서 보낸다. 그러니 내 서비스도 이미 익숙한 다른 서비스처럼 동작하길 기대한다는 겁니다.
목록 화면에서 검색창이 어디 있어야 하냐고 물으면 대부분 위를 가리킵니다. 그게 정답이라서가 아니라 다들 거기서 찾아왔기 때문이에요. 검색을 아래 탭 안에 숨기면 기능은 있는데 아무도 못 찾습니다.
새 인터랙션을 만드는 게 항상 좋은 경험은 아닙니다. 사용자는 화면을 익히러 온 게 아니라 일을 하러 왔으니까요.
꼭 바꿔야 할 때를 위한 조언도 Laws of UX에 있습니다. 익숙한 옛 버전을 한동안 같이 쓸 수 있게 해서 충돌을 줄이라는 것. 메뉴 위치를 하루아침에 옮기고 공지 한 줄로 끝내면 문의가 쏟아지는 이유가 여기 있습니다.
자리를 정했으면 이제 그 자리들 사이의 간격을 볼 차례예요.
게슈탈트 심리학에서 나온 원리입니다. 가까이 놓인 것은 한 묶음으로, 떨어진 것은 다른 묶음으로 봅니다. 닐슨 노먼 그룹은 가까이 있는 항목을 같은 기능이나 성격을 가진 것으로 인식할 가능성이 높다고 설명하죠.
책 등록 화면을 예로 들어 볼게요. 책 제목, 한 줄 소개, 카테고리, 공개 범위, 판매 가격이 전부 같은 간격으로 내려가면 어디까지가 책 정보이고 어디부터가 가격 설정인지 한눈에 안 들어옵니다.
고치는 건 간단해요. "판매 가격"이라는 소제목을 세우고, 그 위 간격을 묶음 안쪽 간격의 두 배 이상으로 벌립니다. 선이나 상자를 더 그리지 않아도 간격만으로 정리됩니다.
이럴 때 구분선부터 긋고 싶어지는 마음, 다들 같을 겁니다. 그런데 선은 늘수록 화면을 더 답답하게 만들어요.
마지막은 이렇게 정리된 화면에서 딱 하나를 눈에 띄게 만드는 일입니다.
1933년 헤드비히 폰 레스토프가 기억 실험으로 밝힌 효과입니다. 비슷한 것들 사이에서 하나만 다르면 그게 가장 잘 기억돼요.
요금제 화면에서 연간과 월간이 같은 크기, 같은 색으로 나란히 있으면 사용자는 비교만 하다 나갑니다. 고르길 바라는 쪽에만 할인 띠를 붙이고 테두리 색을 바꾸면 시선이 거기서 멈추죠.
가장 많이 하는 실수는 강조를 여러 개 거는 겁니다. 배지, 빨간 글씨, 반짝이는 버튼이 한 화면에 셋이면 아무것도 강조되지 않아요. 강조는 많이 할수록 세지는 게 아니라 주변과 차이가 날 때 셉니다.
주의할 점도 두 가지 있습니다.
색만으로 차이를 주지 마세요. 색을 잘 구분 못 하는 사람에게는 그 차이가 안 보입니다. 띠, 글자, 굵기를 함께 쓰세요.
너무 튀면 광고로 오해받습니다. 사람들이 눈으로 피해 가는 자리가 돼요.
다섯 개를 다 봤으니, 실제 화면에 한 번에 대보는 순서로 묶어 보겠습니다.
이 화면의 주인공 행동을 한 문장으로 적는다
그 행동 전에 판단해야 하는 선택지가 몇 개인지 센다 (힉)
그 버튼이 엄지가 닿는 곳에 기준 크기 이상으로 있는지 본다 (피츠)
검색, 뒤로가기 같은 기본 요소가 다른 앱과 같은 자리에 있는지 본다 (제이콥)
묶음 사이 간격이 묶음 안쪽 간격보다 확실히 큰지 본다 (근접성)
강조가 화면에 정말 하나뿐인지 센다 (폰 레스토프)
이 다섯 법칙으로 모든 화면 문제가 풀리지는 않습니다. 글이 안 읽히는 문제는 줄 길이와 행간 쪽이 더 크고, 색 대비는 따로 재야 하거든요. 그 두 가지는 아래 글에 정리해 두었습니다.
예쁜지는 두 번째 문제입니다. 오늘 만든 화면 하나를 열고, 주인공 행동부터 한 문장으로 적어 보세요.
Laws of UX, Hick's Law: https://lawsofux.com/hicks-law/
Laws of UX, Fitts's Law: https://lawsofux.com/fittss-law/
Nielsen Norman Group, Raluca Budiu, "Fitts's Law and Its Applications in UX" (2022-07-31): https://www.nngroup.com/articles/fitts-law/
Apple, Human Interface Guidelines, Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility
Google, Android 접근성 도움말, 터치 타겟 크기: https://support.google.com/accessibility/android/answer/7101858
W3C, Understanding WCAG 2.2 SC 2.5.8 Target Size (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
Nielsen Norman Group, Jakob Nielsen, "End of Web Design" (2000-07-22): https://www.nngroup.com/articles/end-of-web-design/
Laws of UX, Jakob's Law: https://lawsofux.com/jakobs-law/
Nielsen Norman Group, Aurora Harley, "Proximity Principle in Visual Design" (2020-08-02): https://www.nngroup.com/articles/gestalt-proximity/
Laws of UX, Von Restorff Effect: https://lawsofux.com/von-restorff-effect/