🏫 SEO란 무엇인가? — DdingsRoom 프로젝트 적용 사례

1. 들어가며

서비스를 만들 때 대부분의 개발자는 “기능 구현”에 집중합니다.
하지만 배포 후 아무리 좋은 서비스를 만들어도,검색 결과에 내 서비스가 전혀 보이지 않는다면 아무 의미가 없을 것 입니다.

저는 명지대학교 학생회관 스터디룸 예약 서비스 "DdingsRoom"을 개발하면서 처음으로 SEO(Search Engine Optimization, 검색 엔진 최적화)의 중요성을 체감했습니다.
이번 글에서는 SEO의 기본 개념부터, 실제로 DdingsRoom 프로젝트에 적용한 코드를 중심으로 어떻게 검색 노출을 개선했는지 정리해보려 합니다.

2. SEO란 무엇인가?

SEO(Search Engine Optimization)는 Google이나 Naver 같은 검색 엔진이 내 웹사이트를 더 잘 이해하고 노출하도록 만드는 과정입니다.

검색 엔진은 아래 3단계를 통해 페이지를 노출시킵니다.

1. 크롤링(Crawling) – 검색봇이 웹을 돌아다니며 페이지를 수집

2. 인덱싱(Indexing) – 수집한 페이지의 내용을 데이터베이스에 저장

3. 랭킹(Ranking) – 검색어와 관련성 높은 페이지를 우선 노출

즉, 개발자가 해야 할 일은
“검색봇이 내 페이지를 쉽게 읽고, 정확히 이해하도록 구조를 만들어주는 것”입니다.

3. DdingsRoom 프로젝트에서 SEO 적용하기

DdingsRoom은 Next.js 14 + Vercel 배포 환경으로 운영 중입니다.
Next.js는 서버 사이드 렌더링(SSR)과 정적 페이지 생성(SSG)을 지원하기 때문에 React 기반 서비스 중에서도 SEO 친화적인 프레임워크예요.

아래는 제가 RootLayout에서 적용한 SEO 설정 코드입니다.

export const metadata = {
  metadataBase: new URL('https://ddingsroom.com'),
  title: 'DdingsRoom | 명지대학교 학생회관 스터디룸 예약 서비스',
  description:
    '명지대학교 인문캠퍼스 학생회관 스터디룸 예약부터 사용까지! 간편한 온라인 예약 시스템으로 언제든지 스터디룸을 예약하세요.',
  keywords: [
    '명지대학교', '스터디룸', '예약', '학생회관', '인문캠퍼스', '띵스룸', 'DdingsRoom',
  ],
  authors: [{ name: 'DdingsRoom Team' }],
  creator: 'DdingsRoom',
  publisher: 'DdingsRoom',
  robots: 'index, follow',
  openGraph: { ... },
  twitter: { ... },
};

이 설정을 통해 다음과 같은 SEO 요소들을 개선했습니다.

1. 메타 정보 (Meta Information)

title: 'DdingsRoom | 명지대학교 학생회관 스터디룸 예약 서비스',
description: '명지대학교 인문캠퍼스 학생회관 스터디룸 예약부터 사용까지!'

→ 브라우저 탭 제목, 검색 엔진 미리보기, SNS 카드에 표시되는 정보입니다.
title과 description을 구체적으로 작성하면 Google 검색결과에 서비스가 깔끔하게 표시됩니다.

_Google 검색결과에 표시되는 서비스_

2. 키워드 (Keywords)

keywords: ['명지대학교', '스터디룸', '예약', '학생회관', '띵스룸']

→ Google은 최근 직접적인 keywords는 중요하게 보지 않지만, 검색 노출의 문맥을 강화하는 데 도움이 되며,특히 국문 서비스나 지역 서비스(“명지대학교” 등)에서는 효과적이라고 합니다.

3. Open Graph (OG) & Twitter Card

openGraph: {
  title: 'DdingsRoom | 명지대학교 학생회관 스터디룸 예약 서비스',
  description: '명지대학교 인문캠퍼스 학생회관 스터디룸 예약부터 사용까지!',
  images: [{ url: '/static/images/ddingsroom.png', width: 1200, height: 630 }],
},
twitter: {
  card: 'summary_large_image',
  title: 'DdingsRoom | 명지대학교 학생회관 스터디룸 예약 서비스',
  description: '명지대학교 인문캠퍼스 학생회관 스터디룸 예약부터 사용까지!',
  images: ['/static/images/ddingsroom.png'],
}

→ SNS 공유 최적화(소셜 SEO) 부분이에요.
누군가가 서비스 링크를 카카오톡, 트위터, 인스타그램 등에 공유하면
이 메타 정보에 따라 미리보기 이미지, 제목, 설명이 자동으로 표시됩니다.

즉, 공유되는 순간부터 브랜딩 효과를 얻을 수 있습니다.

_카카오톡에 공유된 미리보기_

4. Robots & Sitemap

robots: 'index, follow'

→ 검색 엔진이 이 페이지를 수집(index) 하고, 내부 링크를 따라갈 수 있도록(follow) 허용하는 설정입니다.

추가로 /robots.txt와 /sitemap.xml을 생성하면 Google Search Console에서 인덱싱을 훨씬 빠르게 할 수 있다고 합니다.

5. Viewport & Theme Color

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  themeColor: '#ffffff',
};

→ 모바일 친화도(Responsive SEO)를 위한 설정입니다.
모바일 페이지가 최적화되어야 Google의 모바일 퍼스트 인덱싱에서 좋은 점수를 받습니다.

6. Google Analytics (GA4)

<Script
  src="https://www.googletagmanager.com/gtag/js?id=G-NEXY3X7HZG"
  strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-NEXY3X7HZG');
  `}
</Script>

→ Google Analytics를 통해 방문자 데이터를 추적합니다.
검색 유입 경로, 페이지별 체류시간 등을 분석해 SEO 전략의 효과를 정량적으로 확인할 수 있습니다.

2025.10.21.화 기준 Google Analytics 연동 페이지 대시보드

4. 적용 후 변화

SEO 적용 이전에는 Google에서 띵스룸이나 명지대학교 스터디룸을 검색해도
서비스가 노출되지 않았습니다.

그러나 메타데이터를 적용하고 Google Search Console에 sitemap을 등록한 후 약 2주 만에 서비스가 검색 결과에 노출되기 시작했습니다.

또한 Vercel에서 배포된 페이지의 Lighthouse SEO 점수는 70점대에서 98점으로 향상되었습니다.