카드로 쌓은 집

아웃소싱을 하다 보면 클라이언트 측이 보내주는 시안에서는 유난히 카드가 많이 보이는 원인불명의 현상을 경험할 수 있습니다. 여기에 유난히 강렬한 배지, 알록달록한 아이콘까지 맞물리면 완벽한 클라이언트 디자인이 완성됩니다. 시안인 점은 고려 해야겠지만, 카드가 많이 사용되는 이유는 아리송하기만 합니다. 어쩌면 인터랙션 디자인 초심자에게 카드는 가장 디자이너스러운 요소로 보일지도 모릅니다. 아닌 게 아니라, 카드는 상당히 눈에 띄는 요소입니다. 디자이너라면 누구든 카드를 앞에 놓고 고민한 적이 있을 겁니다.

오늘의 이야기는 바로 이것입니다. 애정만 쏟기에는 어렵고, 무시만 하기에는 매력적인 디자인 소재, 카드에 대한 이야기입니다.

2D라는 사실은 중요하지 않습니다

허구는 가능성에 매달려야한다. 진상은 그렇지 않다.

- 마크 트웨인(Mark Twain, 작가)

명함, 서류, 도서. 모두 일상생활 속에서 넘기고 건네고 쓰고 읽는 것들입니다. 이 네모 납작한 물건들은 그냥 편해서 마냥 익숙합니다. 정보를 담고 저장하고 쓰는데 탁월한 효율을 발휘합니다.

이쯤에서 디자인 이야기를 해봅시다. 잉크와 pt의 세상이 아닌, 액정과 px의 세상에서 사는 폼, 버튼, 슬라이더들은 현실에서 그 형태와 이름을 따옵니다. 모방하고 발전해서 익숙한 모습에 적절한 기능을 더합니다. 카드도 마찬가지입니다. 평면 위에 놓인 또 다른 평면. 우리는 그 모습을 쉽게 상상할 수 있습니다. 현실에서 수없이 볼 수 있는 광경이기 때문입니다. 그렇기에 현실의 카드가 가진 특징은 디자인 요소로서의 카드에 고스란히 계승됩니다.

카드가 가진 이 특성을 준수하는 것이 제가 말하고자 하는 세 가지 사항 중 첫 째입니다. 메타포가 원본에 가까울수록 정형화된 그 특성을 따르는 일은 중요합니다. 완성도를 좌지우지하는 일입니다.

활용법 1. 디자인을 하자. 카드게임 말고.

카드에는 이미지, 텍스트, 마이크로인터랙션 등 여러 요소가 한데 묶인 형태를 가지고 있습니다. 상품을 표현하는 카드 한 장에는 상품의 이미지와 그 이름, 설명란과 더불어 장바구니에 담는 버튼까지 달려있습니다. 해당 상품을 주제로 하는, 큰 구심력의 UI가 탄생하는 것입니다. 콘텐츠와 액션의 결합, 이것이 카드의 특성이자 가장 큰 장점입니다.

잠깐 카드게임을 상상해봅시다. 무작위의 카드들이 손에 들어옵니다. 자신의 카드를 숨기고, 상대의 카드는 추측합니다. 카드가 늘면서 쌓이기 시작하고 긴장이 고조됩니다. 무척 평범한 카드게임의 묘사입니다만, 이 묘사는 카드를 디자인에 활용하면서 피해야 하는 것들로만 구성되었습니다. 좋은 카드란 숨기지도 않고, 추측할 수도 없으며, 쌓이지도 말아야 합니다.

앞서 언급한 카드의 가장 큰 장점을 떠올려봅시다. 카드는 콘텐츠와 액션의 결합체입니다. 따라서 카드는 독립적이어야 합니다. 카드 안에 카드가 들어서도 안 되고, 카드가 분열해서도 안 됩니다. 카드는 한 덩어리로 고고하게 있어야합니다. 동시에 카드는 의존적입니다. 카드 한 장에 들어찬 콘텐츠와 액션은 한 페이지에 걸쳐 풀어놓아도 문제가 없습니다. 그럼에도 불구하고 카드를 쓰는 경우는 디자인 하는 내용이 카드 한 장으로 해결되지 않을 정도로 많은 상황이죠. 이 아이러니함 때문에 카드는 보통 여러 장이 사용됩니다. 구두 사진과 가격, 구매 버튼이 모여 한 장의 카드를 이루고, 운동화 카드와 슬리퍼 카드가 더해져서 카드 묶음을 만듭니다.

카드는 독립적인 동시에 의존적입니다. 충분히 복잡한데, 더 꼬일 필요는 없습니다. 그래서 카드 게임을 하듯 활용하면 안 된다는 것입니다. 복잡한 트랜지션과 애니메이션으로 내용을 숨기지 말아야 합니다. 한 그룹 내에 있는 카드라면 개성보다는 통일성을 내세우며 다음 카드를 추측하는 일은 없어야 합니다. 무엇보다, 카드 앞뒤에 다른 카드가 있어서는 안 됩니다. 인터랙션 디자인에서는 그리 넓은 캔버스가 쓰이지 않습니다. 쌓여있는 카드는 아리송한 암시 이상이 될 수 없습니다.

활용법 2. 카드를 카드답게

가장 중요한 위의 활용법 1만 지킨다면 카드를 쓸 때 큰 문제는 생기지 않을 겁니다. 사실 활용법 2부터는 선택사항에 가까운 이야기들이긴 하지만, 유용할 테니 들어보시죠.

카드는 현실에서 따온 요소이고, 원본과의 틈새가 매우 좁은 것으로 꼽힙니다. 현실의 모습이 잘 녹아있을수록 ‘이것은 카드다!’라는 인식은 빨라지게 됩니다. 그렇다고 해서 스큐어모피즘 디자인을 하라는 이야기는 아닙니다. 망자는 다시 무덤에 묻어두세요. 현실의 특징을 추상화해서 도입하라는 이야기입니다. 카드는 콘텐츠와 액션을 담고 있습니다. 그럼 그 카드 자체는 어떤가요? 우리는 카드를 통해 다음 단계, 더 자세한 페이지를 비롯한 관련 콘텐츠를 접할 수 있다는 걸 알고 있습니다. 카드의 콘텐츠가 서론이 되어, 관련 콘텐츠라는 본론으로 이끄는 것입니다. 이것은 카드의 본질입니다. 결국 카드는 꽤 커다란 버튼입니다. 그리고 버튼은 누르고 싶게 생겨야 합니다. 현실의 버튼을 모방하여 그 상을 디자인할 때 쓰인 특징들이 카드에도 똑같이 쓰일 수 있는 겁니다.

그림자는 카드를 카드답게 만드는 대표적인 효과입니다. 요소에 만만치 않은 무게를 싣는 까다로운 효과이기는 하지만, 그 모범적인 특성에는 반박의 여지가 없습니다. 한 평면 위에 붕 떠 있는 요소는 자신을 강조함과 동시에 특정 콘텐츠로 전환될 수 있다는 가능성의 감각을 지니고 있습니다. 다시 말해, 카드의 액션을 나타낼 수 있는 효과라는 것입니다. 모깎기는 활용처가 늘고 있는 효과입니다. 카드의 둥근 모서리는 카드가 주는 비대한 느낌을 효과적으로 해소합니다. 모깎기를 활용하면 그룹의 카드 하나하나가 갖는 묵직한 존재감을 자제시켜 한 그룹으로서 조화시킬 수 있습니다.

이런 방식으로 카드답게 만들어진 카드는 재미있는 성질을 갖게 됩니다. 요소와 요소를 나누는 명확한 구분성을 말입니다. 말할 것도 없이, 그림자와 모깎기가 적용되는 경계선은 주변과 요소를 분리하는 유일무이한 역할을 수행합니다. 이들이 카드에 활용되면서 카드는 명확한 구분성을 갖게 됩니다. 다양한 정보를 한 곳에 묶어 상당량의 콘텐츠를 포함하는 경우가 부지기수인 카드의 특징을 고려할 때, 카드가 지닌 구분성은 놀라우리만치 적합하다는 것을 알 수 있습니다.

활용법 3. 다시 한번 생각하기

마지막은 활용법이라고 하기에도 그렇고, 김이 새는 이야기가 될 수도 있습니다. 그렇지만 그저 지나갈 수는 없는 이야기입니다. 카드 도입의 난해함에 대한 설명이자 주의입니다. 간소하게 꾸린 카드도 결국 복수의 콘텐츠가 포함되어있습니다. 이미지, 제목, 설명의 3단 구성에 버튼, 마이크로인터랙션과 같은 갖가지 CTA(Call To Action)를 꽁꽁 싸서 한없이 복잡하게 만들 수도 있습니다. 카드가 비대해지는 것은 한순간입니다. 당연한 이야기지만 이런 무익한 혼잡은 인터랙션 디자인에서 금기시됩니다. 사용자의 집중을 흐리는 치명적인 독입니다. 카드를 활용하려 마음먹은 순간, 어찌어찌 넘겨보려는 생각은 그만두어야 합니다. 만만하게 생각하는 순간 카드는 훌륭한 도구가 아닌 폭탄이 되어있을 겁니다.

카드는 요소와 요소를 분리하는 성질을 가지고 있습니다. 이 멋진 성질은 상하좌우 모든 방향으로 작용합니다. 다른 요소에서 찾아보기 힘든 성질입니다. 그래서 카드 활용에 익숙하지 않다면 안팎이 빽빽한 형상을 한 카드를 만들게 됩니다. 시각적 긴장을 유발하는 그런 디자인은 피해야 합니다.

결론적으로 카드는 다양하고 무수한 콘텐츠를 효과적으로 구분하고 표시하면서도 그 자체의 비대화·복잡화는 막아야 합니다. 딜레마에 가까운 이 현상을 타파하는 일은 오롯이 디자이너의 능력에 달렸습니다. 끊임없이 고민해서 적당한 구성을 조직하고 알맞은 무게를 달아야 합니다. 디자이너니까 해야 하는 고민입니다. 디자이너니까 해결할 수 있는 고민입니다.

오밀조밀 모여 기둥 하나, 지붕 하나

이렇게 써놓고 보니 카드를 다소 성가신 요소로 볼 수도 있겠다는 생각이 듭니다. 어느 정도는 맞는 말입니다. 우연인 듯 설계한 듯 다양한 특성이 다채로운 효과를 유도하고 있으니까요. 그 사실은 카드가 가지고 있는 매력이라고 봐야 할 것 같습니다. 다른 요소들처럼 카드 역시 계속해서 발전해나가고 있으니 말입니다. 칙칙한 색상의 그림자에도 변화의 바람이 불어 네온사인을 연상시키는 색색의 그림자가 등장하고 있습니다. 의도적으로 경계선을 넘는 콘텐츠가 포함된 카드도 최근 새로이 설계되었습니다. 이처럼 카드는 필요와 심미성을 모두 놓지 않는 발전을 지속하고 있습니다.

카드로 쌓은 집은 잘못 만들면 위태롭습니다. 딱히 빛나는 발전을 이륙하고 있지도 않습니다. 카드를 쓰며 느낄 수 있는 애정과 매력은 완성이나 발전에서 오는 것이 아닙니다. 한 가지 사실을 직면하는 데 있습니다. 분명 디스플레이 속 세상은 현실의 모방에서 시작되었지만, 이렇게나 아름다워지고 있습니다. 현실을 넘어서.

참고한 글들

Andrew Coyle - 「Design Better Cards」

Page Laubheimer - 「Cards: UI-Component Definition」

Material Design - Cards

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.