카드 해부

정의

카드(card)는 서로 관련 있는 정보를 하나의 면 위에 모아 담는 그릇입니다. 보통 맨 위에 이미지나 미디어가 오고, 그 아래로 제목을 담은 헤더, 설명을 담은 본문, 그리고 버튼이나 링크 같은 액션이 차례로 놓입니다. 이 여러 조각을 하나의 표면으로 묶어 주는 것이 카드의 역할이라, 사용자는 카드 하나를 곧 하나의 완결된 단위로 받아들입니다. 이때 안쪽 패딩, 조각 사이의 gap, 모서리 둥글기, 그리고 그림자를 어떻게 주느냐에 따라 같은 내용이라도 담백한 카드가 되기도, 화려한 카드가 되기도 합니다.

왜 중요한가

카드가 중요한 이유는 흩어진 정보를 사용자가 한 덩어리로 인식하게 만들어 주기 때문입니다. 제목과 이미지와 버튼이 각각 따로 놓여 있으면 사용자는 이것들이 한 묶음인지 스스로 추측해야 하지만, 하나의 카드 안에 담기면 별다른 설명 없이도 관련 있는 정보임을 즉시 이해합니다. 특히 카드는 목록이나 그리드 안에서 수십 개가 반복되는 경우가 많습니다. 이때 카드마다 패딩이나 gap, 둥글기가 조금씩 다르면 나란히 놓였을 때 미세하게 어긋나 보여 전체가 지저분해집니다. 반대로 모든 카드가 같은 규칙으로 만들어지면, 수십 개가 늘어서도 화면이 차분하고 정돈된 리듬을 유지합니다. 그래서 카드는 값의 통일이 특히 중요한 요소입니다.

흔한 실수

• 카드마다 안쪽 패딩을 제각각 주는 것입니다. 어떤 카드는 넉넉하고 어떤 카드는 빡빡하면, 목록에서 여러 카드가 나란히 놓였을 때 높이와 여백이 들쭉날쭉해 보여 전체가 어수선해집니다.
• 한 카드 안에 너무 많은 정보와 액션을 욱여넣는 것입니다. 카드는 하나의 단위여야 하는데 버튼이 여러 개 들어가고 내용이 길어지면, 사용자는 이 카드가 무엇에 대한 것인지, 무엇을 해야 하는지 한눈에 파악하기 어려워집니다.
• 카드 전체를 진한 테두리와 짙은 그림자로 이중으로 감싸는 것입니다. 경계를 만드는 수단을 겹쳐 쓰면 카드가 무거워 보이고, 목록에 여러 개가 놓였을 때 화면이 답답한 상자들로 가득 차 보입니다. 둘 중 하나만 은은하게 쓰는 편이 낫습니다.

실무 팁

• 카드의 안쪽 패딩과 요소 사이 gap을 정해진 간격 스케일에 맞춰 고정하세요. 값을 통일해 두면 카드 여러 개가 나란히 놓여도 서로 어긋나지 않고 깔끔하게 정렬됩니다. 이 규칙은 재사용 가능한 컴포넌트로 만들어 두면 더욱 효과적입니다.
• 카드의 성격은 둥글기와 그림자로 조절하세요. 각지고 그림자 없는 카드는 담백하고 진지하게, 둥글고 옅은 그림자가 있는 카드는 부드럽고 떠 있는 느낌을 줍니다. 제품 전체에서 이 조합을 하나로 통일하는 것이 좋습니다.
• 카드 안의 정보는 위에서부터 미디어, 제목, 본문, 액션의 순서로 위계를 지켜 배치해, 사용자의 시선이 자연스럽게 위에서 아래로 흐르도록 하세요. 이 순서를 모든 카드에서 똑같이 지키면 사용자가 매번 어디를 봐야 할지 다시 익힐 필요가 없습니다.

관련 개념