안녕하세요, 그리드클러치입니다.
홈페이지 상담을 하다 보면 이런 경우를 종종 만납니다.
"디자인은 정말 예쁜데... 이상하게 검색에 안 잡혀요."
원인을 살펴보면 열에 아홉은 같습니다.
바로 텍스트를 이미지로 통째로 만들어 넣은 경우입니다.
오늘은 이게 왜 SEO에 치명적인지,
그리고 어떻게 피해야 하는지 설명드리겠습니다.
🖼️ 왜 "통이미지"가 문제일까요?
검색엔진(구글, 네이버)은 사람처럼 눈으로 홈페이지를 보지 않습니다. 크롤러(crawler)라는 프로그램이 HTML 코드 안의 텍스트를 읽어서 이 페이지가 어떤 내용을 다루는지 파악합니다.
그런데 회사소개, 서비스 설명, 심지어 메인 카피 문구까지 디자인 프로그램(포토샵, 피그마 등)에서 이미지 파일로 통째로 만들어 넣으면 어떻게 될까요?
검색엔진 입장에서는 이렇게 보입니다.
- 사람 눈에 보이는 것: "20년 전통의 프리미엄 한의원"
- 크롤러가 실제로 읽는 것: <img src="banner.jpg"> (텍스트 정보 없음)
즉, 아무리 좋은 문구를 넣어도 검색엔진은 그 내용을 전혀 읽지 못합니다. 사이트에 어떤 키워드가 있는지 파악할 방법이 없으니, 관련 검색어로 노출될 기회 자체가 사라지는 셈입니다.
📉 통이미지 홈페이지, 구체적으로 어떤 손해를 볼까요?
- 키워드 노출 실패
"강남 치과", "부산 이사업체"처럼 지역+업종 키워드로 검색 노출이 되어야 하는데, 텍스트가 없으니 검색엔진이 매칭할 정보 자체가 없습니다. - 접근성 문제
시각장애인용 스크린 리더도 이미지 속 텍스트는 읽지 못합니다. 웹 접근성 측면에서도 감점 요인입니다. - 로딩 속도 저하
텍스트는 몇 바이트면 되지만, 그 텍스트를 이미지로 만들면 용량이 수십~수백 배 커집니다. 로딩이 느려지면 이 역시 SEO 순위에 부정적 영향을 줍니다. - 선명도 저하 문제
텍스트를 이미지로 만들면 화면 크기·해상도에 따라 확대되면서 글자가 흐려지거나 깨지는 현상이 발생합니다. 특히 레티나 디스플레이(고해상도 화면)나 큰 모니터에서 접속했을 때 텍스트 이미지의 픽셀이 그대로 드러나 번져 보이는데, 실제 폰트로 렌더링되는 텍스트는 어떤 해상도·화면 크기에서도 항상 선명하게 표시됩니다. - 다국어·수정 대응 어려움
텍스트를 바꾸려면 디자인 프로그램을 열어 이미지를 다시 만들어야 합니다. 오탈자 하나 고치는 데도 번거로운 작업이 필요해집니다.
✅ 그렇다면 어떻게 만들어야 할까요?
핵심은 간단합니다. 디자인적으로 이미지처럼 보이더라도, 실제로는 텍스트(HTML) 코드로 구현하는 것입니다.
- 폰트, 자간, 배경 효과 등은 CSS로 스타일링해서 이미지 못지않은 비주얼을 구현
- 로고나 순수 그래픽 요소만 이미지로 사용
- 이미지를 꼭 써야 하는 경우, alt 속성에 대체 텍스트를 반드시 입력 (크롤러가 이미지의 내용을 이해할 수 있도록)
즉, "예쁜데 검색엔진도 읽을 수 있는" 두 마리 토끼를 잡는 게 핵심입니다. 실제로 아임웹 기본 위젯의 텍스트 요소나 저희가 결합하는 커스텀 코드도, 겉보기엔 세련된 이미지처럼 보이지만 실제로는 코드로 짜여진 '읽히는 텍스트'입니다.
💬 그리드클러치는 이렇게 작업합니다
그리드클러치에서 홈페이지를 제작할 땐, 디자인 퀄리티를 위해 비주얼 요소는 최대한 정교하게 만들되, 핵심 카피와 정보는 반드시 텍스트 코드로 심어서 검색엔진이 제대로 읽을 수 있도록 구성합니다. 여기에 기본적인 네이버·구글 SEO 등록까지 함께 진행해 드리기 때문에, 디자인과 검색 노출 두 가지를 모두 챙기실 수 있습니다.
혹시 지금 운영 중인 홈페이지가 통이미지 형태로 되어 있어서 걱정되신다면, 진단 상담도 편하게 문의 주세요.
채팅상담 받아보기
안녕하세요, 그리드클러치입니다.
홈페이지 상담을 하다 보면 이런 경우를 종종 만납니다.
"디자인은 정말 예쁜데... 이상하게 검색에 안 잡혀요."
원인을 살펴보면 열에 아홉은 같습니다.
바로 텍스트를 이미지로 통째로 만들어 넣은 경우입니다.
오늘은 이게 왜 SEO에 치명적인지,
그리고 어떻게 피해야 하는지 설명드리겠습니다.
🖼️ 왜 "통이미지"가 문제일까요?
검색엔진(구글, 네이버)은 사람처럼 눈으로 홈페이지를 보지 않습니다. 크롤러(crawler)라는 프로그램이 HTML 코드 안의 텍스트를 읽어서 이 페이지가 어떤 내용을 다루는지 파악합니다.
그런데 회사소개, 서비스 설명, 심지어 메인 카피 문구까지 디자인 프로그램(포토샵, 피그마 등)에서 이미지 파일로 통째로 만들어 넣으면 어떻게 될까요?
검색엔진 입장에서는 이렇게 보입니다.
즉, 아무리 좋은 문구를 넣어도 검색엔진은 그 내용을 전혀 읽지 못합니다. 사이트에 어떤 키워드가 있는지 파악할 방법이 없으니, 관련 검색어로 노출될 기회 자체가 사라지는 셈입니다.
📉 통이미지 홈페이지, 구체적으로 어떤 손해를 볼까요?
"강남 치과", "부산 이사업체"처럼 지역+업종 키워드로 검색 노출이 되어야 하는데, 텍스트가 없으니 검색엔진이 매칭할 정보 자체가 없습니다.
시각장애인용 스크린 리더도 이미지 속 텍스트는 읽지 못합니다. 웹 접근성 측면에서도 감점 요인입니다.
텍스트는 몇 바이트면 되지만, 그 텍스트를 이미지로 만들면 용량이 수십~수백 배 커집니다. 로딩이 느려지면 이 역시 SEO 순위에 부정적 영향을 줍니다.
텍스트를 이미지로 만들면 화면 크기·해상도에 따라 확대되면서 글자가 흐려지거나 깨지는 현상이 발생합니다. 특히 레티나 디스플레이(고해상도 화면)나 큰 모니터에서 접속했을 때 텍스트 이미지의 픽셀이 그대로 드러나 번져 보이는데, 실제 폰트로 렌더링되는 텍스트는 어떤 해상도·화면 크기에서도 항상 선명하게 표시됩니다.
텍스트를 바꾸려면 디자인 프로그램을 열어 이미지를 다시 만들어야 합니다. 오탈자 하나 고치는 데도 번거로운 작업이 필요해집니다.
✅ 그렇다면 어떻게 만들어야 할까요?
핵심은 간단합니다. 디자인적으로 이미지처럼 보이더라도, 실제로는 텍스트(HTML) 코드로 구현하는 것입니다.
즉, "예쁜데 검색엔진도 읽을 수 있는" 두 마리 토끼를 잡는 게 핵심입니다. 실제로 아임웹 기본 위젯의 텍스트 요소나 저희가 결합하는 커스텀 코드도, 겉보기엔 세련된 이미지처럼 보이지만 실제로는 코드로 짜여진 '읽히는 텍스트'입니다.
💬 그리드클러치는 이렇게 작업합니다
그리드클러치에서 홈페이지를 제작할 땐, 디자인 퀄리티를 위해 비주얼 요소는 최대한 정교하게 만들되, 핵심 카피와 정보는 반드시 텍스트 코드로 심어서 검색엔진이 제대로 읽을 수 있도록 구성합니다. 여기에 기본적인 네이버·구글 SEO 등록까지 함께 진행해 드리기 때문에, 디자인과 검색 노출 두 가지를 모두 챙기실 수 있습니다.
혹시 지금 운영 중인 홈페이지가 통이미지 형태로 되어 있어서 걱정되신다면, 진단 상담도 편하게 문의 주세요.
채팅상담 받아보기