카드

목록을 보여 주는 방법은 오랫동안 한 줄에 한 건을 적는 것뿐이었습니다. 이름과 날짜와 상태처럼 짧은 값만 늘어놓을 때는 그 방식이 가장 빠릅니다. 그런데 한 건에 붙은 정보가 늘어나면서 문제가 생겼습니다. 표지 이미지, 제목, 두 줄짜리 설명, 함께 보는 사람들의 얼굴, 공유 버튼이 한 건에 딸리면 한 줄에 욱여넣을 수가 없습니다.

좁은 화면에서는 더 분명해졌습니다. 열이 여섯 개인 표를 휴대폰에서 열면 가로로 밀어야 나머지가 보이고, 밀고 나면 어느 행을 보고 있었는지 잃어버립니다. 사람들은 표를 밀어 보는 대신 아무 줄이나 눌렀고, 목록 화면의 일인 고르기가 작동하지 않았습니다.

카드는 이 상황에서 가로로 늘어놓던 정보를 세로로 세운 것입니다. 한 건에 딸린 것들을 한 상자에 담아 두면 그 상자 하나가 화면 어디에 놓여도 내용이 온전합니다. 넓은 화면에서는 넷을 나란히 놓고 좁은 화면에서는 하나씩 쌓아도 각 건의 안쪽 구성은 그대로입니다. 화면 크기에 따라 배치가 유연하게 바뀌는 반응형 디자인이 자리 잡으면서 이 성질이 특히 쓸모 있어졌습니다.

한 대상에 딸린 요소들을 테두리나 그림자로 구분된 영역 하나에 넣고, 그 영역 전체를 하나의 단위로 다룹니다.

안에 들어가는 것은 보통 다섯 자리로 정해집니다.

1. 경계 — 옅은 테두리, 얕은 그림자, 또는 배경색 차이로 만듭니다. 셋을 다 쓰면 카드가 화면에서 떠 보이니 대개 하나면 충분합니다.
2. 대표 이미지나 아이콘 — 맨 위나 왼쪽에 놓습니다. 없는 건은 그 자리를 회색 면으로 채워 높이를 맞춥니다. 비워 두면 격자가 어긋납니다.
3. 제목 — 이 카드가 무엇인지 알려 주는 한 줄입니다. 카드에서 유일하게 반드시 있어야 하는 요소입니다.
4. 보조 정보 — 날짜, 작성자, 상태 같은 값입니다. 두세 개를 넘기면 제목이 묻힙니다. 크기와 대비로 먼저 볼 것을 정해 주는 시각적 위계가 여기서 걸립니다.
5. 동작 — 카드 전체를 누르게 하거나, 안에 버튼을 두거나, 둘을 섞습니다.

다섯 자리의 순서는 모든 카드에서 같아야 합니다. 스무 장이 깔린 화면에서 사람은 카드를 한 장씩 읽지 않고 같은 위치를 훑어 내려갑니다. 세 번째 카드만 제목이 이미지 위에 있으면 그 한 장 때문에 훑는 흐름이 끊깁니다.

바깥 배치는 열과 간격을 미리 정해 둔 그리드 시스템 위에 얹습니다. 1200픽셀 화면에서 네 열, 태블릿에서 두 열, 휴대폰에서 한 열로 접는 식입니다. 이때 바뀌는 것은 열 수뿐이고 카드 자체는 같은 모양으로 남습니다.

동작 자리도 걸립니다. 카드 전체를 누르면 상세로 가게 해 놓고 안에 공유 버튼을 두면, 공유를 누른 사람이 상세로 끌려갑니다. 버튼 쪽에서 바깥으로 눌림이 번지지 않게 막아야 합니다.

가장 흔한 자리는 각 건에 이미지나 상태가 붙는 목록 화면입니다. 문서 목록, 프로젝트 목록, 대시보드의 지표 묶음이 그렇습니다. 지표를 카드로 만들면 숫자 하나에 제목과 기간과 지난 기간 대비 변화를 함께 묶을 수 있습니다.

반대로 카드가 잘 안 맞는 자리도 분명합니다. 값끼리 견줘야 하면 테이블이 낫습니다. 스무 건의 금액 중 가장 큰 것을 찾는 일은 숫자가 한 열에 세로로 정렬돼 있을 때 몇 초면 끝나지만, 카드에 흩어져 있으면 한 장씩 읽어야 합니다. 건수가 많을 때도 불리합니다. 카드는 한 건이 차지하는 높이가 커서 백 건을 담으면 스크롤이 길어지고, 그래서 대개 페이지네이션이나 더 보기 버튼을 함께 답니다.

같은 구성 갈래의 다른 부품과는 맡는 일이 다릅니다. 탭은 같은 자리에서 내용을 갈아 끼우고 아코디언은 대부분 안 볼 내용을 접어 두지만, 카드는 여러 건을 동시에 펼쳐 놓고 고르게 합니다. 지금 화면에서 사용자가 할 일이 고르기인지 훑기인지 견주기인지가 선택을 가릅니다.

디자인 시스템에서는 카드를 한 벌만 만들고 안에 들어가는 내용을 바꿔 끼우는 방식으로 씁니다. 목록마다 따로 만들면 여백이 16픽셀인 카드와 20픽셀인 카드가 한 화면에 섞입니다.

"이 목록은 카드로 가죠. 썸네일이 있어야 어떤 문서인지 알아요."

한 줄짜리 목록으로는 담기지 않는 정보가 있다는 말입니다.

"카드 안에 버튼이 두 개면 전체 클릭은 빼는 게 맞습니다."

어디를 눌렀느냐에 따라 결과가 갈리는 상황을 만들지 말자는 뜻입니다.

"이건 카드 말고 테이블이 맞아요. 금액을 비교해야 하잖아요."

부품을 모양이 아니라 사용자가 할 일로 고르자는 말입니다.

페이지덱의 문서 목록 화면을 고치면서 민서가 처음 한 일은 카드 한 장에 들어갈 것을 줄이는 일이었습니다. 처음 시안에는 표지, 제목, 설명 두 줄, 수정한 사람, 수정 시각, 태그 세 개, 공유 버튼, 더보기 메뉴가 모두 들어 있었습니다. 넉 장을 나란히 놓고 보니 어느 것이 제목인지 한눈에 들어오지 않았습니다.

민서가 남긴 것은 표지와 제목과 수정 시각 셋이고, 나머지는 카드를 눌러 들어간 상세에 두었습니다. 목록 화면에서 고르는 데 필요한 정보는 셋이면 충분하다는 판단이었습니다. 태오가 카드 전체를 누르면 더보기 메뉴와 부딪힌다고 짚어, 더보기는 마우스를 올렸을 때만 나타나게 했습니다.

카드로 감싸면 화면이 정리된다고 읽는 경우가 가장 흔합니다. 흩어진 요소를 상자에 넣으면 실제로 그 안은 깔끔해 보이니 그렇게 믿기 쉽습니다. 하지만 카드는 묶는 도구지 정리하는 도구가 아닙니다. 화면의 모든 덩어리를 카드로 감싸면 경계선이 여덟 개 그어지고, 경계가 많아진 화면에서는 어느 것이 더 중요한지가 오히려 사라집니다.

카드를 모바일용 부품으로 아는 것도 잦습니다. 좁은 화면에서 표 대신 쓰이는 장면을 먼저 보기 때문입니다. 실은 화면 크기가 아니라 한 건에 붙은 정보의 종류가 기준입니다. 넓은 화면이라도 각 건에 이미지와 상태가 함께 붙으면 카드가 맞고, 좁은 화면이라도 이름과 금액 둘뿐이면 한 줄짜리 목록이 더 낫습니다. 기준을 화면 크기로 잡으면 모바일에서 카드 한 장이 화면을 가득 채우는데 정작 그 안에는 글자 두 줄만 들어 있는 화면이 나옵니다.