블로그 제작기 - 프롤로그

1. 블로그를 만들어보자!#

블로그를 만들게 된 이유는 두 가지입니다.

1) 그냥 내 이름 박힌 도메인이 간지나보여서..#

귀여운(?) 이유일 수 있지만 어느덧 3년하고도 7개월차 접어든 내 경험을 풀어낼 장소를 나만의 디자인과 나만의 구조로 녹여보고 싶었어요.

2) SEO 스킬을 녹여보기#

현 회사에서 2년반동안 MAU 1200만, DAU 70만까지 성장시켰고 그 과정에서 SEO에 집착하게 되었는데 그렇게 배운 스킬들을 녹일 나만의 작품을 갖고 싶었습니다.

딱 블로그가 좋은 재료 아닌가? 싶었고

내 블로그가 숏테일이든 롱테일이든 어떤 키워드를 검색했을 때 내 이름 박힌 도메인이 SERP 상위에 위치한다면? 시간을 헛되이 보내지 않았구나 느낄 것 같았어요

2. 고려해야 할 점#

전반적인 디자인 구현, 댓글, 인피니티 스크롤, 상태 관리 등 기본적인 기능 구현 등등이 가장 먼저 생각나지만 역시 눈이 가는 쪽은 SEO 관련 요소들입니다.

• sitemap 자동화
• robots.txt
• 페이지 렌더링 기법
• JSON-LD
• 서치콘솔 관리
• semantic 태그 사용
• meta 태그 사용
• 내부 링크 선순환 구조 만들기
• Cloudfront같은 CDN 사용으로 FCP/LCP 확보

이 블로그를 만들면서 어떠한 SEO적 고려를 했는지 등등 풀어나가보려 합니다.

3. 코어 기술#

1) NextJS#

말했듯 저는 SEO가 이 블로그의 최고 컨셉입니다. SEO 인덱싱 점수에 중요한 영향을 끼치는 것으로 2가지가 있다고 생각하는데요.

1. 검색엔진의 크롤러가 제 글의 정보를 더 잘 읽어갈 수 있게 하기
2. 유저가 더 빨리 제공받아 코어웹바이탈 지표에 유리

입니다.

두 가지의 공통점은 페이지 렌더링 기법에 따라서 영향을 받는다는 것이며, 따라서 ISR, SSR, SSG 등 다양한 페이지 렌더링 기법이 필요했고

또 신버전에서 PPR, streaming처럼 시도해보고 싶은 기능도 있어서 공부 차원에서도 적합하겠다 싶었습니다.

2) TailwindCSS#

새로운 css 기능도 심심치않게 나오는 요즘 plain하게 css를 써볼까했지만 현업에서 TF업무를 진행하느라 시간상 여유가 없는 상태여서 css툴의 도움을 받기로 했습니다.

그 중에서도 TailwindCSS를 고른 이유는 Next와의 서버 컴포넌트 궁합, 또한 Next가 스타일링의 표준으로 삼고 있으므로 택하지 않을 이유가 없습니다.