Scott
카드는 관련 항목을 훑어본 뒤 하나를 열거나 저장하거나 비교하거나 작업해야 할 때 유용합니다. 모든 콘텐츠를 둥근 사각형 안에 넣어도 된다는 뜻은 아닙니다. 좋은 카드는 각 항목의 정체성과 예측 가능한 읽기 순서, 분명한 다음 단계를 제공합니다.
Pixso에서 카드 컴포넌트를 설계할 때는 그림자나 모서리 반경을 다듬기 전에 콘텐츠 계층과 반응형 상태를 먼저 정하세요. 이미지가 없거나 제목이 줄바꿈되거나 작업을 사용할 수 없는 상황에서도 같은 카드가 스스로 설명되어야 합니다.
카드가 지원하는 결정을 먼저 정의하기
카드의 역할을 한 문장으로 적어 보세요. “독자가 템플릿을 비교하도록 돕기”, “팀원이 파일을 열도록 하기”, “작업에 주의가 필요한지 보여 주기”처럼 작성합니다. 문장에 서로 관련 없는 작업이 여러 개 들어간다면 패턴을 나누세요. 콘텐츠 카드, 선택 가능한 결과, 작업 가능한 대시보드 타일은 같은 표면을 공유할 수 있지만 같은 상호작용 계약을 공유하지는 않습니다.
읽기 쉬운 계층 만들기
시선이 따라갈 안정적인 경로를 만드세요. 먼저 정체성, 다음에 유용한 맥락, 마지막에 작업을 배치합니다. 일반적인 카드에는 이미지나 아이콘, 짧은 제목, 보조 문장 하나, 소유자나 날짜 같은 메타데이터, 기본 작업 하나가 들어갈 수 있습니다. 모든 줄을 굵게 만들지 마세요. 무게와 간격으로 선택에 필요한 정보와 도움만 되는 정보를 구분해야 합니다.
- 정체성: 주변 항목과 구별되는 제목을 사용합니다.
- 맥락: 상태, 형식, 최근 업데이트처럼 결정에 영향을 주는 메타데이터만 추가합니다.
- 작업: 다음 단계를 명시합니다. 전체 표면이 클릭 가능하지만 포커스나 호버 상태가 그 동작을 설명하지 않는 카드는 피하세요.
알맞은 카드 패턴 선택하기
많은 항목을 빠르게 비교한다면 컴팩트한 행을 사용하세요. 이미지가 의미를 전달할 때는 미디어 카드를 사용하되, 제목을 화면 아래로 밀어내는 장식으로 이미지를 쓰지는 마세요. 상태나 추세가 주요 답이라면 상태 카드를 사용합니다. 작업 카드에는 그 작업이 카드의 존재 이유일 때만 사용하세요. 긴 설명이 필요하다면 글자를 줄여 카드를 문단처럼 만들지 말고 상세 화면으로 연결합니다.
| 패턴 | 적합한 경우 | 주의할 점 |
|---|---|---|
| 컴팩트 행 | 빠른 스캔과 비교 | 조밀한 메타데이터가 제목을 가림 |
| 미디어 카드 | 시각적 예시와 템플릿 | 유용한 대체 텍스트가 없거나 높이가 고정된 이미지 |
| 상태 카드 | 진행, 소유권, 위험 표시 | 색상만으로 상태를 표현하거나 값이 오래됨 |
| 작업 카드 | 집중된 다음 단계 | 서로 경쟁하는 여러 버튼 |
실제 콘텐츠의 변화를 고려하기
짧은 제목, 두 줄로 줄바꿈되는 제목, 누락된 메타데이터, 긴 현지화 레이블, 이미지 로드 실패를 각각 하나 이상 테스트하세요. 의미를 보존하는 경우에만 제목에 합리적인 최대 길이를 적용하고, 그렇지 않으면 카드가 늘어나게 하거나 전체 텍스트를 상세 화면으로 옮깁니다. 카드 밖에서도 이해할 수 있을 만큼 작업 레이블을 구체적으로 작성하세요. “보기”보다 “프로젝트 열기”가 안전합니다.
반응형 상태를 명시적으로 설계하기
넓은 화면에서는 그리드에 여러 카드를 한 번에 배치할 수 있습니다. 좁은 화면에서는 글자를 읽기 어렵게 줄이기 전에 열 수를 줄이세요. 정체성과 기본 작업은 유지하고 보조 메타데이터는 숨기거나 옮깁니다. 카드가 가로 행으로 바뀌더라도 터치 영역과 읽기 순서를 일관되게 유지하세요. 각 중단점에서 키보드 포커스, 터치 대상, 스크린 리더 이름을 확인하세요. 시각적 그리드만으로는 반응형 사양이 완성되지 않습니다.
로딩, 빈 상태, 오류 상태를 모델링하기
요청이 성공한 뒤에만 나타나는 카드에도 다른 결과를 위한 계획이 필요합니다. 로딩 상태는 대략적인 형태를 유지하되 콘텐츠가 준비된 것처럼 보이지 않게 합니다. 빈 상태는 무엇이 없는지 설명하고 유용한 다음 단계를 제시해야 합니다. 오류 상태는 무엇이 실패했는지와 주변 맥락을 잃지 않고 재시도하는 방법을 알려야 합니다. 이런 상태를 같은 컴포넌트 세트에 넣어 마지막에 덧붙이는 것이 아니라 패턴의 일부로 검토하세요.
기본 작업 하나를 사용하기
가능한 모든 작업을 한꺼번에 노출하면 카드가 복잡해집니다. 기본 작업 하나를 선택하고 드물게 쓰는 작업은 이름이 분명한 오버플로 메뉴로 옮기세요. 카드 자체가 링크라면 특별한 이유 없이 내부에 여러 링크를 중첩하지 마세요. 중첩된 대상은 키보드와 터치 동작을 예측하기 어렵게 합니다. 파괴적인 작업은 결과를 설명하며 확인하고, 되돌릴 수 있는 작업에는 복구 방법을 제공하세요.
재사용하기 전에 패턴 검토하기
카드를 새 페이지에 추가하기 전에 기존 컴포넌트와 작업, 콘텐츠 밀도, 상태, 반응형 동작을 비교하세요. 공유 컴포넌트는 반복되는 결정을 쉽게 만들어야 하며 관련 없는 콘텐츠를 하나의 템플릿에 억지로 넣어서는 안 됩니다. 선택한 구조와 상호작용 상태를 Pixso에 기록하고 핵심 화면을 프로토타입으로 연결한 뒤 구현 전에 팀과 검토를 공유하세요.
