프로젝트

PROJECT / 2026

Portfolio

포트폴리오를 웹에서 쉽고 빠르게 관리할 수 있도록 만든 개인 포트폴리오 서비스입니다. 누구나 볼 수 있는 포트폴리오 화면과 Runtime에서 콘텐츠와 상태를 관리할 수 있는 Admin, 프로젝트와 학업에 활용하는 Tools를 함께 제공합니다.

프로젝트 설명

가끔 수정할수록 더 번거로운 포트폴리오

포트폴리오는 매일 수정하는 서비스가 아니다 보니 오랜만에 내용을 바꾸려고 하면 코드 구조부터 다시 확인해야 했습니다. 문구 하나나 프로젝트 정보 하나를 고치는 데도 소스를 수정하고 다시 배포해야 했습니다. 반대로 공개 포트폴리오 중에는 화려한 효과와 정보가 너무 많아 정작 중요한 내용을 찾기 어렵거나, Hover를 해야만 내용을 볼 수 있어 읽는 데 피로한 경우도 많았습니다.

코드를 열지 않고 관리하고, 핵심은 바로 보이게

콘텐츠를 바꿀 때마다 코드를 다시 읽지 않아도 되도록 Admin에서 프로필, 프로젝트, 파일과 서비스 상태를 관리할 수 있게 만들었습니다. 서버 상태도 직접 확인하기 전에 이상을 감지하고 복구할 수 있도록 Monitoring과 배포 복구 절차를 두었습니다. 공개 화면은 Hover를 해야만 내용을 읽을 수 있는 구조나 과도한 애니메이션을 피하고, 필요한 정보가 처음부터 보이도록 구성했습니다.

개발과 학업에 쓰는 개인 도구

프로젝트를 진행할 때 자주 찾는 문서와 레퍼런스, 개발 환경을 구성할 때 반복해서 확인하는 링크를 한곳에 정리하고 싶었습니다. 학업에서도 기존 프로그램에 맞추기보다 Quiz나 암·복호화처럼 실제로 필요한 기능을 직접 만들어 쓰고, 이후 필요한 도구를 계속 추가할 수 있도록 Tools 영역을 따로 두었습니다.

기술 스택 · 성과

기술 스택

- 본인 개발 영역

  • Next.js
  • React
  • TypeScript
  • Java
  • Spring Boot
  • PostgreSQL
  • Docker
  • Docker Compose
  • Linux
  • GitHub Actions
  • GHCR
  • Git

성과

  1. 운영 중에도 설정을 바꿀 수 있는 관리 구조 설계

직접 담당한 개발 영역

  1. Backend

    • Spring Security·Spring Session JDBC로 ADMIN 로그인과 세션 관리
    • OTP Challenge로 로그인·민감 작업 재인증
    • 프로필·프로젝트·기술·외부 링크·Resume의 Public/Admin API 구현
    • 프로젝트 이미지·Resume·Tool 이미지의 저장·교체·삭제 처리
    • 서비스 상태, 로그인·에러 로그, 방문 통계 조회 기능 구현
  2. Frontend

    • Public Portfolio·Project Detail 반응형 화면 구현
    • Site·Project·Account·Monitoring·Tools Admin 화면 구현
    • Quiz·Links와 ADMIN 인증 흐름 구현
    • 초기 API 병렬 요청, ETag, Hero Map 지연 로딩으로 첫 화면 성능 개선
  3. Infra

    • DEV / PROD Docker Compose·Network·PostgreSQL 분리
    • Synology DSM Reverse Proxy는 외부 요청, Ubuntu Mini PC는 애플리케이션 실행 담당
    • 업로드 파일을 NAS에 저장해 Container 교체 후에도 파일 유지
    • GitHub Actions에서 SHA Image Build, GHCR 저장, Self-hosted Runner 배포
    • Health Check·Smoke Test·자동 Rollback·Database Backup Script 구성

아키텍처

인프라 / 실행 환경
외부 요청과 도메인 처리는 Synology DSM Reverse Proxy가 맡고, Frontend·Backend·Monitoring Container는 Ubuntu Mini PC에서 실행합니다. 업로드 파일은 NAS에 따로 저장해 Container를 교체해도 파일이 남도록 했습니다.
인프라 / 배포
GitHub Actions가 Commit SHA로 Image를 만들어 GHCR에 올리면 Self-hosted Runner가 변경된 Component만 교체합니다. 배포 직후 Health Check와 Smoke Test를 실행하고, 실패하면 직전 정상 Image로 되돌립니다. 서버에서 직접 Source를 Build하지 않는 방식으로 배포 절차를 고정했습니다.

기술적 문제 해결