안녕하세요, 10기 사내업무 자동화방 키믄별입니다. 지난 주에 이어 오늘도 구글시트+앱스스크립트 활용 사례를 공유하려고 합니다. (지난주 사례 : #노가다를 원클릭으로! 부서 근무스케쥴 한방에 업데이트하기 (구글시트, 구글캘린더, 앱스스크립트) ft. 챗GPT )
검색엔진 최적화와 사이트맵이란?
저는 회사에서 SEO (검색엔진 최적화) 관련 업무를 꽤 오래 해오고 있습니다. 검색엔진에 회사 홈페이지를 최대한 잘 노출시켜서 자연유입 트래픽을 만들어내고 그렇게 만들어진 트래픽이 비즈니스 성과에 기여하게 만드는 것이 목표입니다.
검색엔진에서 우리 회사 홈페이지를 잘 끌어가고 긁어가기 위해 필요한 것 중에 하나가 ‘사이트맵’입니다. 쉽게 말하면 우리 회사 웹사이트의 ‘지도’입니다. 🗺️
📍지도가 있을때 길찾기 쉬운거처럼, 사이트맵의 역할은 검색엔진에게 지도를 보여주는 겁니다. 내가 홈페이지에서 내세우고 싶고, 잘 보였으면 하는 주요 페이지들을 검색엔진에 보여주는 거죠. (관련 자료는 구글 공식문서에 잘 설명되어 있습니다)
그래서 뭐?
워드프레스나 아임웹, 웹플로우 등을 사용하면 사이트맵을 자동으로 만들어주는 기능/플러그인 등이 포함되어 있습니다.
하지만, 회사의 홈페이지가 자체개발 방식으로 금융사 레거시를 따라 개발되었다면 사이트맵을 생성해서 홈페이지 서버 어딘가에 올려줘야 하는데요. 이걸 구글 시트와 앱스스크립트로 반 자동화한 사례입니다. (헥헥 이제 서론 끝..)🥶
사이트맵 구조 파악하기
사이트맵은 주로 sitemap.xml 이라는 파일입니다. (웹빌딩 툴에 따라 이름은 좀 다르지만 파일형식은 대부분 .xml입니다) 그파일을 열면 이렇게 되어 있어요.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://portal.gpters.org/</loc>
<lastmod>2024-04-18</lastmod>
<priority>1</priority>
</url>
<url>
<loc>https://portal.gpters.org/bootcamps</loc>
<lastmod>2024-04-18</lastmod>
<priority>1</priority>
</url>
<url>
<loc>https://portal.gpters.org/bootcamps/ecommerce/10</loc>
<lastmod>2024-04-18</lastmod>
<priority>0.6</priority>
</url>
</urlset>
이걸 다시 쪼개보면 URL한개당 네모 한개가 필요하고, URL갯수만큼 필요합니다. 만약 URL이 1,000개면? ㅎㄷㄷㄷ
인터넷에 찾아보면 사이트를 크롤링해서 URL을 추출하고 자동으로 사이트맵을 추출해주는 툴들도 있기는 한데요, 왜 때문인지 제가 관리하는 화시 홈페이지는 이 툴들로 페이지들이 다 추출되지 않았고 이거 때문에 직접 자동화를 시작했습니다.
👋참고로 이 자동화는 엑셀 VBA로도 동일하게 가능합니다. 다만, 회사 홈페이지다 보니 다른사람도 업무를 할 수 있도록 구글 시트에 구현했어요.
진행 단계 요약
사이트맵 모양을 파악한다
구글 시트에 사이트 주소, 발행일(수정일)을 리스트업한다.
앱스 스크립트로 sitemap.xml 파일로 만들고 구글 드라이브에 저장하는 코드를 짠다.
실행하면 끝! 이 후 홈페이지 서버에 업로드
상세로 넘어가기 전에 동작 화면 보고 가시죠 (사례발표때 보여드려요)
진행단계 상세
✒️일단 지피터스 답게 챗GPT에 다짜고짜 물어봅니다.
✒️다운로드 받는 코드도 물어봅니다.
✒️구글 시트에 바로가기 메뉴도 만들어달라고 합니다.
✒️돌려보니 lastmod라는 태그 안에 있는 날짜 형식이 좀 이상합니다. 다시 물어봅니다.
✒️이제 파일명도 바꿔달라고 합니다.
✒️구글 드라이브에 특정 폴더에 저장되게 해달라고도 요청했습니다.
✒️다 된줄 알았더니, 제가 작성한 날짜와 생성된 사이트맵의 날짜가 달라서 물어봅니다. 시간대가 GMT로 되있어서 그렇다 합니다. 코드를 수정해주네요.
🫠완성된 최종 스크립트는 다음과 같습니다.
구글 시트에 웹페이지 주소와 발행한 날짜 혹은 수정한 날짜를 리스트업 하고 메뉴에 버튼을 누르면 구글 드라이브에 sitemap.xml파일이 생깁니다!
function generateSitemap() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var data = sheet.getRange("A2:B" + sheet.getLastRow()).getValues();
var xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n';
for (var i = 0; i < data.length; i++) {
var url = data[i][0];
var lastMod = data[i][1];
if (lastMod) {
var date = new Date(lastMod);
lastMod = Utilities.formatDate(date, "GMT+9", "yyyy-MM-dd");
}
xml += ' <url>\n';
xml += ' <loc>' + url + '</loc>\n';
if (lastMod) {
xml += ' <lastmod>' + lastMod + '</lastmod>\n';
}
xml += ' </url>\n';
}
xml += '</urlset>';
var today = new Date();
var formattedDate = Utilities.formatDate(today, "GMT+9", "yyyyMMdd");
var fileName = "sitemap_" + formattedDate + ".xml";
// 특정 폴더에 파일 저장
var folderName = "sitemap"; // 여기에 원하는 폴더 이름을 입력하세요.
var folders = DriveApp.getFoldersByName(folderName);
if (folders.hasNext()) {
var folder = folders.next();
folder.createFile(fileName, xml, MimeType.PLAIN_TEXT);
} else {
// 폴더가 없을 경우 새로 생성
var folder = DriveApp.createFolder(folderName);
folder.createFile(fileName, xml, MimeType.PLAIN_TEXT);
}
}
function onOpen() {
var ui = SpreadsheetApp.getUi();
// 메뉴 항목 생성
ui.createMenu('사이트맵 다운로드')
.addItem('Generate Sitemap', 'generateSitemap')
.addToUi();
}
마치며
예전이라면 진입장벽이 높아도 한참 높을 이런 개발 언어들에 대한 접근이 챗GPT덕분에 정말정말 용이해진 것 같습니다.
생각만 하던 업무 자동화를 하나씩 해볼 수 있는게 참 좋구요.
점점 못한다, 모른다라는 말은 하기 어려운 시대가 오는게 아닌가 싶기도 하구요!
이것도 분명 더 효율적인 방법이 있을것도 같은데 피드백, 의견 언제나 소중히 받겠습니다 🙂
다음 주는 어떤 주제로 발표를 해볼까 또 고민해보겠습니다!
#10기사내자동화