카드 UI vs 리스트 UI, 언제 무엇을 써야 할까

UI 패턴 선택은 콘텐츠의 성격과 사용자의 목적에 따라 달라져야 합니다.

카드 UI가 적합한 경우

• 이미지가 중요한 콘텐츠
• 시각적 탐색이 주목적
• 다양한 카테고리의 콘텐츠

예: 쇼핑몰, 포트폴리오, 갤러리

리스트 UI가 적합한 경우

• 텍스트 정보가 중심
• 빠른 스캔이 필요
• 비교가 중요한 경우

예: 뉴스, 이메일, 검색 결과

하이브리드 접근

Medium처럼 두 가지를 결합하는 방법도 있습니다. 모바일에서는 카드, 데스크탑에서는 리스트 형태로 보여주는 것이죠.

// 반응형 레이아웃 예시
<div className="grid grid-cols-1 md:flex md:flex-col">
  {posts.map(post => <PostCard key={post.id} {...post} />)}
</div>

결국 정답은 없습니다. 사용자 테스트를 통해 최적의 패턴을 찾아야 합니다.