포트폴리오 및 블로그
개발 인원
1명
담당 역할
풀스택
사용 기술
Next.jsRustActix WebTypescriptTailwindCSSZustandDockerDocker ComposePostgreSQL
프로젝트 설명
개인 포트폴리오와 기술 블로그를 하나의 웹사이트로 통합하여, 기술적 경험과 프로젝트를 효과적으로 공유할 수 있도록 구성하였습니다. Next.js 기반의 프론트엔드와 Rust 및 Actix Web 기반의 백엔드로 구성된 풀스택 웹사이트이며 포트폴리오, 블로그 글 관리, 사용자 경험(UX) 중심의 애니메이션과 UI를 구현했습니다
핵심 기능 및 성과
Docker Compose 기반 로컬 개발 환경 구축
- Docker Compose 기반 로컬 개발 환경 통합 구축
CI/CD 파이프라인 구축 및 자동화 배포
- GitHub Actions 기반 CI/CD 자동화 및 배포 효율화
Quill 기반 블로그 텍스터 에디터 구현
- Quill 에디터 커스터마이징 및 이미지 업로드 UX 개선
블로그 글 렌더링 컴포넌트 및 코드 블럭 하이라이팅
- Quill HTML 콘텐츠 렌더링 및 코드 하이라이팅 적용
Framer Motion 기반 인터랙티브 UI 구현
- Framer Motion 및 이미지 블러 로딩을 통한 UX 개선
블로그 페이지네이션 및 SEO 최적화
- 서버 페이지네이션 및 SEO 최적화를 위한 SSR/SSG/ISR 구현
회고
사용자에게 과하지 않은 자연스러운 인터랙션을 제공하고자 많은 고민을 했습니다. Framer Motion과 Canvas API 등을 통해 시각적인 효과를 주되, 사용자가 불편함을 느끼지 않도록 세심하게 조절했습니다. 특히 정보 제공 목적의 웹사이트에서는 인터랙션의 강도와 빈도가 사용자 경험에 큰 영향을 미친다는 점을 새삼 느낄 수 있었고, 이 과정에서 인터페이스 설계에 대한 감각을 키울 수 있었습니다.
또한 단순한 블로그 글 CRUD 기능이더라도, 프론트엔드에서 어떤 구조로 데이터를 다루면 사용자에게 유용할지, 백엔드에서는 어떤 형식으로 응답을 보내야 하는지를 고민하며 전체적인 데이터 흐름을 직접 설계해보는 경험이 매우 뜻깊었습니다. 데이터베이스 구조와 API 설계, 프론트엔드 렌더링 방식까지 웹 서비스 전반에 대한 이해를 넓힐 수 있는 기회였고, 기술적인 성장을 체감할 수 있던 프로젝트였습니다.
아키텍처
구현 이미지
