카드 UI

독립된 정보를 나타내기에 적합한 UI 요소

카드 UI는 각각 구분된 정보를 담아 보여주기에 용이한 UI 스타일입니다.

    정보를 시각적으로 잘 나누어 준다  

    애니메이션을 통한 자연스러운 인터랙션 구현  

    그리드 시스템에 잘 어울린다                                                          

카드 UI는 그 모양에서부터 정보를 하나의 네모 안에 넣는 형태입니다.

네모 안에 들어간 정보는 자연스럽게 하나의 덩어리로 인식이 되어 시각적으로 정보의 구분이 됩니다.

그래서 하나의 카드 안에는 한 가지 종류의 정보를 넣는 것이 자연스럽죠.

만약 물건을 파는 사이트에서 하나의 카드 안에 두개의 제품에 대한 정보를 넣는 것은 부자연스럽게 보일 것입니다.

하나의 카드는 1의 개체를 의미합니다.

또한 카드는 ‘미리보기’와 같은 성격의 띄며, 본 내용을 간략하게 보여주는 용도로 쓰입니다.

그리고 뎁스를 통하여 들어가게 되면 비로소 전체 내용에 대한 페이지, 또는 정보로 접근할 수 있게 되는 것이죠.

카드 UI가 가지고 있는 모양 자체가 스큐어모피즘적인 성격을 지니고 있는데요, 이를 활용하면 카드의 분류, 배치, 뎁스 등에서 재미있는 애니메이션/모션 구현이 가능합니다.

    카드의 뒷면  

카드라는 컨셉은 그 자체가 입체적인 의미를 가지고 있어 뒷면이라는 공간이 생깁니다.

뒤집히는 인터랙션을 활용하면 이런 카드 UI의 뒷면을 활용하여 또 다른 정보를 노출 시킬 수 있습니다.

카드 UI의 앞면이 “간략한” “대표적” 인 의미의 정보들을 담고 있다면 뒷면에는 “부수적” 인 의미의 정보를 보여주기에 적합한 공간이 됩니다.

그리고 카드 UI가 뒤집히면서 생겨난 공간이기 때문에 자연스럽게 앞면의 정보의 확장으로 인식되면서 따로 앞면과의 연계성을 위한 처리가 필요하지 않게 됩니다.

그리고 모션이 잘 구현된다면 뒤집히는 모습만으로도 재미있는 시각적 표현이 되어 사용자에게 유쾌한 경험을 줄 수 있겠죠.

    쌓여 있는 형상  

카드라는 컨셉의 또 한가지 실제적 특징 중 하나로 얇은 두께를 들 수 있을 것입니다.

이러한 얇은 두께라는 성격은 카드 UI가 쌓여 있는 형상에 잘 어울리게 해줍니다.

쌓여 있는 형상은 카드 UI에 “다수” 의 의미를 자연스럽게 내포하게 해주는데요, 다른 UI에서라면 하단의 페이지네이션 또는 인디게이터의 역할이 될 것입니다.

물론 카드 UI에서도 정확한 개수 또는 위치를 나타내야 할 경우에는 숫자로 표기된 페이지네이션이나 인디게이터를 사용하기도 하지만 간략하면서도 의미전달을 충분히 할 수 있는 이러한 쌓여 있는 형상은 카드 UI만의 매력이라고 볼 수 있습니다.

이외에도 종이의 특징을 살린 접히는 형상의 모션도 카드 UI에 접목 시킬 수 있는데요, 뎁스 이동 간의 트랜지션에 이를 활용하면 재미있는 시각적 효과를 낼 수 있습니다.