사진 뜨기 전 흰 글씨 안 보일 때
휴대폰으로 어떤 페이지에 처음 들어가면 큰 사진 위 제목이 잠깐 비어 보일 때가 있습니다. 조금 지나 사진이 뜨면 흰 글씨도 멀쩡히 보이니까 대개 그냥 넘어가죠. 하지만 그 사이에 들어온 손님은 제목을 읽지 못한 채 첫 화면을 보게 됩니다. 사진보다 글씨가 먼저 그려지
휴대폰으로 어떤 페이지에 처음 들어가면 큰 사진 위 제목이 잠깐 비어 보일 때가 있습니다. 조금 지나 사진이 뜨면 흰 글씨도 멀쩡히 보이니까 대개 그냥 넘어가죠. 하지만 그 사이에 들어온 손님은 제목을 읽지 못한 채 첫 화면을 보게 됩니다.
사진보다 글씨가 먼저 그려지는 사이
글씨는 페이지가 열리자마자 그려집니다. 사진은 내려받는 시간이 지나야 화면에 나오고요. 그 사이 사진 자리에는 사진 뒤에 깔린 바탕색이 비칩니다. 이 바탕이 밝은 색이면 흰 글씨가 바탕에 묻혀 버립니다.
이 빈틈은 어느 페이지에나 생깁니다. 처음 들어온 방문자나 통신이 느린 휴대폰에서는 더 길어지고요. 사진 주소가 깨져서 사진이 아예 안 뜨면 글씨는 끝까지 안 보인 채로 남습니다.
저희 랜딩 템플릿에서 흰 글씨가 크림색 바탕에 묻혔던 일
2026년 9월 2~3일에 저희 랜딩 템플릿 한 판에서 사진 띠 위 흰 글씨를 사진이 뜨기 전 상태로 재 봤습니다. 사진 대신 그 뒤의 크림색 바탕이 비쳤는데, 흰 글씨와 크림색 바탕의 대비가 1.09:1이었습니다. 두 색이 거의 같아서 글씨가 사라진 것과 마찬가지였어요.
그동안 몰랐던 데는 까닭이 있었습니다. 글자 대비 검사는 보통 사진이 다 뜬 화면으로 합니다. 그러면 사진이 뜨기 전 순간은 검사에서 빠집니다. 같은 크림색 바탕을 쓰는 다른 화면도 똑같이 걸려 있어서, 화면끼리 맞대 봐도 잡히지 않았습니다.
사진이 뜬 화면은 그대로 두고 뜨기 전만 고쳤습니다
사진이 들어가는 칸 바탕에 짙은 색을 한 겹 깔았습니다. 사진이 뜨면 이 색은 사진에 덮여 보이지 않고, 뜨기 전에만 드러나서 흰 글씨를 받쳐 줍니다.
고친 뒤 같은 자리의 대비는 17.04:1이 됐습니다. 사진이 뜬 뒤의 화면은 하나도 바뀌지 않았고요.
사진 위에 어두운 그라데이션을 얹는 방법은 쓰지 않았습니다. 사진이 어두워져서 원래 디자인과 달라지기 때문입니다. 그라데이션은 대개 아래쪽만 진해서 윗줄 글씨는 그대로 묻힌다는 점도 걸렸습니다.
사진이 다 뜬 뒤에도 글씨가 안 읽힌다면 그건 다른 문제입니다. 그때는 사진 밝기를 보고 모자란 만큼만 어둡게 맞춥니다.
내 페이지도 그런지 확인해 보려면
크롬 개발자 도구를 열고 「네트워크」 칸에서 속도를 느린 휴대폰 통신으로 바꿉니다. 캐시를 끈 채로 새로 고침을 하면 사진이 뜨기 전에 글씨가 보이는지 눈으로 볼 수 있습니다. 다 보고 나면 속도는 원래대로 돌려 두세요.
그 사진이 안 뜨는 날도 한번 떠올려 보세요. 사진 뒤 바탕색이 글씨 색과 비슷하면, 사진이 깨질 때 글씨도 같이 사라집니다.
사진 위 글씨나 첫 화면 칸을 손보고 싶으시면 페이지 제작에서 맡기실 수 있습니다.