카드 컴포넌트, 이렇게 써보셨나요?
카드의 종류와 사용방법
카드의 구성
카드(Card)는 텍스트, 이미지, 버튼 등의 콘텐츠를 하나의 컨테이너에 묶어 시각적으로 구분하고, 사용자가 특정 작업이나 정보를 쉽게 인식하고 상호작용할 수 있도록 설계된 컴포넌트입니다.
필수 요소
➊ Container (컨테이너)
부가 요소 예시
➋ Image (이미지)
➌ Button (버튼)
➍ Headline (타이틀)
➎ Subhead (서브 타이틀)
➏ Supporting text (본문)
카드는 컨테이너만을 필수로 하며, 텍스트, 이미지, 버튼 등의 내부 콘텐츠나 컴포넌트도 선택적으로 추가할 수 있습니다. 카드 컴포넌트는 자유도가 높지만 그만큼 인터랙션의 방식이 다양하므로, 다양한 카드의 종류와 사용방법에 대해 자세히 알아보겠습니다.
카드의 종류
카드는 컨테이너의 표현 방식에 따라 3가지의 종류로 분류할 수 있습니다.
➊ Elevated Card (입체 카드)
➋ Filled Card (단색 카드)
➌ Oulined Card (아웃라인 카드)
카드의 사용방법
카드의 사용방법을 이어서 알아보도록 하겠습니다.
카드를 사용해 단일 주제에 대한 콘텐츠와 작업을 표시합니다. 카드는 관련성 있고 실행 가능한 정보를 쉽게 인식할 수 있어야 합니다.
카드는 그리드, 캐러셀, 리스트로 표시될 수 있습니다. 더 간단한 계층구조를 만들 수 있는 경우 콘텐츠를 강제로 카드에 집어넣을 필요가 없습니다.
컨테이너는 모든 카드 요소를 담으며, 크기는 해당 요소가 차지하는 공간에 따라 결정됩니다. 컨테이너만이 카드의 유일한 필수 요소이며, 다른 모든 요소는 선택 사항입니다.
디바이더
디바이더는 카드의 영역을 구분하거나 확장 가능한 영역을 나타내는 데 사용할 수 있습니다.
미디어
카드에는 아바타, 로고 썸네일 / 사진, 일러스트, 날씨 아이콘 등의 기타 그래픽 / 영상 등이 포함될 수 있습니다.
텍스트
타이틀은 사진 앨범이나 기사의 제목 등 카드의 주제를 전달합니다. 서브 타이틀은 기사 소제목이나 태그가 달린 위치와 같이 더 작은 텍스트 요소입니다. 본문 텍스트는 기사 요약이나 설명과 같은 본문 내용이 포함됩니다.
이미지 레이어링
이미지에 텍스트나 아이콘을 배치하는 것은 권장되지 않습니다. 그렇게 해야 할 경우 배경으로 사용된 이미지가 텍스트 접근성 표준을 충족하도록 충분한 대비를 제공하는지 확인해야 합니다.
텍스트나 아이콘 아래에 반투명한 스크림이나 경계를 추가하면 적절한 대비를 주는데 도움이 됩니다.
컬렉션 분류
여러 카드는 그리드, 리스트 또는 캐러셀 형태로 표시되는 컬렉션으로 그룹화할 수 있습니다.
컬렉션 고려사항
기본적으로 컬렉션 내의 카드는 동일한 평면에 위치하며, 선택되거나 드래그되지 않는 한 동일한 높이를 가집니다. 카드 컬렉션은 인식 방식에 영향을 미치므로, 사용하기 쉬운 방식으로 정렬해야 합니다.
작은 스크린
작은 스크린에서는 카드를 리스트로 바꾸는 것을 고려해야 합니다. 리스트는 이미지와 텍스트를 더 컴팩트한 형태로 표시할 수 있습니다. 컨트롤, 동작 및 기타 구성요소가 유지되는지 확인해야 합니다.
마이크로인터랙션
기본적인 지침 외의 마이크로인터랙션을 알아보겠습니다.
확장
카드는 컨테이너 변환 전환 패턴을 사용하여 추가 콘텐츠를 표시할 수 있습니다. 이 패턴은 표현력을 강조해야 하는 중요한 순간에만 사용해야 합니다.
정보를 표시하기 위해 카드를 확장할 수 있지만, 카드 내에서의 스크롤은 피해야 합니다.
스와이프
스와이프 제스처는 한 번에 한 장의 카드에서, 해당 카드의 어디에서나 수행할 수 있습니다. 카드를 닫거나 카드의 상태를 변경(북마크, 저장 등)하는 용도로 사용할 수 있습니다.
카드에는 스와이프 할 수 있는 캐러셀과 같은 콘텐츠가 포함되어서는 안 됩니다. 또한 스와이프 제스처는 카드의 일부가 분리되는 동작을 일으켜서는 안 됩니다.
스크롤링
카드 내용이 최대 카드 높이보다 클 경우, 내용은 잘리며 스크롤되지 않지만 카드의 높이를 확장하여 표시할 수 있습니다. 카드가 화면의 최대 높이를 초과할 수 있으며, 이 경우 카드는 화면 내에서 스크롤됩니다.
모바일 기기에서 카드는 더 많은 콘텐츠를 표시하기 위해 확장할 수 있으며, 화면 내에서 스크롤됩니다. 카드 내의 콘텐츠는 스크롤되지 않습니다. 모바일 기기에서 카드는 내부적으로 스크롤할 수 없으며, 이는 두 개의 스크롤바가 표시될 수 있기 때문입니다.
마치며
카드는 내부에 다양한 종류의 컴포넌트를 포함할 수 있기 때문에, 자유도가 높은 동시에 고려사항이 많은 컴포넌트입니다. 표현하고자 하는 카드의 형태와 고려사항을 파악한다면, 정보를 더욱 효율적으로 전달하고 직관적인 인터페이스를 제작할 수 있습니다.
그러나 너무 많은 콘텐츠를 표시하거나, 인터랙션이 너무 복잡하지 않도록 고려할 필요가 있습니다. 또한 카드로 만들지 않아도 구성이 가능한 요소는 리스트 등의 컴포넌트로 표현해야 함을 염두에 두시면 좋을 것 같습니다.
카드에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다!
