HTML과 CSS로 웹사이트용 심플하고 아름다운 UI 카드 디자인하기

HTML과 CSS를 활용해 웹사이트에 어울리는 심플하면서도 아름다운 UI 카드 컴포넌트를 만드는 방법을 알아봅니다. 또한 linear-gradient를 활용한 트릭으로 카드를 지나치게 어둡게 만들지 않으면서도 텍스트를 한층 돋보이게 하는 방법도 함께 소개합니다.

UI 카드는 웹사이트에서 메인 콘텐츠로 이어지는 '전채 요리' 같은 역할을 하는 UI 컴포넌트입니다. 일반적인 UI 카드에는 텍스트, 사진, 아이콘과 함께 버튼이나 링크처럼 하나 이상의 인터랙티브 요소가 포함됩니다.

UI 카드는 필요에 따라 아주 단순하게 만들 수도 있고, 복잡하게 만들 수도 있습니다.

오늘은 가장 기본적인 형태의 UI 카드를 디자인해 보겠습니다. 바로 아래와 같은 카드입니다.

이 UI 카드는 풍경 배경 이미지와 두 개의 텍스트 요소(제목과 설명)로 구성되어 있으며, 카드 전체가 하나의 커다란 클릭 가능한 링크 역할을 합니다.

무료로 사용할 수 있는 아름다운 풍경 사진은 Unsplash.com에서 손쉽게 찾을 수 있습니다.

1단계: HTML

문서의 <body> 요소 안에 다음 HTML 코드를 추가합니다:

<a class="card-link" href="#">
  <div class="card">
    <div class="card-overlay"></div>
    <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" />
    <div class="card-text-container">
      <div class="card-text-wrapper">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful &amp; dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>
  </div>
</a>

위 HTML 마크업에서 주목할 부분은 카드 전체를 앵커(<a>) 요소로 감싸고 있다는 점입니다. 이 카드는 사용자 인터페이스 전체가 하나의 커다란 클릭 가능한 링크가 되기를 원하기 때문에 이런 구조를 사용했습니다.

앵커 링크가 실제 블로그 글이나 아티클 등 연결하려는 콘텐츠로 이동하도록 하려면, 임시 값(href="#")을 실제 슬러그로 교체하면 됩니다. 예를 들어 href="/northern-sea-of-denmark"처럼 입력하면 됩니다.

2단계: CSS

먼저 예제 UI 카드에 사용된 CSS 전체를 살펴본 후, 코드에서 가장 중요한 부분들을 하나씩 설명하겠습니다.

.card {
  position: relative;
  height: 350px;
  max-width: 400px;
}

.card-thumbnail {
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card-text-container {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-text-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 300px;
  color: white;
}
.card-title {
  font-size: 1.45rem;
  margin-bottom: 0;
}
.card-description {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}

.card-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

CSS 작동 방식

.card: UI 카드를 반응형으로 만들기 위해 max-width를 400px로 설정했습니다. 이렇게 하면 카드 너비가 유동적으로 변합니다. 400px보다 넓어지지는 않지만, 화면 너비가 400px 미만일 때는 자동으로 좁아집니다. 반면 카드의 높이는 고정값(height: 350px)이라 화면 크기와 관계없이 변하지 않습니다.
.card-thumbnail: 카드의 비율이 변할 때 배경 이미지가 늘어나거나 찌그러지는 것을 방지하기 위해 object-fit: cover를 사용합니다. 이 속성을 제거하면 어떻게 되는지 직접 확인해 보세요. 결과가 좋지 않다는 것을 금방 알 수 있을 겁니다.
.card-text-container: 어떤 기기에서 카드를 보더라도 텍스트 요소의 위치와 여백이 일관되게 유지되도록 bottom: 10%를 사용합니다. 카드 높이가 350px로 고정되어 있기 때문에 텍스트와 카드 하단 사이의 거리를 거의 100% 일정하게 유지하기 쉽습니다. 또한 z-index: 2로 오버레이보다 높은 값을 지정해 텍스트가 항상 오버레이 위에 표시되도록 했습니다.
.card-text-wrapper: 이 클래스는 제목과 설명 두 텍스트 요소의 최대 너비를 제어합니다. 카드 너비를 벗어나지 않도록 300px로 설정했는데, 이는 카드 최대 너비(400px)보다 25% 작은 값입니다. 또한 좌우 패딩(1rem)을 추가해 텍스트와 화면 경계 사이에 항상 약간의 여백이 생기도록 했습니다. 특히 작은 화면 기기에서 중요한 부분입니다.
.card-overlay: 밝은 배경 위의 흰색 텍스트는 잘 보이지 않기 때문에 어두운 대비가 필요합니다. 하지만 이미지 전체를 지나치게 어둡게 만들고 싶지는 않겠죠? 그래서 linear-gradient 함수를 사용해 위쪽 절반(텍스트가 없는 영역)은 밝게, 아래쪽 절반은 텍스트가 돋보일 만큼 어둡게 처리하는 그라디언트 오버레이를 만들었습니다.

팁 & 아이디어

사진이 콘텐츠의 핵심을 차지하는 이런 유형의 UI 카드에서는 카드가 과도하게 복잡해 보이지 않도록 하는 것이 중요합니다(예: 텍스트 크기 신중하게 결정하기). 저 역시 CSS로 스타일링할 때 이 점을 염두에 두었습니다. 무엇보다 항상 디자인하려는 카드의 구체적인 맥락을 먼저 고려해야 합니다.

이 튜토리얼의 스타일은 엄격한 규칙이 아니라 가이드라인으로 활용하세요. 아래는 UI 카드 디자인에 적용할 수 있는 보편적인 지침들입니다:

여백이 핵심입니다: 여백(화이트 스페이스)이 부족하면 디자인이 답답하고 좁아 보입니다. UI도 사람처럼 숨 쉴 공간이 필요합니다. 근접성의 법칙(Law of Proximity)을 해치지 않는 선에서 최대한 충분한 여백(패딩, 마진, 줄 높이)을 확보하세요.
타이포그래피: 폰트 선택, 글자 크기, 줄 높이 등 어떤 방식으로 텍스트를 꾸미든, 어떤 화면 크기에서도 읽기 쉬워야 합니다. 글자 크기를 키워 공간을 더 차지하는 대신, .card-overlay 클래스에서 했던 것처럼 텍스트와 배경 간 색상 대비를 높이는 방법을 시도해 보세요.
클릭하기 쉬운 인터페이스: 카드의 요소를 클릭하도록 설계했다면, 누구나 마우스나 엄지손가락으로 쉽게 클릭하거나 누를 수 있을 만큼 충분히 크게 만들어야 합니다.

이 외에 UI 카드 디자인에는 정해진 규칙이 없습니다. 오직 '맥락'만이 존재할 뿐입니다.