카드부터 캐러셀까지, 콘텐츠 UI 컴포넌트 이해하기 - 웹디자인 강좌 1-9

웹사이트에서 사용자는 대부분의 시간을 콘텐츠를 읽고, 보고, 비교하는 데 사용합니다.
이번 영상에서는 정보를 보기 좋고 이해하기 쉽게 전달하는 콘텐츠 관련 UI 컴포넌트를 알아봅니다.
먼저 이미지, 제목, 설명, 메타 정보를 하나의 단위로 묶어 보여주는 카드 컴포넌트를 살펴봅니다. 정보의 우선순위를 정하는 방법부터 텍스트 길이 제한, 이미지 위 텍스트의 가독성, 사용자 생성 콘텐츠를 고려한 운영 기준까지 함께 정리합니다.
이어 많은 정보를 빠르게 훑어볼 수 있는 리스트와 정형화된 데이터를 비교할 때 사용하는 테이블의 설계 기준을 알아봅니다.
테이블에서는 헤더와 데이터 영역을 명확하게 구분하고, 텍스트는 왼쪽 정렬, 숫자는 오른쪽 정렬해야 하는 이유도 살펴봅니다.
또한 긴 정보를 접어서 보여주는 아코디언, 여러 콘텐츠를 좌우로 넘겨 보여주는 캐러셀, 이미지를 확대해 감상할 수 있는 라이트박스의 역할과 사용 방법을 알아봅니다.
특히 자동으로 움직이는 캐러셀은 사용자가 콘텐츠를 충분히 읽고 제어할 수 있도록 적절한 롤링 시간과 일시정지 기능을 제공해야 합니다. 이는 사용성뿐 아니라 웹 접근성 측면에서도 중요한 기준입니다.
콘텐츠 컴포넌트는 단순히 정보를 담는 상자가 아닙니다. 사용자가 어떤 정보를 먼저 보고, 어떻게 비교하며, 다음 콘텐츠로 이동할지를 설계하는 도구입니다.
다음 챕터부터는 레이아웃, 단위, 타이포그래피, 컬러, 스페이싱, 그래픽과 이미지 등 웹디자인의 기본기를 본격적으로 살펴보겠습니다.

#웹디자인 #UI디자인 #UX디자인 #UI컴포넌트 #카드UI #테이블디자인 #피그마 #디자인시스템

🕐 타임스탬프
00:00 콘텐츠 컴포넌트란?
00:16 카드 UI의 구조와 설계
01:55 리스트와 카드의 차이
02:29 테이블 디자인의 핵심
03:35 아코디언의 활용
04:41 캐러셀의 구조와 접근성
06:50 라이트박스 설계 방법
07:41 컴포넌트 챕터 정리


🚀 멤버십 가입 : https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🚀 예제 다운로드는 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.

🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)