버튼은 왜 그 크기여야 할까 - UX 디자인을 지배하는 21가지 심리 법칙 'Laws of UX'

디자인이 '예뻐 보이는' 게 전부가 아니거든요

혹시 이런 경험 있으세요? 어떤 앱을 쓸 때는 별생각 없이 술술 잘 쓰게 되는데, 어떤 앱은 분명 화면도 깔끔하고 색감도 예쁜데 이상하게 짜증이 나는 경험요. 사실 이건 디자이너의 '감각' 문제가 아니라, 사람의 뇌가 정보를 처리하는 방식과 인터페이스가 얼마나 잘 맞아떨어지느냐의 문제예요.

오늘 소개할 Laws of UX(lawsofux.com)는 디자이너 Jon Yablonski가 만든 사이트인데요, 인지심리학과 행동경제학에서 검증된 원칙들을 'UI를 만들 때 어떻게 적용해야 하는가'라는 관점으로 정리해 둔 일종의 디자인 백과사전이에요. 코드만 짜다가 갑자기 화면 디자인까지 봐야 하는 1인 개발자나 풀스택 엔지니어한테는 진짜 보물 같은 자료입니다.

핵심이 되는 법칙들, 하나씩 풀어볼게요

가장 유명한 게 Hick's Law(힉의 법칙)예요. 이게 뭐냐면, 선택지가 많아지면 많아질수록 사람이 결정을 내리는 데 걸리는 시간이 로그함수적으로 늘어난다는 거예요. 식당 메뉴판에 메뉴가 100개 있으면 오히려 못 고르고 그냥 김치찌개 시키는 그 현상이죠. 그래서 회원가입 폼에 입력 필드를 10개씩 욱여넣으면 안 되고, 메인 CTA(Call To Action, 사용자가 눌러주길 바라는 핵심 버튼) 버튼은 가급적 하나로 좁혀야 하는 이유가 여기 있어요.

Fitts's Law(피츠의 법칙)는 더 실용적이에요. 어떤 타깃을 누르는 데 걸리는 시간은 거리와 크기에 따라 결정된다는 법칙인데, 쉽게 말하면 '버튼은 충분히 크게, 그리고 손가락이나 커서가 닿기 쉬운 위치에 둬라'는 얘기죠. 모바일에서 권장 터치 영역이 최소 44x44pt(애플 기준)인 이유, 그리고 '저장' 버튼을 화면 구석이 아니라 엄지손가락이 자연스럽게 닿는 하단 중앙쯤에 배치하는 이유가 다 이 법칙 때문이에요.

Jakob's Law(야콥의 법칙)도 꼭 알아두셔야 해요. 사용자는 우리 사이트보다 '다른 사이트들'에서 훨씬 더 많은 시간을 보낸다는 거예요. 그래서 우리 서비스만의 특별한 인터랙션을 발명하는 것보다, 사람들이 이미 익숙한 패턴을 따르는 게 거의 항상 더 좋은 선택이라는 거죠. 햄버거 아이콘은 메뉴, 돋보기 아이콘은 검색, 장바구니 아이콘은 주문. 이걸 굳이 비틀어서 창의성 발휘하려다가 사용자만 헤매게 되는 경우가 정말 많거든요.

그 외에도 Miller's Law(사람은 한 번에 7±2개 정도의 정보 덩어리만 단기 기억에 담을 수 있다), Doherty Threshold(시스템 응답이 400ms 이내일 때 사용자가 '내 작업에 몰입하고 있다'고 느낀다), Aesthetic-Usability Effect(예쁜 디자인은 실제로 사용성도 더 좋게 느껴진다) 같은 법칙들이 코드 예시는 없지만 화면 캡처와 함께 친절하게 설명되어 있어요.

비슷한 자료들과 비교하면

UX 가이드라인 하면 보통 구글의 Material Design이나 애플의 Human Interface Guidelines를 떠올리시잖아요. 근데 그건 '특정 플랫폼에서 어떻게 만들어라'는 디자인 시스템에 가깝고, Laws of UX는 그 아래에 깔린 '왜 그렇게 만들어야 하는가'를 다루는 원리에 더 가까워요. 닐슨 노먼 그룹의 휴리스틱 평가 10원칙과도 결이 비슷한데, Laws of UX 쪽이 시각 자료가 풍부하고 모바일 친화적이어서 처음 입문하시는 분들에게 더 추천할 만해요.

한국 개발자한테는요

사이드 프로젝트 하시는 분들, 토이 프로젝트 포트폴리오로 만드시는 분들에게 특히 유용해요. 보통 디자이너 없이 개발자 혼자 화면을 짜다 보면 '뭔가 어색한데 어디가 문제인지 모르겠는' 상태에 빠지곤 하는데, 이 사이트의 법칙들을 체크리스트처럼 훑어보면 '아, 내 폼이 입력 필드가 너무 많구나', '아, 이 버튼은 너무 작구나' 하고 구체적인 개선 포인트를 잡을 수 있거든요. 디자이너분들과 협업할 때도 "왜 이렇게 해야 해요?" 대신 "Hick's Law 때문에 이 옵션들 묶는 게 좋을 것 같아요"라고 말할 수 있으면 커뮤니케이션이 훨씬 매끄러워집니다.