[WEB DESIGN] CARD UI

 

카드 UI : 담고 있는 정보의 양에 따라 자유롭게 크기가 조절되는 카드 형태

- 사용자들이 콘텐츠에 집중할 수 있도록 초점을 맞춘 디자인 방식

- 단조로운 화면 구성을 개선할 수 있는 디자인

- 보통 한 화면에 여러 개의 카드가 표시되기 때문에 카드에 테두리를 둘러 콘텐츠를 감싸거나 색상을 달리함

- 대표적인 예시 :  https://www.pinterest.co.kr/

Pinterest - 핀터레스트

 

기대효과

- 선과 카드 색상, 배경 색상이 확실하게 구분되고 콘텐츠에 신경을 집중할 수 있음

- 사용자가 콘텐츠 정보를 확실하게 인식할 수 있게 함

 

 

장점

1. 콘텐츠 중심의 박스 형태로 시선 사로잡음

- 훨씬 많은 양의 정보를 한눈에 파악하기 쉬움

- 정보 중심의 사이트를 만들 때 좋음

- 사용자는 콘텐츠를 개별적이고 독립적으로 사용 가능

- 일부 화면에 표시하는 식으로 자신의 입맛에 맞는 정보를 표시하거나 감추면서 사용 가능

2. 레이아웃을 자유자재로 바꿀 수 있음

3. 지나친 스크롤을 줄일 수 있음

 

 

단점

1. 사용자 입장에서는 계속 비슷한 레이아웃의 사이트를 보게 됨

- 크게 변화를 줄일 수 없기 때문

2. 접힌 카드를 일일이 열어보아야 하는 번거로움

3. 카드 안에 담아야 할 내용이 많거나 콘텐츠를 비교해 가며 훑어봐야 할 사이트는 부적합