블로그 제작 후기

기존 티스토리에서 자체 제작한 블로그로 옮겨오면서 제작 후기를 적어보려고 합니다.

1. 블로그 자체 제작 이유

사실 블로그를 직접 만들게 된 이유는 내 서비스를 직접 운영해보고 싶은 마음에서 출발했습니다.

어떤 서비스를 직접 만들어볼까 하다가 가장 자주 쓸 것 같은 블로그로 시작해보자 하여 블로그를 자체 제작하게 되었습니다.

특히 올해 초부터 Cursor를 사용하면서 빠른 서비스 개발과 기술 놀이터 이 두 가지 목표를 이루기 위한 마음으로 출발 했습니다.

결과적으로 생각했던 것보다 오래 걸리고 초기 생각했던 기술 스택과 달라졌지만 이 과정에서도 많은 것을 배웠기 때문에 후기를 적어보려 합니다.

2. 블로그 제작 과정

2.1 초기 계획

2.1.1 블로그 프로젝트 정의

어느 프로젝트를 시작하든 처음은 기획에서 시작합니다. 어떤 기능이 필요한 지, 어떤 기술을 사용할 지 정하는 과정이 사실 프로젝트의 절반은 차지한다고 생각합니다.

특히 이 과정에서는 ChatGPT의 Project를 활용하였습니다. 간단하게 작성한 PRD와 기획 프로세스를 정의하고 적절한 프롬프트를 설정하여 이 프로젝트 자체의 기획을 함께 담당하고자 했습니다. 내가 원하는 기능을 구체적인 사항으로 기획해주고 디벨롭 해주는 역할을 담당하였습니다.

내가 생각하는 기능과 기술 스택을 구체적으로 정의해주는 역할을 시켰습니다. 특히 기술 놀이터라는 목표를 위해 제가 원하는 기술 스택을 알려주고 장단점 및 예상 시나리오를 작성해주는 역할을 시켰는데 이로 인해 굉장한 시간 단축을 할 수 있었습니다.

저는 이 맘때쯤 회사에서 서브로 백엔드 개발도 담당하고 있었기 때문에 추가적으로 공부하기 위해 MySQL같은 DB를 도입하고자 했습니다. 결과적으로는 여러 가지 이유로 많이 바뀌었으나 초기 기획한 기술 스택은 아래와 같습니다.

• 기술 스택
  • Frontend: Next.js, Tailwind CSS
  • Backend: Node.js, exress
  • Database: MySQL
  • Deploy: Vercel + Oracle Cloud
  • 프로젝트 관리 : GitHub, Notion
  • 도메인 : Cloudflare

모노레포 기반의 프로젝트를 만들고 싶었고 그래서 사실 Next.js 만으로 충분하였으나 백엔드와 DB 공부도 할 겸 백엔드를 추가로 도입하고자 했습니다. 또한 Oracle Cloud의 무료 요금제를 활용하여 Cloud 기반 백엔드 배포를 해보고자 했습니다.

그러나 이 과정에서 개발 예상 시간보다 많은 시간이 소요되었고 특히 Docker로 배포 시 불필요한 문제가 많기도 하고 굳이 블로그 게시글을 따로 DB로 관리해야하는 지 의문이 들어 결국 수정하게 되었습니다. 그래도 초기 기술 스택 선정의 중요성과 시간과 욕심 이 두 가지를 적절히 생각하는 법을 배웠기 때문에 좋은 경험을 했다고 생각합니다.

2.1.2 블로그 디자인 고민

이 프로젝트를 시작하기 전에 가장 중요하게 여긴 목표는 AI를 활용한 빠른 서비스 개발이었습니다.

특히 디자인으로 고민이 많았고 원하는 레퍼런스 토대로 프로토타입을 만드는 것을 우선으로 이 부분을 해소하기 위해 다양한 툴을 찾아봤습니다.

그 때 나온 것이 Vercel에서 만든 V0 였습니다.

figma 혹은 원하는 질문을 통해 Next.js + tailwind 기반의 코드를 만들어주는 툴입니다.

Next.js를 사용하고자 했기 때문에 최적의 툴이었고 또한 Vercel의 빠른 배포 및 프리뷰 기능까지 제공함으로 상당히 빠른 프로토타입 개발 속도를 자랑합니다.

저는 원하는 레퍼런스 사진과 색상 등을 주고 메인 블로그 페이지를 만들어보았습니다. 많이 바뀌었지만 제가 원했던 꽤나 괜찮은 초기 디자인이 나왔습니다.

2.1.3 블로그 기능 구현

이 프로젝트에서 초기에 제가 구현하고자 하는 기능은 아래와 같습니다.

• 블로그 게시글 CRUD
• 댓글 기능
• 내 소개 페이지
• 잡담 및 개인 공부 카테고리 페이지

특히 초기에는 DB로 게시글을 관리하고자 했기 때문에 프론트엔드 외 백엔드까지 모두 직접 개발하였습니다.

2.2 수정된 기획

그러나 앞서 생각했던 기획은 여러가지 문제가 있었고 특히 두 가지 문제가 있었습니다.

1. 기술 놀이터라는 목표로 인한 불필요한 자원 낭비

• 사실 알고 있었지만 블로그 게시글을 따로 DB로 관리하는 것은 굳이 필요하지 않았습니다.
• 또한 백엔드를 직접 구현하는 것도 굳이 필요하지 않았습니다.
• Next.js 자체로 충분히 구현을 할 수 있는 부분을 모노레포 경험이라는 이유로 분리하여 구현하는 것은 사실 비효율적이었습니다.

2. 블로그 관리 시 추가로 생기는 비용

• Next.js 자체를 Vercel로 호스팅 할 땐 무료 비용으로도 충분히 운영이 가능합니다.
• 그러나 백엔드 및 DB를 추가로 배포할 때의 비용을 고려했을 때 Oracle Cloud의 무료 요금제로 충당 가능하다 생각했으나 사실 시간이 흐를 수록 관리 혹은 비용의 문제가 생길 것이 예상 되었습니다.

위와 같은 이유로 AI를 활용한 속도와 기술 놀이터를 목표로 하는 프로젝트가 계속 지체 되었으며 결국 초기 기획을 수정하게 되었습니다.

2.3 수정된 기획

1. 블로그 게시글을 MDX 파일로 관리

• 블로그 게시글을 MDX 파일로 관리하면 블로그 게시글을 쉽게 관리할 수 있습니다.
• 굳이 CRUD 없이 직접 MDX 파일로 관리하는 것이 더 효율적이었습니다.
• 현재는 public 폴더에 관리하고 있으나 추후 스토리지 도입 등 유지보수에 굉장히 유리하다 판단했습니다.

2. 백엔드를 제거 후 Next.js 자체로 구현

• 백엔드를 제거하고 Next.js 자체를 이해하기 위한 목표로 수정하였습니다.
• 댓글 기능 또한 DB에 관리하지 않고 GitHub Issue로 댓글 관리를 하도록 구현하였기 때문에 더더욱 필요없다 느꼈습니다.

3. 결론

   결론적으로 초기 기획에 많이 바뀌었으나 더 효율적인 기술 스택과 블로그 본연의 목적에 맞는 방법으로 수정한 것 같습니다.
   이 과정에서 회사 다니면서 사이드로 개발하는 현실적인 여건과 제 기술놀이터라는 목표를 적당히 절충한 합리적인 방향이 된 것 같아 만족합니다.
   프로젝트 목적과 성격에 따른 기술 스택 선정의 중요성을 절실히 깨달았으며 이 과정에서 얻은 트러블 슈팅과 고민은 매우 큰 자산이 될 것이라 생각합니다.

3. 배운 점

3.1 웹 개발 전반적인 프로세스 이해

백엔드부터 프론트엔드 그리고 DB까지 모두 개발해보면서 웹 개발에 대한 전반적인 프로세스를 이해할 수 있었습니다. 단순히 프론트엔드 입장에서 개발하는 것이 아니라 백엔드와 DB를 고려한 개발을 해보면서 더 나은 개발을 할 수 있는 방법을 배웠습니다. 이 과정에서 백엔드 배포 및 SQL 쿼리 작성 등 프론트엔드 이외에도 많은 것을 경험해볼 수 있었습니다.

3.2 에디터 활용 및 Next.js 이해

tiptap을 활용하여 텍스트 에디터를 구현해보면서 원하는 형식의 블로그 게시글 생성 기능을 구현할 수 있었습니다. 이 과정에서 코드 하이라이팅, 마크다운을 효과적으로 처리하는 법, API 요청 시 보내는 형식 등 많은 것을 배울 수 있었습니다. 따로 트러블 슈팅 게시글에서 작성하겠지만 코드 하이라이팅 같은 부분에서 Next.js와 충돌이 있었고 이 부분은 추후 상세하게 작성해봐야겠습니다.

3.3 AI를 활용한 생산성 향상

ChatGPT를 활용하여 프로젝트 기획 등 틀을 잡는데 시간 단축과 완성도 있는 초기 기획을 할 수 있었습니다. V0 를 활용하여 원하는 초기 디자인을 빠르게 만들 수 있었고 이를 커스텀하며 원하는 디자인에 맞는 기능을 빠르게 만들 수 있었습니다. Cursor를 활용하여 코드 작성 시 많은 시간을 단축할 수 있었습니다. 원하는 기능에 맞는 초기 코드를 작성해주었고 특히 cursorrules 등을 활용하여 제가 원하는 구조를 유지하면서 적절한 코드 및 변수명 가이드를 제공해주었습니다. 좀 더 나은 구조에 대해 지속적으로 소통하여 좋은 코드를 만들 수 있었고 Pair Programming의 역할을 훌륭하게 해주었습니다.

4. 나아가야 할 점

4.1 AI 활용 시 주의할 점

AI를 활용하는 것은 매우 효율적이고 앞으로 이를 활용하지 않는 개발자는 크게 뒤쳐질 것이라는 점은 이젠 누구도 의심하지 않을 단계까지 왔다고 생각합니다. 특히 저 같은 주니어 개발자들은 더더욱 위기감을 느끼고 발전해야할 것 같단 불안감 또한 느꼈습니다. 그러나 정말 있는 그대로 사용하기에 많은 점을 고려해야할 것 같습니다.

1. AI가 작성해준 코드를 있는 그대로 사용하는 것

   AI가 작성해준 코드는 훌륭하나 있는 그대로 사용하는 것은 위험하단 생각이 들었습니다.
   요즘 vibe coding 등 AI가 작성한 코드만으로 코딩하는 것은 개발자의 역할은 아닐 것이라 생각합니다. 적어도 AI가 작성한 코드를 내가 수정할 수 있고 무엇이 문제인지 파악할 수 있어야 하는 것은 앞으로도 변하지 않을 것이라 생각합니다. 내가 담당한 부분이면 AI가 작성해주었다 하더라도 내 손길이 들어가야 한단 생각이 듭니다.

2. 균형을 잡는 것

   요즘 AI를 활용해서 빠르게 개발하여 수익을 얻었다. 개발 지식 없이 랜딩 페이지를 뚝딱 개발하였다. 등 많은 사람들이 개발의 장벽을 허물고 있습니다. 물론 이러한 흐름으로 가는 것은 부정하지 않지만 나는 개발자 라는 직업으로 먹고 살아야 하는 사람인데 충분한 사람일까 라는 의문이 들기도 합니다. 이럴 수록 더욱 중요하고 차별성을 가질 수 있는 것은 CS 지식같은 기본기 와 시대 흐름을 따라갈 수 있는 통찰력이 필요하단 생각이 듭니다. 물론 아직 저는 부족하다고 생각하기 때문에 위 두 개를 꾸준히 공부해야 함을 느낍니다. AI를 활용하여 빠른 서비스 개발과 수익 그리고 기본기 어느 하나만 공부해야함이 아닌 평생 함께 해야함을 절실히 느꼈습니다. 이렇게 개발해보면서 어떤 방향으로 나아가야 할 지, 무엇을 해야할 지가 조금 명확해짐이 이번 프로젝트에 가장 큰 수확이라 생각합니다.

5. 마무리

앞으로 기술놀이터 목표를 이루기 위해 더 재밌고 좋은 기술을 도입하여 완성도 있는 블로그로 만들고 싶습니다. 사실 아직은 많이 부족하기에 지속적으로 함께 사람들과 소통하고 배우며 나아가고 싶습니다. 어제보다 오늘 더 나은 개발자가 되고 싶으며, 개발자에서 끝나는 것이 아닌 나라는 사람의 브랜딩을 만들어나가고 싶습니다. 더욱 재미난 소식과 좋은 퀄리티의 게시글로 많은 사람들이 함께 소통할 수 있는 놀이터로 만들기 위해 열심히 게시글을 작성해보겠습니다!