카드 UI는 많은 디지털 제품, 웹사이트 및 엔터프라이즈 애플리케이션에 나타납니다. 카드 레이아웃, 시각적 계층 구조 및 기본 모범 사례를 이해하는 것은 훌륭한 카드 사용자 인터페이스를 디자인하는 데 중요합니다. 이 기사에서는 카드 사용자 인터페이스 디자인, 카드 구조, 일반적인 사용 사례 및 다음 프로젝트를 위한 디자인 영감을 살펴봅니다. UXPin Merge를 사용하여 더 높은 충실도와 기능으로 카드 UI를 디자인, 프로토타입 및 테스트하십시오. 구성 요소 기반 프로토타이핑 및 이 혁신적인 사용자 경험 기술에 대한 액세스를 요청하는 방법에 대해 자세히 알아보려면 병합 페이지를 방문하십시오 . 새로운 차원의 프로토타입 제작 팀의 디자인 시스템에서 가져온 대화형 구성 요소를 사용하여 디자인합니다. UXPin 병합 알아보기 UI 디자인에서 카드란? Google의 Material Design에 대한 간결한 설명 은 "카드에는 단일 주제에 대한 콘텐츠와 작업이 포함되어 있습니다."라고 나와 있습니다. 카드는 사용자가 쉽게 소화할 수 있도록 UX 팀에서 콘텐츠를 표시하는 데 사용하는 디자인 패턴 입니다. 카드는 Google 지도에서와 같이 제목과 이미지처럼 간단할 수 있습니다. 카드 디자인 UI Google 검색 또는 이미지, 로고, 드롭다운/오버플로 메뉴, 여러 작업, 댓글 섹션 및 날짜 스탬프가 있는 Instagram의 이 카드와 같이 더 복잡합니다. Instagram 카드 디자인 UI 디자이너는 일반적으로 독립 실행형 항목이 아닌 콘텐츠 컬렉션을 표시하기 위해 카드를 사용합니다. 이 카드는 사용자에게 Instagram 피드의 이미지나 웹사이트 홈페이지의 최신 블로그 게시물과 같이 콘텐츠가 관련되어 있음을 알려줍니다. 카드 해부학 우리는 카드의 해부학을 묘사하는 Google의 Material Design에서 이 유용한 분석을 빌렸습니다. 모든 카드에 이 레이아웃이 있는 것은 아니지만 디자이너가 UI 구성 요소를 만드는 데 사용하는 일반적인 항목을 잘 보여줍니다. 카드 디자인 UI의 해부 컨테이너: 모든 카드에는 콘텐츠를 담을 컨테이너가 있어야 합니다. 이러한 컨테이너는 카드와 주변 콘텐츠를 구분합니다. 썸네일: 일반적으로 소유권이나 관계를 표시하는 아바타, 로고 또는 아이콘입니다. Instagram은 사용자의 프로필 사진에 이 썸네일을 사용합니다. 헤더 텍스트: 카드의 이름 또는 제목. 블로그 게시물의 경우 기사의 H1 제목이 될 수 있습니다. 소제목 : 소제목에는 날짜 또는 위치와 같은 추가 정보가 포함될 수 있습니다. 미디어: 카드에는 종종 관련 이미지나 비디오가 포함됩니다. 위의 Google 지도 카드는 각 카드에 센트럴 파크와 메트로폴리탄 미술관의 사진을 보여줍니다. 카드에는 단일 미디어 항목이나 여러 이미지와 비디오가 있는 캐러셀이 있을 수 있습니다. 보조 텍스트: 카드 및 그 내용에 대한 요약 또는 설명. 버튼: 텍스트가 있는 CTA(자세히 읽기, 장바구니에 추가, 지금 구매 등). 아이콘: 아이콘 버튼을 사용하는 작업(좋아요, 공유 등). 버튼과 아이콘을 사용하면 사용자가 다양한 작업을 수행할 수 있지만 카드에서는 이러한 작업이 대화식일 필요가 없습니다. 디자이너는 전체 카드를 콘텐츠(블로그 게시물)에 대한 링크로 만들거나 작업을 임베드(두 번 탭하여 Instagram 게시물에 좋아요 표시)할 수 있습니다. 4가지 유형의 카드 UI 디자인 카드 UI 디자인에는 많은 장점이 있지만 가장 중요한 것 중 하나는 웹사이트의 개성을 전달할 수 있는 독특한 방식으로 쉽게 재현할 수 있다는 것입니다. 카드의 종류는 다양하며 가장 대중적이고 효과적인 것을 살펴보면 다음 4가지 스타일이 가장 일관되게 나타난다. 1. 핀 Pinterest 플랫폼을 기반으로 하는 핀은 가장 쉽게 알아볼 수 있는 카드 레이아웃입니다. 2025년까지 인터넷 사용자의 72% 가 스마트폰만으로 웹에 액세스할 것이지만 Pinterest는 사용자의 80%가 이미 모바일 장치를 통해 액세스 합니다 . 불행히도, 이러한 스타일의 카드 UI의 빠른 인기는 몰락이었습니다. 오늘날 핀을 사용하는 사이트는 종종 독창적이지 않은 것처럼 보입니다. 2. 평면 디자인 마이크로소프트는 초기 소프트웨어 디자인에 사용된 스큐어모피즘(skeuomorphism)에서 한 걸음 물러나 밝은 색상과 단순한 비주얼을 채택했습니다. 인기 있는 카드 패턴을 볼 때 인터페이스는 대부분의 사람들에게 가장 먼저 널리 퍼진 예일 것입니다. 그러나 그 이후로 이 카드 는 현대적인 취향을 더 잘 반영하도록 진화했습니다 . 3. 벽돌(그리드) 이해하고 탐색하기 가장 쉬운 카드 UI 패턴 중 하나는 벽돌 스타일의 프레임워크 입니다. 이러한 카드는 논리적인 순서로 배열되며 일반적으로 카드 사이의 간격이 동일한 깔끔한 그리드로 표시됩니다. 4. 매거진 스타일 뉴스 및 엔터테인먼트 웹 사이트에서만 Magazine Style 인터페이스를 볼 수 있었지만 그 인기로 인해 다른 유형의 온라인 플랫폼에서도 사용하게 되었습니다. 포트폴리오 및 블로그와 같이 콘텐츠가 많은 도메인에서도 이러한 유형의 카드를 사용합니다. 레이아웃에는 다른 페이지의 전체 기사로 연결되는 텍스트 태그나 티저 이미지가 있을 뿐입니다. 사용되는 카드 UI의 스타일에 관계없이 사용자를 압도하지 않고 사용자가 쉽게 소화할 수 있는 방식으로 많은 양의 콘텐츠를 보여주는 것이 주요 포인트입니다. 카드 UI 디자인의 일반적인 사용 사례 웹 디자인 및 모바일 앱에서 게임 및 스트리밍 서비스에 이르기까지 모든 곳에서 카드를 볼 수 있습니다. 다음은 카드 UI 디자인의 몇 가지 일반적인 사용 사례와 해결하려는 문제입니다. 미디어 카드 디자이너는 미디어 카드를 사용하여 소셜 미디어 게시물이나 기사에 대한 시각적 콘텐츠를 표시합니다. 미디어(이미지 또는 비디오) 및 제목(헤드라인)은 관심과 참여를 유도하기 위해 눈에 잘 띄게 표시됩니다. 대부분의 뉴스 웹사이트 는 BBC 홈페이지의 이 예 와 같이 미디어 카드를 사용하여 기사를 표시합니다 . BBC의 카드 디자인 UI 모달 카드 모달 카드는 미디어 카드와 유사하지만 탭/클릭 시 사용자에게 여러 작업을 제공합니다. 스트리밍 서비스, 기내 서비스 및 자동차 인포테인먼트 UI는 모달 카드를 사용하여 TV 프로그램, 영화 및 기타 콘텐츠를 표시합니다. 이러한 스트리밍 카드에는 일반적으로 제목이 있는 프로그램 포스터 이미지가 있습니다. 사용자가 카드를 클릭/탭하면 재생, 즐겨찾기에 추가, 평가 등과 같은 여러 옵션이 있는 모달이 나타납니다. 제품 카드 제품 카드는 제품 및 서비스 판매에 최적화되어 있습니다. 일반적으로 미디어 항목, 제품 제목, 가격 및 CTA(지금 구매 또는 장바구니에 추가)가 있습니다. 제품 카드에는 판매/할인 태그, 리뷰 점수 및 가용성을 포함하여 FOMO를 만들고 쇼핑객을 유인하기 위한 추가 정보가 포함될 수 있습니다. Local Shopify 테마 의 이 예는 디자이너가 전자 상거래 제품 카드에 사용하는 일반적인 UI 요소를 표시합니다. 제품 카드 디자인 UI 목록 카드 목록 UI 는 종종 카드를 사용하여 음악 재생 목록, 연락처, 작업 등과 같은 콘텐츠를 표시합니다. 목록 카드에는 일반적으로 제목, 부제 및 이미지(작업 카드의 확인란)가 있습니다. 디자이너는 메뉴 아이콘을 포함하거나 카드 옵션(편집, 삭제, 보관 등)을 표시하기 위해 스와이프 상호 작용을 포함할 수 있습니다. Spotify 재생 목록의 이 목록 카드 예는 아티스트/앨범 이미지, 노래 제목 및 아티스트 이름을 보여줍니다. 오른쪽에 있는 점 3개 아이콘은 여러 옵션이 있는 메뉴를 엽니다. 스포티파이 목록 디자인 데이터 카드 데이터 카드는 앱의 대시보드 UI에 분석, 그래픽 및 통계 정보를 표시합니다. 이러한 UI 카드는 엔터프라이즈 디자인 에서 가장 일반적 이지만 활동 추적기, 예산 앱, 뱅킹 앱과 같은 소비자 제품에도 나타납니다. Dribbble의 Purrweb UI/UX Studio의 이 예는 디자이너가 카드를 사용하여 사용자에게 최근 전송된 4개를 보여주는 방법을 보여줍니다. 재산 카드 Airbnb 및 Booking.com과 같은 부동산 목록 및 예약 플랫폼은 유사한 UI 카드 레이아웃을 사용합니다. 목록 제목: 객실 수 또는 숙박 유형 부제: 찾고 있는 지역으로부터의 위치 또는 거리 가격: 구매/대여/1박 설명: 속성을 설명하는 1-3개의 문장 또는 주요 기능(방, 욕실 등)을 강조하는 아이콘 별점(예약 앱): 고객 리뷰 즐겨찾기 아이콘 버튼: 즐겨찾기에 속성 추가 CTA: 예약 또는 문의 이러한 속성 카드를 통해 사용자는 가능한 한 빨리 많은 옵션을 스캔할 수 있습니다. 앞뒤로 클릭하면 시간이 많이 걸리므로 사용자 환경이 좋지 않습니다. 디자이너는 UX 조사와 사용자 인터뷰를 통해 사용자가 가장 중요하게 생각하는 데이터를 찾아야 합니다. 카드 UI 디자인의 장점 현재 사용 가능한 모든 디지털 도구와 마찬가지로 사용자 인터페이스 카드를 절대적으로 좋아하는 사람들과 다른 방법을 선호하는 사람들을 찾을 수 있습니다. 아직 경계를 늦추지 않았다면 다음 이점과 이러한 이점이 사용자 경험을 개선하면서 더 많은 청중에게 다가가는 데 도움이 되는 이유를 확인하십시오. 1. 직관적인 사용성 클릭 및 드래그 조작을 통해 카드 사용자 인터페이스를 간단하게 디자인할 수 있지만 전반적인 개념은 사용자에게도 용이함을 제공합니다. 카드에 표시된 정보를 한 눈에 쉽게 해독할 수 있으며 사용할 수 있는 프로젝트(예: 예술, 상업, 문학 등)의 다양성은 무궁무진해 보입니다. 2. 집계된 콘텐츠에 이상적 웹사이트가 모든 유형의 콘텐츠를 집계하는 경우 카드 UI는 테이블에서 가장 좋은 옵션 중 하나입니다. 이 인터페이스 디자인을 통해 사용자는 끝없는 콘텐츠처럼 보이는 것에 얽매이지 않고 원하는 정보를 쉽게 찾을 수 있습니다. 3. 찾아보기 쉬운 프로젝트 유형에 관계없이 카드 디자인이 브라우징을 허용하는 용이성은 논쟁의 여지가 없습니다. 카드는 페이지를 스크롤할 때 쉽게 볼 수 있으며 주변 콘텐츠에 비해 크기를 늘려 특정 요소를 눈에 띄게 만들 수 있습니다. 4. 공유 가능 Pinterest는 공유 가능한 카드 UI 디자인을 증명하는 데 필요한 유일한 사례 연구입니다. 이들은 본질적으로 명함의 디지털 등가물입니다. 시각적 디자인은 불필요한 콘텐츠를 소화하도록 강요하지 않고 사용자에게 정확히 보고 싶은 것을 보여줍니다. 5. 다양성 귀하는 사용자를 누구보다 잘 이해하므로 그들이 귀하의 콘텐츠에서 무엇을 기대하는지 알 수 있습니다. 미니멀한 디스플레이를 원하든 정교한 디스플레이를 원하든 이 카드는 바로 그것을 만들 수 있습니다. 가장 잘 작동하는 복잡성 수준을 선택할 수 있습니다. 6. 개인의 창의성을 위한 손쉬운 조작 웹사이트나 모바일 앱의 머티리얼 디자인은 카드 패턴으로 쉽게 조작할 수 있습니다. 이렇게 하면 디자인에 나만의 독창성을 더하기가 더 쉬워지고 더 나은 브랜드 프레젠테이션이 가능해지기 때문에 전반적인 사용자 경험이 향상됩니다. 카드 디자인의 단점 카드 UI 디자인에도 단점이 있지만 이를 미리 이해하면 가장 일반적인 문제를 피할 수 있습니다. 그것은 모두 디자인 패턴의 사용을 구현하는 방법에 달려 있으므로 이러한 잠재적인 문제로 인해 웹사이트를 크게 개선할 수 있는 방법을 찾을 수 있습니다. 1. 재생할 수 있습니다. 카드 인터페이스는 일종의 경험 디자인이지만 사용자가 한동안 경험해 왔습니다. 프레젠테이션에서 독창적이지 않은 경우 웹 사이트를 방문하는 사람들은 이러한 프레젠테이션을 창의적이지 않은 것으로 보고 과장될 수 있습니다. 2. 미묘한 UX 디자인 필요 카드 UI 도구로 무엇이든 할 수 있지만 프레젠테이션에서 미묘한 차이를 유지해야 합니다. 사용자에게 자세한 정보를 제공할 수 있다는 것은 좋은 일이지만, 이것이 미묘하게 이루어지지 않으면 디자인이 비전문적으로 보일 수 있습니다. 3. 어수선한 느낌의 위험 적절한 네거티브 공간을 사용하지 않으면 랜딩 페이지가 어수선하게 느껴질 수 있습니다. 디자인 패턴에 집중하고 카드가 서로 스며들지 않도록 하십시오. 이것은 훌륭한 사용자 경험을 위한 잠재력을 가져오고 완전히 파괴할 수 있습니다. 7가지 최고의 카드 UI 사례 효과적인 카드 사용자 인터페이스 패턴을 설계하는 데 사용되는 전략이 많이 있지만 이러한 방법 중 일부는 매우 중요하므로 모든 전문가가 이 패턴의 사용을 옹호할 것입니다. 다음은 Carrie Cousin이 웹 디자인 동향에 대한 무료 전자책 에서 제시한 것 입니다. 네거티브 공간 : 효과적인 카드 UI 디자인은 구성에 관한 것이므로 화면이 어수선하지 않도록 충분한 네거티브 공간(예: 패딩, 테두리)을 사용해야 합니다. One card, Once concept : 사용하는 카드는 사이트 구조를 단순화하기 위한 것입니다. 카드에 너무 많은 복잡성을 추가하여 실수로 이 초점을 약화시키지 마십시오. 적합한 이미지 : 카드에 사용되는 대부분의 이미지는 크기가 작으므로 선명한 사진만 사용하십시오. 또한 사용할 위치에 적절하게 표시되도록 잘렸는지 확인합니다. Simple typography : 카드 UI 디자인의 텍스트는 활용한 이미지와 같이 작아서 심플한 typography로 가독성을 유지합니다. 독특함 : 가장 대중적인 사용자 인터페이스 디자인 중 하나이므로 카드를 사용할 때 눈에 띄어야 합니다. 여기에는 비디오 추가, 애니메이션 효과 또는 새로운 색 구성표가 포함될 수 있습니다. 이에 대해서는 아래에서 더 논의하겠습니다. 일관된 그리드 : 중단점을 활용하고 다양한 카드 크기를 존중하면서 그리드가 카드 사이에 동일한 간격을 갖도록 합니다. Fitt의 법칙 적용 : Fitt의 법칙에 대한 자세한 설명은 Interaction Design Best Practices 가이드를 확인하세요 . 카드에 적용하면 이미지나 텍스트 만 클릭하는 것이 아니라 카드 전체 를 클릭할 수 있습니다. 이것은 사용자 상호 작용을 단순화합니다. 카드 UI 디자인이 작아질수록 작업이 더 어려워질 것입니다. 따라서 사용자에게 메시지를 전달하기 위해 디자인의 기본을 적절하게 적용하는 것이 필수적입니다. 카드 개인화 사용자 인터페이스 카드 디자인의 주요 이점 중 하나로서 개인화 전략을 활용하는 방법을 아는 것이 중요합니다. 예를 들어 특정 카드의 크기를 변경할 수 있습니다. 이는 표시하려는 콘텐츠의 양이나 목표가 한 카드를 다른 카드보다 우선시하는 것인지 여부에 따라 달라질 수 있습니다. 카드 UI 패턴을 축소하거나 확장하여 표시할 정보의 양을 지정할 수 있습니다. 텍스트 또는 이미지만 표시할지 여부, 특정 요소의 크기 및 기타 여러 변형을 제어할 수도 있습니다. 이것은 레이아웃의 전반적인 개인 스타일에 큰 영향을 미칩니다. 또한 많은 디자이너가 자신의 카드에서 애니메이션을 사용하는 것을 선택한다는 것을 알게 될 것입니다. 종종 애니메이션은 사용자가 카드 위에 커서를 놓을 때만 발생하며 이는 카드가 클릭 가능한 기능임을 사용자에게 알려줍니다. 일부 사이트에서는 사용자가 직접 카드 UI를 조작할 수 있도록 허용하기도 합니다. 이것은 일반적으로 모바일 웹사이트의 옵션일 뿐이지만 데스크톱 사이트는 점점 더 많은 기능을 제공하고 있습니다. 사용자는 스스로 카드를 이동하거나 페이지를 보다 쉽게 ​​탐색할 수 있도록 다양한 디자인을 서로 쌓을 수 있습니다. 실행 중인 카드 디자인 UI 다음은 다음 프로젝트를 위한 5가지 카드 UI 팁과 디자인 영감입니다. 1. 시각적 계층 구조 만들기 카드 디자인의 첫 번째 단계는 시각적 계층 구조를 만드는 것입니다. 가장 중요한 콘텐츠는 무엇입니까? 가장 중요한 콘텐츠가 가능한 높거나 큰 카드를 구성하는 것이 좋습니다. 색상, 공백 및 글꼴도 분리 및 계층 구조를 만드는 데 효과적입니다. 예를 들어, 대부분의 제품 카드에는 크고 매력적인 이미지가 있으며 제목과 CTA가 뒤따릅니다. 가격은 조금 더 저렴하지만 시선을 사로잡는 이미지와 주변 여백이 가까워 고객이 카드를 스캔할 때 눈에 띕니다. 이 정보는 사용자가 조치를 취하도록 유도할 가능성이 가장 높습니다. 장바구니 항목의 카드 디자인 UI 2. 콘텐츠 최소화 콘텐츠가 너무 많으면 카드가 지저분해지고 인지 부하 가 ​​증가 합니다. 디자이너는 UI 요소를 줄여야 하며 가장 중요한 것은 텍스트를 최소화해야 합니다. UX 디자이너 인 Andrew Coyle은 이 기사 에서 "카드는 사용자가 추가 참여 여부를 결정하는 데 도움이 되는 충분한 정보를 제공해야 합니다."라고 말했습니다. Andrew는 텍스트를 최대 100자 또는 3줄로 줄이는 것이 어떻게 더 쉽게 소화할 수 있는 깔끔한 미학을 만드는지 보여줍니다. 카드 UI 콘텐츠 최소화 3. 행동을 구별하라 Andrew Coyle의 또 다른 훌륭한 팁은 기본 작업과 보조 작업을 명확하게 구분하는 것입니다. 가장 좋은 방법은 Andrew의 예에 표시된 대로 기본 작업에 채워진 버튼을 사용하고 보조 작업에 텍스트 또는 플랫 버튼을 사용하는 것입니다. 카드 디자인 UI의 모범 사례 Material Design은 대부분의 카드를 클릭할 수 있고 CTA가 필요하지 않기 때문에 기본 작업을 카드 자체로 호출합니다. 추가 작업은 아래와 같이 버튼과 아이콘을 포함하여 카드 바닥글에 속합니다. 머티리얼 디자인 카드 디자인 UI 두 개 이상의 추가 작업이 있는 경우 머티리얼 디자인에서는 오버플로 메뉴를 사용하여 카드를 깨끗하고 깔끔하게 유지하도록 권장합니다. 또 다른 머티리얼 디자인 카드 디자인 UI 4. 반응형 카드 레이아웃 만들기 카드의 가장 중요한 이점 중 하나는 반응성입니다. 디자이너는 여러 뷰포트에서 비교 사용자 경험을 쉽게 만들 수 있습니다. 핵심은 데스크탑, 태블릿 및 모바일 장치에 맞게 카드의 크기를 조정하고 정렬하면서 시각적 계층 구조를 유지하는 것입니다. Material Design의 이 예 는 동일한 카드의 모바일 및 데스크탑/대형 태블릿 버전을 보여줍니다. 이미지, 제목 및 클릭 유도문안이 두 디자인 모두에서 어떻게 눈길을 사로잡는지 주목하십시오. 머티리얼 디자인의 카드 디자인 UI 예 5. 카드당 하나의 스와이프 제스처 사용 스와이프 제스처를 사용하면 디자이너가 작업을 숨길 수 있으므로 카드를 깨끗하고 최소화할 수 있습니다. 여러 제스처(이미지 캐러셀 포함)는 혼란과 사용성/접근성 문제를 일으킬 수 있습니다. Material Design의 이 예는 특히 인지 및 손재주 장애가 있는 사용자에게 여러 제스처가 어떻게 혼란을 야기하는지 보여줍니다. UXPin 병합으로 카드 프로토타이핑 UXPin Merge 를 사용하면 설계 팀은 리포지토리에서 UI 구성 요소 라이브러리를 가져와서 엔지니어가 최종 제품을 개발하는 데 사용하는 카드를 포함한 동일한 대화형 구성 요소를 사용하여 프로토타입 및 테스트할 수 있습니다. 병합 카드에는 반응형 레이아웃, 버튼, 타이포그래피, 색상, 이미지, 아이콘, 상호 작용 및 디자인 시스템에서 정의한 기타 속성이 포함되어 있어 디자이너 가 처음부터 카드를 디자인하는 시간 소모적인 작업을 피할 수 있도록 UI 구축 및 테스트에 집중할 수 있습니다 . 디자이너는 UXPin 패턴 을 사용하여 정적 UI 요소와 기타 병합 구성 요소를 결합하여 새 카드를 만들고 디자인 시스템으로 승격할 수 있습니다. 패턴은 여러 카드 상태를 생성하는 데도 유용하므로 사용자 테스트 또는 이해 관계자 회의 중에 빠르게 변경할 수 있습니다. UXPin Merge 를 사용한 구성 요소 기반 프로토타이핑이 카드 디자인을 개선하여 고객에게 더 나은 사용자 경험을 제공하는 방법을 알아보십시오. 액세스를 요청하는 방법을 알아보려면 병합 페이지를 방문하십시오 .