이 글은 원래 제 블로그 포스트에서 작성된 것입니다. AstroPaper 테마를 사용하여 블로그 글을 작성하는 방법을 보여주기 위해 이 글을 게시했습니다.
NextJS와 Headless CMS를 사용하여 첫 포트폴리오 웹사이트와 블로그를 개발한 경험에 대한 글입니다.
동기
대학생 시절부터 항상 커스텀 도메인(satnaing.dev)으로 나만의 웹사이트를 만들고 싶었습니다. 하지만 이 프로젝트가 시작되기 전까지 그 꿈은 실현되지 못했습니다. 웹 애플리케이션 개발과 관련된 여러 프로젝트와 작업을 수행했지만, 이것을 위한 노력은 기울이지 않았습니다.
그러면 “블로그는요?”라고 물을 수 있겠죠. 네, 블로그도 한동안 프로젝트 목록에 있었습니다. 항상 최신 기술을 활용하여 블로그 프로젝트를 만들고 싶었습니다. 하지만 업무와 다른 프로젝트로 바빠서 블로그 프로젝트는 시작하지 못했습니다.
요즘에는 양보다 질에 집중하여 개인 프로젝트를 개발하려고 합니다. 프로젝트가 완료되면 보통 GitHub 저장소에 적절한 readme 파일을 작성합니다. 하지만 GitHub 저장소 readme는 기술적인 측면에만 적합하다고 생각합니다(개인적인 생각입니다). 저는 경험과 도전 과정을 기록하고 싶었습니다. 그래서 나만의 블로그를 만들기로 결심했습니다. 게다가 이 시점에서 이 프로젝트를 개발할 충분한 경험과 자신감이 생겼습니다.
기술 스택
프론트엔드로는 React를 사용하고 싶었습니다. 하지만 React만으로는 SEO에 충분하지 않았고, 라우팅이나 이미지 최적화 등 많은 요소를 고려해야 했습니다. 그래서 메인 프론트엔드 스택으로 NextJS를 선택했습니다. 물론 타입 체크를 위해 TypeScript도 사용합니다. (TypeScript에 익숙해지면 좋아하게 된다고 하더군요 😉)
스타일링에는 TailwindCSS를 사용합니다. Tailwind가 제공하는 개발자 경험이 좋고, MUI나 React Bootstrap 같은 다른 컴포넌트 UI 라이브러리에 비해 유연성이 뛰어나기 때문입니다.
이 프로젝트의 모든 콘텐츠는 GitHub 저장소 내에 있습니다. 모든 블로그 글(이 글 포함)은 제가 매우 익숙한 Markdown 파일 형식으로 작성됩니다. 하지만 Markdown과 frontmatter를 수월하게 작성하기 위해 Forestry Headless CMS를 사용합니다. Forestry는 Markdown과 기타 콘텐츠를 제공할 수 있는 git 기반 CMS입니다. 덕분에 Markdown이나 위지위그(WYSIWYG) 에디터를 사용하여 콘텐츠를 작성할 수 있습니다. 또한 frontmatter 작성도 매우 간편합니다.
이미지와 에셋은 Cloudinary에 업로드하고 저장합니다. Forestry를 통해 Cloudinary를 연결하고 대시보드에서 직접 관리합니다.
결론적으로, 이 프로젝트에 사용한 기술 스택은 다음과 같습니다.
- 프론트엔드: NextJS (TypeScript)
- 스타일링: TailwindCSS
- 애니메이션: GSAP
- CMS: Forestry Headless CMS
- 배포: Vercel
주요 기능
다음은 포트폴리오와 블로그의 주요 기능입니다.
SEO 친화적
전체 프로젝트가 SEO에 중점을 두고 개발되었습니다. 적절한 메타 태그, 설명, 제목 정렬을 사용했습니다. 이 웹사이트는 현재 Google에 인덱싱되어 있습니다.
‘sat naing dev’와 같은 키워드로 Google에서 이 웹사이트를 검색할 수 있습니다.
또한, 적절한 메타 태그 사용 덕분에 소셜 미디어에 공유할 때도 웹사이트가 잘 표시됩니다.
동적 사이트맵
사이트맵은 SEO에서 중요한 역할을 합니다. 그래서 이 사이트의 모든 페이지가 sitemap.xml에 포함되어야 합니다. 새로운 콘텐츠나 태그, 카테고리를 생성할 때마다 자동으로 사이트맵을 생성하도록 만들었습니다.
라이트 & 다크 테마
최근 다크 테마 트렌드로 인해 많은 웹사이트가 기본적으로 다크 테마를 포함하고 있습니다. 당연히 제 웹사이트도 라이트 & 다크 테마를 지원합니다.
완벽한 접근성
이 웹사이트는 완벽한 접근성을 갖추고 있습니다. 키보드만으로 사이트를 탐색할 수 있습니다. 모든 이미지에 alt 텍스트를 포함하고, 제목 레벨을 건너뛰지 않으며, 시맨틱 HTML 태그를 사용하고, aria 속성을 적절히 사용하는 등 모든 접근성(a11y) 향상 모범 사례를 적용했습니다.
검색 상자, 카테고리 & 태그
모든 블로그 콘텐츠를 검색 상자로 검색할 수 있습니다. 또한 카테고리와 태그로 콘텐츠를 필터링할 수 있습니다. 이를 통해 블로그 독자들이 원하는 내용을 검색하고 읽을 수 있습니다.
성능과 Lighthouse 점수
적절한 개발과 모범 사례 덕분에 이 웹사이트는 매우 우수한 성능과 Lighthouse 점수를 받았습니다. 다음은 이 웹사이트의 Lighthouse 점수입니다.
애니메이션
처음에는 Framer Motion을 사용하여 애니메이션과 마이크로 인터랙션을 추가했습니다. 하지만 복잡한 애니메이션과 패럴랙스 효과를 사용하려고 할 때 Framer Motion과의 통합이 불편하다는 것을 발견했습니다(아마도 제가 익숙하지 않아서일 수도 있습니다). 그래서 모든 애니메이션에 GSAP을 사용하기로 결정했습니다. GSAP은 가장 인기 있는 애니메이션 라이브러리 중 하나이며, 복잡하고 고급 애니메이션을 구현할 수 있습니다. 이 웹사이트의 거의 모든 페이지에서 애니메이션과 마이크로 인터랙션을 확인할 수 있습니다.
마치며
결론적으로, 이 프로젝트는 블로그 사이트(SSG) 개발에 대한 많은 경험과 자신감을 주었습니다. 이제 git 기반 CMS와 NextJS와의 상호 작용 방식에 대한 지식을 갖게 되었습니다. SEO, 동적 사이트맵 생성, Google 인덱싱 절차에 대해서도 배웠습니다. 앞으로 더 좋은 프로젝트를 만들겠습니다. 기대해 주세요! ✌🏻
그리고… 마지막으로, 웹사이트 히어로 섹션에 아름다운 일러스트를 그려준 친구 Swann Fevian Kyaw (@ToonHa)에게 감사의 말을 전하고 싶습니다.