2023.12.26 16일차 수업: 카드 리스트 & UI Navigation Drawer
Card List 카드 리스트
- 미리 보기로 전체 내용을 간략하게 보여 주거나 업데이트가 빈번한 콘텐트를 표현하는데 적합
- 각 카드별 너비는 같고 높이는 정보의 양에 따라 달라질 수 있으며, 모든 카드는 왼쪽에서 오른쪽 하단 방향으로 자동 정렬, 콘텐트를 서로 비교할 필요가 없을 때 적합
- 카드는 정보를 그룹으로 묶는 역할
- 뉴스 기사, 쇼핑몰 상품, 소셜 앱의 게시물은 미디어 유형의 영상, 그래프, 텍스트 등
- 세부 페이지로 링크
- 사용자가 세부 페이지로 이동하기 전에 빠르게 내용을 훑어 보는 것이 가능
가로 분할 카드 리스트
- 다양한 콘텐츠를 효과적으로 보여줄 때 사용
- 콘텐츠 서로 비교 X
화면 가득 채운 카드 리스트
- 뉴스 피드, 타임라인
- 콘텐츠 서로 비교 O
테이블 리스트
- 유사한 정보를 나열할 때 빠르게 스캔 가능
그리드 리스트
- 이미지 갤러리처럼 균일한 콘텐츠를 나열할 때 사용
기본형
핀터레스트와 같은 크기가 균일하지 않은 가드를 정보의 양에 따라 왼쪽에서 오른쪽으로 빈자리를 채워가며 배치된다. 카드의 높이는 콘텐츠의 크기에 따라 유동적으로 결정된다. 타임라인에는 적합하지 않지만 검색 결과를 나타낼 때 정확도 혹은 최신순 같은 필터에 정렬이 용이하다. 멀티미디어 요소를 포함한 UI의 표현에 용이하면 콘텐츠를 비교할 때는 적합하지 않다.
타임라인형
콘텐츠를 시간순으로 배치할 때 사용하며, 최신순으로 정렬하고 카드 높이는 유동적으로 콘텐츠의 크기에 따라 변동된다. 뉴스 피드, 스케쥴과 같은 콘텐츠에 적합하다. 대표적인 서비스는 페이스북, 트위터 등이 있으며 접속할 때마다 새로운 콘텐츠가 제일 위에 배치된다. 시간순으로 된 콘텐츠를 빠르게 훑어 보기엔 용이하지만 이전 콘텐츠를 다시 찾아보기 힘들고 순위에 따라 찾아 보는 등의 조건 검색이 용이하지 않다.
워크플로우형
워크플로우형 카드 UI는 전체 프로세스를 한 눈에 파악할 수 있기 때문에 공동 작업을 하는 멤버끼리 상세 업무 내역과 일정을 공유할 때 유용하다. 스마트폰과 같은 작은 화면보다는 큰 화면에 유용하다.
대시보드형
대시보드형 카드 리스트는 사용자에게 각종 데이터와 정보를 빠르게 전달할 때 사용하는 UI이다. 통계 및 비교 분석 결과의 일정 및 메세지 등의 정보를 그래픽으로 구현하여 보여준다. 인포그래픽과 밀접한 관계를 가지며 과다한 인터렉션을 사용하면 로딩 시에 지연될 수 있다.
실습
실습1: 카드 리스트
프로필 이미지랑 다 메세지, 알림 수 다 바꿀 수 있게 컴포넌트 설정해서 만들었다.
짜잔~ 움짤로 드래그 되는 것까지 확인 바랍니다 크크
실습2: Drawer 만들기
첫 화면에서 "Cat"을 누르면 "Drawer"가 나타나고 다시 Drawer 바깥 부분을 터치하면 원래의 화면으로 되돌아간다. 해당 interaction은 아래 움짤에서 확인 가능하다.
실습3: 따라 만들기
강의 카드
아래 사진 보고 강의 슬라이더 만들기 ㅎㅎ
내용은 Ipsom으로 넣었다 ㅎㅎ 카드 슬라이더만 잘되면 되니까~~
쇼핑몰 카드
아래 사진을 보고 쇼핑몰 페이지? 카드리스트 만들기 ㅎㅎ
나는 신발로 만들었당 ㅎㅎ
gif로 드래그해서 넘어가는거 보여주려고 했는데 왤캐 느리게 했지 ^^;
쨋든 만족만족쿠~~
