유사성

정의

유사성은 색, 모양, 크기, 방향처럼 겉모습이 비슷한 요소를 눈이 한 무리로 묶어 보는 성질입니다. 근접성이 거리로 그룹을 만든다면, 유사성은 생김새로 그룹을 만듭니다. 그래서 서로 멀리 떨어져 있어도 같은 색과 형태를 가진 것들은 자연스럽게 같은 종류로 읽힙니다. 목록에서 같은 아이콘이 붙은 항목끼리, 같은 색 배지를 단 항목끼리 한 묶음으로 보이는 것이 유사성이 작동하는 모습입니다. 반대로 형태를 일부러 다르게 하면 그 요소는 무리에서 튀어나와 다른 역할임을 알립니다. 이렇게 유사성은 위치를 바꾸지 않고도 닮음과 다름만으로 관계를 조율할 수 있는 원리이며, 화면 전체의 시각 언어를 정하는 바탕이 됩니다.

왜 중요한가

유사성은 형태만으로 역할을 암시하는 강력한 신호입니다. 같은 기능을 하는 버튼을 같은 모양으로 통일하면, 사용자는 설명을 읽지 않아도 그것들이 같은 부류임을 짐작합니다. 반대로 중요한 동작과 부차적인 동작의 생김새를 다르게 하면, 그 차이 자체가 위계가 되어 무엇이 주된 행동인지 알려 줍니다. 즉 유사성은 요소를 묶는 데도 쓰고 나누는 데도 씁니다. 일관된 시각 언어를 갖춘 인터페이스는 사용자가 한 번 익힌 규칙을 다른 화면에도 그대로 적용할 수 있어 예측 가능해지고, 새로 배워야 할 것이 줄어 학습 비용도 크게 낮아집니다. 유사성은 그래서 디자인의 규칙성과 신뢰감을 떠받치는 바탕이 되며, 제품이 커지고 화면이 많아질수록 그 가치는 더욱 분명해집니다.

흔한 실수

• 같은 역할의 버튼을 화면마다 조금씩 다른 색과 크기로 만드는 경우입니다. 미묘한 차이가 여러 화면에 쌓이면 사용자는 그것들이 정말 같은 기능인지 확신하지 못하고 매번 다시 살피게 되어, 조작이 느려지고 피로해집니다.
• 반대로 역할이 전혀 다른 요소를 똑같이 생기게 만드는 경우입니다. 삭제 버튼과 저장 버튼이 같은 모양이면 유사성이 두 기능을 한 부류로 묶어 위험한 착각을 부추기고, 돌이키기 어려운 실수로 이어질 수 있습니다.
• 장식을 위해 서로 무관한 요소에 같은 색을 흩뿌리는 경우입니다. 색이 같으면 관련이 있는 것처럼 묶여 보여, 의도하지 않은 그룹이 생기고 화면이 전하려는 의미가 흐려집니다.

실무 팁

• 같은 종류는 같은 스타일로, 다른 역할은 눈에 띄게 다른 스타일로 정하세요. 형태의 같고 다름을 의도적으로 설계하면 하나의 화면 안에서 위계와 그룹을 동시에 표현할 수 있습니다.
• 버튼, 배지, 카드처럼 반복되는 요소는 스타일을 토큰으로 묶어 재사용하세요. 한곳에서 정의한 규칙이 화면 전체로 퍼지면 손이 많이 가지 않아도 유사성이 저절로 유지됩니다.
• 색만으로 종류를 구분하지 말고 모양이나 아이콘 같은 두 번째 단서를 함께 두세요. 색각 차이가 있는 사용자에게도 유사성이 흔들리지 않고 전달되어 접근성이 좋아지고, 흑백으로 인쇄되거나 화면이 어두운 환경에서도 그룹 관계가 무너지지 않고 그대로 읽힙니다.

관련 개념