시안에서는 멀쩡했던 메인 배너 문구가, 사진을 바꾸고 나니 하늘색이나 흰 벽에 묻혀 안 보이는 경우가 많습니다.
배너 이미지 위 글자 가독성은 사진마다 손보는 것보다 글자 뒤에 반투명 그라데이션을 한 겹 깔아 두는 쪽이 훨씬 안정적입니다. 실무에서 쓰는 설정과 점검 기준을 정리했습니다.

1. 글자 쪽만 어둡게, 그라데이션 오버레이

사진 전체를 어둡게 덮으면 분위기가 죽습니다. 글자가 놓이는 방향만 어둡게 하고 반대쪽은 투명하게 두면 사진 느낌은 살리면서 문구는 읽힙니다. 배경 이미지 앞에 linear-gradient를 한 겹 더 쓰는 방식이라 추가 태그도 필요 없습니다.

/* 왼쪽 문구 기준: 왼쪽은 어둡게, 오른쪽은 투명 */
.main-banner {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.6) 0%,
      rgba(0,0,0,.3) 45%,
      rgba(0,0,0,0) 75%),
    url("banner.jpg") center / cover no-repeat;
  color: #fff;
}

2. 모바일은 방향을 바꿔 주세요

모바일에서는 문구가 보통 아래쪽이나 가운데로 내려오기 때문에, 가로 그라데이션을 그대로 두면 오른쪽 글자가 밝은 부분에 걸립니다. 화면 폭에 맞춰 세로 방향으로 바꾸고, 문구가 놓이는 아래쪽을 진하게 잡아 줍니다.

@media (max-width: 767px) {
  .main-banner {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,.65) 100%),
      url("banner-m.jpg") center / cover no-repeat;
  }
}

3. text-shadow는 보조로만

글자 그림자만으로 해결하려고 진한 text-shadow를 넣으면 글자가 번져 보이고 오래된 사이트 느낌이 납니다. 오버레이를 깔아 둔 상태에서 0 1px 3px rgba(0,0,0,.4) 정도로 살짝만 더하는 게 적당합니다. 얇은 서체를 쓰는 경우라면 굵기를 한 단계 올리는 편이 효과가 더 큽니다.

4. 대비는 눈 말고 숫자로 확인

웹 접근성 기준(WCAG)은 일반 본문 글자에 배경과 4.5:1 이상, 큰 제목 글자에는 3:1 이상의 명암 대비를 권장합니다. 크롬 개발자 도구에서 글자 요소를 선택하고 색상 견본을 누르면 대비 값이 표시됩니다. 다만 배경이 사진이면 값이 정확히 나오지 않을 수 있으니, 글자 바로 뒤에서 가장 밝은 지점의 색을 스포이드로 찍어 함께 확인해 보세요.