랜선 사수의 디자인 피드백 #2
카드 타입 UI를 만드는데 라운드 값을 12로 할지, 16으로 할지, 20으로 할지, 24로 할지...
아니면 버튼을 만들 때 4, 6, 8, 12, 16?
머리 싸맨 적 없었는가?
언제부터인가 UI 디자인에서는 라운드가 없는 컴포넌트를 찾아보기 힘들어졌다.
이젠 라운드가 없는 디자인이 오히려 더 ‘특이해’ 보일 정도다.
그리고 디자이너는 매번 라운드 값 앞에서 고민에 빠진다.
8px 일까 12px 일까 아니면 24px?
머릿속에 온통 8 배수가 맴돈다.
사실 UI 자체가 사용자 중심으로 발전해 온 배경에는, 컴퓨터가 아니라 '사람이 쓰는 도구'라는 인식의 변화가 있었다.
특히 모바일 환경 이후로는 '기능'보다 '접근성'과 '심리적 편안함'이 우선시 되기 시작했다.
인지심리학에 따르면 사람은 모서리가 둥근 형태에서 더 편안함과 안전함을 느낀다고 한다.
그러니까 사용자에게는 라운드가 클수록 위협감은 줄고 감성적이고 친근하게 느껴지는 것이다.
라운드는 사용자에게 '이건 눌러도 괜찮다'는 심리적 신호를 주게 되고, 특히 모바일 터치 기반 UI에서는 이런 감성적 안정감이 매우 중요하다.
그래서 지금은 라운드가 UI 디자인 전반에서 거의 기본값처럼 사용되고 있는 것이다.
라운드는 단지 보기 좋아서가 아니라, 디지털 환경에서 사용자 배려 또는 사용자가 다음 행동을 부담 없이 이어가도록 돕는 시각적 장치인 셈이다.
라운드 값은 크게 보면 수치가 작을수록 기능적, 클수록 감성적이다.
기본적으로 다음과 같은 라운드 스케일이 많이 사용된다:
버튼: 4px 기능적, 8px 기본, 12px 여유 있고 부드러움
(버튼 시스템의 경우 primary, secondary는 8px를, 제일 작은 버튼 small은 4px를 사용하는 경우가 많다.)
카드: 8~24px 범위에서 서비스 성격에 따라 조정
많이 사용하는 라운드 수치:
4px 날카롭고 정보 중심, 관리자 UI나 테이블 등에 적합
8px 기본값. 대부분의 버튼, 입력창, 작은 카드에 사용
12px 이상 사용자 친화적, 감성적 인상을 줄 때 사용
24px 이상 홈 화면, 추천 카드, 프로필처럼 무드를 강조할 때
이 기본값을 토대로, 서비스 성격과 톤 앤 매너에 따라 라운드를 조정해 나가면 빠르게 기본값을 설정할 수 있다.
금융, B2B, 관리자툴 낮은 라운드
커머스, 소셜, 뷰티, 일상 앱 높은 라운드
사실 요즘은 라운드가 있는 게 기본이 되어버려서, 차별화를 주려면 라운드 자체를 깨는 시도도 필요하다.
라운드를 아예 없애는 것이 유니크하게 보일 수 있고, 반대로 과감한 라운드 (예: 32px 이상)를 주는 것도 눈길을 끌 수 있다.
중요한 건 라운드 수치가 아니라, 그 이유와 전략이 있느냐이다.
라운드 수치 앞에서 멈칫하게 된다면 이런 이론적 배경을 떠올려 보자.
근거 있는 디자인과 그런 것 같은 느낌적 느낌으로 디자인하는 것은 분명 차이가 있으니까.
경험이 쌓일수록 '그냥 보기 좋아서요'라는 말보단, 내 선택을 설명할 수 있는 기준이 필요해진다.
기준이 생기면 판단이 빨라지고, 판단이 쌓이면 결국 자신감이 된다.