brunch

매거진 UX 디자인의 모든 것

라이킷 191 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jan 02. 2017

카드 디자인 베스트 사례

UX 디자인 배우기 #95

Today UX 아티클

Nick Babich의 글 Best Practices for Cards을 원저자의 허락을 받아 번역한 글입니다.

카드는 정보를 담을 수 있는 작고 깔끔한 컨테이너입니다. 카드는 깔끔한 심미성과 간단한 사용성 사이의 균형을 맞추기 위해 거의 필수적으로 필요한 옵션이 되었습니다. 처음엔 Pinterest나 Facebook과 같은 서비스에서 도입되었는데, 오늘날 카드의 영향력은 여러 산업으로 널리 퍼져나가고 있습니다.

Pinterest는 한 가지 주제에 대한 가장 연관성 높은 모든 정보를 하나의 콘테이너에 정리하는 아이디어를 세상에 내놓았습니다.

제대로 적용하기만 하면, 카드는 앱의 사용자 경험적 측면을 개선해줄 수 있습니다. 이번 글에서는, 카드에 사용할 수 있는 5가지 유용한 테크닉과 몇 가지 유용한 사례를 소개하고자 합니다.

1. “카드 하나 당 콘셉트 하나”

카드 안에 들어가는 모든 콘텐츠는 딱 하나의 아이디어에 대한 것이어야 합니다. 전체 디자인에서는 카드에 다양한 요소가 들어갈 수도 있지만, 각 카드는 딱 한 가지 정보 혹은 내용에만 집중해야 합니다. 이렇게 하면 유저에게 유저가 소비하고 싶어 하거나 공유하고 싶은 콘텐츠 부분을 선택할 수 있는 기회를 제공하게 됩니다.

하나의 블록(또는 카드)에는 한 덩어리의 유저 인터랙션이 들어갔니다.

2. 카드 전체를 클릭 가능하게 만든다

피츠 법칙에 따라 유저가 텍스트 링크나 이미지뿐만 아니라 카드의 어느 부분이든 클릭 혹은 탭 할 수 있게 만들어야 합니다. 터치 영역이 넓어지면 터치스크린 디바이스와 마우스 기반 디바이스 모두에서 사용성이 상당히 개선됩니다.

팁: 카드에 약간의 그림자를 이용해서 깊이를 보여주면 클릭 가능함을 보여주는 시각적 시그니파이어가 됩니다.

카드 디자인에 약간의 그림자를 넣어주면 전체 카드가 클릭가능함을 보여주는 시그니파이어가 됩니다. Credits: nngroup

3. 카드를 시각적으로 즐겁게 만든다

좋은 디자인과 훌륭한 사용성이 있어야 제대로 된 카드가 만들어집니다. 카드에 미적인 효과를 약간만 줘도 카드 디자인에 익숙하면서도 창의적인 느낌을 줄 수 있습니다.

Credits: Piper Lawson

실제 카드 디자인을 하게 되면, 다음과 같은 부분에 집중해야 합니다.

이미지

이미지에 중점을 둘 수 있는 것은 카드 기반 디자인의 강점입니다. 이미지가 디자인을 끌어올려준다는 점은 이미 여러 연구를 통해 입증되었습니다. 이미지 사용에 중점을 두게 되면 카드 기반 디자인이 유저에게 더 매력적으로 보이게 됩니다.

Credits: Dave Gamache

그림자와 그러데이션

그림자와 그러데이션은 유저가 카드를 물리적 카드와 연관 지어 생각하게 만드는 데 많은 도움을 줍니다. 하지만 그림자와 그러데이션을 어떻게 사용할지는 곰곰이 생각해봐야 합니다. 모든 코너와 사이드에 그림자를 넣게 되면 카드 UI가 실제 물리적 카드처럼 보이는 데 방해가 될 수 있습니다.

라운드 처리된 모서리는 시각적으로 플레잉 카드를 연상시킵니다.Credits: Material Design

타이포그래피

텍스트를 활용해서도 유저의 이목을 끌 수 있습니다. 카드 디자인에 들어가는 모든 것은 읽고 이해하기 쉬워야 합니다. 최고의 가독성을 위해 디자인해야 합니다.

심플한 서체를 선택하고 읽기 쉬운 컬러 스킴을 사용합니다 (단색 배경에 충분히 대비되는 색상의 텍스트로 적었을 때 가장 읽기 쉽습니다)

사용하는 서체의 수 역시 제한하려고 노력해야 합니다. 대부분의 카드 프로젝트에서는 한 가지 서체만 써도 충분합니다.

팁: 보통 굵기의 산세리프체는 카드 본문을 쓸 때 아주 적합합니다.

Credits: maconprinting

4. 카드에 들어가는 내용을 제한한다

카드는 보통 짧으며 전체 세부내용을 보여주기보다는 자세한 내용을 볼 수 있는 링크를 제공해줍니다. 한 카드에 너무 많은 내용을 집어넣으려고 하다 보면, 카드가 너무 넓어지거나 길어지는 순간이 오게 되고, 더 이상 카드처럼 보이지 않게 되어 처음 가졌던 메타포를 잃게 될 겁니다.

아래는 카드 기반 유저 인터페이스의 사례입니다. 가운데 카드 안에 있는 내용을 보세요. 여기서의 문제는 카드가 정보로 가득 차서 대충 훑어보기가 어려워졌다는 겁니다.

Credits: Piotr Adam Kwiatkowski

5. 애니메이션과 움직임의 장점을 활용한다

애니메이션은 제대로 사용하기만 하면 사용자 경험에 많은 기여를 할 수 있습니다. 애니메이션은 사람들이 카드 기반 인터페이스에서 현재 자신의 위치를 알아내고 각 카드의 서로 다른 상태를 시각적으로 연결 지을 수 있도록 도와줍니다.

시각적 힌트

네비게이션 기능을 보여주는 힌트 Credits:Barthelemy Chalvet

시각적 피드백

시각적 피드백은 UI 디자인에서 굉장히 중요합니다. 승인 여부(acknowledgement)에 대한 유저의 자연적 욕구를 충족시켜주기 때문입니다. 실제로 어떤 대상은 우리의 인터랙션에 반응을 보이며, 사람들은 반응이 보일 것이라는 기대를 가지고 있습니다. 앱이나 사이트에서는 특정 요소가 사용 가능함을 보여주기 위해 호버 효과를 사용할 수 있습니다. 호버 애니메이션은 발견 가능성을 높여주고 동시에 경험을 보다 재미있게 만들어줍니다.