Markdown 미리보기는 저장 전에 꼭 눌러보기

블로그 글을 쓰고 저장하기 전에 항상 하는 일이 하나 있다. 미리보기 버튼을 눌러서 실제로 어떻게 보일지 확인하는 것이다.

HTML head 메타데이터 확인

사용자가 보는 건 본문뿐이다. 하지만 검색 엔진과 SNS는 head 태그의 메타데이터를 읽는다. title, description, og:image 등이 제대로 들어가 있는지 확인해야 한다.

# 실제 배포된 페이지에서 메타데이터를 확인하려면
curl -s https://example.com/blog/post-slug | grep -Ei 'title|description|canonical|og:|twitter:'

마크다운이 HTML로 올바르게 변환되는지 확인

마크다운 문법이 모두 같은 건 아니다. 환경마다 조금씩 다르다. 코드 펜스(```), 테이블, 이스케이프 처리 등이 제대로 렌더링되는지 직접 확인해야 한다.

• 코드 블록이 제대로 하이라이팅되는가
• 링크가 올바르게 작동하는가
• 이미지가 제대로 로드되는가
• 특수 문자가 이상하게 표시되는 건 아닌가

빌드 결과와 프로덕션 환경의 차이

로컬에서 Next.js로 개발할 때와 실제 배포된 환경에서는 결과가 다를 수 있다. 빌드 최적화, CDN 캐시, 번들 크기 등 여러 변수가 있다.

npm run build
# 빌드 결과를 확인하고, 필요하면 로컬 서버로 테스트

Canonical 태그와 중복 콘텐츠

같은 글이 여러 URL로 접근될 수 있다. 예를 들어 example.com/blog/post와 example.com/blog/post/가 다르게 인식될 수 있다. Canonical 태그를 명확히 설정해야 검색 엔진이 어느 것을 원본으로 보는지 알 수 있다.

저장하기 전에 이 모든 것을 한 번에 확인할 수 있는 게 미리보기 기능이다. 5분 더 투자해서 확인하는 것이 나중에 수정하는 시간보다 훨씬 짧다.