DevOps

웹빌더 시스템 Part 2: AWS Lambda로 간단하게 사이트맵 관리하기

김재민Ballack(발락) / 파트너웹개발팀여기어때

2025년 6월 18일

안녕하세요. 여기어때컴퍼니 파트너웹개발팀 발락입니다.

최근 저희는 펜션 예약 및 판매와 실시간 예약을 한 번에 관리할 수 있는 올인원(All-In-One) 솔루션인 여기어때 BookingHub 를 출시했습니다. 이 솔루션은 많은 제휴점 친화적인 서비스를 제공하는데, 그중의 하나인 홈페이지 제작 서비스에 적용한 검색엔진 최적화(SEO) 경험을 소개합니다.

이 서비스는 웹사이트 호스팅 및 유지・보수 서비스를 제공합니다. 여기어때 소속 전담 매니저가 노코드 웹빌더 툴 과 디자인 템플릿을 활용해 제휴점별 요구 사항에 맞추어 홈페이지를 제작하는 방식으로 운영하고 있습니다. (웹빌더 개발 과정에 대해서도 궁금하시다면 웹빌더 시스템 Part 1: GrapesJS와 Next.js로 만드는 웹빌더 개발아티클을 읽어주세요!)

이렇게 만든 각 제휴점의 홈페이지가 검색엔진에 더 많이 노출되기 위해서는 SEO 적용이 필수입니다. 이러한 SEO 기법으로 HTML 시멘틱 태그, head 태그 내 사이트 정보 제공 등이 있지만, 그중에서도 사이트맵을 어떻게 관리하고 있는지 말씀드리겠습니다.

검색엔진 최적화(SEO)

아래는 네이버 서치어드바이저에서 SEO를 소개하는 내용입니다.

검색엔진 최적화 작업은 여러분의 사이트 내 콘텐츠 정보를 검색엔진이 잘 이해할 수 있도록 정리하는 작업입니다. 이 작업을 통하여 사이트 내 콘텐츠가 네이버의 검색 결과에 누락되지 않도록 조치할 수 있으며, 무엇보다 사용자가 원하는 콘텐츠의 내용을 명확하게 네이버 검색엔진에게 알려 줄 수 있습니다.

네이버 검색은 검색엔진에 친화적인 사이트를 우대합니다.

프론트엔드 개발자는 자신이 제작한 웹사이트가 얼마나 검색엔진 친화적인지(즉, SEO 점수가 높은지)를 항상 확인해야 합니다. 개발자는 각 검색엔진에서 제공하는 SEO 가이드 문서나 크롬 브라우저의 Lighthouse 같은 검사 도구를 통해 점검할 수 있습니다.

크롬 브라우저 lighthouse 검사 결과 예시

일반적으로 웹사이트는 내부 메뉴·본문 링크가 서로 연결되어 있어, 검색엔진이 사이트 내 모든 페이지를 자연스럽게 탐색할 수 있습니다. 하지만 저희 서비스는 하나의 서버에서 다수의 제휴점 홈페이지를 운영하고 있고, 각각의 제휴점 홈페이지는 서로 간에 링크로 연결되지 않은 독립적인 구조입니다. 이런 경우 새로 제작된 홈페이지는 외부 유입 경로가 없으므로, 검색엔진이 아무리 열심히 크롤링하더라도 이 페이지를 직접 발견하기가 매우 어렵습니다.

그래서 저희는 사이트맵이라는 파일을 검색엔진에 제공함으로써 운영 중인 모든 홈페이지 목록을 명확하게 전달하고 있습니다. 사이트맵은 XML 파일 형식으로 구성되어 있으며, 웹사이트 내 페이지의 구조와 위치를 검색엔진에 알려주는 중요한 역할을 합니다. 즉, 사이트맵을 통해 검색엔진이 신규 페이지를 더욱 신속하고 쉽게 발견하여 색인할 수 있게 됩니다.

아래는 affiliate1, affiliate2 라는 경로를 가진 제휴점 홈페이지가 있다고 가정한 사이트맵의 예시입니다. <loc /> 태그에는 검색 결과에 노출하고자 하는 URL, <lastmod /> 에는 내용 수정 일시를 작성했습니다. <lastmod /> 값이 변경된 것을 검색엔진이 확인하면, 해당 페이지의 크롤링 일정을 예약하는 데 도움이 됩니다. (출처 : Google 검색 센터)

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  <url>
    <loc>https://www.bookinghub.co.kr/affiliate1</loc>
    <lastmod>2025-04-16T05:10:07Z</lastmod>
  </url>
  <url>
    <loc>https://www.bookinghub.co.kr/affiliate2</loc>
    <lastmod>2025-04-16T02:10:07Z</lastmod>
  </url>
</urlset>

여기어때 BookingHub

앞서 언급하였듯, 여기어때 BookingHub를 사용하는 제휴점은 개별 홈페이지를 생성할 수 있습니다. 제휴점별 홈페이지는 정적 HTML 파일 형태로 만들어져 AWS S3에 저장됩니다. 이 S3 버킷을 AWS CloudFront, 도메인과 연결하면 사용자는 제휴점 홈페이지에 접속할 수 있습니다.

이때, 제작된 페이지가 검색엔진에 노출되도록 하기 위해서는 사이트맵에 해당 페이지 URL을 추가해야 합니다. 앞으로 추가될 제휴점이 많기 때문에, 사이트맵을 관리자가 수동으로 업데이트하는 것은 현실적이지 않습니다. 이러한 이유로, 저희는 이 과정을 AWS Lambda를 활용해 자동화했습니다.

사이트맵 업데이트 과정을 이해하시기 쉽도록 다이어그램으로 표현해 보았습니다. 처음 보시면 다소 복잡하게 느껴지실 수도 있지만, 각 단계를 차근차근 구체적으로 설명드리겠습니다. 우선, 사이트맵 생성/업데이트 자동화를 가능하게 한 핵심 기술인 AWS Lambda에 대해 먼저 간단히 소개하겠습니다.

AWS Lambda

AWS Lambda(이하 람다) 는 서버를 직접 관리하지 않고도 코드를 실행할 수 있는 서버리스 컴퓨팅 서비스입니다. API 호출, 특정 주기, Cloudwatch 이벤트 등 다양한 트리거가 발생했을 때 핸들러 함수라는 것을 실행시키는데, 이 핸들러 함수를 작성하여 원하는 자동화 기능을 구현할 수 있습니다.

저희는 특히 아래와 같은 람다의 장점에 집중하여 사이트맵 자동 업데이트 기능을 구현했습니다.

이벤트 기반 실행: S3에 파일이 업로드되는 것을 이벤트 트리거로 설정하여, 업로드 즉시 사이트맵 업데이트 로직을 실행할 수 있습니다.
비용 효율성: 실행된 시간만큼만 과금되기 때문에, 서버를 항상 켜둘 필요가 없어 비용을 절감할 수 있습니다.
익숙한 개발 환경: 파이썬과 같은 익숙한 언어로 간단하게 구현할 수 있습니다.
편리한 테스트 기능: AWS 콘솔에서 바로 테스트 환경을 제공해 로직을 쉽게 검증할 수 있습니다.

이러한 람다의 특성 덕분에, 제휴점 홈페이지가 생성, 수정될 때마다 자동으로 사이트맵을 쉽게 갱신할 수 있었습니다. 검색엔진이 주기적으로 사이트맵 파일을 조회하면서, 변경된 사항을 바로 인식하고 검색 결과에 반영할 수 있습니다.

사이트맵 업데이트 과정

1. 웹빌더로 페이지 제작 후 S3 저장소에 업로드

앞서 말씀드린 것처럼 여기어때 Bookinghub는 웹사이트 제작 서비스를 제공하고 있습니다. 여기어때 소속 전담 매니저가 노코드 웹빌더 툴로 페이지를 만들면, 정적 HTML과 CSS 파일이 생성되는 방식입니다. 이렇게 만들어진 정적 파일을 배포하기 위해 AWS S3에 업로드하고 있습니다.

2. S3 변경사항 발생 시 Lambda 트리거

AWS에서는 특정 S3 버킷에 파일 추가, 삭제 등 변경사항이 발생하면 자동으로 Lambda 함수를 실행할 수 있는 이벤트 트리거 기능을 제공하고 있습니다. Lambda의 핸들러 함수는 실행 시 events라는 객체를 인자로 전달받는데, 이 객체를 통해 어떤 파일을 업로드했는지 정확히 알 수 있습니다. 이벤트 객체는 다음과 같은 형태입니다. (모든 필드를 확인하시려면 람다 공식 문서를 참고해주세요.)

{
  "Records": [
    {
      "s3": {
        "object": {
          "key": "/파일경로/파일이름.확장자",
          "size": 1024,
        }
      }
    }
  ]
}

이 객체를 활용해 사이트맵 업데이트가 필요한 파일의 목록을 쉽게 만들 수 있었습니다. 여기서 주의하실 점은, Records 필드가 리스트 형태로 되어 있지만, 실제로 파일 업로드는 하나씩 이루어지므로 여러 파일을 동시에 업로드하면 각 파일마다 Lambda가 별도로 호출됩니다. 예를 들어, 5개의 파일을 동시에 업로드하면 Lambda 함수는 총 5번 개별적으로 호출되며, 각 호출된 Lambda의 Records 리스트에는 하나의 파일만 포함됩니다.

3~4. 사이트맵 파일(sitemap.xml) 업데이트

파이썬으로 람다 함수 작성 시, AWS SDK인 boto3 패키지를 이용하면 S3 버킷에 저장된 파일을 다운로드할 수 있습니다. 먼저 저희는 사이트맵 파일을 S3 내에 저장하고 있으므로, 수정을 위해 이 파일을 다운로드합니다. 그리고 xml.etree.ElementTree 패키지를 사용하면 XML 파일을 파이썬 내에서 다룰 수 있습니다. 만약 기존 사이트맵에 없던 URL이라면, 검색엔진 최적화(SEO) 문단에서 설명드린 형식으로 사이트맵 파일에 추가하면 됩니다. 반면에, 이미 등록된 URL이라면 lastmod만 현재 시각으로 업데이트하면 됩니다.

5. sitemap.xml 업데이트

이전 단계에서 sitemap.xml 파일을 성공적으로 수정했다면, 이제 다시 S3 버킷에 업로드해야 합니다. 업로드 과정도 boto3 패키지를 통해 진행됩니다.

이때 주의할 점이 있습니다. S3에 파일이 업로드되면 다시 Lambda가 실행되므로 무한 루프가 발생할 수 있습니다. 이를 방지하기 위해 저희는 HTML 파일이 아닌 경우 더 이상 추가 로직을 실행하지 않도록 설정했습니다.

6. Cloudfront 캐시 초기화

BookingHub 홈페이지는 AWS CloudFront를 CDN(Content Delivery Network)으로 활용하고 있습니다. S3 자체로는 HTTPS와 커스텀 도메인을 사용할 수 없으므로, CloudFront를 통해 홈페이지를 https://www.bookinghub.co.kr 도메인으로 배포하고 있습니다.

CloudFront는 웹페이지 파일을 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크에 캐싱하고 있습니다. 따라서 S3의 원본 파일이 수정될 때, CloudFront의 캐시 데이터 역시 업데이트가 필요합니다.

다행히 CloudFront는 캐시 무효화 기능을 제공하여 변경된 파일만 선택적으로 캐시를 갱신할 수 있도록 합니다. Lambda를 통해 변경된 파일을 추출하여 이를 기반으로 캐시를 무효화하고 있습니다.

이후 과정

캐시 무효화가 완료되면 사용자는 최신 변경 사항이 반영된 페이지를 즉시 볼 수 있게 됩니다. 사이트맵에도 신규 제휴점이 추가되어, 주기적으로 크롤링하는 검색엔진이 신규 제휴점을 발견할 수 있습니다. 만약 기존 제휴점의 내용이 수정된 것이라면(lastmod 값 변경), 검색엔진이 이를 확인하고 색인을 다시 생성합니다.

그리고 Google 검색 센터에 따르면, 한 사이트맵 파일에는 최대 5만 개의 URL을 지정할 수 있다고 합니다. 사이트맵에 등록해야 할 페이지가 많은 경우, 사이트맵 색인 파일(Sitemap Index File)을 이용하여 더 많은 페이지를 사이트맵에 담을 수 있습니다.

마치며

지금까지 AWS Lambda를 활용해 사이트맵을 자동으로 업데이트하는 방법을 소개해 드렸습니다. 람다를 통해 번거로운 수동 작업을 자동화하니, 더 이상의 개발 리소스 없이도 신규 제휴점을 검색 엔진에 알려줄 수 있어서 아주 좋았습니다.

이 글이 비슷한 고민을 가진 분들께 조금이나마 도움이 되었으면 합니다.

읽어주셔서 감사합니다! 😊

P.S. 작업에 많은 도움 주신 개발3팀 엘빈께 감사드립니다.