카드 UI(Card UI) 학습

카드 UI는 정보를 독립적인 상자 단위로 묶어 보여주는 방식으로, 콘텐츠가 많은 서비스(핀터레스트, 인스타그램, 쇼핑몰 등)에서 널리 사용됩니다.

이미지

설명

1. 핵심 개념: 정보의 원자화

독립성: 카드 하나가 하나의 아이템 의미를 가집니다.
유연성: 데스크탑 다열/모바일 단일열 등 반응형 전환이 쉽습니다.
시각적 균형: 그리드 위에 정돈되어 페이지 전체 안정감을 높입니다.

2. 카드 UI의 5가지 구성 요소

이미지(Media) 시선을 먼저 끄는 대표 시각 요소

타이틀(Title) 카드의 정체성을 전달하는 핵심 텍스트

본문(Body) 2~3줄 내외의 짧은 요약 정보

메타데이터(Meta) 날짜/조회수/작성자 등 보조 정보

작업 영역(CTA) 상세 보기/좋아요 등 다음 행동 유도

3. UX를 높이는 디자인 디테일

시각적 계층: 이미지 → 제목 → 본문 → 버튼 순으로 시선 흐름을 설계합니다.
여백 설계: 카드 내부/카드 간 간격을 충분히 두어 가독성을 확보합니다.
Shadow & Radius: 둥근 모서리와 그림자로 입체감과 클릭 가능성을 전달합니다.

5. 카드 UI vs 리스트 UI

카드 UI 이미지 중심, 몰입감 높음, 정보 밀도 낮음, 포트폴리오/쇼핑몰에 적합

리스트 UI 텍스트 중심, 빠른 스캔에 유리, 정보 밀도 높음, 메일/게시판에 적합

교수님의 팁

"카드는 웹사이트의 얼굴입니다. 이미지 품질이 사이트 신뢰도에 직접 영향을 줄 수 있습니다. CSS의 `object-fit: cover;`를 활용해 카드 비율에 맞춰 이미지가 잘리도록 설정하세요."

코드

HTML

<div class="card-grid">
  <article class="card">
    <div class="card-thumb">
      <img src="https://via.placeholder.com/400x250" alt="프로젝트 이미지">
    </div>
    <div class="card-content">
      <span class="category">Web Design</span>
      <h2 class="title">B2B 랜딩 페이지 프로젝트</h2>
      <p class="description">사용자 경험을 극대화한 반응형 랜딩 페이지 제작 사례입니다.</p>
      <div class="card-footer">
        <span class="date">2026.04.29</span>
        <button class="btn-more">자세히 보기</button>
      </div>
    </div>
  </article>
</div>

CSS (핵심 스타일)

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.card-content { padding: 20px; }
.description { font-size: 0.9rem; color: #666; line-height: 1.5; }

실행

Web Design

B2B 랜딩 페이지 프로젝트

사용자 경험을 극대화한 반응형 랜딩 페이지 제작 사례입니다.

2026.04.29

Frontend

컴포넌트 디자인 시스템

카드, 버튼, 모달 컴포넌트를 통일된 가이드로 정리한 프로젝트입니다.

2026.04.30