갑자기 홈페이지는 왜?
제가 현재 스펙의 개인 홈페이지를 만들기로 결정한 데는 매우 여러가지 이유가 있습니다. 기술에 대한 갈증도 있었지만 다른 고민도 많았거든요.
먼저 기술과 관련된 이유입니다.
- React Styled component가 썩 맘에 들진 않지만 익숙해지고 싶었다.
- CSS를 좀 익혀야 하는데 마땅한 프로젝트가 없었다.
- Gatsby를 사용해 보고 싶었다.
- GraphQL이 어떻게 동작하는지 알고 싶었다.
- Headless CMS의 실체를 보고 싶었다.
- 서버를 관리하고 운영하는 것은 신경 쓸 게 너무 많아서 더 나은 방법을 찾고 싶었다.
그리고 또 다른 이유입니다.
- 내 도메인을 갖고 있지만 쓰지 않고 있었다.
- 열심히 개발을 하면서 살아왔는데 내 Product가 없다.
- 하고싶은 게 많은데 실천하지 않았다.
- 나 자신을 브랜딩한 적이 없었다.
- 나 뭐하면서 살고 있나?
위와 같은 고민들은 평소에도 했었지만 일을 핑계로 항상 미루고 있었죠. 미루는 것은 참 쉽습니다. 미루기로 결정만 하면 되니까요. 근데 그게 수십(!)수년간 이어져오니 갑자기 짜증이 확 나는 겁니다.
저는 주로 백엔드 반, 프론트엔드 반 정도의 비중으로 개발을 하고 있습니다. 그 전엔 백엔드 작업의 비중이 컸는데 3년 전 쯤부터 React를 시작하면서 프론트엔드 비중이 많이 늘었습니다. 근데 최근에 백엔드 일부를 담당했던 AI 관련 프로젝트에서 프론트엔드 소스 분석이 필요해서 살펴보는데 그동안 제가 해왔던 구성 (Next.js + Redux) 과 많이 다른데다가 너무 복잡한 거예요. (React + Styled component + RTK Query) 나 React 하고 있는데 왜 이해가 안돼지? React 기반의 좀 더 확장된 개발방법에 대한 공부가 필요하다는 생각을 했고 남들은 어떻게 사용하고 있는지 궁금해졌습니다.
그러던 중 노마드코더의 React JS 마스터클래스 강의를 찾았는데 이 과정의 마지막 보너스 섹션에 (Gatsby + GraphQL + Contentful) 조합을 발견한 것이죠. 어느새 손에는 카드가 쥐어져 있었고.. 이 자리를 빌려 Nico 에게 감사하다는 말을 전하고 싶습니다. Styled component, Typescript, Framer Motion, Recoil 도 잘 배웠습니다. (노마드코더 홍보글 아님. 암튼 배울 점이 참 많아서 개발에 관심이 있으신 분들 노마드코더 강의 추천드려요.)
홈페이지를 만들 생각으로 강의를 들은 건 아니었습니다. 단순히 호기심을 해소할 목적으로 들은 강의였지만 강의를 모두 듣고 나니 써먹을 데가 생각이 난 것이죠. 그동안은 홈페이지 없이 - 옛날에도 만들긴 했었지만 너무너무 옛날임 - 이 블로그, 저 블로그 옮겨다니며 글 좀 끄적이다가 방치하기 일쑤였거든요. 마음에 드는 블로그 플랫폼도 없었고 커스텀하게 디자인, 기능을 변경하는 작업은 굉장히 참을성을 요구하는 일이었습니다. 설치형 워드프레스로도 만들어봤지만 CMS가 별로였고 서버 관리하는 것도 귀찮았습니다. 그래서 공부한 걸 익힐 겸 그냥 하나 만들자! 라고 생각하게 된 것이죠. 실천하기도 참 쉽네요. 실천하기로 결정하고 움직이면 되니.
내용은?
나의 홈페이지는 나만의 정체성으로 차 있어야 한다고 생각했기 때문에 결국 제가 좋아하는 것들로 채워지겠죠. 특정 주제로 제한하고 싶진 않아요. 그래서 책, 기술, 영감을 얻을 수 있는 글들, 음악 등의 좋아하는 카테고리들로 배치했고 마지막으로 실험실을 하나 추가했습니다.
실험실은 그동안 해보고 싶었던 것들, 새롭게 시도하는 것들로 채워지게 될 거예요. 한마디로 생각을 실천으로 옮기는 공간이 되는 것이죠. 계속 업데이트되는 로그가 될 수도 있고 어떠한 결과물이 될 수도 있습니다. 말그대로 실험실이라 실험하다가 재미없다 싶으면 없앨 수도 있겠죠. 컨텐츠가 좀 더 빌드업되면 별도로 사업화해서 운영하게 될 지도 모를 일이고요. 사실 그걸 노리고 다양한 시도를 해보려고 하는 겁니다.
뭐로 만들었어?
Gatsby (정적 사이트 생성 프레임워크) React 기반의 정적 사이트 생성을 위한 프레임워크입니다. 큰 규모 웹사이트의 경우 빌드 시간이 길어질 수 있고, 동적 기능 구현에 제한이 있을 수 있지만 정적 사이트로써는 SEO 에 친화적이고 코드, 이미지가 최적화되어 개인형 블로그, 홈페이지에 매우 적합할 것으로 판단했습니다. 사용해보니 다양한 플러그인들이 있어 작업시간을 줄여주네요. 그동안 사용하던 Next.js 의 SSG(Static Site Generation)를 이용해볼까도 생각했지만 일단 먼저 경험해보고 싶었고 정적 사이트 생성으로써는 훌륭하다 생각되네요.
React (JS UI 라이브러리) Facebook 에서 만든 오픈소스 JS 라이브러리입니다. 가상DOM 을 이용해 성능을 최적화하고 컴포넌트 기반이라 코드 재사용이 매우 용이합니다. 현재 프론트엔드 개발할 때 제가 주로 사용하는 라이브러리이고 Gatsby를 선택한 이유이기도 하죠.
Styled Component (React CSS 라이브러리) React 애플리케이션에서 스타일을 적용하기 위한 라이브러리로 JavaScript와 CSS를 결합하는 CSS-in-JS의 접근 방식을 사용하여 컴포넌트 레벨에서 스타일을 관리할 수 있습니다. 개인적으로는 CSS 와 JS 가 결합되는 방식을 좋아하지 않았는데 props 를 활용해 조건별 스타일 분기하는 부분이 꽤 맘에 들었고 JSX 로만 보면 꽤 간결해지는 장점이 있는 것 같습니다. 모두 컴포넌트네요. React 철학에 부합하는 CSS 라이브러리가 아닌가 싶습니다.
Contentful (컨텐츠 관리) 클라우드 기반의 Headless CMS 입니다. 컨텐츠를 플랫폼과 분리시켜 다양한 플랫폼에서 Rest, GraphQL API 로 제공받을 수 있는 부분이 큰 장점입니다. 컨텐츠의 성격에 맞게 모델링이 가능한 부분도 매력적이네요. 컨텐츠에 집중했지만 다양한 외부 서비스와 통합이 가능해서 좋네요. Github dispatch api 를 Webhook 으로 연결해서, 컨텐츠를 등록하거나 수정하면 Github 저장소에 즉시 배포되도록 설정해 두었습니다.
GraphQL 필요한 데이터의 구조를 쿼리로 요청해 꼭 필요한 데이터만 받을 수 있어 오버페칭, 언더페칭을 줄일 수 있는 게 큰 장점이예요. Rest와 달리 단일 엔드포인트입니다. Rest만 사용하다보니 이 부분이 참 신기했어요. 익숙하지 않아서 다른 프로젝트에 GraphQL을 도입할 일이 있을지는 모르겠지만 GraphQL의 장점을 활용하기 위해 Rest를 래핑해서 GraphQL로 전환하는 것은 좀 아닌 것 같아요.
Github Pages (호스팅 및 배포) Github 저장소와 직접 연결되어 정적 사이트만 호스팅이 가능하고, Git을 통한 버전 관리와 배포가 용이합니다. 소스를 Github에 push 하면 Github Action 을 통해 빌드, 배포됩니다.
Cloudflare (DNS, 보안) CDN, 보안 등의 다양한 네트워크 관련 서비스를 제공하는데요. 이 홈페이지에서는 DNS 서버로 활용하고 있고 SSL, DDos 방어 등의 기본 제공 기능을 사용하고 있습니다. Github pages 만으로도 가능해서 오버스펙이긴 한데 경험이 목적이고 Cloudflare 도 잘 활용해보고 싶었어요.
마무리
홈페이지를 만들기로 작정하고 기획부터 시작한 게 아니라 무턱대고 코드를 짜기 시작했습니다. 사용할 도구들을 정하고 나니 빨리 만들고 싶었거든요. 어차피 개인 프로젝트라 일반적인 작업흐름을 따르는 것보단 제 방식대로 해보고 싶었어요. 제대로 기획, 디자인해 본 적도 없고요. CSS가 익숙하지 않은 제가 디자인 결과물없이 UI 작업을 하다보니 쉽지 않았는데요. 그래도 그 과정이 재밌었습니다. 완성본이 아니라 계속 다듬어 가고 있는 중이라 한달 뒤에 또 어떤 모습으로 바뀌어 있을지는 저도 모르겠네요.
나 자신을 위해 무언가를 만들어가고 있다는 사실이 무척 즐겁습니다. 그런 시간을 지속적으로 늘려가고 싶어요.