✅ 오늘의 파쓰 지식 : 시대에 따라 디자인 트렌드는 달라지더라도 변치 않는 플랫폼 심미성의 규칙들이 있는데요, 오늘 파쓰와 함께 UX 심미성의 4가지 규칙을 알아보아요!

✅ 파쓰가 전하는 테크 샤라웃 : 리디, 사람인, 스포카의 테크 블로그 소식을 소개합니다!

몇 년 전, 한 대학생 커뮤니티 플랫폼에 다음과 같은 글이 올라와 많은 사람들에게 씁쓸한 웃음을 짓게 했는데요. 말하자면 예쁜 사람들은 어느 정도 공통점이 있는데, 못생긴 건 스펙트럼이 무한하다는 거예요. 파쓰도 마냥 웃지만은 못했지만, 그래도 한 가지 공감이 갔던 부분은 플랫폼 역시 마찬가지라는 거예요.😂 플랫폼도 예쁘지 않은 플랫폼들은 각양 각색으로 예쁘지 않을 수 있지만, 예쁜 플랫폼들은 일정한 규칙을 따르고 있는 모습을 발견할 수 있거든요.

플랫폼, 예쁘기까지 해야 돼? - 시각적 심미성의 법칙🎀

첫 번째. 시각적 일관성을 유지하라🥇

가장 중요한 규칙 중 하나가 시각적 일관성을 유지하는 거예요. 시각적 일관성이라는 것은 사용자가 서비스 또는 제품을 사용하는 동안, 일관성 있는 시각적 요소를 유지함으로써 사용자에게 안정감을 제공하는 것을 뜻하는데요. 예를 들면, 아래 그림에서 왼쪽에 보이는 아이콘들의 경우 앞의 두 아이콘은 선형으로 이루어지고, 뒤에 두 아이콘은 모든 선들이 꽉 채워진 면형으로 이루어져 있어요. 또, 아이콘 아래에 있는 문구들도 하나는 텍스트로 이루어져 있고, 나머지는 숫자로만 이루어져 있지요. 이렇게 표현이 되었을 때, 사용자들은 디자인이 완성되지 않은 것과 같은 느낌을 받아요. 그래서 오른쪽에 보여지는 것과 같이 모든 아이콘이 선형 혹은 면형으로 통일성을 유지하고, 아래 문구도 텍스트가 일관되게 보여지는 편이 더 심미적으로 완성도가 높다고 볼 수 있어요. 

두 번째. 유사 요소 유사 작동의 법칙🥈

두 번째, 플랫폼 심미성의 법칙으로 유사 요소 유사 작동의 법칙이 있습니다. 말 그대로 요소가 유사하게 보일 경우, 사용자는 유사한 요소들이 비슷한 방식으로 작동하길 기대해요. 그렇기 때문에 동일한 기능 요소에 대해서는 일관된 시각적 처리가 필요하고, 만약 작동 방식이 다르다면 시각적으로 다르게 보이도록 처리하는 것이 필요해요.

예를 들면, 다음의 왼쪽 화면에서 아이콘들에 상호작용 기능이 없는데, 하단 ‘Book now’ 버튼과 유사한 디자인으로 제작이 된다면 사용자들은 아이콘과 버튼이 헷갈릴 수 있어요. 그래서 오른쪽 화면과 같이 ‘Book now’ 버튼의 디자인과 아이콘의 디자인이 다르게 제공되는 것이 훨씬 좋은 디자인이라고 할 수 있어요.  

모바일 플랫폼들은 특히나 좁은 사용자 화면 안에서 많은 정보들을 제공해야 하기 때문에 정보의 중요도에 따라 우선순위 요소들을 나누어 중요한 정보들은 강조해서 표현이 되어야 해요. 만약 열 가지의 정보가 한 화면 안에서 전달되어야 하는데, 모두 똑같은 강도로 강조되어 있다면 사용자들은 중요한 정보와 중요하지 않은 정보 모두를 제대로 전달받지 못하는 상황이 일어날 수도 있어요. 그래서 우선순위에 따라서 시각적으로 달리 표현해야 하고, 이를 우리는 '시각적 계층구조에 따른 디자인'이라고 하는데요.

시각적 계층구조에 따라 디자인했을 때에 사용자는 정보를 빠르게 스캔하고 중요한 영역에 집중해서 정보를 받아들이고 플랫폼의 기능들을 효율적으로 사용해 나갈 수 있어요. 이때에 플랫폼에서도 사용자의 행동이 필요한 부분을 전략적으로 강조하고 유도할 수 있는 것이죠.

예를 들어, 아래 마켓컬리의 화면을 보면 이 화면에서 가장 강조되어 있는 부분이 할인율과 가격, 그리고 구매 버튼인 것을 알 수 있어요. 제품 구매에 관심 있는 사용자들에게 가장 필수적인 정보를 제공하고, 그다음 행동인 구매로 유도하기 위한 디자인이 잘 되어 있다고 볼 수 있지요.

만약에 내가 제작한 화면에 시각적 계층 구조가 잘 반영된 디자인이 되었나를 확인하고 싶다면, 스퀸트 테스트(squint test)를 해볼 수 있어요. 스퀸트 테스트는 말그대로 ‘눈살을 찌푸리다’라는 뜻의 영어단어 스퀸트(squint)처럼 눈을 찌푸리고 화면을 흐리게 보는건데요. 이렇게 보면 화면이 흐릿하게 보이면서 화면에서 가장 강조된 요소들을 구분해 볼 수 가 있어요. 이렇게 볼 때에 강조되어 보이는 것이 전달되어야 할 중요한 정보 우선순위에 맞다면 시각적 계층구조를 잘 반영했다고 볼 수 있지요.    

앞선 세 가지의 규칙들을 보시면서 느끼셨겠지만, 결국 심미성이 높은 플랫폼 디자인이라는 것은 사용자들에게 혼란을 주지 않고 화면에서 전달하고자 하는 정보가 명확하게 전달될 수 있는 디자인을 말해요. 그래서 네 번째 규칙 역시도 정보가 잘 전달되기 위해서 고려되어야 하는 요소인 명암비에 관한 규칙이에요. 명암비(contrast ratio)는 화면에서 요소의 색상 간에 밝기 차이를 의미해요. 검은 배경에 검은 텍스트가 제공될 때의 명암비가 1:1로 최저라면, 흰 배경에 검은 텍스트를 제공할 때의 명암비는 최고 명암비로 21:1이에요.

더 많은 사용자들이 온라인상에서의 콘텐츠를 소비할 수 있도록 만든 웹 콘텐츠 접근성 가이드라인(WCAG, Web Content Accessibility Guidelines)에 따르면, 버튼이나 필드 등 플랫폼 상에서 주요 행동과 연계된 요소의 명암비는 3:1 이상이 되어야 한다고 해요. 그래야 시력이 약하거나 색약/색맹 등이 있는 사람에게도 요소가 구분되어 보여질 수 있어요. 또한, 글자 텍스트의 명암비는 4.5:1 이상이어야 더 많은 사람들의 눈에 읽힐 수 있다고 해요. 그렇다고 해서 색상코드 #000000의 검정색과 #FFFFFF의 흰색을 사용해서 명암비 21:1의 최대값으로 보여줄 경우 눈의 피로를 유발할 수 있어요. 그렇기 때문에 짙은 회색의 텍스트로 표현하는 것이 일반적이지요.

🍯꿀팁🍯

명암비를 측정하는 도구 사이트가 있어요.🤗 아래 사이트들을 참고하여, 요소들 간의 적절한 명암비가 이루어질 수 있도록 색상을 선택해 봐요!

• https://usecontrast.com/
• https://app.contrast-finder.org/