Thumbnail

이미지나 영상 등 전체 콘텐츠를 대표하는 이미지입니다. 다양한 비율에 맞게 콘텐츠를 표시할 수 있으며, 사용자가 내용을 쉽게 식별하고 탐색할 수 있도록 돕습니다.

Anatomy

  1. 1Media
  2. 2Overlay

Variants

Radius
Border
Play icon

Ratio

1:1, 5:4, 4:3, 3:2, 16:10, 1.618:1, 16:9, 2:1, 21:9, 4:5, 3:4, 2:3, 10:16, 1:1.618, 9:16, 1:2, 9:21의 비율을 제공합니다. 다양한 종류의 미디어와 레이아웃에 유연하게 대응할 수 있도록 정사각형, 사진이나 동영상의 화면 비율, 황금비율을 포함한 표준적인 화면 비율을 제공합니다. 크기를 변경할 때 각 비율을 유지하며 조절합니다.

Radius

이미지를 둥근 사각형 형태로 표현할 때는 모서리 둥글기 값을 12px로 사용합니다.

Border

불특정 이미지가 배치되는 경우 배경과의 명확한 구분을 위해 외곽선을 사용합니다. 외곽선은 어떤 이미지 위에서든 자연스러운 구분을 위해 투명도가 있습니다.

Overlay

텍스트, Content badge, Play badge 같은 요소들을 배치하여 썸네일의 성격 혹은 콘텐츠의 내용을 암시합니다.

Fallback

이미지 로드에 실패할 경우, 이를 대체하는 이미지를 보여줍니다.

How to use

Do

미디어는 Thumbnail 전체 영역에 여백이 없도록 채워 사용합니다.

Don’t

미디어는 Thumbnail 내에 여백이 생기도록 채우거나, 잘려보이도록 사용하지 않습니다.

© 2026 Wanted Lab, Inc.