블꾸
Side-project

블꾸

2024.02 - 2024.08 Devkor

이젠 블로그도 블꾸하자! 다꾸형 커스텀 극대화 블로그

사용 기술

Figma

디자인 툴로 웹 및 모바일 앱 디자인 및 협업

Next.js

React 기반 프레임워크로 SSR 및 정적 사이트 생성

React

컴포넌트 기반의 UI 라이브러리로 동적인 웹 애플리케이션 구축

TailwindCSS

유틸리티 우선 CSS 프레임워크로 빠른 UI 스타일링

TypeScript

정적 타입 지원으로 안정적인 JavaScript 개발

AWS

클라우드 컴퓨팅 서비스로 확장 가능한 인프라 구축

Docker

컨테이너 기반 가상화로 일관된 개발 및 배포 환경 구성

MySQL

신뢰성 높은 오픈소스 관계형 데이터베이스 시스템

NestJS

TypeScript 기반의 확장 가능한 Node.js 서버 프레임워크

Nginx

고성능 웹 서버 및 리버스 프록시로 트래픽 관리

Node.js

확장 가능한 서버 사이드 JavaScript 런타임 환경

Redis

인메모리 데이터 스토어로 고성능 캐싱 구현

Discord

음성, 채팅, 화면 공유 등 다양한 기능을 제공하는 커뮤니티 플랫폼

Git

분산 버전 관리 시스템으로 효율적인 협업과 코드 관리

GitHub Actions

GitHub 기반 워크플로우 자동화 및 CI/CD

Notion

문서 작성과 지식 관리를 위한 올인원 워크스페이스

👀 블꾸가 해결하는 문제

기존 블로그 플랫폼은 디자인이 제한적이라 감성적인 커스텀 블로그를 만들기 어려웠어요. 다이어리를 꾸미듯 블로그를 커스터마이징할 수 있다면 어떨까요? 블꾸는 감성을 극대화한 다꾸형 블로그 플랫폼입니다..!


🚀 주요 기능

🖌캔버스와 에디터를 넘나들며 커스텀 가능!

텍스트 에디터 위에 캔버스 레이어를 얹어, 단조로운 글을 예쁘게 꾸밀 수 있어요

📸감성 꾸미기 요소

예쁜 스티커를 붙이거나, 누끼 기능을 통해 직접 스티커를 만들어 붙일 수 있어요

💬소셜 기능

블로그 간 댓글, 팔로우, 좋아요 시스템을 갖추었고 SSE를 통해 실시간으로 알림을 받을 수 있어요

🌎SEO 최적화

검색 엔진에서도 잘 노출되도록 설계했어요


🔍 기술적 도전

blccu-Architecture분산 환경 시스템에서 안정적인 배포 환경 구축

  • 복수의 vm 환경을 가정하고 stateless한 서버 구축
  • nginx + docker 활용 블루그린 무중단 배포 적용

SSE를 활용한 실시간 알림 기능

  • 웹에 접속해 있는 동안 댓글/팔로우/좋아요가 생길 경우 유저에게 토스트 알림
  • redis-BullMQ 기반 분산환경에서도 안정적으로 스트림 처리

프로메테우스 / 그라파나 활용 모니터링

  • 전역 인터셉터를 통해 api 엔드포인트 별 메트릭 수집, 부하 및 장애점 모니터링

💡 이런 경험을 얻었어요

규모와 체계가 있는 첫 사이드 프로젝트여서 여러모로 뜻 깊은 프로젝트였습니다. 특히 플랫폼이니 만큼 실시간성과 트래픽이 중요한 서비스였기에 백엔드의 기본기를 갈고 닦기 좋았습니다. 이 프로젝트를 통해 배운 교훈을 꼽자면…

  • 확장성 있는 인프라 아키텍처 설계
  • Redis를 활용한 메세지큐 기반 실시간 알림 시스템 개발 및 데이터 캐싱과 성능 최적화 전략 도입

  • Docker, ECR 활용 컨테이너 기반 CI & CD 라인 구축
  • 프로젝트 아키텍처에 대한 고민, 철학이 정립되어가기 시작함

정도로 회고할 수 있을 거 같네요. 프로젝트 자체로는 큰 성과 없이 마무리 되었지만, 무릇 개발자라면 다 겪는 성장통인 것 같아요.