목차
역주 : 시작하기 전에
프론트엔드 개발자라면 한번쯤은 토스, 뱅크샐러드 등의 앱을 보면서 유행하는 디자인의 특징을 생각해보셨을 텐데요, 이번 글에서는 2021년을 장식한 UI 트렌드들을 소개해보려 합니다.
UI 디자인 저널 : 2021년의 디자인 트렌드 알아보기
원제 : UI Design Journal: Trends and fads in User Interface design in 2021.
UI 디자인 입문자로서, 저는 언제나 동료 디자이너들이 사용하는 용어들이 낯설고 두렵게 느껴지곤 했습니다.
이번 글은 디자이너들 사이에서 흔히 사용되는 용어들을 설명하기 위한 것으로, 조금 길더라도 안전띠를 꽉 매시고 즐겁게 읽어주셨으면 합니다.
이번 글에서는 다음 디자인들에 대한 내용을 다룹니다.
- 플랫 디자인 (Flat Design)
- 스큐모피즘 (Skeuomorphism)
- 뉴모피즘 (Neumorphism)
- 글래스모피즘 (Glassmorphism)
1. 플랫 디자인
2000년 중반, 마이크로소프트가 Metro 를 세상에 공개하면서 플랫 디자인과 스큐모피즘의 전쟁이 시작되었습니다
Microsoft Design Language 는 이전에 Metro 라는 이름으로 알려져 있었는데요, 어쨌든 애플과 마이크로소프트는 부정할지도 모르겠지만 많은 사람들은 플랫 디자인이 고리타분한 디자인이라고 생각했습니다.
그러나, 사실 간결화된 디자인 스타일은 인기있는
이런 UX 원리를 통해 여러분의 디자인을 보다 사용자 친화적으로 꾸밀 수 있고, 이는 서비스의 성장을 위한 좋은 리뷰를 받기에도 도움이 될 것입니다.
그러나 장기적으로 볼 때는 미적인 디자인만이 해결책이 아닐 수도 있는데요, 단기 사용자들은 기꺼이 리뷰를 통해 도움을 요청하지만 이내 시간이 지나면서 불만을 갖게 되고 서비스를 이탈하게 됩니다. 따라서 어플리케이션을 만들 때는 미적인 디자인뿐만 아니라 사용성을 함께 고려해야만 합니다.
핵심
- 미적으로 훌륭한 디자인은 사람들의 뇌로부터 긍정적인 반응을 생성하고, 더 잘 동작할 것이라는 믿음을 이끌어냅니다.
- 제품이나 서비스에 적용된 디자인이 미적으로 훌륭하다면, 사람들은 사용성이 약간 불편해도 감수할 수 있습니다.
- 시각적으로 만족스러운 디자인은 사용성 문제를 감출 수 있고, 사용성 테스트 단계에서 문제가 제기되는 것을 방지합니다.
2. 간결함의 법칙 (Law of Prägnanz)
사람들은 대상을 인식하는데 필요한 노력을 최소화하고자 복잡하거나 모호한 이미지를 최대한 간단하게 인지하고 해석합니다.
사물을 간결하게 만드는 것은 새로운 것이 아닌데요, 많은 사람들은 실생활에서 더 간단한 것들을 좋아합니다.
사람들은 복잡한 것을 좋아하지 않는데요, 사용자들 또한 지구에서 왔기 때문에 똑같이 심플한 인터페이스, 간단한 아이콘, 색상, 요소와 같이 간단하고 직관적이면서 사용하기 편리한 것들을 좋아하기 마련입니다.
만약 복잡한 요소를 추가하게 된다면, 두뇌는 기본적으로 이를 더 간단한 형태로 해석합니다.
예를 들어 달에는 수많은 바위와 패인 자국이 있지만, 우리의 뇌는 이를 단순히 밝고 노란 달로 해석하듯 말이죠.
간결성을 활용하는 가장 좋은 방법은 스포티파이(Spotify)처럼 간단한 요소들을 사용하는 것으로, 처음에 사용한 작고 복잡한 아이콘들이 사용자들에게 많은 부담을 줄 수 있음에 따라, 스포티파이는 새로운 아이콘을 사용한 하단바로 업데이트했습니다.
또한 스포티파이는 간결함을 위해 이외에도 "탐색" 같은 여러 옵션들을 하나로 묶었습니다. (좌 : 묶기 전의 UI / 우 : 묶은 후의 UI)
핵심
- 사람의 눈은 여러 정보에 압도당하는 것을 막기 위해 복잡한 도형에서 간결함과 순서를 찾고자 합니다.
- 연구를 통해 사람들은 복잡한 사물보다 간단한 사물들을 더 쉽게 인식하고 기억할 수 있음을 확인할 수 있습니다.
3. 피츠의 법칙 (Fitts's law)
사물을 인식하는데 걸리는 시간은 대상의 크기와 거리의 함수로 표현됩니다.
모든 앱의 '구매하기', '예약하기', '장바구니에 추가' 버튼은 다른 버튼들보다 크다는 것을 알고 계셨나요?
이유는 바로 피츠에 법칙에 있습니다.
피츠의 법칙은 대상을 인식하기(get)까지의 시간이 크기와 거리감에 비례한다고 설명합니다.
만약 사물이나 버튼이 작다면 사용자의 마음을 돌리기까지 시간이 걸릴 것이고, 그동안 사용자는 초점을 잃을 수 있습니다.
따라서, 목표하는 요소는 사용자가 짧은 시간동안 클릭하기 쉬운 곳에 배치하는 것이 권장됩니다.
예를 들어, 에어비앤비는 사용자가 시간을 오래 들이지 않고도 버튼을 탭할 수 있도록 엄지가 클릭하기 쉬운 곳에 버튼을 위치시킴으로써 피츠의 법칙을 적용했습니다.
우버, 아마존, 나이키, 리프트(Lyft) 역시 이 법칙을 따르며, 이들 중 많은 곳이 각자의 방식으로 피츠의 법칙을 사용합니다.
여러분들은 다른 색상, 크기, 아이콘을 사용해 버튼을 눈에 띄게 한 뒤 사용자가 최대한 이를 탭하기 쉽게 만듦으로써 이를 적용할 수 있습니다.
핵심
- 사용자들이 정확하게 선택할 수 있도록 터치할 대상이 충분히 커야 합니다.
- 터치할 대상은 대상들 사이에서 충분한 공간을 가져야 합니다.
- 터치할 대상들은 인터페이스 위에서 쉽게 인식될 수 있는 영역에 위치해야 합니다.
4. 제이콥의 법칙 (Jacob's Law)
사용자들은 대부분의 시간을 다른 어플리케이션들에 사용합니다. 이는 여러분의 앱들도 사용자가 이미 알고 있는 다른 앱들처럼 동작하기를 선호한다는 의미입니다.
제이콥의 법칙은 유용한데요, 이전에 사용해봤거나 사용중인 어플리케이션들에는 많은 유사점들이 존재합니다.
유사점에는 탭 바나 아이콘, 스타일, 폰트 등이 있을 수 있고, 이것들은 단순한 우연이 아닌 계획된 결과물입니다.
거대한 어플리케이션 제작자들은 사용자들이 대부분의 시간을 다른 어플리케이션을 사용하는데 쏟는다는 것을 알고 있고, 사용자의 편의를 위해 다른 어플리케이션과 비슷하게 보이도록 서비스를 제작합니다.
핀터레스트, 틱톡, 인스타그램은 소셜 미디어 플랫폼끼리 서로 비슷한 탭 바를 가지고 있는데, 인스타그램을 많이 사용하는 사람이라면 유사한 홈, 알림, 프로필 탭 메뉴를 통해 틱톡과 핀터레스트 역시 쉽게 사용할 수 있습니다.
핵심
- 사용자는 익숙한 어플리케이션을 통해 쌓은 기대치를 비슷해 보이는 다른 어플리케이션에도 기대하게 됩니다.
- 기존의 멘탈 모델(역주 : 사용자가 제품을 이해하는 방식)을 사용함으로써, 사용자가 새로운 형태의 어플리케이션에 적응하는 수고를 덜고 이전의 경험을 그대로 사용할 수 있도록 해 더 나은 사용자 경험을 제공할 수 있습니다.
- 변경점을 추가할 때는, 사용자들이 제한된 시간동안 기존의 친숙한 버전을 사용할 수 있도록 함으로써 새로운 버전과의 불일치를 최소화해야 합니다.
5. 미완성 효과 & 목표 가속화 효과 (Zeigarnik & Goal-Gradient Effect)
미완성 효과 : 사람들은 완료되지 않았거나 중간에 방해받은 작업을 이미 마친 작업보다 더 잘 기억합니다. 목표 가속화 효과 : 목표에 가까워질수록 목표를 끝마치고자 하는 경향이 증가합니다.