Blog·인사이트

웹은 안 보이는 에러가 너무 많다

··6분 읽기
요약

웹사이트가 화면에 잘 보인다고 문제가 없는 것은 아닙니다. 사용자 눈에는 정상인데, 검색엔진에는 빈 페이지로 보이거나, 특정 조건에서만 터지거나, 느리게 로드되는 문제들이 있습니다.

웹사이트가 화면에 잘 보인다고 문제가 없는 것은 아닙니다. 사용자 눈에는 정상인데, 검색엔진에는 빈 페이지로 보이거나, 특정 조건에서만 터지거나, 느리게 로드되는 문제들이 있습니다. "안 보이는 에러"가 매출에 직접 영향을 줍니다.

사용자에게는 보이는데 검색엔진에는 안 보이는 페이지

SPA의 구조적 문제

React, Vue, Next.js 같은 프레임워크로 만든 SPA(Single Page Application)는 브라우저에서 JavaScript가 실행되어야 화면이 그려집니다. 사용자가 보기엔 정상이지만, 검색엔진 크롤러가 JavaScript를 제대로 실행하지 못하면 빈 페이지로 인식합니다.

  • Google 크롤러는 JavaScript를 실행하지만, 렌더링 큐 대기 시간이 있어 모든 페이지를 즉시 처리하지 않음
  • Naver 크롤러는 JavaScript 실행 능력이 Google보다 제한적
  • 결과적으로 콘텐츠가 있는데도 검색에 안 잡히는 상황 발생

SSR에서 API 호출 실패

Next.js의 SSR(서버 사이드 렌더링)은 서버에서 HTML을 미리 만들어서 내려줍니다. 이때 API 서버에서 데이터를 가져오는데, 이 호출이 실패하면 빈 HTML이 내려갑니다.

실제 사례: Docker 환경에서 프론트엔드 컨테이너가 백엔드 컨테이너의 API를 호출할 때, 백엔드의 ALLOWED_HOSTS에 컨테이너 이름이 없어서 400 에러를 반환. 사용자가 브라우저에서 보면 클라이언트 사이드에서 다시 데이터를 가져오기 때문에 정상으로 보이지만, 검색엔진 크롤러에게는 빈 페이지.

무서운 점: 사이트 운영자도, 사용자도 모릅니다. 검색 유입이 서서히 줄어드는 것으로만 체감됩니다.

null 데이터로 인한 SSR 크래시

서버에서 데이터를 가져왔는데 특정 필드가 null인 경우, JavaScript가 Cannot read properties of null 에러를 내면서 전체 페이지 렌더링이 실패합니다.

TypeError: Cannot read properties of null (reading 'board_category')

이런 에러는 개발 환경에서는 데이터가 모두 정상이라 발견되지 않고, 운영 환경에서 예외적인 데이터가 들어왔을 때만 발생합니다.

OG 이미지, meta description이 빠져있는 페이지

카카오톡이나 슬랙에 링크를 공유했을 때 미리보기가 안 나오거나, 모든 페이지가 같은 이미지와 설명으로 나온 적 있으신가요?

OG(Open Graph) 태그는 링크를 공유했을 때 표시되는 제목, 설명, 이미지를 결정합니다. 이게 빠져있으면 카카오톡에서 링크를 보내도 그냥 URL만 덩그러니 나옵니다. 모든 페이지에 같은 OG 이미지가 설정되어 있으면, 블로그 글을 공유해도 메인 페이지 이미지가 나옵니다.

meta description은 검색 결과에서 사이트 제목 아래 표시되는 설명문입니다. 이게 없으면 Google이 페이지 본문에서 아무 문장이나 가져다 씁니다. "이 사이트가 뭐 하는 곳인지" 검색 결과만 보고 판단할 수 없게 됩니다.

keywords 메타 태그는 직접적인 SEO 효과는 낮아졌지만, 검색엔진이 페이지의 주제를 파악하는 데 참고합니다. 각 페이지별로 다른 키워드가 설정되어야 의미가 있습니다. 모든 페이지에 같은 키워드가 들어있으면 없는 것과 같습니다.

특히 블로그처럼 페이지가 수십, 수백 개인 경우, 각 게시글마다 제목/설명/이미지가 동적으로 설정되어야 합니다. SSR(서버 사이드 렌더링)로 페이지를 생성할 때 이 메타 태그를 함께 내려줘야 하는데, 이 부분이 빠져있는 사이트가 생각보다 많습니다.

사용자도 모르는 에러들

GTM/Analytics 태그가 일부 페이지에서 안 되는 문제

SPA에서 Google Tag Manager나 Analytics를 설치하면, 첫 페이지 로드에서만 태그가 발동하고 이후 페이지 이동에서는 태그가 실행되지 않는 경우가 많습니다.

  • 사이트 운영자: "태그 심었으니 트래킹 되겠지" → 실제로는 메인 페이지만 측정
  • 마케터: "광고 성과가 이상하게 낮다" → 전환 추적이 안 되고 있었음
  • 해결: SPA 페이지 전환 시 dataLayer.push 코드를 추가하고, GTM에서 맞춤 이벤트 트리거로 연결

모바일에서만 발생하는 오버플로우

PC에서는 완벽하게 보이지만, 모바일에서 가로 스크롤이 생기거나 콘텐츠가 잘리는 문제. 개발자가 PC로만 테스트하면 발견하지 못합니다.

  • 특정 컴포넌트의 min-width가 고정되어 모바일 뷰포트를 초과
  • 테이블이나 코드 블록이 가로로 넘침
  • iPhone SE 같은 작은 화면에서 메뉴가 잘리거나 스크롤 안 됨

느린 페이지 로드

3초 이상 로드되는 페이지는 사용자 이탈률이 급격히 올라갑니다. 하지만 개발자의 고성능 PC와 빠른 네트워크에서는 체감되지 않습니다.

  • 최적화되지 않은 이미지 (3MB짜리 사진을 그대로 사용)
  • 불필요한 JavaScript 번들 (사용하지 않는 라이브러리 포함)
  • 서드파티 스크립트가 렌더링을 블로킹

어떻게 확인해야 하는가

1. Google Search Console

가장 기본적인 도구. 무료.

  • 커버리지 보고서: 크롤러가 페이지를 정상적으로 인덱싱했는지 확인
  • URL 검사: 특정 URL이 검색엔진에 어떻게 보이는지 실시간 확인
  • Core Web Vitals: 로딩 속도, 인터랙티브 시간, 레이아웃 안정성

2. 실제 크롤러 시점으로 페이지 확인

curl -s https://내사이트.com/특정페이지

이 명령어의 결과가 빈 HTML이거나 에러 페이지면, 검색엔진도 동일하게 봅니다. 브라우저에서 보이는 것과 다를 수 있습니다.

3. Lighthouse 점수 확인

Chrome 개발자 도구 → Lighthouse 탭에서 성능, 접근성, SEO 점수를 확인할 수 있습니다. 90점 이상이 권장.

4. 모바일 실기기 테스트

Chrome DevTools의 모바일 시뮬레이션은 완벽하지 않습니다. 실제 iPhone, Android 기기에서 확인해야 합니다. 특히:

  • Safari (iOS): 다른 브라우저와 렌더링 차이가 큼
  • 저사양 Android: 성능 문제가 두드러짐
  • 가로 모드: 예상 못한 레이아웃 깨짐

5. 에러 모니터링 도구

Sentry, LogRocket 같은 도구를 설치하면, 실제 사용자 환경에서 발생하는 JavaScript 에러를 실시간으로 수집합니다. "이런 에러가 있었어?" 하는 것들이 하루에도 수십 건 쌓입니다.

정리

웹에서 "안 보이는 에러"가 위험한 이유:

  • 검색 유입 감소 → SSR 실패, 크롤링 실패로 페이지가 인덱싱 안 됨
  • 마케팅 데이터 왜곡 → 태그가 일부 페이지에서만 동작하여 전환 측정 누락
  • 사용자 이탈 → 모바일 깨짐, 느린 로드를 운영자만 모름
  • 누적 기술 부채 → null 에러, 미처리 예외가 쌓이면서 서비스 전체 안정성 저하

화면에 잘 보인다고 끝이 아닙니다. 검색엔진이 보는 것, 모바일에서 보이는 것, 데이터가 수집되는 것까지 확인해야 진짜 운영입니다.

*웹사이트의 SEO 점검이나 기술 감사가 필요하시다면, 프로젝트 상담을 통해 문의해 주세요.*


SEO,SSR,에러,웹개발,검색엔진,크롤링
다른 포스팅
Blog·인사이트

웹은 안 보이는 에러가 너무 많다

··6분 읽기

웹사이트가 화면에 잘 보인다고 문제가 없는 것은 아닙니다. 사용자 눈에는 정상인데, 검색엔진에는 빈 페이지로 보이거나, 특정 조건에서만 터지거나, 느리게 로드되는 문제들이 있습니다. "안 보이는 에러"가 매출에 직접 영향을 줍니다.

사용자에게는 보이는데 검색엔진에는 안 보이는 페이지

SPA의 구조적 문제

React, Vue, Next.js 같은 프레임워크로 만든 SPA(Single Page Application)는 브라우저에서 JavaScript가 실행되어야 화면이 그려집니다. 사용자가 보기엔 정상이지만, 검색엔진 크롤러가 JavaScript를 제대로 실행하지 못하면 빈 페이지로 인식합니다.

  • Google 크롤러는 JavaScript를 실행하지만, 렌더링 큐 대기 시간이 있어 모든 페이지를 즉시 처리하지 않음
  • Naver 크롤러는 JavaScript 실행 능력이 Google보다 제한적
  • 결과적으로 콘텐츠가 있는데도 검색에 안 잡히는 상황 발생

SSR에서 API 호출 실패

Next.js의 SSR(서버 사이드 렌더링)은 서버에서 HTML을 미리 만들어서 내려줍니다. 이때 API 서버에서 데이터를 가져오는데, 이 호출이 실패하면 빈 HTML이 내려갑니다.

실제 사례: Docker 환경에서 프론트엔드 컨테이너가 백엔드 컨테이너의 API를 호출할 때, 백엔드의 ALLOWED_HOSTS에 컨테이너 이름이 없어서 400 에러를 반환. 사용자가 브라우저에서 보면 클라이언트 사이드에서 다시 데이터를 가져오기 때문에 정상으로 보이지만, 검색엔진 크롤러에게는 빈 페이지.

무서운 점: 사이트 운영자도, 사용자도 모릅니다. 검색 유입이 서서히 줄어드는 것으로만 체감됩니다.

null 데이터로 인한 SSR 크래시

서버에서 데이터를 가져왔는데 특정 필드가 null인 경우, JavaScript가 Cannot read properties of null 에러를 내면서 전체 페이지 렌더링이 실패합니다.

TypeError: Cannot read properties of null (reading 'board_category')

이런 에러는 개발 환경에서는 데이터가 모두 정상이라 발견되지 않고, 운영 환경에서 예외적인 데이터가 들어왔을 때만 발생합니다.

OG 이미지, meta description이 빠져있는 페이지

카카오톡이나 슬랙에 링크를 공유했을 때 미리보기가 안 나오거나, 모든 페이지가 같은 이미지와 설명으로 나온 적 있으신가요?

OG(Open Graph) 태그는 링크를 공유했을 때 표시되는 제목, 설명, 이미지를 결정합니다. 이게 빠져있으면 카카오톡에서 링크를 보내도 그냥 URL만 덩그러니 나옵니다. 모든 페이지에 같은 OG 이미지가 설정되어 있으면, 블로그 글을 공유해도 메인 페이지 이미지가 나옵니다.

meta description은 검색 결과에서 사이트 제목 아래 표시되는 설명문입니다. 이게 없으면 Google이 페이지 본문에서 아무 문장이나 가져다 씁니다. "이 사이트가 뭐 하는 곳인지" 검색 결과만 보고 판단할 수 없게 됩니다.

keywords 메타 태그는 직접적인 SEO 효과는 낮아졌지만, 검색엔진이 페이지의 주제를 파악하는 데 참고합니다. 각 페이지별로 다른 키워드가 설정되어야 의미가 있습니다. 모든 페이지에 같은 키워드가 들어있으면 없는 것과 같습니다.

특히 블로그처럼 페이지가 수십, 수백 개인 경우, 각 게시글마다 제목/설명/이미지가 동적으로 설정되어야 합니다. SSR(서버 사이드 렌더링)로 페이지를 생성할 때 이 메타 태그를 함께 내려줘야 하는데, 이 부분이 빠져있는 사이트가 생각보다 많습니다.

사용자도 모르는 에러들

GTM/Analytics 태그가 일부 페이지에서 안 되는 문제

SPA에서 Google Tag Manager나 Analytics를 설치하면, 첫 페이지 로드에서만 태그가 발동하고 이후 페이지 이동에서는 태그가 실행되지 않는 경우가 많습니다.

  • 사이트 운영자: "태그 심었으니 트래킹 되겠지" → 실제로는 메인 페이지만 측정
  • 마케터: "광고 성과가 이상하게 낮다" → 전환 추적이 안 되고 있었음
  • 해결: SPA 페이지 전환 시 dataLayer.push 코드를 추가하고, GTM에서 맞춤 이벤트 트리거로 연결

모바일에서만 발생하는 오버플로우

PC에서는 완벽하게 보이지만, 모바일에서 가로 스크롤이 생기거나 콘텐츠가 잘리는 문제. 개발자가 PC로만 테스트하면 발견하지 못합니다.

  • 특정 컴포넌트의 min-width가 고정되어 모바일 뷰포트를 초과
  • 테이블이나 코드 블록이 가로로 넘침
  • iPhone SE 같은 작은 화면에서 메뉴가 잘리거나 스크롤 안 됨

느린 페이지 로드

3초 이상 로드되는 페이지는 사용자 이탈률이 급격히 올라갑니다. 하지만 개발자의 고성능 PC와 빠른 네트워크에서는 체감되지 않습니다.

  • 최적화되지 않은 이미지 (3MB짜리 사진을 그대로 사용)
  • 불필요한 JavaScript 번들 (사용하지 않는 라이브러리 포함)
  • 서드파티 스크립트가 렌더링을 블로킹

어떻게 확인해야 하는가

1. Google Search Console

가장 기본적인 도구. 무료.

  • 커버리지 보고서: 크롤러가 페이지를 정상적으로 인덱싱했는지 확인
  • URL 검사: 특정 URL이 검색엔진에 어떻게 보이는지 실시간 확인
  • Core Web Vitals: 로딩 속도, 인터랙티브 시간, 레이아웃 안정성

2. 실제 크롤러 시점으로 페이지 확인

curl -s https://내사이트.com/특정페이지

이 명령어의 결과가 빈 HTML이거나 에러 페이지면, 검색엔진도 동일하게 봅니다. 브라우저에서 보이는 것과 다를 수 있습니다.

3. Lighthouse 점수 확인

Chrome 개발자 도구 → Lighthouse 탭에서 성능, 접근성, SEO 점수를 확인할 수 있습니다. 90점 이상이 권장.

4. 모바일 실기기 테스트

Chrome DevTools의 모바일 시뮬레이션은 완벽하지 않습니다. 실제 iPhone, Android 기기에서 확인해야 합니다. 특히:

  • Safari (iOS): 다른 브라우저와 렌더링 차이가 큼
  • 저사양 Android: 성능 문제가 두드러짐
  • 가로 모드: 예상 못한 레이아웃 깨짐

5. 에러 모니터링 도구

Sentry, LogRocket 같은 도구를 설치하면, 실제 사용자 환경에서 발생하는 JavaScript 에러를 실시간으로 수집합니다. "이런 에러가 있었어?" 하는 것들이 하루에도 수십 건 쌓입니다.

정리

웹에서 "안 보이는 에러"가 위험한 이유:

  • 검색 유입 감소 → SSR 실패, 크롤링 실패로 페이지가 인덱싱 안 됨
  • 마케팅 데이터 왜곡 → 태그가 일부 페이지에서만 동작하여 전환 측정 누락
  • 사용자 이탈 → 모바일 깨짐, 느린 로드를 운영자만 모름
  • 누적 기술 부채 → null 에러, 미처리 예외가 쌓이면서 서비스 전체 안정성 저하

화면에 잘 보인다고 끝이 아닙니다. 검색엔진이 보는 것, 모바일에서 보이는 것, 데이터가 수집되는 것까지 확인해야 진짜 운영입니다.

*웹사이트의 SEO 점검이나 기술 감사가 필요하시다면, 프로젝트 상담을 통해 문의해 주세요.*


SEO,SSR,에러,웹개발,검색엔진,크롤링
다른 포스팅
WebGL프로젝트 상담