UX 개선을 위한 카드형 디자인 사용법
[번역][UX Design][UI] '카드'는 어떻게 사용해야 할까?
이 글은 Nick Babich의 "Using Card-Based Design To Enhance UX"를 번역한 글입니다.
이제 웹과 모바일은 '페이지'보다는 '개인화된 경험'이라는 새로운 방향으로 가고 있다. 그리고 이 경험은 컨텐츠 조각조각의 집합체라고 할 수 있겠다. 카드는 최근에 더 유행하게 된 창의적인 컨셉이다. 그 컨셉에 대해 당신이 어떻게 느끼든 간에, 카드는 우리에게 이미 익숙해져 자리 잡고 있다.
카드는 무엇인가?
카드는 더 구체적인 정보를 담은 입구점의 역할을 하는 이미지와 텍스트를 포함한 작은 사각형들이다. 카드는 UI의 미적 감각과 좋은 사용성의 균형을 위해서 만큼은 거의 디폴트 옵션(default option)이라고 보아야 한다. 서로 다른 요소들을 담아 보여주기에는 정말 편리한 방법이기 때문이다.
카드의 예시. Source: Material Design.훌륭한 은유법 (Metaphors)
현실 세계에서의 만질 수 있는 카드와 같기 때문에 UI에서 카드를 사용한다는 것은 훌륭한 은유라고 볼 수 있다. 모바일이 있기 전에도, 카드는 우리 옆에 항상 존재해왔다 - 비즈니스 카드, 베이스볼 카드, 카드놀이 등등... 사실상 카드는 꽤 널리 퍼진 우리의 인터렉션 모델이다. 그러므로 실제 현실세계에서처럼 카드가 정보의 조각을 보여주는 것은 유저에게 더 직관적일 수밖에 없겠다.
카드는 빠르게 스토리를 전달하기에 훌륭한 도구이다. 베이스볼 카드는 실제 현존하는(real-life) 물건의 좋은 예시이다. 플레이어에 대해 알아야 하는 기본적인 정보들은 카드의 앞 뒤 면에 다 담겨있다.
각각의 카드는 플레이어에 대한 정보를 담고 있다 [Image Source: liveauctiongroup]컨텐츠 구성
카드는 컨텐츠들을 의미 있는 섹션으로, 스크린보다 작게 나누어준다. 텍스트 문단이 각 문장들을 특정한 섹션으로 나누어주는 것과 비슷하게 카드 역시 다양한 정보를 모아 하나의 일관된 조각의 컨텐츠로 모아주는 역할을 한다.
카드 컬렉션 예시. Source: Material Design.페이스북 같은 거인들이 데스크탑과 모바일 웹/앱에 카드 주도형 인터페이스를 도입한 뒤 카드 레이아웃은 디자인의 선두주자가 되었다. 페이스북은 끝없는 데이터 스트림의 정보들을 모아주기 위해 컨테이너 스타일 디자인을 자신들만의 장점으로 살려내어 사용하였다.
시각적인 즐거움
카드 기반의 디자인은 주로 시각에 많이 의존하게 된다. 그리고 이미지에 무게를 싣는 것은 카드형 디자인의 강점이다. 이미지들은 유저의 눈을 효과적이고 즉각적으로 끌기 때문에, 이미 많은 연구결과들이 이미지는 사이트와 앱 디자인을 향상시킨다는 것을 입증했다. 이미지 사용을 강조하는 것은 카드형 디자인이 유저에게 더 매력적으로 느껴지게 만든다.
디자이너의 작품들을 전시해놓은 온라인 creative community로 잘 알려진 'Dribble'이란 웹사이트를 보자. 카드 기반의 디자인은 이런 타입의 컨텐츠를 나타내기에는 가장 알맞는 방법일 수 밖에 없다.
Dribbble web site.카드 디자인하기
같은 레이아웃에 있는 카드는 일관된 폭(width)을 가지고 있어야 하지만, 높이(height)는 달라도 무관하다. 멕시멈 높이는 플랫폼에서 사용가능한 공간을 고려해 제한되어야 하지만, 일시적으로 늘리게 하는 것도 가능하다 (예를 들어 코멘트 부분을 보여줄 때).
카드는 일관되거나 유연한 높이(height)를 가질 수 있다 [Original Image source: Intercom]디자인 면에서 카드는 둥근 모서리여야 하고 짧은 셰도우가 있어야 한다. 둥근 코너들은 카드가 더 컨텐츠 블락 같이 느껴지게 하고, 셰도우는 깊이감을 더해준다.
Rounded corners and short shadow. Source: Material Design.이런 요소들은 당신의 디자인에 방해물이 되지 않으면서도 적합한 비주얼 '향신료'를 더해줄 수 있다. 또한 당신의 카드가 페이지에서 튀어나올 듯한 입체감을 주기도 한다.
또한, 에니메이션과 동작(movement)도 효과적으로 사용할 수 있다.
Image source: Behance카드의 장점
알맞게 사용되었다면, 카드는 앱의 UX 측면을 많이 개선시킬 수 있는 역할을 한다. 카드의 기능(funcationality)과 모양 덕분에, 사용하기에 직관적인, 흥미로운 UI요소로서 장점을 더할 수 있는 힘을 가지고 있다.
이해하기 쉽게 가공된 형태 (Digestible Form)
콘텐츠가 왕이라는건 이미 알고 있을 것이다. 카드는 거의 모든 것을 담을 수 있는 디자인 컨테이너이다. 콘텐츠를 카드 안에 넣음으로서, 유저가 이해하기 쉬운(digestible) 형태로 가공되어진다. 이런 측면에서 유저는 그들이 흥미있어하는 컨텐츠를 쉽게 볼 수 있다. 이는 유저가 자신들이 원하는 것에 적극적으로 관여할 수 있도록 도와준다.
This card collection contains cards with varied content types. Source: Material Design.반응형, 모바일 디자인
카드에 있어 가장 핵심은 무한하게 조정가능하다는 것이다. 카드 스타일의 디자인은 데스크탑과 모바일 디바이스 둘 다에서 사용하기 편리하다 - 컨텐츠를 더 가공된 청크의 형태로 제공할 수 있기 때문이다. 카드는 컨텐츠 컨테이너 (content containers)로서 쉽게 확대하고 축소할 수 있기에, 반응형 디자인 있어서 좋은 선택이다.
마지막으로 카드는 다양한 디바이스에서 하나의 미적 감각/비주얼 테마를 더 쉽게 만들수 있도록 도와준다. 따라서 어떤 디바이스에서든 일관적인 경험을 만들어낼 수 있다.
손가락을 고려한 디자인
카드는 엄지손가락을 위해 만들어졌다. 카드는 앱을 위한 스타일이다. 모바일 앱 디자인에서 카드가 인기있는 이유의 중요 요소라고 할 수 있다. 디지털 카드는 실존의 카드와 비슷하게 반응하기 때문에 유저에게 더 편한 경험을 제공해준다. 어떻게 조작해야 하는지 구태여 생각할 필요가 없는 것이다. 유저들은 카드의 심플함을 좋아하고, 카드를 뒤집어 더 많은 정보를 볼수 있거나, 스와이프를 통해 다음 내용을 볼 수 있는 기능들을 직관적으로 이해한다.
Swipe right. Source: Dribble어디에 써야 하는가?
STREAM
카드는 스트림식으로 보여지며 사건들의 자연스러운 타임라인을 구현한다. Facebook 이 어떻게 카드를 이용해서 뉴스피드에 최근 사건(events)들의 빠르게 오버뷰를 제공하는지 생각해보아라. Facebook 의 뉴스피드는 끊없는 스트림으로 이루어지면서도 각각의 카드는 개별적이다. 카드의 핵심은 '세분화(disaggregation)' 이다. 끊없는 스트림에서도 각기 다른 요소를 끌어와 패킷화해주고 공유가능한 형태로 만들어준다.
DISCOVERY
카드는 관련 컨텐츠를 자연스럽게 노출시켜 주게 도와주고, 유저가 그들의 관심사에 깊게 몰두할 수 있도록 도와준다. 아래 Tinder의 카드 페턴을 살펴보자: 오른쪽이나 왼쪽으로 스와이프 할때, 당신의 취향에 맞는 사람들을 발견할 수 있게 된다.
TinderPinterest 는 다이나믹한 벽돌형식의 그리드 레이아웃에 있는 '핀'으로 콘텐츠를 정리하고 유저가 중독적인 브라우징을 통해 유저를 사로잡는다.
Pinterest위 두가지 서비스의 공통점은 무엇일까? 바로 서비스에 있는 정보들을 끌어다가 그 순간 순간에 적절한 컨텐츠를 보여주는 것이다.
DIALOGS
카드는 컨텐츠 컨테이너이기 때문에, 액션을 구현하기에 완벽한 존재이다. 카드에서 가장 주요한 액션은 카드 그 자체이다. 애플 디바이스의 AirDrop service를 살펴보자. 데이터 전송을 위해 요청이 들어오면, '허락'할지 '거절'할지 선택할 수 있는 노티피케이션이 담긴 카드가 팝업한다.
어떤 선택을 하던지간에 하나의 액션만 취하면 된다 [Image Source: Apple]WORKFLOW
카드는 테스크의 범위를 쉽게 카테고리화할 수 있다. 이를 잘 활용한 케이스는 Trello이다. 칸반(Kanban) 시스템을 이용해서, 이런 프로덕트 매니지먼트 테크닉은 온전히 카드에 기반한다. 트렐로 보드는 각기 다른 테스크를 보여주는 카드 형태로 가득 차 있는 '캔버스'라고 볼 수 있다.
Image source: joelonsoftware카드를 사용하지 말아야 할 때
동질의 컨텐츠
액션이 많이 없는 동질의 컨텐츠를 보여주기에는 빨리 스캔 가능한 리스트 (혹은 그리드 형태)가 카드보다 더 적절하게 쓰일 수 있다.
왼쪽: 여기서의 카드 사용은 유저가 빨리 스캔하는걸 방해할 뿐이다. [Image source: Materi]카드는 이미지 갤러리에서는 불필요한 존재이다. 그리드 타일이 갤러리에서 더 깔끔하고 가볍게 이미지를 보여줄 수 있다. 밑의 예시를 보면 쉽게 이해할 수 있을 것이다:
왼쪽: '카드'로 이미지 보여주기 // 오른쪽: 그리드 리스트로 보여주기 [Source: Material Design]큰 스크린 사이즈
카드 형식의 정보 디자인은 작은 스크린에서는 좋을 수 있지만, 큰 스크린에서는 이도저도 아닌 - 읽히기 힘든 엉망인 상태로 보여질 확률이 높다. 비주얼적으로는 여전히 좋아보일 수 있지만, 읽는 속도나 이해도같은 객관적으로 측정되는 면에서는 처참한 결과를 낳는다. 아래에는 큰 스크린에서 본 Pinterest이다.
기존의 앱 재디자인(Redesign)
이미 당신의 앱이 쉽고 익숙해진 유저가 갑자기 변한 비주얼 로직(visual logic)을 보고 멈칫하게 될 수도 있다. 당신의 유저들이 무엇을 보고 싶은지 피드백을 직접 받아야만 한다. 따라서 유저 피드백과 함께, 당신의 앱을 어떻게 점차적으로 리디자인할지 테스트를 해보며 변화에 대한 사용자 반응을 살펴 보아야 한다.
결론
이 글을 통해 왜 카드 스타일의 디자인이 인기를 얻고 있는지 감이 왔길 바란다. 그리고 이런 트랜드는 곧 바로 없어질 트랜드도 아니라고 믿는다. 카드는 눈에만 쉽게 읽히는 것이 아니기 때문에, 일관성있는 경험을 만드는 데에는 가장 유연성있는 레이아웃 포맷이라고 장담한다. 오늘날 우리들은 굉장히 정보를 빨리 찾기에, 카드는 어떤 디바이스에서도 이런 요구를 만족시켜줄 수 있다. 그리고 좋은 유저 경험이란 '인간'을 중심으로 여겨야 한다.
