카드뉴스 배경 흐림 수식과 가우시안 딤드(Dimmed) 이미지 가이드

직접 해보기 →

인스타그램 카드뉴스, 카드형 유튜브 썸네일, 소셜 미디어 배너를 제작할 때 인물이나 제품 사진 위로 흰색 글자가 잘 보이도록 사진을 부드럽게 흐리게(Blur) 만들고 어두운 투명도(Dimmed Overlay) 필터를 입히는 디자인 기법이 바로 카드뉴스 배경 딤드(Dimmed) 이미지 처리입니다.

복잡하고 화려한 사진 원본 위에 타이틀 텍스트를 바로 올리면 시선이 산만해져 글자를 전혀 읽을 수 없습니다. CSS의 backdrop-filter: blur(12px) 및 linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) 또는 HTML5 Canvas 픽셀 블러 연산을 적용하면, 텍스트 가독성이 극대화된 럭셔리 배경 이미지를 순식간에 제작해 다운로드할 수 있습니다. 본 글에서는 가우시안 딤드 필터 수식과 캔버스 블러 처리법을 해설합니다.

---

1. 가우시안 블러 및 알파 딤드(Dimmed) 합성 수식 공식

원본 이미지 픽셀 I(x, y)에 대해 가우시안 흐림 커널 G(x, y, sigma)를 적용한 후, 알파 불투명도 alpha를 가진 블랙 딤드 층 C_dimmed를 오버레이 합성하는 연산 공식은 다음과 같습니다:

[ I_{\text{blur}}(x, y) = I(x, y) * G(x, y, \sigma) ]

[ I_{\text{final}}(x, y) = I_{\text{blur}}(x, y) \times (1 - \alpha) + C_{\text{dimmed}} \times \alpha ]

딤드 이미지 렌더링 2대 파라미터 수식:

• 흐림 강도 ($sigma = 8 ext{px} sim 24 ext{px}$): 복잡한 사진 경계선을 부드럽게 감추고 색감 톤만 남기는 가우시안 반경입니다.
• 어두움 딤드 비율 ($alpha = 0.3 sim 0.6$): 사진 위에 30%~60% 농도의 검은색 투명 레이어를 깔아 흰색 텍스트의 대비(Contrast) 명암비를 최대로 끌어올립니다.

---

2. CSS 및 Canvas 카드뉴스 딤드 배경 구현 소스

다음은 이미지 위에 딤드 필터와 가우시안 블러를 입히는 순수 CSS 및 HTML5 캔버스 소스입니다:

<!-- 1. CSS backdrop-filter 기반 딤드 레이어 카드 -->
<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%;
}

[!NOTE] 매번 포토샵이나 포토푀 프로그램을 켜서 사진을 어둡고 흐리게 가공하는 번거로움 없이, 카드뉴스 배경 흐림 및 딤드 이미지 생성기 도구를 활용하면 이미지를 업로드하고 흐림 반경과 딤드 농도를 조절하여 가독성이 완벽히 확보된 카드뉴스 배경 1:1 이미지를 즉시 다운로드할 수 있습니다.

---

3. 실무 카드뉴스 그래픽 편집 지침

1. 블러 적용 시 이미지 외곽 흰색 번짐 방지: CSS filter: blur(10px)를 이미지 태그에 지정하면 사각형 가장자리가 하얗게 뭉개지며 들어갑니다. 이미지 크기를 transform: scale(1.1)처럼 10% 정도 확대하고 부모 요소에 overflow: hidden을 걸어두면 외곽 번짐 없는 또렷한 테두리를 유지할 수 있습니다.
2. 다채색 그라디언트 딤드 (Gradient Dimmed) 연출: 단순 단색 블랙 딤드 대신 linear-gradient(to bottom, rgba(15,23,42,0.2), rgba(15,23,42,0.85)) 형태의 사선 또는 상하 그라디언트 딤드를 적용하면 훨씬 감각적이고 고급스러운 디자인 감성을 전달할 수 있습니다.