카드 UI디자인 하는 법 파헤치기

*본 포스트는 "Smashing Magazine"의 2016년 10월 11일 게재된"Nick Babich"의 "Designing Card-Based User Interfaces"라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.

웹/모바일 어플리케이션들은 여러 페이지로 정보가 집약된 디자인에서 개인화된(personalized) 경험에 집중화된 디자인으로 바뀌어 가고 있습니다. 이러한 디자인은 많은 콘텐츠 조각들의 집합을 통해서 가능합니다. 지금 콘텐츠가 보여지는 방식은 카드 형태로 보여지고 있다고 볼 수 있습니다. 카드 기반의 인터랙션 디자인 모델링은 매우 다양하게 활용되고 있으며, 최근에는 거의 모든 곳에서 이런 디자인을 확인할 수 있습니다.(뉴스 사이트에서 식료품 사이트에서 까지 거의 모든 곳에서 볼 수 있습니다.)

이 포스트에서는, 카드 디자인이 UI디자이너에게 어떤 의미를 지니는지 알아보고, 카드 UI 기반으로 이루어진 3개의 주요 서비스에 대해서 알아볼 것입니다. 카드 UI디자인을 프로토타이핑하는 데에 관심이 있다면, 어도비의 새로운 Experience Design CC를 무료로 체험해 볼 수 있습니다.

카드란 무엇인가? 

카드란 이미지와 텍스트들을 담고 있는 작은 직사각형인데 , 해당 이미지와 텍스트들이 보다 디테일한 정보로 연결해주는 역할하는 것들을 카드라고 볼 수 있습니다. UI 용어 상 '카드'라는 단어는 메타포의 대상인 현실의 '카드'와 메우 많은 유사 속성을 공유하고 있습니다.

웹/모바일 어플리케이션이 등장하기 이전에도 카드는 언제나 우리 생활에 함께 있었습니다. 명함, 야구게임카드, 또는 포스트잇과 같은 것들 말입니다. 그만큼 카드는 우리에게 친숙하기 때문에, 정보를 제공해주는 매체로서 우리에게 매우 직관적으로 작용할 수 있습니다. 

야구게임카드는 실생활에서 만날 수 있는 카드의 매우 적절한 예라고 볼 수 있습니다. 한 선수에 대해서 사용자들이 알고 싶어하는 주요 내용에 대한 요약 정보가 작은 카드의 양면에 포함되어 있습니다. (이미지 출처 : oldbaseballcards)

카드의 이점은 무엇인가?

디지털 카드는 매우 다양한 컨텍스트에서 활용될 수 있으며, 올바르게 적용될 수 있으며, 사용자 경험을 발전시킬 수 있습니다. 다음은 왜 UI디자인에 있어서 카드가 좋은지에 대해서 알려주는 예제들입니다.

1) 컨텐츠를 덩어리 채로 분리시킬 수 있습니다. (Chunking Content)

카드는 정보들을 덩어리 채의 정보로 분리시킬 수 있으며, 사용자들은 덩어리 채의 정보를 읽기 쉽다는 이유로 선호하는 경향이 있습니다. 이러한 점들은 사용자들을 협박하고 시간을 빼앗어 가는 일종의 텍스트 벽(많은 양의 텍스트)을 줄이는 효과가 있으며, 사용자들이 보다 자신의 흥미 요소에 쉽게 빠질 수 있게 도와 줍니다. 마치 텍스트가 비슷한 속성에 맞춰서 문장이나 단락으로 분리되듯이, 카드는 정보들을 의미있는 섹션으로 분리시키는 역할을 합니다. 카드는 비슷한 정보의 조각들을 하나의 유의미한 정보르 붙여 주는 역할을 합니다.

카드는 정보를 담는 데에 있어서 매우 깔끔한 느낌을 줍니다. (이미지 출처 : Google)

2) 정보를 확인하기 쉽습니다. (Easy to Digest)

빠르게 정보를 교환하는 데에 있어서 카드는 매우 훌륭한 역할을 합니다. 정보를 카드에 배치하는 것은 사용자들이 정보를 확인하는 것을 보다 쉽게 해주는 역할을 합니다. 사용자들은 그들이 관심있어 하는 정보들에 대해 매우 쉽게 접근할 수 있게 도와줍니다. 그리고 사용자들이 정보에 집중할 수 있는 데에 있어서도 도와주는 기능 또한 합니다.

사용자들은 카드를 쉽게 스캔하고, 넘길 수 있습니다. (이미지 출처 :  Behacne)

3) 시각적으로 즐거움을 줍니다. (Visually Pleasing)

카드 기반의 디자인은 시각적 요소에 매우 큰 영향을 받는 경향이 있기도 합니다. 특히 카드 기반 디자인은 이미지 정보에 매우 의존적인 성향을 지닙니다. 이미지 정보는 사용자들에게 매우 효과적으로/즉각적으로 관심을 이끄는 역할을 하며, 이러한 점 때문에 이미지 정보는 사이트와 모바일 디자인을 보다 효과적으로 만들어 준다는 점이 이미 연구 결과에 의해 검증이 되기도 했습니다. 카드 기반 디자인에서 이미지에 강조점을 주는 것은 사용자들에게 보다 매력적인 디자인을 구현할 수 있는 역할을 해줍니다.

카드는 시각 정보로 사용자들을 즐겁게 할 수 있습니다. (이미지 출처 : Google)

4) 다양한 스크린 사이즈에 잘 대응합니다. (Good For Varying Screen Sizes)

카드의 가장 중요한 속성 중 하나는 거의 무한대로 확장/변형이 가능하다는 점입니다. 카드는 매우 쉽게 사이즈 업/다운이 가능하기 때문에 반응형 디자인에 있어서 매우 탁월한 선택 중 하나라고 볼 수 있습니다. 이러한 점은 하나의 미적인 요소를 디자인함으로써 다양한 스크린 상에서 일관된 경험을 제공할 수 있는 편의를 줍니다.

카드는 모바일 디바이스와 다양한 스크린 사이즈에 거의 완벽한 적응력을 보여줍니다. (이미지 출처 : Google)

5) 엄지 손가락을 위해서 디자인되었다고 볼 수 있습니다. (Designed for Thumbs)

카드는 엄지 손가락을 위해 디자인되었습니다. 왜냐하면 카드는 어플리케이션 기능을 하기 위해 디자인된 것처럼 보이기도 하기 때문입니다. 디지털 카드는 현실의 카드와 같은 방식으로 작동합니다. 사용자들은 카드의 이러한 단순함을 좋아하고, 더 많은 정보를 위해 카드를 물리적으로 엄지로 움직이는 행위를 매우 직관적으로 인식하고 이해합니다.

카드는 매우 활용성이 높습니다. 애니메이션과 움직임을 적용하는 데에도 아주 유리합니다. (이미지 출처 : Behance)

카드 기반 디자인의 좋은 사례들

카드 기반 디자인은 데스크톱과 모바일 플랫폼 간 경계선에 서 있다고 볼 수 있으며, 사용성과 인터랙션디자인 사이의 차이를 연결해주는 역할을 합니다. 카드 기반 디자인을 성공적으로 수행하기 위해서는, 미적인 완성도를 필요로 하며 분명한 액션으로 직접적으로 사용자들을 끌어 들일 수 있어야 합니다.

1) 지속적 정보 제공(stream)에 적합함

정보를 스트리밍 하는 데에 있어서 카드 기반 디자인이 활용될 수 있습니다. 페이스북은 최근 일어나는 일들에 대해서 뉴스피드 상에서 간략하게 정보를 제공하는 데에 탁월한 역할을 합니다. 여기에서 카드의 가장 중요한 역할은 '해체'입니다. 카드는 끝없는 정보의 업데이트에서 정보들을 분리시키는 역할을 합니다. 이러한 기능은 정보를 패킷 단위로 분리시키고, 공유하기 쉬운 형태로 만듭니다. 

페이스북은 콘텐츠 기반 카드 디자인의 매우 훌륭한 사례입니다.

2) 정보 발견(discovery)에 적합함

카드는 비슷한 속성의 콘텐츠들이 스스로 자리를 잡고 사용자들게 전달될 수 있도록 도와주며, 사용자들이 자신의 관심사에 맞는 정보들을 쉽게 찾을 수 있도록 도와줍니다. 온라인 상에서 자신들의 창작물들을 공유하는 비헨스를 보면, 카드 기반 디자인은 창작물들을 전시하는 데에 있어서 매우 적합한 역할을 함을 확인할 수 있습니다.

비헨스는 카드 레이아웃을 활용함으로써 직관적인 UI를 제공합니다.

틴더(Tinder)는 다음 정보에 대한 발견 메카니즘을 잘 활용하여 전세계에서 가장 인기있는 앱이 된 사례 중 하나입니다. 틴더는 그냥 카드는 옆으로 밀면 끝입니다. 추천받은 상대방이 맘에 들지 않으면 그냥 옆으로 카드를 넘기면 끝인 것입니다. 이 스와이핑 인터랙션 메카니즘은 호기심을 자극하듯 중독성이 있습니다. 스와이핑을 할 때 마다 정보를 새롭게 모으게 되며, 이 축적된 정보에 따라 사용자에게 가장 최선의 정보를 제공하기 때문입니다.

(이미지 출처 : Tinder)

3) 업무 프로세스 정리(workflow)에 적합함

카드는 쉽게 특정 카테고리에 맞게 정리되기가 쉽습니다. 트렐로는 카드 스타일 인터페이스를 활용해서 대시보드를 만들고 각각의 업무를 표시하는 데에 있어서 탁월한 역할을 합니다

트렐로 보드 예시

4) 대화형 인터랙션(dialog)에 적합

카드는 콘텐츠 콘테이너와 같은 역할을 합니다. 카드는 사용자 행동(action)을 담아 내기에도 아주 적절합니다. 예를 들어, 사용자에게 파일 전송 요청 메시지가 표시되어야 한다고 할 때, 승인 또는 거절을 결정할 카드 팝업 메시지가 표시되게 됩니다. 아래 배치한 애플의 사례는 '사진' 앱이 보여주는 인터랙션인데, 개발자들은 이 인터랙션을 어떤 종류의 앱에도 적용할 수 있습니다.

(이미지 출처 : 애플)

5) 대시보드(dashboard) 표현에 적합함

다양한 출처의 정보들을 조직화할 때 카드 디자인은 매우 유용한 역할을 합니다. 카드를 사용하면서, 논리적인 그룹들로 정보를 분류할 수 있으며, 특정 정보들을 모으고, 컨텍스트에 맞춰서 정보를 표현할 수도 있습니다. 유사한 내용으로 분류된 컨텐츠들은 쉽게 그룹화될 수 있으며, 또 다른 형태의 정보 덱(카드 모음)으로 다시 발행되어 사용자들에게 전달될 수 있습니다.

(이미지 출처 : 메테리얼 디자인)

카드 기반 디자인 언어(Card-based design language)

2010년, 마이크로소프틑 '매트로 디자인 언어'를 발표했습니다. 해당 언어의 핵심적인 디자인 키워드는 어플리케이션들의 콘텐츠에 집중하는 것이었으며, 플랫한 디자인 요소들과 타이포그래피, 카드들을 통해서 구현되었습니다. 카드는 단순한 디자인 구성 요소 이상의 의미를 지니고 있었다고 볼 수 있는데, 이것은 쉬운 인터랙션을 제공하기 위해서 매우 핵심적인 기능 요소로도 분류될 수 있기 때문입니다.

마이크로소프트 윈도우 8

카드를 보다 디테일하게 디자인하는 법

1) 단순성을 지니는 카드(Cards and simplicity)

카드라고 하면, 단순성이 가장 첫번째로 카드에게 지켜져야 할 속성이라고 할 수 있습니다. Game Cousins는 "하나의 조각에는 하나의 정보만"이라는 원칙을 바탕으로 하고 있습니다. 물론 하나의 카드가 여러 개의 정보를 포함하고 있을 수는 있지만, 궁극적으로 하나의 카드는 하나의 정보나 콘텐츠에만 집중하고 있어야 한다는 것입니다. 이런 방식은 사용자들에게 정보를 선별적으로 소비하고, 공유하는 데에 효과적인 역할을 합니다.

ReaLync는 많은 정보들 중 가장 중요한 정보를 우선적으로 보여주기 위해서 카드 형식의 인터페이스를 취하고 있다고 볼 수 있습니다.
(이미지 출처 : piperlawson)

2) 카드와 반응형 디자인(Cards and responsive design)

다양한 디바이스에서 일관된 디자인을 경험하게 해주는 것이 얼마나 중요한지는 모든 사용자/디자이너들이 알고 있는 부분입니다. 다양한 스크린을 대상으로 디자인할 때 각 플랫폼이 지니는 스크린 상의 특성을 최대한 활용해야 하는데, 카드를 사용함으로써 콘텐츠들을 쉽게 다양한 사이즈의 스크린에 적응(adjust)시킬 수 있습니다. 카드는 훌륭한 반응형 프레임워크와의 적합성을 보여줍니다. 카드 그리드는 어떠한 스크린에도 재설계되어 들어갈 수 있습니다.

디지털 카드의 가장 큰 미덕 중 하나는 다양한 방법으로 변형되어 적용될 수 있다는 점입니다. 예를 들어 모바일 플랫폼의 경우, 카드는 중첩되어 쌓이는 식으로 표현될 수 있습니다.

더버지의 모바일 표시 화면 

더버지의 데스크톱 표시 화면

카드는 고정된 높이를 가지거나 유동적인 높이를 가질 수 있습니다. 고정 폭을 갖게 함으로써 디바이스에 따라서 높이가 유동적으로 변하게 만드는 것 또한 가능합니다.

(이미지 출처 : 인터컴)

3) 카드와 타이포그래피 (Card and typography)

카드 디자인 내의 텍스트는 매우 쉽게 읽을 수 있어야 하며, 가독성을 최대한으로 높이는 디자인 구성을 가져야 합니다.

• 단순한 서체와 보기 쉬운 컬러 스키마를 선택해야 합니다. (텍스트는 명확한 배경색 위에 충분한 대비값을 지니는 색상으로 배치되었을 때 가장 읽기 좋은 형태로 자리 잡습니다.)
• 서체의 종류는 가급적 제한하도록 합니다. 사실 대부분의 카드 디자인 프로젝트에서 하나의 서체 종류면 충분하기도 합니다.

(이미지 출처 : 메테리얼 디자인)

결론

이 포스트를 읽는 대부분의 독자들은 카드 스타일 디자인이 왜 중요한지에 대해서 이미 넓은 이해도를 지니고 있을 것입니다. 이 트렌드는 당분간은 계속 유지될 것으로 보입니다. 카드는 점점 어플리케이션 디자인에서 핵심적이면서도 중요한 역할을 계속해서 해 나가고 있습니다.

카드 디자인의 강점은 디자인적으로, 그리고 사용성적으로 모두 우수한 성질을 지닌다는 겁니다. 단순히 보여지는 면이 깔끔해서가 아니라 복잡한 정보를 담아냄에 있어서 어떤 디자인 레이아웃 보다 유동성(flexibility가 우수한 레이아웃입니다. 요즘 사람들은 정보를 빠르게 찾으려 하는 경향이 있으며, 카드 디자인은 이러한 사용자들의 니즈에 어떤 디바이스에서든 잘 대응하는 성질을 보입니다.

* 이 기사는 어도비 사의 후원 하에 게재되고 있는 UX design 연재 기사의 일부입니다. 어도비 사는 최근 Experience Design App을 만들었으며, 이 앱은 빠르면서도, 유동적인 디자인 프로세스에 대응하기 위해 만들어졌습니다. 아이디어를 빠르게 시각화하고, 인터랙티브 프로토타이핑을 하게 해주며, 결과물에 대한 테스트까지 한 번에 할 수 있게 해줍니다.

비헨스에서 Adobe XD를 통해 제작된 작품들을 감상할 수 있으며, Adobe XD 블로그를 방문하여 관련 최신 정보를 얻을 수도 있습니다. 최근에 Adobe XD는 다양한 기능 업데이트를 진행한 바 있으며, 테스트 베타 진행 중에 있기 때문에 언제든지 다운로드 받아서 무료로 사용해볼 수 있습니다

원 포스트 저자에 대하여

Nick Babich

Nick Babich는 개발자이며, 최신 기술에 관심이 많으며, UX를 사랑하는 사람입니다. 10년 이상의 SW업계에서의 개발 경력을 가지고 있습니다. 광고와 심리학, 그리고 영화에 특히 관심이 많습니다.

저작권 관련 정보 (License Info.)

원 저작 게시물 제목(Original Post Title) : Designing Card-Based User Interfaces 원 저작 게시물 주소(Original Post URL) : URL Link 원 저작 게시물 제공(Original Post Provider) :  NICK BABICH, Smashing Magazine 본 콘텐츠는 유용한 정보를 널리 알리려는 취지에서 해외 기사를 국문으로 번역하여 제공하는 포스트입니다. (This post is a translated content to Korean in purpose to spread good information more broadly over the globe.) 번역된 내용 상의 문제가 있거나, 저작권 침해 요소가 있다고 저작권자가 판단할 경우, 요청에 따라 언제든지 지워질 수 있습니다. (If the translated content has some problems itself or the original content provider/creator think posting the translated content here inappropriate, this can be removed immediately upon request.) 번역된 콘텐츠는 CC 4.0 기준을 따르며, 정보 공유 시 최초 저작자(원 저작 관련 내용)를 콘텐츠 내에 표기해 주어야 합니다. (The translated content follows CC 4.0 policy. When it's shared, the original content provider/creator has to be attributed in the content.)