왜 카드 UI를 사용하는가?

많은 정보를 표시해야해서 고민될때 카드 UI가 그 해답이 되다

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

회사에서 신규 서비스 런칭 프로젝트를 진행하고 있는데, 제가 맡은 부분을 디자인하고 있던 중 표(table ui)로 부분을 웹과 모바일 모두 디자인하려고 하였습니다.

표에는 출력해야하는 정보가 많았고 웹에서는 화면이 넓어 그 정보가 쉽게 다 보여줄 수 있었지만 모바일에서는 표로 그 정보를 보여주기가 매우 어려웠습니다.

그래서 표를 분해해서 아예새로운 정보설계를 진행하였습니다.

왜 카드 UI를 사용하는가?

카드 UI를 사용하게 된 계기

기존의 표(table ui)디자인

위 이미지를 보면 정보를 나열해야하는 표가 있는 것을 볼 수 있죠. 이 표를 웹과 모바일에서 반응형으로 보여주기위해서 표를 분해하여 다시 정보 설계를 하는 작업이 필요했습니다.

그럼 저 표를 어떻게 다시 디자인했을까요?

표를 분해하여 재설계

표를 분해하여 웹과 모바일에서 모두 잘 보이게끔 재설계를 진행하였습니다.

이렇게 리디자인하게 되니 모바일에서는 괜찮았는데요,

하지만 모바일이 아니라 웹에서는 위와 같이 여백이 많이 남아 자연스럽지 않다는 문제가 발생했습니다.

flex-direction을 바꾸거나 하는 방법이 있었지만 결국 이렇게 표형태이고 정보가 많고 웹과 모바일 모두 커버하기가 어려운 디자인의 경우에는 카드UI를 선택하는게 아주 좋은 방법이 되겠습니다!

카드 UI

카드 UI 디자인으로 결정

위 이미지와 같이 처음 표의 하나의 행을 하나의 카드로 재설계하여 디자인하였습니다. 이렇게 카드UI 형태로 디자인하니 반응형에서도 유리하고 정보를 쉽게 설계할 수 있었습니다.

카드 UI 디자인의 장점

1. 직관적

카드 UI는 모바일 및 웹 앱에서 인기있는 UI 요소로 이전부터 명함, 야구, 카드, 스티키 메모 등 실생활에서 어디에나 있기 때문에 직관적입니다.

2. 반응형 디자인에 유리

제가 고민했던 반응형 디자인부분에서 아주 유리하였습니다. 반응형 디자인 문제를 카드 UI로 풀어냈다고 볼 수 있습니다. 직사각형의 형태로 다양한 스크린의 가로 및 세로 사이즈에 맞게 크기를 유동적으로 조정하는 것이 가능합니다. 사용자가 모든 장치에서 동일한 경험을 얻을 수 있습니다.

3. 정보 설계에 유리

표같은 table ui에 비해 카드 ui는 정보 설계에 유리하다는 것을 몸소 배웠습니다. 카드 ui는 정보설계에 있어서 다른 ui보다 뛰어납니다.

결론

카드 ui는 통계시각화 등의 정보 나열에 사용되며 직관적이고 반응형 디자인에서 매우 유리합니다. 그래서 이번 회사에서 하는 프로젝트에 일부분을 맡아 디자인하면서 카드 ui형태를 유용하게 써먹게 되었습니다.