댓글 3댓글을 작성하려면 로그인이 필요합니다.
UI는 "사용자 인터페이스 (User Interface)"의 약자인데요! 쉽게 말해 사용자가 직접 보고 만지고 조작하는 화면이나 요소들을 디자인 하는 것 입니다.
그래서 UI 디자인은 다른 시각 디자인과 같은 화려한 디자인은 독이 됩니다..ㅜㅜ
이 공식만 알아도 간단하게 눈이 편안한 UI 디자인을 할 수 있습니다!
"그래서 그 깔끔하고 편안한 디자인, 어떻게 하는데?"
정말 간단합니다... 몇 가지 기본 원칙만 기억하면 되는데요 지금부터 간단하게 한 번 알아봅시다!
우선 좌측은 일관성이 없는 디자인 우측은 일관성이 있는 디자인인데요
뭐가 다른지 아시겠나요? 👀
크게 세 가지 정도가 있는데, 사진을 보며 한번 생각해 보고 다음에 나올 내용을 예측해 보세요! ㅎ_ㅎ
두 디자인을 비교했을 때, 좌측은 홈 아이콘은 선(Outline), 알람 아이콘은 면(Fill)으로 되어 있어 디자인적인 통일성이 부족합니다
반면, 우측은 두 아이콘을 모두 선 형태로 통일하여 훨씬 일관성 있고 깔끔한 디자인이 되었고
덕분에 전체적인 화면이 더 정돈되어 보이며, 시각적으로 안정감을 주게 됩니다!
두 가지 디자인을 비교해 봤을 때, 좌측 디자인은 폰트 종류와 굵기에 확연한 차이를 두어 시선을 사로잡는 효과가 있습니다만..
자주 보게 될 UI의 경우 폰트 차이에서 오는 시각적 복잡함 때문에 눈에 피로가 쌓일 수 있습니다...
반면, 우측 디자인은 일관된 폰트를 사용해 전체적으로 통일감이 느껴지며, 장시간 보더라도 좌측보다 눈의 피로가 덜하게 됩니다
또한, 시선을 분산시키지 않아 정보 전달력이 더 높다는 장점이 있습니다.
결론적으로, 우측 디자인은 지속적으로 정보를 확인해야 하는 UI 디자인에 더 적합하다고 볼 수 있습니다~
좌측의 썸네일들은 사각형, 원형의 여러 모양이 섞여 있어 디자인적인 규칙이 없는 것처럼 보여 전체적인 화면의 안정감을 해칩니다.
우측 썸네일들은 모두 동일한 사각형 모양으로 통일되어 반복적인 형태로 일관성을 부여하게 되어 시각적으로 안정감과 질서정연함을 줍니다!
썸네일의 모양이 다르면 이처럼 한 줄에 나열 됐을때 산만함으로 느껴지기 쉽습니다ㅜㅜ
사용자가 앱이나 웹사이트의 디자인 요소에 익숙해지는 것에 큰 영향을 끼쳐
화려함을 위한 디자인은 사용자의 경험에 큰 불편함을 줄 수 있습니다😢
UI에선 각각의 요소마다 중요성이 다를텐데요 시각적 계층구조는 화면에 있는 정보들을 중요도에 따라
시각적으로 구분하고 정리하여 사용자가 무엇을 먼저 보고 다음에 무엇을 봐야 할지 직관적으로 이해할 수 있도록 만드는 것을 말합니다!
크기, 색상, 간격, 배치 등등으로 계층 구조를 줄 수 있는데요.
그래도 무슨 의미인지 정확히 느낌이 안 오실 수도 있으니 예시를 보여드리도록 하겠습니다!
좌측 디자인은 제목과 본문 텍스트의 모든 크기와 폰트 굵기가 동일하게 이루어져
'감자기술블로그란?'이라는 제목이 본문과 섞여 보여, 시선이 어디에 먼저 머물러야 할지 혼란스러움과
텍스트 전체가 하나의 덩어리처럼 느껴져 가독성이 낮아집니다.
이 세 가지를 황용하니 제목 → 본문 순서로 시선이 자연스럽게 이동하게 되죠?
여백을 통해 정보의 위계와 그룹핑을 할 수 있어 여백은 아주 중요합니다!
여백을 적절히 활용하는 것은 UI 디자인의 완성도를 높이는 핵심 요소!
버튼에도 시각적 계층구조를 설정하면 사용자가 어떤 버튼을 눌러야 할지 직관적으로 이해할 수 있습니다!
지금까지 간단하게 UI 디자인의 핵심이라고 할 수 있는 일관성 과 시각적 계층 구조에 대해 설명해봤는데요
화려함보다는 사용자의 편의와 경험을 최우선으로 생각하는 것이 좋은 UI 디자인의 출발점!
이 원칙들을 기억하면 사용자에게 친절하고 깔끔한 UI를 만들수 있습니다. 😁
