카드 UI 장점 - kadeu UI jangjeom

카드는 아주 오래 전 부터 정보 전달 매개체로 사용되어 왔다. 중국에서는 9세기 경 부터 카드 게임이 성행해따는 기록이 있고 17세기 영국에서는 무역상들이 고객에게 서비스를 알리는 수단으로 명함의 초기 형태인 트레이드 카드를 사용하였다고 한다. 우리의 일상 생활속에서도 각종 신용카드 ,축하 카드 , 신분증, 쿠폰, 게임 카드 등을 쉽게 찾아볼 수 있다. 이처럼 우리는 이미 카드를 사용하고 교환하고 수집하는 방식에 익숙해져 있다. 

이와 같은 방식으로 카드 형태의 UI가 모바일 서비스를 중심으로 급속도로 퍼져가고 있다. 구글은 검색, 구글 나우, 구글 플러스, 구글 맵, 구글 글래스 등 서비스 전반에 카드 UI를 채용하였으며 야후 페이스 북 트위터 등의 주요 모바일 서비스도 다양한 현태의 카드를 제공하고 있다. 네이버도 iOS네이버 앱 검색 결과를 시작으로 네이버 앱 메인 화면과 Now 앱 라이프 매거진 등 여러 버시스에 카드 UI를 제공 하고 있다. 

 
카드 UI가 이처럼 모바일 환경에서 주목받는 디자인 트렌드로 자리매김하기까지 어떤 배경이 있었던 것일까? 

카드 UI의 2가지 마일스톤 페이스북의 타임라인과 구글 나우 카드 UI가 이렇게 확산되기까지 기여한 2가지 계기로 , 2011년 9월에 도입된 페이스북의 타임라인과 2012년 10월에 선보인 구글 나우의 카드를 꼽을 수 있다.

페이스북은 2011년 9월에 타임라인을 도입하여 지금의 카드 UI를 처음 선보였다. 초기의 프로필 페이지는 텍스트, 이미지 정보가 혼합된 목록 현태로 제공되어 탐색이 불편하였다. 타임라인은 이렇나 한계를 보완한 카드 UI를 적용하여 정보 간 구분을 명확하게 하고 특히 사진 동영상을 부각하여 빠르게 정보를 스캐닝 할 수 있다. 2년 후인 2013년 3월, 뉴 피드에도 카드 UI를 도입 한 후 카드는 이제 페이스북의 보편화도니 UI로 자리잡게 되었다.

또한 2012년 10월 구글 나우에 카드 UI를 적용한 이후 카드는 많은 모바일 서비스로 빠르게 확산되었다. 안드로이드 senior UX director인 Matias Duarte의 인터뷰에 의하며 구글 나우의 카드는 ‘전통 건축에서의 개념인 기능과 현태의 결합물’의 디지털 버전으로 그런 의미에서 카드의 외양은 담고 있는 내용 그 자체 이다. 명확한 정보를 제시하는데만 집중하였기에 iOS 7 이전에 유행하였던 스타일인 가죽이나 나무 메탈 질감을 입힐 필요가 없었고 이렇나 카드의 플랫 스타일은 이후 구글 플러스, 유튜브 등의 서비스로 빠르게 확산되었다.

그렇다면 카드 UI의 어떤 점 때문에 이러처럼 많은 모바일 서비스로 확산되고 있는 것인지 다음 7가지 카드 UI의 특성을 정의해 본다.

카드 UI의 7가지 특성 7 Characteristics of Card UI
1. Homogeneous 이질적인 성질과 형태를 섞어서 보여주기 쉬운 Structure
2. Storytelling 쉽고 빠르게 이야기를 전달하는 Design
3. Easy to Manipulate 누구나 다루기 쉬운 interaction
4. Flexible 유연하게 형태 변형이 가능한 interaction
5. Modular Lego-like 멀티스ㅡ린 환경에 호환이 쉬운 Structure
6. Simple & Aesthetic 실플하면서도 디자인적으로 아름다운 Design
7. Fun to Play 가지고 놀기 재미있는 Interaction

1. Homogeneous - 카드는 이질적인 정보들을 한데 묶어 보여주고 쉽다.

소셜 네트워크 서비스에서는 출처와 성격이 다양한 정보를 하나의 공간에서 제공한다. 각 콘테츠 고유의 특성을 살리면서 일관대 사용 경험을 주려면 개별 탬플릿을 제공하면서도 가이드로 제한을 둘 수 밖에 없었다.하지만 카드 UI는 이런 상호아에서 고민거리를 쉽게 해결 할 수 있다. 어떠한 콘텐츠라도 최소한의 기본 디자인 원칙만 준수하여 카드 프레임 내에 들어가면 명확한 콘텐츠 단위로 구분되면서도 디자인 측면에서 이질감이 없는 동일한 종류의 정보 단위가 된다.

2. Storytelling - 카드는 쉽고 빠르게 이야기를 전달한다.카드는 콘텐츠를 강조하여 쉽고 빠르게 스토리를 전달한다. 

마치 우리가 영화 포스터를 보고 즉시 그 영화의 대략적인 스토리, 분위기, 출연진 등의 정보를 파악하고 영화를 볼지, 안 볼지를 결정하는 것과 유사하다. 카드 내 타이틀, 이미지, 텍스트, 출처 등의 정보를 통해 사용자들은 콘텐츠를 쉽게 파악할 수 있다. 구글 플러스의 뉴스카드는 뉴스에서 중요한 썸네일과 타이틀 정보를 부각하여 관심 뉴스인지를 쉽게 판단할 수 있고, 이미지 카드는 이미지와 출처 정보를 노출 하여 콘텐츠의 스토리를 빠르게 전달한다.

3. Easy to Manipulate - 카드는 누구나 다루기 쉽다.카드는 다양한 방법으로 조작하기 쉽다. 

실물의 카드도 뒤집어서 추가 정보를 확인하고 접힌 상태에서는 요약 정보를 제공하고 펼치면 추가 정보를 제공할 수 있다. 또한 카드를 쌓아서 공간을 절약할 수 있고, 그룹별로 보관하거나 가나다순으로 조합하는 등 다양한 방법으로 활용할 수 있다.
모바일 서비스에 카드 UI를 적용하면 열거한 친숙한 조작 방식들을 인터렉션과 애니메이션으로 그대로 재현할 수 있다. 사용자들은 현실 세계의 카드 조작 방식에 익숙하기에 새롭게 학습할 필요 없이 쉽게 인터렉션을 익힐 수 있다. 예시로 구글 나우에서는 카드를 옆으로 밀어서 삭제하거나 뒤집어서 설정을변경하는 등 제스처로 추가 액션을 간편하게 할 수 있다. 

4. Flexible - 카드는 유연하게 변형이 가능하다.

현실 세계의 카드는 휴대하기 편하고 다양한 환경에 잘 들어맞을 수 있도록 작고 가볍고 유연하다 생일 카드를 고를 때 디자인이나 선물 크기에 어울리는 사이즈 담고 싶은 메시지의 양을 고려하여 단면카드 2단/3단으로 접을 수 있는 카드, 음악이 나오는 카드, 팝업 카드 등에서 고를 수 있듯이 모바일에서의 카드도 서비스의 제공 목적과 다양한 스크린 크기에 대응하여 유연하게 변형 할 수 있다. 예시로 구글의 Knowledge Graph 검색 결과는 사용자가 입력한 키워드, 사용자의 검색의 도 및 스크린 크기에 맞춰 요약형/일반형/확장형 등 다양한 크기와 스타일의 카드를 제공한다. 

5. Modular Lego-like- 카드는 멀티 스크린 환경에서 호환이 쉽다.

카드는 레고 블록 같은 독립된 콘텐츠 모듈로 다양한 스크린 환경에서 가록 또는 세로로 자유롭게 배열하여 대응할 수 있다. 이러한 카드의 장점을 반영한 좋은 사례가 바로 구글 플러스다. 그글 플러스는 구글의 Mobile First 전략에 따라 카드 UI반응형 웹으로 작용하여 모바일 기기부터 데스크톱에 이르는 전체 서비스를 통일감 있게 구현하였다.

6. Simple & aesthetic - 카드는 심플하고 아름답다.

잘 디자인된 모바일 카드 UI를 보면 하나의 액자 속에 든 아름다운 그림을 보는 것과 같이 대상물과 스토리가 명확하고 단순하다. 또한 제공하는 정보의 중요도에 따라 디자인의 강약 조절이 잘 표현되어 있다. 카드 UI가 적용된 구글 검색결과를 보면 불필요한 블루 링크는 최소화하여 여백을 활용하였으면 크고 읽기 쉽게 텍스트를 제공하고 있다. 이렇듯 카드는 사용성 측면에서의 장점뿐만 아니라 심미적으로도 아름답다.

7. Fun to Play with - 카드는 가지고 놀기 재미있다.게임 도구로서 카드는 널리 이용되고 있다. 

게임을 할 때 양손을 이용해 화려한 테크닉으로 카드를 섞고 나누어 주고, 받은 카드를 살며시 펼쳐서 확인하고 한장 한장 카드를 뒤집어 보면서 패를 확인하는 손으로 느낄 수 있 오묘한 재미가 있다. 이는 게임 룰과 승패를 떠나서 카드의 형태와 질감 그 자체가 매력적이기 때문이다.그런 카드가 주는 느낌을 이제 스마트폰의 터치 스크린과 다양한 센서 진동 인터렉션을 통해 유사하게 재현해 낼 수 있다. 이처럼 모션과 인터렉션이 주는 신선한 느낌은 유사항 카드 UI사이에서 차별성을 줄 수 있는 요소이다. 

Mobile Dominant Design 으로 입지를 구축하고 있는 카드는 뉴스피드 반응형 웹 등 모바일 디자인을 효과적으로 적용하는데 필수적인 건축 구조물과 같은 요소로 부상하였다. 카드 UI를 도입하는 것은 기존 콘텐츠를 카드 프레임 내에 단순히 이관하는 것이 전부가 아니다. 성공적인 카드 UI를 적용하려면 먼저 사용자가 직관적으로 콘텐츠를 인지 할 수 있도록 콘텐츠의 본질적 특성을 고려하여 정보와 인터렉션을 디자인해야 하며 사용자 탐색을 고려해 효과적인 카드 형태를 고민해야 한다. 

발췌 - 네이버 도서관

• 7 years ago
• #blog
• #ux
• #카드
• #Mobile