애플이 자사의 제품 생산에 사용되는 부품을 100% 재활용 제품을 사용하겠다고 선언했습니다.

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

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

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

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

카드 UI는 그 모양에서부터 정보를 하나의 네모 안에 넣는 형태입니다.네모 안에 들어간 정보는 자연스럽게 하나의 덩어리로 인식이 되어 시각적으로 정보의 구분이 됩니다.그래서 하나의 카드 안에는 한 가지 종류의 정보를 넣는 것이 자연스럽죠.만약 물건을 파는 사이트에서 하나의 카드 안에 두개의 제품에 대한 정보를 넣는 것은 부자연스럽게 보일 것입니다.하나의 카드는 1의 개체를 의미합니다.

또한 카드는 ‘미리보기’와 같은 성격의 띄며, 본 내용을 간략하게 보여주는 용도로 쓰입니다. 그리고 뎁스를 통하여 들어가게 되면 비로소 전체 내용에 대한 페이지, 또는 정보로 접근할 수 있게 되는 것이죠. 카드 UI가 가지고 있는 모양 자체가 스큐어모피즘적인 성격을 지니고 있는데요, 이를 활용하면 카드의 분류, 배치, 뎁스 등에서 재미있는 애니메이션/모션 구현이 가능합니다. 

01. 카드의 뒷면

카드라는 컨셉은 그 자체가 입체적인 의미를 가지고 있어 뒷면이라는 공간이 생깁니다. 뒤집히는 인터랙션을 활용하면 이런 카드 UI의 뒷면을 활용하여 또 다른 정보를 노출 시킬 수 있습니다. 카드 UI의 앞면이 “간략한” “대표적” 인 의미의 정보들을 담고 있다면 뒷면에는 “부수적” 인 의미의 정보를 보여주기에 적합한 공간이 됩니다. 그리고 카드 UI가 뒤집히면서 생겨난 공간이기 때문에 자연스럽게 앞면의 정보의 확장으로 인식되면서 따로 앞면과의 연계성을 위한 처리가 필요하지 않게 됩니다. 리고 모션이 잘 구현된다면 뒤집히는 모습만으로도 재미있는 시각적 표현이 되어 사용자에게 유쾌한 경험을 줄 수 있겠죠.

02. 쌓여있는 형상

카드라는 컨셉의 또 한가지 실제적 특징 중 하나로 얇은 두께를 들 수 있을 것입니다. 이러한 얇은 두께라는 성격은 카드 UI가 쌓여 있는 형상에 잘 어울리게 해줍니다. 쌓여 있는 형상은 카드 UI에 “다수” 의 의미를 자연스럽게 내포하게 해주는데요, 다른 UI에서라면 하단의 페이지네이션 또는 인디게이터의 역할이 될 것입니다. 물론 카드 UI에서도 정확한 개수 또는 위치를 나타내야 할 경우에는 숫자로 표기된 페이지네이션이나 인디게이터를 사용하기도 하지만 간략하면서도 의미전달을 충분히 할 수 있는 이러한 쌓여 있는 형상은 카드 UI만의 매력이라고 볼 수 있습니다.

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