brunch

매거진 쓸모있는 디자인

라이킷 141 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 도토리 Dec 14. 2021

Card UI 디자인 가이드

더 나은 Card UI를 디자인하기 위한 팁과 예시

Card UI는 Instagram, Facebook과 같은 SNS부터 Amazon과 같은 E-commerce 에 이르기까지 지금은보편적으로 사용되는 UI요소입니다. 처음 등장한 이후 Card Layout은 빠르게 확산되었습니다.

정보를 담은 컨테이너로서 Card는 Text, Rich media, Button 등과 같은 모든 요소를 포함하고 있습니다.이들 콘텐츠를 기반으로 다양한 디바이스 및 스크린의 크기에 맞게 조정이 가능하여 UI와 UX의 균형을 맞출 수 있습니다.

Card UI란?

Card UI는 Single Case에 대한 콘텐츠와 작업을 포함하는 UI 구성 요소를 말합니다. Card에는 다양한 요소가 포함될 수 있겠지만 그것들이 담은 내용은 모두 한가지(동일한) 토픽이어야함을 전제합니다.

Card Style

Card UI의 목적은 긴 텍스트를 피하고 검색 가능한 콘텐츠를 더 많이 렌더링하기 위함입니다.

사용자는 디자인 관점에서는 카드의 개념에 익숙하지 않을 수 있지만 실제 카드를 모티브로했기때문에 사용법을 바로 인지할 수 있습니다.

그럼 왜 인기가 있을까요?

Card는 콘텐츠를 단순화하는 것처럼 보이기 때문에 특히 인기가 있습니다. 특히 모듈방식으로 사용되어서 서로 다른 내용을 담은 Card 아이템이라도 함께 구성할 수 있습니다.

또한 콘텐츠를 카드의 경계와 카드의 시각적 레이아웃에 맞게 조정하여 요소를 최소화합니다. 그래서 디자인은 어지럽지 않게하면서도 수많은 콘텐츠가 어우러지도록 합니다.

Card는 콘텐츠와 사용자가 상호 작용할 수 있도록 더욱 작은 단위로 구분할 수 있습니다. 카드 형태의 컨테이너를 제공함으로써, 콘텐츠가 사용자에게는 더욱 사실적이고 감성적으로 다가갑니다.

Card UI 디자인은 아래의 여러 이유로도 널리 사용되고 있습니다.

직관적입니다.

Card는 UI에서 볼 수 있는 것처럼 실제 카드와 동일하게 보이며, 이는 대부분의 사용자가 비슷하게 느낄 수 있습니다. 카드는 모바일 및 웹 앱에서 인기있는 UI 요소가 되기 이전부터 명함, 야구 카드, 스티키 메모 등 실생활에서 어디에나 있었기 때문입니다. 카드는 사실적인 시각적효과를 통해 실생활에서와 같이 우리의 뇌가 직관적으로 카드를 그것이 표현하는 콘텐츠와 연결할 수 있도록 하는 시각적 유추를 가능하게 합니다.

이해하기 쉽습니다.

Card는 많은 공간을 차지하지 않으며 디자이너에게 콘텐츠의 위계를 정할 수 있게 합니다. 그래서 각 카드는 쉽게 접근하고 탐색할 수 있는 이해 가능한 콘텐츠가 됩니다.

카드를 사용하면 사용자가 관심 있는 콘텐츠를 더 쉽게 찾을 수 있습니다.

매력적이고 사용자 친화적입니다.

Card 기반 디자인은 종종 시각(특히 이미지)에 크게 의존합니다. 모든 카피본은 일반적으로 정보 아키텍처측면에서 원래의 시각 자료보다 이차적입니다. 이미지 사용의 강조는 카드에 배열되지 않은 동일한 콘텐츠보다 카드 기반 디자인인 경우 사용자에게 더 매력적으로 만드는 데 도움이 됩니다.

반응형 디자인에 유리합니다.

Card는 직사각형의 형태로 다양한 스크린의 가로 및 세로 사이즈에 맞게 크기를 유동적으로 조정하는 것이 가능합니다. 사용자가 모든 장치에서 동일한 경험을 얻을 수 있게합니다.

쉬운 공유가 가능합니다.

Card는 사용자가 전체 페이지가 아닌 특정 콘텐츠만 공유하는 것을 쉽게 합니다. 그래서 사용자가 SNS등 에서 더 쉽게 공유하는 것을 Push할 수 있습니다.

그럼 Card UI 디자인은 언제 사용하나요?

일반적으로 다음의 경우에 사용됩니다.

검색 기반 UI

카드를 사용하면 해당 콘텐츠가 일반적으로 자신을 나타내도록 허용하므로 사용자가 본인의 관심 분야에 대해 깊이 접근할 수 있습다. 이런 종류의 컨텐츠의 경우 카드 기반 디자인이 적합합니다.

제품 검색

정보를 검색할 때 카드가 더 적합합니다.

작업 관리

흐름의 단일 작업을 카드로 표현 가능한 경우 카드를 작업 목록으로 구성할 수 있습니다. 작업 관리 앱은 카드 형식의 UI를 사용하여 사용자용 대시보드 등에서 각 카드가 별도의 작업을 나타내도록 표현할 수 있습니다.

유사 항목

카드는 각기 다양한(이기종) 항목 리스트에 가장 적합합니다.(모든 콘텐츠가 동일한 기본 유형이 아닌 경우)

통계 시각화

대시보드는 일반적으로 동일한 화면에 다양한 콘텐츠 샘플을 동시에 표시합니다. 이러한 상황에서 Card UI는 각 카드가 다른 내용을 표현하고있음과 항목 간의 차이를 보여주는데 도움이 됩니다.

Card UI의 구성

카드 레이아웃은 포함된 콘텐츠의 내용에 따라 다를 수 있습니다. 다음 구성 요소는 일반적인 형태를 설명합니다.

(1) Rich Media(리치 미디어):

카드에는 이미지, 일러스트레이션, 아바타, 로고, 아이콘 또는 그래픽을 보여주는 썸네일이 포함될 수 있습니다.

(2) Heading(제목) :

헤더 텍스트에는 사진 앨범이나 기사의 이름이나 제목과 같은 항목이 포함될 수 있습니다.

(3) Description(설명) :

보조 텍스트에는 기사 요약 또는 짧은 설명과 같은 텍스트가 포함됩니다.

(4) Action Button(버튼 등):

카드는 행동을 위한 버튼을 포함할 수 있습니다.

(5)Sub Title(부제목):

부제목 텍스트는 Writer 또는 Location과 같은 텍스트 요소를 포함할 수 있습니다.

(6) More Menu :

카드에는 작업에 대한 아이콘이 포함될 수 있습니다.

팁 및 모범 사례

더욱 나은 카드 디자인을 위한 몇 가지 사례입니다.

1. 관련성있는 이미지의 사용

이미지는 카드 디자인의 리더격입니다. 각 카드에 사용자의 관심을 끌기 위해서는 훌륭한 이미지가 필요합니다. 이미지뿐만 아니라 카드에는 일러스트레이션, 아이콘 또는 기타 모든 종류의 리치 미디어가 포함될 수 있지만 이 모든 것은 콘텐츠와 관련이 있어야 합니다.

2. 시각적인 위계(Hierarchy) 추가

Card의 계층구조는 사용자가 가장 중요한 정보에 대한 정도를 파악하는 데에 도움을 줍니다.

카드 상단에 메인 콘텐츠를 배치하고 타이포그래피를 활용하여 메인 콘텐츠를 홍보합니다. 보다 다양한 시각적 분리가 필요한 경우에는 여백과 콘트라스트를 사용해 각 콘텐츠 영역을 구분합니다.

3. 콘텐츠의 제한

카드에는 중요한 정보만 포함하고 전체 세부 정보의 경우 상호 연결된 액세스 포인트를 제안합니다.

카드에 너무 많은 콘텐츠를 넣으려고 한다면 카드가 너무 광범위하고 길어져서 더 이상 카드처럼 보이지 않기 때문에 아날로그 카드를 비유하는 것의 연관성을 잃을 수 있습니다.

4. 인라인 링크 제외

가급적이면 인라인 링크를 포함하지 마세요.

카드 형태 자체적으로 연결하거나 사용 가능한 제한된 일련의 활동을 제공해야 합니다.

5. 다양한 액션

다양한 액션이 포함된 카드는 시각적으로 비교되도록 구성해야 합니다.

아래 예에서는, 종류가 다른 버튼을 기본 버튼 스타일 대신 밝은 버튼 사용으로 정보를 구분했습니다.

6. 그룹화를 위한 라인 사용 지양

디자이너는 여러 정보 그룹을 정의하는 방법으로 라인을 이용해 콘텐츠를 구별하곤 합니다. 카드UI에서는 이러한 라인은 불필요한 시각적 노이즈를 유발합니다.

Aesthetic & Modern UI

현대의 디지털 카드는 순수한 스큐어모픽 아이디어는 아니지만 물리학에서 사용되는 일관된 유사성 원리를 사용하면 사용자가 UI를 이해하고 콘텐츠의 시각적 계층 구조를 분석하는 데 도움이 됩니다.

카드의 경우 다음과 같은 몇 가지 작업을 통해 효과를 나타냅니다.

1. Rounded Corners

실제 카드와 시각적으로 비슷하게 보이기 위해서입니다.

둥근 모서리는 "머리와 눈의 자연스러운 움직임에 각각 더 잘 어울리듯" 우리 눈이 쉽게 라인을 따라갈 수 있도록 하기 때문에 더 효과적입니다.

2. light Border or Soft Shadow

Depth를 표현하고 카드를 클릭할 수 있음을 시각적으로 표시합니다. 그림자는 인터페이스상 공간을 만들어 UI 요소를 구별하는 데 도움이 됩니다.

그러나 디자인에 그림자를 추가하는 것은 말처럼 간단하지 않습니다. 때로 디자이너가 효과를 과도하게 사용하여 디자인이 보기좋지 않은 경우도 있습니다. 그림자에 순수한 검정색을 사용하지는 마세요.

3. Font & White Space

각 카드에 여백을 제공해 보고, 읽고, 이해할 수 있도록 구성합니다. 각 블록 주위에 많은 공간을 추가하여 사용자가 한 카드에서 다음 카드로 볼 때 시각적으로 리셋할 수 있는 여유를 제공합니다.

그리고 기본적인 타이포그래피가 가독성을 극대화하고 탐색에 도움이 되기 때문에 단순하고 기본적인 서체(예: 카드 본문의 경우 보통 두께의 sans-serif)를 선택하도록 하세요.

Card UI Example

Blog / Post Card

블로그에 사용되는 카드는 단순하게 구성하는 것이 중요합니다. 일관되고 반복되는 구조를 가져야 하면서 컨텐츠를 읽는 사람들이 잘 이해할 수 있도록 카드의 가장 중요한 요소부터 가장 덜 중요한 요소까지 다른 이미지와 글꼴 크기를 사용합니다.

중요 이미지와 제목을 가장 눈에 띄는 요소로 강조합니다. 그리고 사용자가 기사 또는 게시된 콘텐츠가 적합한지 여부를 결정하는 데 도움을 주고 클릭을 유도할 수 있는 인용문도 포함합니다.

E-Commerce / Product card

제품 카드는 방문자를 고객으로 전환하는 데 도움이 되는 중요한 요소입니다. 훌륭한 제품 카드는 방문자의 관심을 끌고, 제품 구매 욕구를 불러일으키고, 궁금증과 반감을 해결하고, 제품을 구매하도록 동기를 부여하고, 검색 결과에서 웹사이트를 홍보해야 합니다.

방문자가 올바른 페이지로 방문했다는 것을 즉시 이해할 수 있도록 제품명을 가장 눈에 잘 띄는 곳에 배치합니다. 좋은 상품 이미지는 고객에게 천 마디 말보다 더 많은 것을 표현하기 때문에 좋은 제품카드에는 고품질 이미지가 필요합니다. 행사중인 제품의 경우 가격 영역에에 세일 가격뿐만 아니라 정상 가격과 고객이 할인 받을 수 있는 금액을 표시합니다.

Profile Card

온라인 도메인에 대한 관심의 이동으로 인해 개인 브랜딩이 그 어느 때보다 중요해졌습니다.

모든 카드가 그렇지만 프로필 카드는 중요한 정보를 담고 있는 UI 구성요소입니다. 목표를 달성하기 위해 방문자에게 (말 그대로가 아니라) 자신을 브랜딩해야 하기 때문입니다.

필수 정보(예: 이미지, 이름, 직업)만 포함하고 "정보" 페이지를 통해 프로필을 완성하는 데 필요한 나머지 세부 정보가 포함되도록 합니다.

디자인과 레이아웃 관점에서 볼 수도 있지만 카드의 내외부 모두 웹 사이트의 모양과 테마를 손상시키지 않도록 계층 구조를 정리합니다.

Dashboard Card

대시보드 설계는 좀 다를 수 있습니다. 하지만 모든 대시보드는 카드로 구성되어 있습니다.

대시보드 유형에 따라 각 카드에는 프로필 정보, 알림, 빠른 링크 또는 네비게이션 요소, 주요 데이터, 그래프 및 데이터 테이블 등이 포함될 수 있습니다. 각 요소에 올바른 유형의 카드를 사용하는 것이 중요합니다.

대시보드 카드를 통해 사용자는 집중할 데이터를 결정할 수 있습니다. 사용자가 대시보드에서 전면 중앙에 표시해야 하는 데이터를 정확하게 제어할 수 있는 이해하기 쉬운 UI입니다.

적어도 최초 화면에는 사용자에게 가장 관련성이 높은 정보만 포함시키도록 합니다. 함께 확인해야 더 이해하기 쉬운 데이터 세트가 있는 경우 단일 카드로 제시하는 방법을 찾아야하니다. 그러나 사용자에게 혼동을 주지 않도록 주의하도록 합니다.

Daily activities card(Kanban)

Kanban Task Card는 매우 간단해 보입니다. 스티커 메모를 하고 해야 할 일을 적어 벽에 붙입니다. 이 카드는 행동이 필요한 장치 수를 포함해야 합니다. 그것들은 무엇을해야 할지를 명확하게 전달하는 다양한 다른 정보를 포함합니다.

카드에 담긴 정보에는 Task이름과 Task유형 및 작업소유자와 같은 세부 정보가 포함됩니다. Kanban 카드는 작업 상태 카테고리 하단에 배치됩니다. 가장 기본적인 상태 범주는 "To do", "In Progress" 및 "Complete" 이지만 상태는 각 프로젝트마다 다르게 표현됩니다.

Card UI는 전체적인 목표와 같은 큰 그림상의 아이디어를 변경하는 것보다는 Task 단위의 추가 또는 삭제와 같은 작은 단위의 변화를 구성하는 것에 더 적합합니다.