프론트엔드 개발자가 알아야 할 SEO

들어가며

프론트엔드 개발자로서 저는 SEO를 어느 정도 안다고 생각했습니다. meta 태그를 적절히 설정하고, sitemap.xml을 관리하고, LCP나 FCP 같은 성능 지표를 최적화하면 SEO는 어느 정도 챙겼다고 여겼죠.

[후원사 프로그램] 1년에 10억 원을 절약한, 강남언니의 SEO 웹 전략 공개

그러다 FECONF 2025에서 강남언니팀 TPO의 SEO 웹 전략 세션을 듣고 충격을 받았습니다. SEO는 단순히 페이지 성능 최적화만 있는 게 아니었습니다. 양질의 콘텐츠를 주기적으로 발행하는 '콘텐츠 SEO'와 해당 콘텐츠를 검색엔진에게 잘 전달하는 '테크니컬 SEO', 검색 결과 페이지에서의 최적화를 다루는 '온서프 SEO', 외부 링크를 관리하는 '오프페이지 SEO'까지, SEO는 훨씬 넓은 범위를 다루고 있었습니다. 심지어 요즘은 AEO(Answer Engine Optimization), GEO(Generative Engine Optimization) 같은 개념도 등장하고 있더라구요.

'내가 알던 건 SEO의 일부에 불과했구나.' 이 깨달음 이후, 저는 SEO를 제대로 공부해보기로 마음먹었습니다. 구글의 공식 SEO 기본 가이드를 정독하며 구조화된 데이터(Structured Data) 같은 개념을 처음 접했습니다. 검색 결과에 별점이나 FAQ가 표시되는 것이 단순한 검색 엔진의 기능이 아니라, 개발자가 직접 구현할 수 있는 것이었다는 사실이 신기했습니다.

이후 센디 랜딩 페이지의 SEO를 개선하는 작업을 진행하며, 테크니컬 SEO와 온서프 SEO를 함께 최적화했고, 실제로 지표가 상승하는 것을 확인할 수 있었습니다. 이번 글에서는 제가 정리한 SEO의 개념과 범위, 그리고 프론트엔드 개발자가 실제로 최적화할 수 있는 영역들을 공유하고자 합니다.

SEO가 중요한 이유

프론트엔드 개발자로서 SEO를 신경 써야 하는 이유는 명확합니다. 우리가 만든 서비스가 사용자에게 도달하지 못한다면 아무리 좋은 코드를 작성해도 의미가 없기 때문입니다.

SEO의 핵심 가치는 오가닉 트래픽에 있습니다. 검색 엔진을 통해 자연스럽게 유입되는 트래픽은 유료 광고와 비교했을 때 몇 가지 중요한 장점이 있습니다.

첫째, 지속 가능한 트래픽 확보입니다. 광고는 비용을 지불하는 동안만 노출되지만, SEO를 통해 상위 노출된 페이지는 지속적으로 트래픽을 가져옵니다. 개발자가 초기에 제대로 구현해두면 장기적으로 비즈니스에 큰 기여를 할 수 있습니다.

둘째, 높은 신뢰도와 클릭률입니다. 많은 사용자들이 검색 결과의 광고 영역보다 자연 검색 결과를 더 신뢰합니다. 실제로 검색 결과 상단에 노출된 오가닉 콘텐츠는 광고 대비 높은 CTR(Click-Through Rate)을 기록하는 경향이 있습니다.

셋째, 개발자가 직접 컨트롤 가능하다는 점입니다. 마케팅 예산이나 광고 전략은 개발자의 영역이 아니지만, SEO 최적화는 코드 레벨에서 구현할 수 있습니다. meta 태그, 구조화된 데이터, 성능 개선 등 프론트엔드 개발자가 직접 개선할 수 있는 영역이 많습니다.

특히 스타트업이나 중소 규모 서비스에서는 마케팅 예산이 제한적일 수 있기 때문에, 개발자의 SEO 역량이 서비스 성장에 직접적인 영향을 미칩니다.

SEO의 범위

많은 프론트엔드 개발자들이 SEO를 생각할 때 "페이지 성능 최적화"만 떠올립니다. LCP, FCP 같은 지표를 개선하고, 이미지를 최적화하면 SEO는 충분하다고 생각하죠. 나머지는 마케터나 SEO 전문가의 영역이라고 여기는 경우가 많습니다.

하지만 SEO는 훨씬 넓은 범위를 다루며, 프론트엔드 개발자가 기여할 수 있는 영역도 생각보다 많습니다. SEO는 크게 세 가지 범주로 나뉩니다.

1. 온페이지 SEO (On-Page SEO)

웹사이트 내부에서 이루어지는 최적화 작업입니다. 온페이지 SEO는 다시 두 가지로 나뉩니다:

테크니컬 SEO: 검색 엔진이 페이지를 크롤링하고 인덱싱할 수 있도록 기술적으로 최적화하는 작업입니다. HTTPS 적용, sitemap.xml 관리, robots.txt 설정, 페이지 로딩 속도 개선, 모바일 반응형 등이 여기에 포함됩니다.
콘텐츠 SEO: 양질의 콘텐츠를 제공하여 검색 엔진과 사용자 모두에게 가치를 전달하는 작업입니다. E-A-T(전문성, 권위성, 신뢰성) 원칙에 기반한 콘텐츠 작성이 핵심입니다.

2. 온서프 SEO (On-SERP SEO)

검색 결과 페이지(SERP)에서의 최적화 작업입니다. 검색 엔진에 잘 노출되는 것을 넘어, 검색 결과 페이지에서 경쟁사 대비 더 눈에 띄게 만들어 클릭률을 높이는 것이 목표입니다.

대표적인 예시가 구조화된 데이터(Structured Data) 입니다. Schema.org 마크업을 활용하면 검색 결과에 별점, 가격, FAQ, 이벤트 날짜 등 추가 정보를 노출시킬 수 있습니다.

여기서 중요한 점은, 온서프 SEO는 프론트엔드 개발자가 직접 구현할 수 있다는 것입니다. 구조화된 데이터는 HTML에 JSON-LD 형태로 삽입하는 것이기 때문에 개발자의 영역입니다.

3. 오프페이지 SEO (Off-Page SEO)

외부 웹사이트와의 관계를 통해 이루어지는 최적화 작업입니다. 다른 사이트로부터 백링크(Backlink)를 획득하거나, 소셜 미디어에서 언급되는 등의 활동이 포함됩니다. 이 영역은 주로 마케팅팀이나 콘텐츠팀의 몫입니다.

프론트엔드 개발자의 관점에서 정리하면:

테크니컬 SEO: 개발자의 핵심 영역 ✅
온서프 SEO: 개발자가 구현할 수 있는 영역 ✅
콘텐츠 SEO: 주로 콘텐츠팀 영역, 개발자는 구조 지원
오프페이지 SEO: 마케팅팀 영역

테크니컬 SEO

테크니컬 SEO는 검색 엔진이 웹사이트를 효과적으로 크롤링하고 인덱싱할 수 있도록 기술적으로 최적화하는 작업입니다. 많은 개발자들이 이미 알고 있는 기본 사항들이 있지만, 은근히 놓치는 부분들도 있습니다.

기본적으로 챙겨야 할 것들

대부분의 프론트엔드 개발자들이 이미 알고 있는 내용들입니다.

HTTPS 적용: 구글은 HTTPS를 랭킹 요소로 공식 지정했습니다. 보안은 선택이 아닌 필수입니다.
sitemap.xml: 사이트의 모든 페이지를 검색 엔진에 알려주는 파일입니다. /sitemap.xml 경로에 위치시키고, Google Search Console에 등록합니다.
robots.txt: 검색 엔진 크롤러의 접근을 제어하는 파일입니다. 크롤링이 불필요한 페이지(관리자 페이지, 중복 페이지 등)를 차단할 수 있습니다.
페이지 성능: LCP, FCP, FID(또는 INP) 같은 Core Web Vitals 지표를 최적화합니다.

은근히 놓치는 것들

하지만 실무에서 다음 사항들은 의외로 누락되는 경우가 많습니다:

1. Semantic HTML 태그

시멘틱 태그는 페이지의 구조를 검색 엔진에게 명확히 전달합니다. 저도 최근 작업하면서 놀란 점이, 센디의 최신 페이지들은 시멘틱 태그가 잘 적용되어 있었지만 오래된 랜딩 페이지에는 시멘틱 태그가 하나도 없었다는 것입니다. 모든 요소가 <div>와 <span>으로만 구성되어 있었죠.

검색 엔진은 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 같은 시멘틱 태그를 통해 페이지의 구조를 이해합니다. 예를 들어:

<!-- 나쁜 예 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="post">...</div>
</div>

<!-- 좋은 예 -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

시멘틱 태그를 사용하면 검색 엔진이 "이 부분이 메인 콘텐츠구나", "이 부분은 네비게이션이구나"를 명확히 인식할 수 있습니다. 이는 페이지의 콘텐츠 계층 구조를 이해하는 데 도움을 주고, 궁극적으로 검색 순위에 긍정적인 영향을 미칩니다.

2. Sitemap 분할

페이지 수가 많은 서비스라면 sitemap을 분할해야 합니다. sitemap.xml 파일 하나당 최대 50,000개의 URL과 50MB 크기 제한이 있기 때문입니다. 강남언니의 경우 병원, 시술, 리뷰 등 페이지가 굉장히 많아서 라우트별로 sitemap을 분할한 것을 확인할 수 있습니다.

<!-- sitemap-index.xml -->
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://www.gangnamunni.com/api/files/sitemaps/st_static_1.xml.gz</loc>
    <lastmod>2025-10-31</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://www.gangnamunni.com/api/files/sitemaps/st_kr_hospitals_1.xml.gz</loc>
    <lastmod>2025-10-31</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://www.gangnamunni.com/api/files/sitemaps/st_jp_hospitals_1.xml.gz</loc>
    <lastmod>2025-10-31</lastmod>
  </sitemap>
</sitemapindex>

현재 센디에는 페이지가 많지 않아 분할이 필요 없지만, 서비스가 성장할 때 유용한 전략이라고 생각했습니다.

3. Canonical 태그

Canonical 태그는 중복 콘텐츠 문제를 해결합니다. 같은 콘텐츠가 여러 URL로 접근 가능할 때, 검색 엔진에게 "정식 URL"이 무엇인지 알려주는 역할을 합니다.

예를 들어:

https://example.com/product?id=123
https://example.com/product?id=123&utm_source=google
https://example.com/product/123

위 세 URL이 모두 같은 콘텐츠를 보여준다면, canonical 태그로 대표 URL을 지정해야 합니다:

<link rel="canonical" href="https://example.com/product/123" />

이를 통해 검색 엔진은 중복된 페이지로 인식하지 않고, 모든 SEO 가치를 하나의 URL로 집중시킵니다.

온서프 SEO

온서프 SEO는 검색 결과 페이지(SERP)에서의 최적화 작업입니다. 검색 엔진에 잘 노출되는 것을 넘어서, 검색 결과에서 경쟁사보다 더 눈에 띄게 만들어 클릭률을 높이는 것이 목표입니다.

구조화된 데이터 (Structured Data)

구조화된 데이터는 제가 처음 접했을 때 가장 신기했던 개념입니다. 검색 결과에 별점이나 FAQ가 표시되는 것이 단순히 검색 엔진의 기능이 아니라, 개발자가 직접 구현할 수 있는 것이었기 때문입니다.

구조화된 데이터는 Schema.org에서 정의한 표준 형식으로, HTML에 추가 정보를 제공하여 검색 엔진이 콘텐츠를 더 정확히 이해하도록 돕습니다. 이를 통해 검색 결과에 리치 스니펫(Rich Snippet)이라고 불리는 향상된 정보가 표시됩니다.

실제로 센디 관련 키워드를 검색했을 때 다음과 같이 리치 스니펫이 표시됩니다

주요 스키마 타입과 적용 사례

센디 랜딩 페이지에는 다음과 같은 스키마들을 적용했습니다:

1. Organization 스키마 (메인 랜딩 페이지)

회사의 기본 정보를 검색 엔진에 알려줍니다. 로고, 연락처, 소셜 미디어 링크 등을 포함할 수 있습니다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "센디",
  "url": "https://sendy.ai",
  "logo": "https://sendy.ai/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+82-2-1234-5678",
    "contactType": "Customer Service"
  },
}
</script>

2. FAQ 스키마 (고객센터 페이지)

자주 묻는 질문과 답변을 구조화합니다. 검색 결과에 FAQ가 직접 표시되어 사용자가 클릭 전에 정보를 얻을 수 있습니다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "배송은 얼마나 걸리나요?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "주문 후 2-3일 내에 배송됩니다."
      }
    },
    {
      "@type": "Question",
      "name": "환불 정책은 어떻게 되나요?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "구매 후 7일 이내 환불 가능합니다."
      }
    }
  ]
}
</script>

3. HowTo 스키마 (가이드 페이지)

단계별 가이드나 튜토리얼 콘텐츠를 구조화합니다. 검색 결과에 단계별 정보가 표시되어 사용자가 한눈에 파악할 수 있습니다.

4. Article 스키마

블로그 포스트나 뉴스 기사에 적용합니다. 작성자, 발행일, 수정일 등의 정보를 제공합니다.

5. BreadcrumbList 스키마

페이지의 위치를 계층 구조로 표시합니다. 검색 결과에 breadcrumb이 표시되어 사용자가 사이트 구조를 이해하기 쉽습니다.

구현 방법

구조화된 데이터는 JSON-LD 형식을 사용하는 것이 가장 권장됩니다. HTML의 <head> 또는 <body> 태그 안에 <script type="application/ld+json"> 태그로 삽입하면 됩니다.

Next.js에서는 다음과 같이 구현할 수 있습니다:

export default function Page() {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "센디",
    // ...
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      {/* 페이지 콘텐츠 */}
    </>
  );
}

구조화된 데이터를 추가한 후에는 Google의 리치 결과 테스트에서 제대로 적용되었는지 확인할 수 있습니다.

기타 온서프 SEO 요소

구조화된 데이터 외에도 검색 결과 페이지에서 클릭률을 높이는 요소들이 있습니다:

Title 태그

검색 결과에 표시되는 가장 중요한 요소입니다. 50-60자 이내로 작성하며, 핵심 키워드를 앞쪽에 배치합니다.

<title>센디 - 빠르고 안전한 배송 서비스 | 당일배송 가능</title>

Meta Description

검색 결과에 표시되는 설명 문구입니다. 150-160자 이내로 작성하며, 사용자가 클릭하고 싶게 만드는 문구를 사용합니다.

<meta name="description" content="센디는 당일배송이 가능한 빠르고 안전한 배송 서비스입니다. 지금 바로 주문하세요!" />

Open Graph 태그

페이스북, 트위터 등 소셜 미디어에 링크를 공유할 때 표시되는 정보입니다. 직접적인 검색 순위에는 영향을 주지 않지만, 소셜 트래픽 유입에 중요합니다.

<meta property="og:title" content="센디 - 빠르고 안전한 배송 서비스" />
<meta property="og:description" content="당일배송이 가능한 센디를 만나보세요" />
<meta property="og:image" content="https://sendy.com/og-image.png" />
<meta property="og:url" content="https://sendy.com" />

모니터링

SEO 최적화 작업을 했다면, 그 효과를 측정하고 지속적으로 개선해야 합니다. 다행히 구글과 네이버는 무료로 모니터링 도구를 제공하고 있습니다.

Google Search Console

구글 검색에서의 사이트 성과를 확인할 수 있는 필수 도구입니다. search.google.com/search-console에서 사이트를 등록하고 소유권을 인증하면 사용할 수 있습니다.

주요 기능

1. 실적 보고서

가장 많이 사용하는 기능으로, 검색 결과에서의 성과를 확인할 수 있습니다:

노출수(Impressions): 검색 결과에 내 사이트가 표시된 횟수
클릭수(Clicks): 실제로 사용자가 클릭한 횟수
CTR(Click-Through Rate): 클릭수 / 노출수, 검색 결과에서의 매력도를 나타냄
평균 게재 순위: 검색 결과에서 평균적으로 몇 번째에 노출되는지

이 지표들을 통해 어떤 검색어로 유입되는지, 어떤 페이지의 성과가 좋은지 파악할 수 있습니다.

2. 색인 생성 상태

검색 엔진이 내 페이지를 제대로 크롤링하고 색인했는지 확인할 수 있습니다. 만약 특정 페이지가 색인되지 않았다면, 그 이유를 파악하고 해결할 수 있습니다:

robots.txt로 차단됨
noindex 태그 존재
페이지가 발견되지 않음(sitemap에 없음)
서버 오류

새로운 페이지를 배포했다면 "URL 검사" 기능으로 색인을 수동 요청할 수도 있습니다.

3. 개선 사항 - 리치 결과

구조화된 데이터를 적용했다면, 여기서 오류 상태를 확인해야 합니다. 리치 스니펫(피처드 스니펫)이 제대로 인식되고 있는지, 오류가 있다면 어떤 오류인지 상세히 알려줍니다.

예를 들어 FAQ 스키마에 필수 필드가 누락되었거나, 잘못된 형식으로 작성된 경우 여기서 경고를 확인할 수 있습니다.

4. Core Web Vitals

페이지 성능 지표(LCP, FID, CLS)를 실제 사용자 환경에서 측정한 데이터를 제공합니다. Lighthouse와 달리 실제 사용자 데이터이기 때문에 더 신뢰할 수 있습니다.

네이버 서치어드바이저

한국 시장을 타겟으로 한다면 네이버 서치어드바이저도 필수입니다. searchadvisor.naver.com에서 사이트를 등록할 수 있습니다.

기본적인 기능은 구글 서치 콘솔과 유사하지만, 네이버 검색 결과에 대한 데이터를 제공합니다:

검색 유입 통계
사이트 최적화 체크
사이트맵 제출
RSS 제출(블로그의 경우)

한국 사용자를 대상으로 한다면 구글과 네이버 양쪽 모두 모니터링하는 것이 중요합니다.

결론

이번 글에서는 SEO가 무엇인지, 그리고 SEO에서 프론트엔드 개발자가 실제로 최적화할 수 있는 영역들을 정리했습니다.

SEO는 단순히 meta 태그를 작성하고 페이지 성능을 개선하는 것 이상입니다. 온페이지 SEO(테크니컬 + 콘텐츠), 온서프 SEO, 오프페이지 SEO라는 세 가지 범주가 있으며, 그중 프론트엔드 개발자는 테크니컬 SEO와 온서프 SEO에서 큰 역할을 할 수 있습니다.

특히 구조화된 데이터는 검색 결과에서의 가시성을 크게 높일 수 있는 강력한 도구입니다. 시멘틱 HTML, canonical 태그 같은 기본적이지만 놓치기 쉬운 요소들도 놓치지 말아야 합니다.

저는 이번에 센디 메인 랜딩의 테크니컬 SEO와 온서프 SEO를 개선하면서, 실제로 검색 노출수, CTR, 평균 게재 순위 등의 지표가 눈에 띄게 개선되는 것을 확인했습니다. Google Search Console에서 구조화된 데이터가 제대로 인식되고, 리치 스니펫이 표시되는 것을 보는 것만으로도 뿌듯했습니다.

프론트엔드 개발자로서 우리가 작성하는 코드가 단순히 화면을 구성하는 것을 넘어, 서비스의 성장에 직접적으로 기여할 수 있다는 점이 SEO의 매력이라고 생각합니다. 이 글이 SEO를 처음 접하는 개발자분들께 도움이 되었으면 좋겠습니다.

다음 글에서는 Next.js 환경에서 테크니컬 SEO를 더 구체적으로 최적화하는 방법과, 최근 주목받고 있는 AEO(Answer Engine Optimization), GEO(Generative Engine Optimization)에 대해서도 다뤄보려고 합니다.

참조

구글 검색엔진 최적화 기본 가이드 : https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko
TBWA Korea SEO Guide : https://seo.tbwakorea.com/website-seo/guide/
FECONF 2025 강남언니 SEO 웹 전략 : https://youtu.be/7Ps7fVCaVGs?si=RIpKTbKVPxik5xXQ

'IT > Front-End' 카테고리의 다른 글

프론트엔드 개발자가 알아야 할 CSRF (with Next.js) (9)	2025.09.08
프론트엔드 개발자가 알아야 할 쿠키 정책 (0)	2025.09.06
JS 개발자를 위한 용어 정리: 모듈 vs 패키지 vs 라이브러리 (15)	2025.08.05
나의 학습 방법 : 아티클 구독 (11)	2025.07.26
프론트? 그거 비전공자나 하는 거잖아: 추상화가 만든 착시 (5)	2025.07.20

들어가며

SEO가 중요한 이유

SEO의 범위

1. 온페이지 SEO (On-Page SEO)

2. 온서프 SEO (On-SERP SEO)

3. 오프페이지 SEO (Off-Page SEO)

테크니컬 SEO

기본적으로 챙겨야 할 것들

은근히 놓치는 것들

1. Semantic HTML 태그

2. Sitemap 분할

3. Canonical 태그

온서프 SEO

구조화된 데이터 (Structured Data)

주요 스키마 타입과 적용 사례

구현 방법

기타 온서프 SEO 요소

Title 태그

Meta Description

Open Graph 태그

모니터링

Google Search Console

주요 기능

네이버 서치어드바이저

결론

참조

'IT > Front-End' 카테고리의 다른 글

티스토리툴바