🌟 디테일의 간격 시리즈! [📎 카드 UI, 어떻게 활용하면 좋을까?] (👀간단 요약) 카드는 조직화된 레이아웃으로 정보를 유저에게 효율적이고 심미적으로 전달할 수 있는 매우 훌륭한 컴포넌트입니다. 기획자가 고려한 카드의 설계 목적에 적합한 이미지와 정보의 조합은, 유저들로 하여금 여러분이 원하는 행동을 유도해 낼 수도 있습니다. 물론 그 반대의 결과를 만들어 낼 수도 있습니다. 📌카드 UI 체크리스트 ✓ 카드들은 단일 주제에 대한 내용을 담고 있는가? ✓ 카드에 담긴 정보들의 가치는 유익한가? ✓ 디자인 가이드라인을 따르고 있는가? 📌카드들은 단일 주제에 대한 내용을 담고 있는가? 각 카드는 한 주제의 정보를 담고 있어야 소비 / 공유에 대해 유저는 더 쉬운 의사결정을 할 수 있습니다. 선택의 기준이 명확해질때 결정이 쉬워지니까요. 📌카드에 담긴 정보들의 가치는 유익한가? 가장 중요한 내용입니다. 서비스가 지향하는 가치와 혜택을 유저에게 신속하게 전달하여, 특정 행동을 이끌어내기 위해선 카드에 어떤 정보를 담아내야할지 많은 고민이 필요할 겁니다. ✓ 에어비앤비 카드 정보 : 썸네일, 호스트 등급, 위치, 평점, 태그, 영문 설명 ✓ 데일리호텔 카드 정보 : 썸네일, 호텔명, 태그, 정상가격, 할인가격, 쿠폰, 할인율 이쯤 되면 카드에 어떤 정보를 담아야 할지 고민이 길어질 겁니다. 이 경우엔 카드를 먼저 기획하기 보다 카드의 상세 보기 내용들을 먼저 기획한 다음 카드를 기획하면 과정이 조금 더 수월합니다. 가장 중요한 건 역시, 카드를 통해 사용자가 어떤 의사결정을 하게 만들지 치밀하게 설계해야 된다는 겁니다. 카드에 없는 내용이 상세 보기에 있을 수 있지만, 상세 보기에 없는 내용이 카드에 있다면 일반적인 기획이 아니거나, 특정한 목적을 달성하기 위한 이유였을 겁니다. 📌디자인 가이드라인을 따르고 있는가? 다른 서비스에서 카드 컴포넌트를 접하더라도, 불편함이 크게 들지 않는 건 디자인 가이드라인을 준수했기 때문일겁니다. 우린 많은 컴포넌트에 익숙해져 있습니다. 기존과 다른 새로운 방식을 만들어 내는게 절대 나쁜 건 아니지만, 새로운 작동 방식을 만들어낼때 유저들은 익숙하지 않음을 느낄 수 있다는 점, 그게 부정적인 의사 결정으로 연결될 수도 있다는 점 유의하시기 바랍니다. (👋중요한 이유가 뭔가요?) 카드 UI는 동일한 컴포넌트 내 정보들을 사용자들에게 잘 전달할 수 있다는 이유로 지금까지도 여러 서비스에서 사용 되고 있습니다. 문제는 상세 화면 대비 작은 공간에 어떤 정보를 어떻게 채워 넣느냐! 인데요. 크게 첫 적용과 개선 과정에서의 적용 두 가지 관점에서 바라볼 수 있습니다. 전자는 본문에서도 잘 나와있는 것처럼 상세 화면에 어떤 정보들이 들어가고, 사용자들에게 어떤 행동을 유도할 것인지에 따라 구성할 수 있습니다. 후자는 조금 다른데요. 카드 중 하나를 선택, 상세 화면으로 진입해 어떤 행동을 하는지 등에 따른 데이터를 꾸준히 추적, 관찰해야 합니다. 우리가 배치, 의도한 구성과 사용자들이 실제 받아 들이는 방법에는 언제나 차이가 존재하기 때문입니다.