UI 카드 디자인을 위한 8가지 모범사례

 

카드는 논리적으로 관련된 정보를 시각적으로 구분되는 그룹으로 만드는 UI 구성 요소입니다. 일반적으로 헤드라인, 결과 페이지의 내용을 요약한 짧은 설명, 이미지, 버튼 또는 '콜투액션'(선택 사항)으로 구성됩니다.

 

기본 카드 구조

 

UI 카드는 어디에 사용할 수 있나요?

1. 제품 카탈로그 페이지

아마존, 알리바바, 월마트, 이베이와 같은 대형 전자상거래 웹사이트에서는 각 제품 항목을 표현하기 위해 카드 구성 요소를 사용합니다. 일반적으로 제품 카드는 제품 이미지, 제목, 가격, 할인, 그리고 이를 클릭하면 제품 세부 정보 페이지로 이동하는 '콜투액션'으로 구성됩니다.

 

아마존(위) 및 알리바바(아래)

 

 

eBay(위) 및 Walmart(아래)

 

 

2. 콘텐츠 사이트(뉴스 기사, 소셜 미디어 플랫폼)

카드 기반 레이아웃을 사용하여 각 기사를 비슷한 방식으로 표현함으로써 사용자가 빠르게 스캔하고 비교하여 읽거나 시청할 내용을 선택할 수 있도록 합니다.

 

Behance (위) 및 Dribbble (아래)

 

 

CNN(위) 및 BBC(아래)

 

 

3. 대시보드 시각화

대시보드는 사용자가 인터페이스에서 데이터를 쉽게 비교하고 분석할 수 있는 방식으로 관련 정보를 그룹화하는 데 카드를 사용할 수 있는 좋은 예입니다.

 

Mixpane(위쪽) 및 Dribbble(아래쪽)

 

 

4. 컬렉션 사이트

큰 이미지가 포함된 카드 기반 레이아웃이 사용자의 시선을 사로잡기 때문에 Pinterest나 Unsplash와 같은 방대한 컬렉션에서 검색과 탐색은 재미있고 매력적인 경험입니다. 그렇기 때문에 웹과 모바일 환경에서 탐색용 카드를 구현하는 것이 인기를 얻게 되었습니다.

 

Pinterest(위) 및 Unsplash(아래)

 

 

5. 협업 도구

카드는 다양한 유형의 정보와 하위 구성 요소를 결합할 수 있는 유연한 구성 요소입니다. 예를 들어 Figma, Miro, Framer와 같은 도구는 카드를 사용하여 프로젝트와 파일을 표시합니다. 이러한 유형의 카드는 깔끔하고 대화형이며 기능이 뛰어나므로 카드를 마우스 오른쪽 버튼으로 클릭하면 파일 관련 작업에 쉽게 액세스할 수 있습니다.

 

 

Figma와 Miro

 

 

모범 사례

카드 디자인에 영감을 줄 수 있는 많은 가이드라인과 디자인 라이브러리가 있지만, 그 중 눈에 띄지 않는 것들을 강조하고 싶었습니다. 이 컬렉션이 여러분에게 유용하고 흥미로운 자료가 되길 바랍니다!

 

1. 카드와 배경의 대비를 잘 만드세요.

카드와 배경을 더 잘 구분하기 위해 테두리를 추가하여 윤곽선을 만들거나 그림자를 추가하여 높이를 높일 수 있습니다.

 

 

 

2. 글꼴 크기를 균형 있게 유지하고 너무 작은 글꼴을 사용하지 않도록 노력합니다.

콘텐츠 가독성은 선택한 글꼴과 적용된 글꼴 크기에 의해 정의됩니다. 아래 예시에서는 두 카드가 거의 동일하게 보이지만 글꼴 크기가 올바르게 선택되어 전체 카드가 시각적으로 균형이 잡히고 사람의 눈에 더 보기 좋기 때문에 올바른 카드를 훨씬 쉽게 인식할 수 있습니다.

 

 

시각적 계층 구조를 유지하는 데 도움이 되는 글꼴 크기에 대한 몇 가지 팁!

 

• 헤드라인의 경우, 카드 크기와 상황에 따라 20px - 96px 이상의 글꼴 크기를 사용합니다.
• 부제목/부제목은 쉽게 구분할 수 있도록 메인 헤드라인/제목보다 2픽셀~10픽셀 작아야 합니다.
• 본문 텍스트의 경우 글꼴 크기는 16px 이상이어야 합니다. 경우에 따라 글자가 큰 특정 글꼴을 사용하는 경우 더 작게 할 수 있습니다. 예를 들어, Google 머티리얼 가이드라인에서는 본문 텍스트 크기가 14px와 16px로 두 가지 정의되어 있습니다.
• 버튼 레이블의 경우 글꼴 크기는 본문 글꼴 크기보다 작아서는 안 됩니다. 여러 옵션을 표시해야 하는 경우 기본 작업에는 더 눈에 잘 띄는 글꼴 스타일(반굵은/굵은)을 사용하고 보조 작업에는 덜 눈에 띄는 글꼴 스타일(일반/중간)을 사용합니다.
• 글꼴 크기 수를 제한하려면 Figma 플러그인 글꼴 눈금 또는 웹 도구와 같은 글꼴 눈금 도구를 사용하여 글꼴 눈금을 정의할 수 있습니다.

 

3. 패딩을 위한 간격 시스템을 만듭니다.

패딩은 UI 요소 사이의 공백으로, 시각적 그룹을 만들고 계층 구조를 유지하는 데 도움이 됩니다. 디자인에서 혼란을 피하고 일관성을 유지하려면 개발자의 핸드오프에도 유용한 간격 시스템을 정의해야 합니다.

 

 

간격 시스템에 대한 몇 가지 팁을 더 알려드립니다!

 

• UI 요소 사이의 간격에 대한 간격 값을 증가시키는 데 사용할 기본 단위를 선택합니다. 일반적으로 기본 단위는 4px(0.25렘)입니다. 1.5배 DPI(인치당 도트 수)를 사용하는 디바이스에서는 간격이 7.5px까지 확대되어 흐릿한 결과를 초래하므로 5px와 같은 홀수를 사용하는 것은 좋지 않습니다.
• 예를 들어 테일윈드 라이브러리에 정의된 것처럼 기본 단위를 증분 또는 곱하기 숫자로 사용하여 간격 값의 제한된 수를 정의하세요.
• Figma Pro 팁: “큰 넛지” 양을 10px에서 8px로 변경하면 Shift 키와 화살표 키를 눌러 컴포넌트를 8px 값(정의된 기본 단위보다 2배 더 큰 값)으로 이동할 수 있습니다. 시간을 매우 절약할 수 있습니다!

 

4. 가능한 한 콘텐츠 레이아웃과 유사한 로딩 상태를 디자인하세요.

앱의 레이아웃 스타일과 일치하는 스켈레톤 상태는 로드된 콘텐츠에 대한 사용자의 불확실성을 줄이는 데 도움이 됩니다. 아래에서 오른쪽의 로딩 상태가 예상되는 콘텐츠 유형을 더 잘 전달하는 방법을 확인할 수 있습니다.

 

 

피그마 및 비메오

 

 

5. 카드의 고정 높이를 정의합니다.

한 카드에는 4줄의 텍스트가 있고 다른 카드에는 1줄의 텍스트가 있다고 가정하여 카드 요소를 디자인해야 하는 경우가 있습니다. 카드 디자인에 접근하는 가장 좋은 방법은 콘텐츠가 적은 카드에는 공백을 남겨두고 콘텐츠가 많은 카드에는 텍스트를 잘라내는 방식으로 하나의 높이를 정의하는 것입니다.

 

 

 

6. 카드 기반 레이아웃에 그리드 사용. 

그리드는 카드 기반 레이아웃의 기초이며 콘텐츠를 일관성 있게 정렬하는 데 도움이 되므로 카드 디자인에 매우 유용합니다. 그리드를 사용하여 카드의 너비를 필요한 그리드 열 수만큼 확장할 수 있으며, 이를 통해 카드에 적합한 너비를 찾을 수 있습니다. 반응형 디자인의 경우 각 중단점에 대해 그리드를 만들고 그에 따라 카드를 정렬해야 합니다.

 

(1) 데스크톱, (2) 태블릿, (3) 모바일

 

 

반응형 카드 기반 레이아웃을 디자인할 때 스스로에게 물어볼 질문:

• 카드 콘텐츠가 모든 중단점에서 일관되게 보이는가? (데스크톱, 태블릿, 모바일)
• 간격의 간격 값이 일관성이 있는가?
• 인터랙션을 고려하고 있는가? 카드의 크기와 카드 사이의 간격에 영향을 주는가?
• 긴 제목/제목을 고려하나요? 카드의 콘텐츠에 어떤 영향을 미치는가?

 

카드 기반 레이아웃을 위한 몇 가지 Figma 팁:

• 카드에 대한 제약 조건을 정의하여 프레임 크기를 조정할 때 레이아웃의 카드가 어떻게 반응해야 하는지 결정하세요.
• 카드에 자동 레이아웃을 적용하여 내부 항목에 따라 카드 크기가 자동으로 조정되도록 하세요. 
• 8px 그리드를 만들면 디자인에서 8px 단위로 요소를 정밀하게 배열하고 크기를 조정할 수 있습니다.

 

 

7. 다양한 콘텐츠로 카드 디자인 만들기.

카드의 콘텐츠 길이가 다를 수 있다는 것을 미리 알고 있다면 이 경우를 디자인에 포함시켜야 합니다. 이렇게 하면 개발자가 올바른 방식으로 카드의 코드를 작성하고 콘텐츠 정렬이 깨지는 것을 방지하는 데 도움이 됩니다.

 

 

 

 

 

 

8. 더 나은 사용자 경험을 위해 카드 상호 작용을 정의합니다.

UI 상호 작용은 사용자가 터치 스크린, 마우스 또는 키보드 장치를 통해 UI 요소와 상호 작용할 때 발생하는 동작입니다. 상태는 특정 사용자의 상호 작용에 표시되는 시각적 피드백입니다.

 

 

 

다른 많은 UI 요소(버튼, 텍스트 필드, 드롭다운 등)와 마찬가지로 카드도 사용 컨텍스트 및 정의된 상호 작용에 따라 상태가 달라져야 합니다. 특정 인터랙션의 경우 적용된 상태에 따라 카드의 스타일을 지정해야 합니다. 가장 일반적인 카드 상태 목록을 살펴봅시다.

 

• 기본값: 카드가 사용자 상호 작용이 없는 일반 상태입니다.
• 호버: 사용자가 카드 위에 마우스 커서(포인터)를 놓은 경우.
• 활성: 카드를 클릭할 수 있고 사용자가 마우스 기본 버튼을 눌러 카드를 클릭하면 카드의 스타일이 변경되어 컴포넌트가 활성화되었음을 표시해야 합니다. 이 상태는 눌린 버튼과 동일한 상태입니다.
• 집중됨: 키보드나 음성 등의 입력 방법을 사용할 때 카드가 강조 표시됩니다. 일반적으로 웹에서는 파란색이 이 상태에 사용되지만 브랜드와 일치하는 색상을 직접 선택할 수 있으며, 배경색과 대비 비율이 3:1 이상이어야 합니다.
• 선택됨: 선택 컨트롤(라디오 버튼/체크박스)을 클릭하여 카드를 선택한 경우입니다.
• 드래그: 사용자가 탭이나 클릭과 같은 입력 방법을 사용하여 카드를 길게 누른 경우.

 

UI 카드는 대부분의 웹 및 모바일 애플리케이션에서 볼 수 있는 일반적인 구성 요소이므로 서로 배우고 모범 사례를 공유함으로써 시각적으로 더 매력적이고 효과적이며 접근하기 쉽게 만들 수 있습니다.

 

 

출처:

https://uxdesign.cc/8-best-practices-for-ui-card-design-898f45bb60cc