카드 UI는 정보를 사각형 하나에 넣는 형태입니다. 사각형에 담긴 정보는 자연스럽게 하나의 덩어리로 인식이 되죠. 정보를 시각적으로 구분할 수 있습니다.

그래서 카드 하나에는 한 종류 정보를 넣어야 자연스럽습니다. 예를 들어, 쇼핑몰 사이트에서 카드 하나에 제품 두 개가 들어있으면 매우 부자연스럽게 보이겠죠. 카드 하나는 개체 하나입니다.

또한, 카드 UI는 “미리보기”처럼, 세부 내용을 간략하게 보여주는 용도로 사용합니다. 사용자가 뎁스를 통해 들어가면, 비로소 전체 내용이나 페이지, 정보에 접근할 수 있죠.

카드 UI는 모양 자체에서 이미 스큐어모피즘_Skeuomorphism 적인 성격이 있습니다. 이를 활용해 카드 분류, 배치, 뎁스 등에 재미있는 애니메이션/모션 구현이 가능하다는 뜻입니다.

 

01. 카드 뒷면

카드 컨셉에는 입체라는 의미가 있어, “뒷면”이라는 공간이 생깁니다. 카드가 뒤집히는 인터랙션을 활용하면, 카드 뒷면에는 다른 정보를 노출시킬 수 있죠. 카드 UI 앞면이 “대표적인”, “간략한” 의미를 담는다면, 뒷면은 “부수적” 정보를 보여주기 적합한 공간입니다.

카드 UI가 뒤집히며 생긴 공간이므로, 사용자는 자연스럽게 앞면 정보의 확장으로 인식합니다. 앞면과 연계성을 만들 필요가 줄어들죠. 여기에 적절한 모션이 더해지면, 뒤집히는 모습만으로도 재미있는 시각적 표현이 되고, 사용자에게 유쾌한 경험을 줄 수 있습니다.

 

02. 카드 쌓기

카드 컨셉에 있어 또 다른 특징은 “얇은 두께”입니다. 그래서 카드 UI는 쌓여있는 형상이 잘 어울리죠. 또한 “다수” 라는 의미를 자연스럽게 내포하게 됩니다. 다른 UI라면 하단의 페이지네이션이나 인디케이터가 그 역할을 하죠.

물론 카드 UI콘텐츠에서도 정확한 개수나 위치를 나타낼 경우에는 숫자로 페이지네이션이나 인디케이터를 사용해야 합니다. 하지만 쌓인 형상을 사용하면, 간략하게만 보여줘도 충분한 의미 전달이 가능합니다. 이는 카드 UI만의 매력이라고 볼 수 있습니다.

 

03. 카드 접기

플라스틱 카드도 있지만, 종이 명함과 지폐도 있습니다. 뒤집고 섞고 쌓을 수 있는데다 접을 수도 있다는 뜻이죠. 이런 특징을 살린 모션도 카드 UI에 접목할 수 있습니다. 뎁스를 이동할 때 트랜지션에 이를 활용하면, 재미있는 시각적 효과를 낼 수 있죠.

 

카드 UI는 각각 구분된 정보를 담아 보여주기에 용이한 UI 스타일이며, 장점을 요약하면 다음과 같습니다.

  1. 정보의 시각적 구분
  2. 그리드 시스템 최적화
  3. 익숙한 인터랙션과 자연스러운 애니메이션

Leave a Reply

Mets HIT Inc.

Be creative. Emotional. Innovative with our eXperience