SEO란 무엇인가?

한장희·2025년 9월 22일

SEO

SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트나 웹페이지를 검색 엔진에서 더 잘 노출되도록 최적화하는 것이다. 먼저 검색 엔진에 대해서 알아 보겠다.

검색 엔진

검색 엔진은 인터넷에서 정보를 찾아 정리하고, 사용자의 검색어에 가장 관련성 높은 결과를 보여주는 소프트웨어 시스템이다. 구글, 네이버가 대표적인 검색 엔진이다.

검색 엔진 작동 원리

검색엔진은 보통 세 가지 주요 단게로 작동한다.

  • 크롤링(Crawling): "크롤러(crawler)" 또는 "스파이더(spider)"라고 불리는 프로그램이 인터넷을 끊임없이 돌아다니면서 웹페이지(웹문서)를 방문하여 정보를 수집한다. 웹페이지에 있는 링크를 따라가며 방대한 양의 데이터를 탐색하고 복사한다. 링크를 따라 웹(web, 거미줄)을 따라다니는 모습이 거미 같아서 스파이더라고 한다.

  • 색인(Indexing): 크롤러가 수집한 데이터를 분석하고 분류하여 색인(Index)이라는 거대한 데이터베이스에 저장한다. 이 과정에서 페이지의 제목, 키워드, 내용, 이미지 등 다양한 정보가 정리되어 빠르게 검색될 수 있도록 준비된다. 마치 도서관에서 책의 제목, 저자, 내용을 정리해 놓는 것과 같다.

  • 랭킹(Ranking): 사용자가 검색어를 입력하면, 검색 엔진은 색인된 정보 중에서서 가장 관련성 높은 페이지를 찾아내고, 자체적인 복잡한 알고리즘을 사용하여 순위를 매겨 보여준다. 이 순위는 페이지의 품질, 사용자 관련성, 신뢰도 등 다양한 요소를 기반으로 결정되고, 각 검색 엔진마다 다른 기준을 가지고 있다.

SEO는 왜 중요한가?

SEO는 검색 엔진에서 웹 사이트가 더 많은 사용자에게 노출되게 하여서 비즈니스 성장에 기여를 하기 떄문에 매우 중요하다.

SEO를 개선하는 방법

SEO를 계선하기 위해서는 세가지 방법이 있다.

  • 기술적 SEO (Technical SEO)
    웹사이트의 기술적 기반을 최적화하여 검색엔진이 사이트를 더 잘 크롤링하고 색인화 할 수 있게 하는 작업이다.
    • 웹사이트 속도 개선: 페이지 로딩 속도가 빠를수록 검색 엔진은 더 높은 점수를 준다. 이미지 최적화 등을 통해 속도를 높일 수 있다.
    • 모바일 친화성: 모바일 기기에서도 웹사이트가 잘 보이도록 반응형 디자인을 적용해야 한다.
    • 사이트 구조 최적화: XML사이트 맵을 만들어서 명확한 사이트 구조를 만든다.
    <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.example.com/</loc>
      <lastmod>2025-09-22</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://www.example.com/about</loc>
      <lastmod>2025-09-21</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
   </url>
</urlset>
  • 온페이지 SEO (On-page SEO)
    웹사이트 내부의 콘텐츠와 HTML 요소를 최적화 하는 작업이다. 웹사이트의 콘텐츠를 더 사용자 친화적으로 만드는 것이다.
    • 키워드 연구: 사용자가 검색할 가능성이 있는 키워드를 찾고, 해당 키워드를 콘텐츠에 포함 시킨다. 키워드는 제목, 본문, URL, 메타 태그 등에 포함되야한다.
    • 메타 태그 최적화: <title> 태그와 <meta name="description">을 최적화한다.
  • 오프페이지 SEO (Off-page SEO)
    웹사이트 외부에서 이루어지는 모든 최적화 작업을 말한다. 다른 사람들이 이 사이트에 대한 평가, 신뢰도, 권위를 높이는데 초점을 맞춘다.
    • 백링크 확보: 다른 신뢰할 수 있는 웹사이트로 부터 내 웹사이트로 연결되는 링크(백링크)를 확보한다.
    • 소셜 미디어 활동: 소셜 미디어에서 콘텐츠가 많이 공유되면 SEO에 긍정적인 영향을 미칠 수 있다.

프론트엔드 개발자가 할 수 있는 방법

1. 렌더링 방식 최적화

  • SSR(서버 사이드 렌더링): Next.js를 사용해서 서버에서 HTML을 미리 렌더링하여 크롤러가 자바스크립트를 실행하지 않고도 콘텐츠를 즉시 읽을 수 있게 한다. 이는 SPA(단일 페이지 애플리케이션)의 문제를 해결할 수 있다.
  • CSR(클라이언트 사이드 렌더링) 개선: CSR을 적용할 때 동적으로 메타태그를 삽입하거나, 중요한 콘텐츠를 미리 불러도록 한다. 리액트는 react-helmet 라이브러리를 사용하면 된다.

2. HTML 구조 최적화

  • 시맨틱 HTML 사용: <header>, <nav>, <article>, <section>, <footer>와 같은 시맨틱 태그를 사용하여 검색 엔진이 페이지 구조를 쉽게 이해하도록 돕느다.
  • 헤딩 태그 <h1> ~ <61>를 계층에 맞춰서 순서대로 사용하여서 콘텐츠의 중요도를 명확히 한다.
  • <title> 태그와 <meta name="description">을 최적화한다.
  • URL 구조 최적화: URL이 간단하고 의미 있는 형태로 작성되도록 하며, 예를 들어 example.com/products/iphone-13과 같은 형태로 구성한다.

3. 404 오류 처리 및 리디렉션

  • 유효한 404 페이지 제공: 방문자가 잘못된 URL을 입력했을 때 404 오류 페이지를 제공한다.
  • 301리디렉션: URL 변경이나 삭제된 페이지가 있을 경우 자동으로 리디렉션이 되도록 설정한다.

4. 웹 접근성 개선

  • ARIA 태그: aria-label, aria-role과 같은 AIRA 속성을 추가하여 웹사이트가 스크린 리더기를 사용하는 사람들에게 접근이 용이하게 한다.
  • 키보드 탐색 기능 추가: 마우스 없이 키보드로도 탐색 가능하게 만든다.
  • 모든 콘텐츠 텍스트화: 이미지에 alt 속성을 추가한다.
  • 이미지에 플레이스홀더 설정: 이미지가 로딩되는 동안 공간을 미리 확보하여 레이아웃의 안정성을 제공한다. 이는 CLS(Cumulative Layout Shift)를 줄여 사용자 경험을 향상시키고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 준다.

5. 웹사이트 속도 최적화

  • 이미지 최적화: 이미지를 WebP, AVIF와 같은 확장자를 이용해 압축한다.
  • Lazy Loading: 이미지, 비디오 등이 화면에 필요할 때만 로드되도록 한다.
  • JS, CSS 최소화: JS 및 CSS 파일을 압축하여 페이지 로딩 시간을 줄인다.
  • 캐시: 브라우저 캐싱을 설정하여 사용자가 웹사이트를 다시 방문할 때 페이지 로딩 속도를 높인다.
  • 폰트 최적화: @import사용을 피하고 @font-face 규칙을 따르거나 <link>태그를 사용한다. @import는 CSS파일이 모두 다운로드되고 파싱된 후에 폰트를 불러오기 시작한다. 그래서 기본 폰트가 표시되었다가 웹폰트로 변하는 FOIT(Flash of Invisible Text)나 웹 폰트가 로드 되기 전 빈공간으로 남겨져 있다가, 웹폰트가 로드되면 깨진 폰트가 나오는 FOUT(Flash of Unstyled Text)가 일어날 수 있다.
  • 코드 스플리팅: 전체 코드를 하나의 큰 파일로 번들링하는 대신, 여러 개의 작은 파일로 나누는 기법이다. 초기 페이지 로딩 시 필요한 코드만 먼저 불러오고, 다른 페이지로 이동하거나 특정 버튼을 클릭할 때 나머지 코드를 비동기적으로 로드한다. Next.js를 쓰면 자동으로 코드 스플리팅을 해준다.
  • 자바스크립트 로딩: 브라우저는 <body> 태그에 있는 자바스크립트를 만나면 다운로드, 파싱, 실행이 완료될 때까지 HTML 파싱을 멈춘다. 이를 렌더링 차단(Render Blocking)이라고 한다. async와 defer 속성을 사용하면 렌더링을 차단하지 않도록 도와준다. async와 defer둘 다 비동기적으로 자바스크립트 파일을 다운로드 하지만 async는 다운로드가 완료되면 HTML 파싱을 멈추고 스크립트를 실행하는 반면, defer는 HTML 파싱이 완전히 끝나고 실행한다.

6. 모바일 최적화(Reponsive Design)

  • 모바일 퍼스트: 구글은 모바일 친화적인 웹사이트를 우선한다. 반응형 디자인을 구현해야한다.
  • 뷰포트 설정: <meta name="viewport" content="width=device-width, initial-scale=1">태그를 사용하여 모바일 화면에서 최적의 크기를 제공하고, 화면 크기에 따라 동적으로 레이아웃을 조정한다.

마무리

SEO를 하는 방법에는 다양한 방법들이 있지만 각 검색엔진에 맞춰서 SEO를 하는 것이 중요할 것 같다.

profile
한장희
발전하는 프론트엔드 개발자입니다!
이전 포스트

CORS란 무엇인가?

다음 포스트

User Flow Diagram이란

0개의 댓글