Image

Image (이미지)

사진이나 일러스트레이션 같은 이미지는 메시지를 강화하고 제품이나 앱의 스타일을 표현하는 데 도움을 줘요. 시각적으로 어떤 내용을 보여줘야 할 때 사용하는 컴포넌트예요.

출처: Image 문서

본문

Layout (레이아웃)

이미지에 더 많은 비중을 주려면 shadow prop을 사용해 떠 있는(elevated) 느낌을 낼 수 있어요. 그림자가 너무 많으면 레이아웃이 복잡해 보일 수 있으니 드물게 사용하세요.

Accessibility (접근성)

alt prop으로 이미지에 대한 텍스트 설명을 제공하세요. 대체 텍스트는 간결하지만 정확해야 해요 — 이미지와 그 맥락을 설명하는 한두 문장이면 충분해요. 이미지가 어떤 기능을 나타낸다면 그 점을 꼭 밝히세요. 페이지의 다른 객체들과 함께 소비되도록 의도된 것이라면 그것도 고려해야 해요.

스크린 리더가 두 번 읽으므로, 페이지에 이미 있는 정보를 대체 텍스트에서 반복하지 마세요.

이미지가 순수하게 장식적이고 유용한 정보나 맥락을 제공하지 않는다면 role="presentation"을 사용해 보조 기술에서 숨기세요.

더 알아보기 (Learn more)

• Image 스토리북 및 React/Web Components 가이드 확인
• 접근성 있는 대체 텍스트 작성 지침을 함께 참고하세요