많은 블로그 플랫폼이 존재하지만, 직접 블로그를 개발하고 싶은 욕구가 커졌습니다. 또한 공부를 하거나 Product를 개발할 때 마주치는 문제와 고려사항들을 포스팅하며, 더 깊이 이해하고 경험을 기록하고, 새로운 기술을 적용할 수 있는 플레이그라운드로서 개인 블로그를 만들게 되었습니다.

도메인 비하인드

현재 도메인은 iamseon.com입니다. 이전에는 imslow라는 도메인을 사용했는데, 검색해보니 절대 찾아봐서는 안 되는 단어로 나왔습니다. 이유에 대해서 찾아보니 귀신이 나타나서 겁을 주는 사이트로 활용된 적이 있더라고요! 그래서 기분이 찜찜해서 지금의 도메인으로 변경하게 되었답니다. 하하!

디자인

블로그 디자인은

velog

와

토스 기술 블로그

를 벤치마킹하여 진행하였습니다. 이 두 플랫폼의 사용자 경험과 시각적 요소를 분석하고, 이를 바탕으로 현대적이고 직관적인 UI를 구현하는 데 중점을 두었습니다.

디자인 과정에서는 Figma를 활용하여 다양한 레이아웃과 요소를 시각적으로 표현하였습니다. 그리고, 단순한 메시지를 넘어, 사용자가 예상치 못한 상황에서도 긍정적인 경험을 느낄 수 있도록 바라며 404 페이지와 리스트가 비어있을 때 표시되는 일러스트도 직접 제작하여 블로그의 개성을 더했습니다.

기술스택

기술스택을 선택한 기준은 평소에 사용해보고 싶었던 기술과 이해가 부족하거나 더 이해하고 싶은 기술 그리고 사용해보고 싶었던 기술을 기준으로 선택하였습니다.

FrontEnd

TypeScript: 타입스크립트는 코드의 타입 안정성을 제공하여 가독성과 유지보수성을 높여줍니다. 개발에서 빠질 수 없는 도구라고 생각하며, 특히 큰 프로젝트에서 그 진가를 발휘합니다.
React: 재사용 가능한 컴포넌트를 통해 개발 효율성을 크게 향상시킬 수 있습니다. 복잡한 애플리케이션을 관리하기에 좋고, 프론트엔드 3대장인 react vue angular 중에서 개인적으로 가장 선호하는 라이브러리라 선택하게 되었습니다.
Next.js(App Router): React에서 SSR과 ISR을 구현하기 위해 선택했습니다. SEO 최적화에도 유리하며, Vercel과의 호환성이 뛰어나 배포가 간편합니다.
ReactQuery: 데이터 요청과 관리, 캐싱을 손쉽게 해주는 마법 같은 도구입니다. 비동기 작업을 간편하게 처리할 수 있어 사용자 경험을 개선하는 데 큰 도움이 됩니다.
Zustand: 가볍고 빠른 클라이언트 상태 관리를 위해 사용하는 라이브러리입니다. 간단한 API로 상태 관리를 쉽게 할 수 있어 프로젝트에 적합하다고 판단했습니다.
Tailwindcss: CSS-in-JS 방식이 아닌 유틸리티 CSS 방식으로, 빠르고 가벼운 스타일링을 가능하게 해줍니다. 클래스를 조합해 원하는 디자인을 쉽게 구현할 수 있어 효율적입니다.
Codemirror: 에디터를 개발 시 사용한 라이브러리입니다. velog의 마크다운 에디터가 매우 아름답고 사용자 경험이 뛰어난 것 같아, 이를 벤치마킹하여 개발하였습니다.
Vercel: Next.js를 사용할 때 가장 최적화된 호스팅 서비스라고 생각하여 선택했습니다. 자동 배포와 높은 성능 덕분에 개발에 집중할 수 있습니다.

BackEnd

Next.js: Next.js에서 제공하는 API Route를 사용하여 서버사이드에서 API를 구축했습니다. 이 기능을 통해 클라이언트와의 데이터 통신을 손쉽게 구현할 수 있었고, Serverless 환경에서도 효율적으로 작동하도록 설정할 수 있었습니다.
Supabase: Supabase는 오픈 소스 Firebase 대안으로, 데이터베이스, 인증, 스토리지 등을 제공하는 풀스택 플랫폼입니다. PostgreSQL을 기반으로 하여 실시간 데이터베이스 기능을 지원하며, API를 자동으로 생성해주지만, 저는 대부분 인증과 데이터베이스 목적으로 사용하였고, 데이터베이스를 시각화해주고, 보안도 간편하게 적용할 수 있어 매우 유용했습니다.
Prisma: 데이터베이스 ORM 도구로, 문서화가 잘 되어 있고 사용이 간편합니다. 다양한 데이터베이스 호스팅 서비스와 잘 호환되어 선택하였으며, 타입 안전성을 제공하여 안정적인 데이터 관리를 가능하게 합니다.

Architecture

이 프로젝트는 기능 분할 설계(Feature-Sliced Design, FSD) 아키텍처를 기반으로 개발되었습니다. FSD 아키텍처는 느슨한 결합과 높은 응집력을 중시하며, 객체지향 프로그래밍(OOP)의 장점을 프론트엔드에 효과적으로 접목시킨 구조입니다.

대규모 프로젝트에 적합한 이 아키텍처는 평소 아키텍처에 대한 깊은 관심과 학습 욕구를 반영하여 블로그 프로젝트에 적요하였습니다. 앞으로 아키텍처의 세부 사항과 장단점에 대해 별도의 포스팅을 통해 더 자세히 설명드릴 예정입니다.

마무리하며

수차례 블로그 개발을 시도하며 깨달은 것은 "완성하자"는 것입니다. 이전에는 서버를 직접 설정하고 Docker를 도입하는 등 다양한 시도를 하느라 포스팅을 시작하기 전부터 일정이 딜레이되는 현상이 발생했습니다. 회사 업무와 병행하다 보니 일정이 무기한 연기되기도 했습니다. 하지만 이번에는 빠르게 블로그 개발을 완료하고, 포스팅을 진행하며 점진적으로 마이그레이션을 하자는 목표로 설정하였습니다.

앞으로는 포스팅량과 트래픽에 따라 호스팅 서비스를 사용하지 않고, AWS를 이용해 서버를 분리하고 배포 자동화, S3를 활용하는 등 점진적으로 업그레이드할 계획입니다. 포스팅을 더욱 열심히 하여 블로그 개발을 즐겁게 이어가고, 점점 성장하는 개발자의 공간으로 만들어 나가겠습니다. 앞으로의 여정을 기대하며 마무리하겠습니다.