카드형 UI, 최선의 디자인일까?
Next Lab. Ben
카드형 UI, 최선의 디자인일까?
우리가 흔히 일상에서 접할 수 있는 토스, 다방, 배달의민족, X(트위터)는 모두 카드형 UI를 사용하고 있어요. 잠시만 살펴보아도 요즘 대부분의 앱과 플랫폼이 카드형 UI를 사용한다는 것을 볼 수 있어요.
디자이너라면 카드형 UI에 대해서 한 번 쯤은 들어 봤을거에요.
그렇다면 카드형 UI가 이렇게 인기가 있는 이유는 무엇이며, 어떤 앱과 플랫폼이 가장 큰 이점을 얻을 수 있을까요?
그리고 꼭 카드형 UI가 최선의 디자인일까요?
01. 카드형 UI란?
카드형 UI는 다양한 콘텐츠와 기능이 포함될 수 있지만 그것들의 내용은 모두 한가지(동일한) 주제이어야 해요.
카드형 UI의 목적은 긴 텍스트를 피하고 검색 가능한 콘텐츠를 더 많이 보여주기 위함이고, 사용자가 디자인 측면에서 카드형 UI의 개념에 익숙하지 않을 수 있지만 실제 카드를 모티브로 했기 때문에 사용법을 바로 인지할 수 있어요.
<사진설명 : 잘못된 카드형 UI 사용 예시>02. 왜 카드형 UI 디자인을 사용할까요?
카드형 UI는 모듈방식으로 사용되어서 서로 다른 내용을 담은 카드라도 함께 구성할 수 있고, 콘텐츠를 단순화하는 것처럼 보이기 때문에 디자인은 어지럽지 않게 하면서도 다양한 콘텐츠가 어우러지도록 해요.
또한 카드형 UI는 콘텐츠와 사용자가 상호 작용할 수 있도록 더욱 작은 단위로 구분할 수 있고, 카드 형태의 컨테이너를 제공함으로써, 콘텐츠가 사용자에게는 더욱 사실적이고 감성으로 다가갈 수 있고요.
카드형 UI 디자인은 이외에도 아래와 같은 여러가지 장점들이 존재해요.
1.직관적이고 UX 친화적
카드는 모바일 및 웹, 앱에서 UI 요소가 되기 전부터 신용카드나 명함 등 실 생활에서 어디에나 있었기 때문에 UI 요소로도 실제 카드와 동일하게 보이며, 이는 대부분의 사용자가 비슷하게 느낄 수 있어요. 또한 직사각형 모양과 간단한 클릭(터치) 가능한 요소는 사용자 경험이 매우 직관적이에요.
<사진출처 : Unsplash>2.반응형 디자인에 유리
카드는 모바일 및 웹, 앱에서 UI 요소가 되기 전부터 신용카드나 명함 등 실 생활에서 어디에나 있었기 때문에 UI 요소로도 실제 카드와 동일하게 보이며, 이는 대부분의 사용자가 비슷하게 느낄 수 있어요. 또한 직사각형 모양과 간단한 클릭(터치) 가능한 요소는 사용자 경험이 매우 직관적이에요.
3.매력적이고 현대적인 디자인
카드 기반 디자인이 10년 동안 존재해 왔음에도 불구하고 여전히 최신 디자인 솔루션인데요. 주요 시각적 요소 덕분에 이 레이아웃을 사용하면 모든 제품을 매력적으로 만들기 쉽습니다.
<사진출처 : 드리블>03. 카드형 UI 디자인 사례
카드형 UI 디자인을 고려하고 있다면 일상에서 흔히 사용하는 앱이나 플랫폼 등에서 충분히 디자인 아이디어를 얻을 수 있어요. 그 중에서 대중적이면서 효과적으로 디자인 된 몇 가지 사례를 각 산업군 별로 살펴 보았어요.
1. 금융
우리가 흔히 오프라인에서 은행 업무 시 사용하는 실물 통장이나 카드가 모두 모서리가 둥근 사각형을 띠고 있는데요. 이러한 모습은 카드형 UI와 동일한 모양을 띠고 있어 사용자에게 친숙한 디자인처럼 보이게 됩니다. 금융권에서는 대부분의 앱에서 메인 화면의 계좌 영역에 카드형 UI를 사용하고 있고, 이는 모든 금융 앱에서 흔히 볼 수 있는 트렌드로 자리잡고 있어요.
<사진출처 : KB스타뱅킹, 신한SuperSOL, 우리WON뱅킹>2. 엔터테인먼트(미디어)
K-POP하면 음악 앱이 빠질 수 없는데요. 음악 앱에서는 사용자가 들었던 데이터를 기반으로 비슷한 장르의 음악 추천을 카드형 UI를 통해 다양한 디자인으로 제공 해주고 있어요. 음악 플레이리스트에서는 반복되는 리스트로 인해 사용자가 지루함을 느낄 수 있기 때문에, 카드형 UI를 활용해 차별점을 주는 모습을 볼 수 있습니다.
<사진출처 : 지니뮤직, 바이브, 멜론>3. 부동산
대체적으로 메인 홈에 앱의 주요 기능인 ‘매물탐색’에 대한 기능을 바로 이용할 수 있도록 퀵메뉴 버튼들을 카드형 UI로 구성하고 있어요. 말 그대로 퀵! 메뉴인 만큼 빠른 인지를 위해 많은 내용보다는 시각적인 요소를 활용 하고 있어요. 카드형 UI를 통해 주요 기능을 나열 함으로써 사용자가 앱을 켰을 때, 어떤 행동을 먼저해야하는지 바로 판단할 수 있어서 보다 빠르고 편하게 앱을 이용할 수 있어요.
<사진출처 : 네이버페이 부동산, 다방, 피터팬의 좋은 방 구하기>4. 여행
여행 앱에서의 지도탐색은 원하는 장소를 찾고자 할 때, 반복적인 조회가 발생하는데요. 이 단점을 개선하여 카드형 UI로 즉시 해당 장소의 주요 정보를 조회할 수 있도록 하였고, 사용자가 한 손으로 터치하기 쉽게 *Thumb-zone에 배치하여 편의성을 높였습니다.
*Thumb-zone(엄지 영역) : 스마트폰과 같은 모바일 기기에서, 화면을 조작할 때 엄지 손가락이 가장 자주 이동하는 영역.
<사진출처 : 여기어때, 야놀자, 에어비앤비>04. 카드형 UI 디자인이 항상 최선의 솔루션일까요?
앞서 이야기한 것 처럼 카드형 UI는 훌륭한 솔루션입니다. 디자이너는 물론, 개발자, 사용자 또한 좋아합니다.
하지만 카드형 UI 디자인이 모든 사람에게 맞는 솔루션일까요?
물론 경험이 많은 디자이너는 카드형 UI를 사용하여 거의 모든 웹이나 앱에서 놀라운 효과를 낼 수 있지만 디자인 하기에 앞서 몇가지 염두에 두어야 할 것들이 있습니다.
1. UX는 기본중에 기본!
아무리 좋은 UI 디자인이라고 할지라도, UX가 고려되지 않은 디자인은 좋은 디자인이라고 할 수 없습니다. UI·UX 디자인 전략을 통해 사용자가 필요한 정보를 즉시 식별할 수 있도록 해야합니다. 대표적으로 아이콘을 사용하거나, 텍스트에 볼드처리를 하거나, 폰트의 크기를 서로 다르게 하거나, 기타 고유한 시각적인 단서를 제공하는 방법 등으로 요소를 차별화해 사용자가 필요한 정보를 바로 찾을 수 있도록 해야합니다.
<사진설명 : 필요한 정보를 사용자가 즉시 식별할 수 있도록 개선된 디자인>2. 검색보다는 탐색에 사용
카드형 UI는 빠르게 훑어보기에는 시선의 흐름이 끊기기 때문에 순서가 중요한 데이터나 요소로 작업하는 경우 수직 구조의 목록 레아이웃을 선택하는 것이 좋습니다. 또한 이미지 갤러리 유형에서도 카드 디자인 보다는 그리드 타일이 더 깔끔하고 가볍게 이미지를 보여줄 수 있습니다.
<사진출처 : 이메일과 같은 순서가 중요한 데이터는 수직 구조의 목록 레이아웃이 적절>3. 많은 곳에서 사용하고 있는 UI
금융 앱 중 테마컬러가 비슷한 4개의 은행을 비교해 볼까요? 브랜드 이미지가 크게 드러나는 부분은 제가 가려봤는데요. 어떤가요? 브랜드 이미지나 컬러에 예민하지 않은 디자이너나 한 번이라도 앱을 사용해 본 사람을 제외하고는 크게 눈치 챌 수 없을 정도로 매우 비슷한 카드형 UI를 띄고 있는 모습을 볼 수 있어요. 이처럼 카드형 UI는 산업군에 크게 관련 없이 많은 곳에서 대중적으로 사용되기 때문에 눈에 띄기 쉽지 않습니다. 이러한 점은 적절한 비주얼을 사용하거나 해당 앱만의 특장점을 이용하여 차별점을 준다면 충분히 개선할 수 있습니다.
<사진출처 : 테마컬러가 비슷한 은행 앱 4가지(우리은행, 새마을금고, 신한은행, 하나은행)>4.공간을 많이 차지하는 디자인
카드형 UI는 더 많은 공간을 차지하기 때문에 내용을 빠르게 스캔하려면 리스트형 UI가 더 효과적입니다. 그렇기 때문에 사용자가 시각적인 것보다 더 많은 양의 데이터나 구성 요소를 살펴보아야 하는 경우 다른 레이아웃을 고려해야합니다.
<사진설명 : 카드형 UI를 잘못 사용한 예시>05. 결론
카드형 UI는 요즘 거의 모든 앱에서 볼 수 있을 정도로 인기가 많습니다. 현대적이고 깔끔한 디자인은 직관적으로 컨텐츠를 이해하기 쉽고, 반응형 디자인에 유리해서 사용자에게 일관적인 경험을 선사하기 때문이죠. 그래서 많은 디자이너들이 카드형 UI를 선호하는데, 사실 이게 항상 최선의 선택은 아닐 수도 있어요.
예를 들어, 순서가 중요한 데이터나 많은 정보를 한눈에 보여줘야 할 때는 카드형 UI가 오히려 방해가 될 수 있습니다. 또 너무 많이 사용되다 보니, 다들 비슷비슷해 보일 수 있거든요. 그래서 카드형 UI가 무조건 정답이라고 생각하기보다는, 상황에 따라 다른 디자인도 고려해 보는 것이 좋아요. 중요한 건 결국 사용자의 경험과 앱의 목적에 맞는 디자인을 선택하는 거니까요.
긴 글 읽어주셔서 감사합니다!
Next Lab. Ben
참고문
-30번 실험 끝에 성공한 여기어때 상품 카드 UX 개선기 | 2023.10
-Card UI 디자인 가이드 | https://brunch.co.kr/@august9/244 2021.12
-UX 개선을 위한 카드형 디자인 사용법 | https://brunch.co.kr/@byeon/11 2019.04
