{intro}
<Spacing size="lg" />

## 사이트맵이란?
 
사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일입니다. 사이트맵으로 정보를 제공하여 검색 엔진이 효율적으로 사이트를 크롤링할 수 있게 합니다.
 
```xml
< ?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 
 xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" 
 xmlns:xhtml="http://www.w3.org/1999/xhtml" 
 xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" 
 xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" 
 xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
 <url>
 <loc>http://www.yun-log.com</loc>
 <lastmod>2024-09-08T19:17:50.815Z</lastmod>
 <changefreq>daily</changefreq>
 <priority>0.7</priority>
 </url>
 <url>
 <loc>http://www.yun-log.com/posts</loc>
 <lastmod>2024-09-08T19:17:50.815Z</lastmod>
 <changefreq>daily</changefreq>
 <priority>0.7</priority>
 </url>
 </urlset>
```
 
블로그의 사이트맵의 일부를 가져와보았습니다.
사이트맵에서는 검색엔진에 노출되어야 하는 페이지 정보들이 있습니다. 각 파일의 위치(loc), 페이지가 마지막으로 수정된 날짜(lastmod), 페이지의 변경 빈도(changefreq), 페이지 우선순위(priority)등의 정보가 담깁니다. 
 
## next-sitemap 사용하기
 
사이트맵에 페이지 정보를 손수 입력할 수도 있겠지만(😅) 콘텐츠 상세 페이지의 경우에는 동적 라우팅을 하기 때문에 하나하나 입력해주는 것이 어렵겠죠? 이 때 next-sitemap을 사용해서 쉽게 사이트맵을 생성할 수 있습니다. [next-sitemap 공식문서](https://github.com/iamvishnusankar/next-sitemap#readme)를 보며 세팅해보겠습니다.
 
### 설치
 
```terminal
yarn add next-sitemap
```
 
### 설정
 
next-sitemap.config.js 파일을 루트 폴더에 만들어줍니다.
 
```javascript
// next-sitemap.config.js
module.exports = {
 siteUrl: process.env.SITE_URL, //url
 generateRobotsTxt: true, 
}
```
 
package.json scripts에 postbuild 스크립트를 추가해줍니다. 
 
```json
// package.json
{
 "build": "next build",
 "postbuild": "next-sitemap"
}
```
 
```terminal
yarn build
```
 
자 이제 빌드해봅시다. 빌드가 성공적으로 끝나면 사이트맵이 생성됩니다.
파일은 기본적으로 public 폴더에 생성됩니다. <HighlightText type="background" fontWeight={700}>domain/sitemap.xml</HighlightText>로 접근할 수 있어야 하기 때문에 그렇게 설정되어 있는 것 같습니다. (필요에 따라 config 파일에서 outDir를 설정해줘도 됩니다.)
배포 할 때 마다 프로젝트가 빌드되며 사이트맵이 새로 생성될 것이기 때문에 지금 생성한 사이트맵 파일들은 삭제해줍시다.
 
#### 🚨사이트맵 생성 에러 발생 (24.09.10)
 
포스트 작성 후 배포한 뒤 사이트맵이 잘 업데이트되었나 확인했습니다. 그런데 전혀 업데이트되어 있지 않았습니다. 미처 삭제하지 않은 public 폴더 내의 사이트맵 파일 때문인가 싶어 삭제 후 다시 배포했지만, 이번엔 아예 사이트맵이 생성되지 않았습니다😨 
터미널에서 yarn build를 실행해보니 빌드 후 postbuild가 실행되지 않았습니다. 의문인 점은 npm run build 명령어로는 postbuild가 실행되어 사이트맵이 잘 생성된다는 점이었습니다.
분명 처음 세팅할 때 yarn build로도 잘 되는 것을 확인했던 것 같은데 말이죠...
 
```json
// package.json
{
 "build": "next build && next-sitemap",
}
```
 
바로 원인을 찾아 해결할 수가 없어 일단 급하게 build 스크립트를 수정하는 것으로 사이트맵을 생성할 수 있게 해두었습니다.
이 부분에 대해서 추가적로 알게 되는 게 있다면 바로 업데이트해 두겠습니다.
 
**24.09.10 - yarn berry는 lifecycle script를 모두 지원하지 않는다**.
 
분명 처음에 사이트맵이 잘 생성되었던 기억이 있었기 때문에 vercel 배포 로그를 살펴봐야겠다는 생각이 들었습니다. (꼭 자려고 누웠을 때 이런 생각이 들더라고요 😫)
 
<PostImage src="https://drive.google.com/uc?export=view&id=1fm0ly9EGgEC5my4TyHFpAN6pTaY8yX8S" alt="vercel 배포 로그 - 사이트맵 생성 확인" width="905" height="254"/>
 
역시나... 처음 배포 시에는 잘 생성되고 있었습니다. 그럼 언제부터 postbuild가 안됐던걸까 고민하던 차에 눈에 보였던 것이 yarn 버전이었습니다. 
 
<PostImage src="https://drive.google.com/uc?export=view&id=1YDeF46BcfJ5mX9aghch5Sl_bRsXJ_kcz" alt="vercel 배포 로그 - yarn 버전 확인" width="674" height="190"/>
 
1.22.19버전...?
그제서야 최근 스토리북을 세팅한 일이 떠올랐습니다. yarn 1버전인 yarn classic을 사용하면 스토리북이 정상적으로 동작하지 않아 yarn berry (4.4.1버전)로 변경했었던 것이죠.
다시 yarn 버전을 1.22.19 버전으로 바꾸고 build 해보니 사이트맵이 잘 생성되었습니다.
그럼 왜 yarn berry에서는 postbuild가 안될까 구글링 하던 차에 yarn berry에서 npm에 존재하는 lifecycle script를 모두 지원하지 않는다는 내용을 찾게 되었습니다.
[yarn 4 버전 life cycle 관련 문서](https://yarnpkg.com/advanced/lifecycle-scripts)
<PostImage src="https://drive.google.com/uc?export=view&id=1Rr4sHoeDunUuEtdsPdOGMmYEgTzfgngw" alt="vercel 배포 로그 - yarn 버전 확인" width="948" height="418"/>
 
위 문서는 yarn 4 버전 이상을 다루고 있다고 하여 yarn 3 버전으로도 시도해 보았지만 마찬가지로 postbuild는 실행되지 않았습니다.
해결 방법이 있나 구글링해도 저와 같은 문제를 겪고 있는 분들의 글을 찾기가 힘들었습니다. (yarn berry랑 next-sitemap 사용하는 사람이 저만 있는 것도 아닐텐데 어째서..?)
yarn classic을 사용하자니 스토리북이 울고, yarn berry를 쓰자니 next-sitemap이 울고 아, 어쩌란 말이냐~ 고민하던 차에 yarn berry + build 스크립트에 next-sitemap을 추가한 현재 방식을 유지하는 것으로 결론 지었습니다.
뭔가 다른 방법을 알고 계시다면 부디 댓글로 가르침을 하사해주세요🥹
 
### 확인
 
<HighlightText type="background" fontWeight={700}>domain/sitemap.xml</HighlightText>에 접속해봅시다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1FOvn2rcsIT2wYeBtUf1vaeMp7JSa5jnN" alt="블로그 사이트맵" width="847" height="222" caption="not 어쩌구 하면 일단 심장 뛰는 사람... XML 파일에 스타일 정보가 없어 문서의 내용만 트리 형태로 보여준다고 합니다."/>
 
사이트맵이 잘 나온다면 성공적으로 생성이 된 것입니다.🥳
 
## 구글 서치 콘솔
 
구글 서치 콘솔은 웹 사이트의 검색 결과를 파악하고 모니터링하여 검색 결과를 개선시킬 수 있게 도와주는 도구입니다. (회사에서는 마케팅팀이 주로 사용하시는 것 같습니다.)
사용하지 않아도 구글 검색 결과에 노출되지만 새로운 페이지가 생성되거나 페이지의 내용이 업데이트 될 때 사이트맵을 새로 제출하면 페이지 색인을 다시 생성하도록 요청할 수 있기 때문에 구글 서치 콘솔에 사이트맵을 제출해보도록 하겠습니다.
 
### 도메인 연결
 
[구글 서치 콘솔 페이지](https://search.google.com/search-console/about?hl=ko)에 들어가봅시다. 
 
<PostImage src="https://drive.google.com/uc?export=view&id=1Bx9d7VH5ThjB4FfJqrty9aGDU8KDaq8H" alt="구글 서치 콘솔 시작하기" width="853" height="718"/>
 
로그인 후 시작하기 페이지로 넘어가면 이런 화면이 나옵니다.
사이트 도메인을 입력하고 [계속] 버튼을 클릭합니다. 
 
<PostImage src="https://drive.google.com/uc?export=view&id=117Cx4BBViLt2O_NhsjSo1p1a-WyRn5_j" alt="DNS 설정" width="760" height="706"/>
 
도메인 소유권 인증을 위해 TXT 레코드를 DNS 설정에 추가해줍시다.
 
<Callout icon="❓" title="DNS와 레코드">
**DNS**는 Domain Name System의 약자로 **도메인을 IP 주소로 변환하는 시스템을 의미**합니다.
브라우저 주소창에 yun-log.com 도메인을 입력하면 DNS 서버에 해당 도메인의 IP 주소를 요청하게 됩니다. DNS 서버는 해당 도메인의 IP를 반환하고 브라우저는 반환받은 IP 주소(00.000.000.00의 형태)로 웹 서버에 요청을 보내게 됩니다. 웹 서버는 브라우저의 요청을 받아 해당 페이지의 데이터를 브라우저에 전달하게 되고 그 데이터를 통해 브라우저에 화면이 렌더링 되게 됩니다. 
**레코드**는 데이터를 저장하는 하나의 단위를 의미합니다.
DNS에서의 레코드는 **도메인 이름과 연결된 정보가 기록된 데이터**입니다.
[cloud flare 문서](https://www.cloudflare.com/ko-kr/learning/dns/dns-records/)에 DNS 레코드 유형이 잘 정리되어 있어서 일부 내용을 소개합니다. 
**일반적인 DNS 레코드 유형** 
**A 레코드** : 도메인의 IP 주소를 갖고 있는 레코드.
**CNAME 레코드** : 하나의 도메인이나 하위 도메인을 다른 도메인으로 전달하며, IP 주소를 제공하지는 않습니다.
**TXT 레코드** : 관리자가 레코드에 텍스트 메모를 저장할 수 있습니다. 이 레코드는 종종 이메일 보안에 사용됩니다. 
ᄂ이번 구글 서치 콘솔을 세팅할 때 사용한 TXT 레코드는 도메인 소유권 인증, 보안과 관련 있다고 합니다. 
사실 DNS는 이번에 블로그 도메인을 구매하고 설정해보며 알게 되었습니다. 앞으로는 네트워크 공부도 틈틈히 해두어야겠습니다. 
(공부할 게 너무 많아 즐거운 사람🤥)
</Callout>
 
설정을 완료하면 사이트의 구글 서치 콘솔 대시보드가 나옵니다. 클릭 수 0회... 앞으로 좀 더 힘내보겠습니다(광클 시작🔥)
 
<PostImage src="https://drive.google.com/uc?export=view&id=1pTYOrXq6Nbydbb3mNDa6mm1-pzHGlTyM" alt="구글 서치 콘솔 대시보드" width="902" height="462"/>
 
### 사이트맵 제출
 
왼쪽 사이드 메뉴에서 sitemaps 탭에 들어가 사이트맵을 제출해줍시다. <HighlightText type="background" fontWeight={700}>domain/sitemap.xml</HighlightText>을 입력해주면 됩니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1PYCSL8BlhX4kY5EGrXu-abw-fXFmDOpP" alt="구글 서치 콘솔 대시보드" width="842" height="456"/>
 
### 검색 결과 확인
 
<PostImage src="https://drive.google.com/uc?export=view&id=1fMNAxlMf6jxV_rsFOZ1Aq0QO2b_krtnH" alt="검색 결과" width="842" height="277" />
 
사이트맵을 제출하고 하루 뒤 사이트가 구글 검색 결과에 잘 노출되는 것을 확인할 수 있었습니다🎉 
배포하고 2~3일은 노출되지 않아서 전전긍긍했는데 서치 콘솔에 제출하고 하루 뒤에 바로 노출되었습니다. (단순히 시간이 지나서 노출됐을 가능성이 클 것 같긴 합니다.)
 
## 포스팅을 마무리하며
 
SEO를 위해 next-sitemap을 사용하여 사이트을 만들고 구글 서치 콘솔에 제출까지 해보았습니다. 사실 규모가 작거나 모든 페이지가 사이트에 링크로 잘 연결되어 있는 경우에는 굳이 사이트맵이 필요하지 않다고 합니다. 그래도 이런 세팅 뭔가 재밌으니까..! 해서 나쁠 건 없으니까..! 하는 마음으로 적용해보았습니다. (구글 검색 상위 노출 가보자고 🏃‍♀️🏃‍♀️🏃‍♀️) 그럼 오늘은 이만 글을 마치도록 하겠습니다. 여기까지 글 읽어 주셔서 감사드리고 다음엔 구글 검색 결과 맨 위에서 뵙겠습니다👋👋

next-sitemap으로 사이트맵 만들기

framer motion으로 스크롤 애니메이션 적용하기

.css-y59011{position:relative;}.css-y59011::after{content:"";position:absolute;right:0;bottom:0;width:0;height:2px;background-color:var(--color-secondary);-webkit-transition:width 200ms ease-in-out;transition:width 200ms ease-in-out;} next-sitemap으로 사이트맵 만들기

framer motion으로 스크롤 애니메이션 적용하기

next-sitemap으로 사이트맵 만들기