카드뉴스 배경 가우시안 블러(Blur)와 딤드(Dimmed) 이미지 가이드

사진 위 흰 글자가 안 보이는 이유

원본 사진을 그대로 두고 그 위에 흰색 타이틀 텍스트만 얹으면, 하늘이나 조명처럼 밝은 영역에서는 글자와 배경의 명도 차이가 거의 없어 글자가 배경에 묻힙니다. 반대로 사진 안에 밝은 영역과 어두운 영역이 함께 섞여 있으면, 텍스트 색을 어느 한쪽에 맞춰도 나머지 절반에서는 가독성이 떨어집니다.

이 문제를 해결하려면 사진 자체의 명도를 텍스트가 놓일 위치에서 균일하게 낮춰야 합니다. 사진을 흐리게 처리해 디테일과 색 대비를 줄이고, 그 위에 어두운 반투명 레이어를 한 겹 더 깔면 사진의 원래 밝기와 무관하게 일정한 명암비를 만들 수 있습니다.

흐림(Blur)과 딤드(Dimmed) 레이어를 직접 만드는 방법

배경 처리는 두 단계로 나뉩니다. 먼저 원본 사진에 가우시안 블러를 적용해 세부 디테일을 지우고 색감 톤만 남깁니다. 그다음 흐려진 사진 위에 검은색 반투명 레이어를 정해진 비율로 겹칩니다. 예를 들어 딤드 농도를 45%로 설정하면, 흐려진 사진 55%와 검은 레이어 45%를 섞은 값이 최종 배경 색이 됩니다.

CSS만으로는 다음처럼 구현합니다.

<!-- 1. CSS filter: blur() + 반투명 오버레이 기반 딤드 레이어 카드 -->
<div class="dimmed-card-wrapper">
  <img src="photo.webp" alt="배경 사진" class="bg-img" />
  <div class="dimmed-overlay"></div>
  <div class="card-content">
    <h2>PREMIUM CARD NEWS</h2>
    <p>고대비 가독성을 위한 딤드 배경 처리</p>
  </div>
</div>

.dimmed-card-wrapper {
  position: relative;
  width: 360px;
  height: 360px;
  border-radius: 16px;
  overflow: hidden;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px); /* 1. 이미지 가우시안 블러 */
  transform: scale(1.1); /* 블러 외곽 흰 테두리 방지용 키움 */
}

.dimmed-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45); /* 2. 45% 블랙 딤드 필터 */
}

.card-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
  width: 80%;
}

blur 필터를 이미지 태그에 바로 걸면 사각형 가장자리가 하얗게 뭉개져 보일 수 있습니다. 이미지를 transform: scale(1.1)처럼 10% 정도 확대하고 부모 요소에 overflow: hidden을 걸어두면 외곽 번짐 없이 또렷한 테두리를 유지할 수 있습니다. 단색 딤드 대신 linear-gradient(to bottom, rgba(15,23,42,0.2), rgba(15,23,42,0.85))처럼 상하 그라디언트를 적용하면 더 자연스러운 명암 흐름을 줄 수도 있습니다.

참고 포토샵이나 포토피(Photopea) 같은 편집 프로그램을 켜지 않고도, 이미지를 업로드하고 흐림 강도와 딤드 농도를 슬라이더로 조절하면 카드뉴스용 배경 이미지를 바로 만들어 다운로드할 수 있습니다.

CSS 값을 하나씩 바꿔가며 눈으로 확인하는 대신, 슬라이더로 흐림 강도와 딤드 농도를 조절하고 바로 결과를 받고 싶다면 저희 도구로 확인하기.

직접 해보기 →

흐림 강도·딤드 농도 설정 범위

파라미터

설정 가능 범위

기본값

역할

흐림 강도 (blur radius)

0px ~ 50px

15px

사진의 세부 디테일을 지우고 색 톤만 남깁니다

딤드 농도 (dim opacity)

0% ~ 100%

40%

검은 레이어의 진하기를 정해 텍스트 대비를 확보합니다

흐림 강도를 너무 낮게 두면 사진 디테일이 남아 텍스트 뒤가 산만해지고, 딤드 농도를 너무 낮게 두면 밝은 영역에서 흰 글자가 다시 묻힙니다. 반대로 두 값을 지나치게 높이면 사진이 거의 검은 사각형처럼 보여 원본 사진을 보여주는 의미가 사라집니다.

정리

• 사진 위 텍스트가 안 보이는 이유는 사진의 밝기가 균일하지 않기 때문입니다.
• 흐림 처리로 디테일을 지우고 딤드 레이어로 명암비를 맞추면 어떤 사진에서도 텍스트를 또렷하게 얹을 수 있습니다.
• CSS의 filter: blur()와 반투명 background만으로도 직접 구현할 수 있습니다.
• 값을 여러 번 바꿔보며 결과를 바로 확인하려면 슬라이더로 조절되는 도구를 쓰는 편이 빠릅니다.

자주 묻는 질문

딤드(Dimmed) 처리가 왜 필요한가요?

단순히 이미지를 흐리게만 하면 밝고 복잡한 영역(예: 밝은 하늘, 조명 등) 위에 흰색 자막을 얹었을 때 가독성이 떨어집니다. 반투명한 검은색 딤드 레이어를 함께 깔아 주면 사진의 원래 밝기와 무관하게 텍스트가 또렷하게 보입니다.

흐림 강도와 딤드 농도는 어떻게 조절하나요?

배경으로 쓸 원본 이미지를 업로드한 뒤, 흐림 강도 슬라이더와 딤드 불투명도 슬라이더를 움직이며 값을 조절합니다. 텍스트 미리보기로 자막 가독성이 충분한지 확인한 다음 완성된 배경 이미지를 다운로드하면 됩니다.

완성한 배경 이미지는 어디에 쓸 수 있나요?

카드뉴스, 유튜브 썸네일, 소셜 미디어 배너처럼 사진 위에 텍스트를 얹어야 하는 1:1 이미지 제작에 주로 사용합니다.