The Gallery

더 갤러리는 3D 소셜 네트워크 서비스입니다. 손쉽게 나만의 3D 갤러리를 열고 친구들을 초대할 수 있습니다. 작품마다 제목과 설명 그리고 BGM을 등록하여 의미를 더할 수 있습니다. 더 갤러리는 소셜 로그인을 통해 안전하게 사용할 수 있으며, 그과정에서 초기 닉네임 설정을 위한 최소한의 정보(이름)만을 받습니다.

사이트 : https://thegallery.site/
데모 사이트 : https://nekarak8s.github.io/gallery/

기술 스택

주요 기능

• 🔒 안전한 소셜 로그인
• 🎵 작품별 음악 선택
• 🌎 3D 갤러리 탐방
• ✏️ 감상문 기록
• 😀 갤러리 공유

사용 가이드

1. 소셜 로그인

더 갤러리는 안전한 소셜 로그인을 통해 사용할 수 있습니다. 초기 닉네임 설정을 위한 최소한의 정보(이름)만을 받아올 뿐, 어떠한 권한도 요구하지 않습니다.

2. 갤러리 생성

마이페이지에 들어가 [+] 카드를 클릭하면 전시회를 생성할 수 있습니다. 생성하려는 전시회의 기본 정보를 입력한 후 전시회를 생성합니다.

3. 작품 등록

바로 하단의 목록에서 생성한 전시회를 확인할 수 있습니다. 수정 버튼을 눌러 전시 작품 목록을 업데이트합니다. 제목과 설명 그리고 배경음악을 선택할 수 있습니다.

4. 갤러리 탐방

플레이 버튼을 눌러 갤러리에 입장할 수 있습니다. URL 주소나 페이지 상단의 검색 기능을 통해서도 입장 가능합니다. 데스크탑에서는 키보드, 모바일에서는 터치 조이스틱을 사용하여 3D 갤러리를 탐방할 수 있습니다.

5. 감상문 기록

각 작품마다 감상문을 남기며 친구들과 소통할 수 있습니다. 생성한 전시회의 URL을 공유하여 친구들을 초대해보세요.

기술 비하인드

프로젝트를 더 나은 서비스로 만들기 위한 다양한 기술적 고민들이 있었습니다. 그 중 주요한 내용만을 골라 소개합니다.

Three.js

Three.js로 3D 공간을 구현하면서 두 가지 어려움을 마주했습니다. 첫번째는 부피가 있는 사물을 설계도 상 정확한 위치에 배치하는 것이었고, 두번째는 Three.js 라이브러리의 누수 메모리 관리였습니다. 이를 해결하기 위해 3D 아이템을 위한 전용 클래스를 만들었습니다.

• 아이템은 각각의 특징에 따라 생성자 함수에서 위치가 재조정됩니다. 예를 들어, 벽(Wall) 아이템의 경우 처음 y축 위치보다 (height/2) 더 높게 재조정함으로써 직관적으로 바닥면에 자동 정렬되도록 했습니다.

  export class Wall {
     dispose: () => void
     ...
     constructor(info: WallArgs) {
        // Adjust position
        this.x += (this.width * Math.cos(this.rotationY)) / 2
        this.y += this.height / 2
        this.z -= (this.width * Math.sin(this.rotationY)) / 2
        ...
     }
  }

• 각 아이템 클래스마다 자신의 리소스를 회수하는 dispose메소드를 가지고 있습니다. 외부에서 이 dispose 함수를 호출함으로써 간편하게 리소스를 회수할 수 있습니다.

Micro Service Architecture

효율적이고 안정적인 서비스 운영을 위해 백엔드는 MSA 아키텍처를 채택했습니다. 그러나 MSA 구조를 택했음에도, 서버 간 연관성이 복잡해지는 문제를 해결하기 위해 Zero-Payload 이벤트 방식을 도입했습니다.

• 회원이 탈퇴할 경우, 해당 회원이 가지고 있던 모든 갤러리를 삭제해야합니다. 이때 회원 서버는 직접 갤러리 서버의 API를 호출하지 않고, 카프카를 통한 메시지 큐로 전달됩니다. 회원 서버가 '회원 탈퇴' 이벤트를 발행하면, 갤러리 서버는 이벤트 발생을 감지하고 처리합니다.

• 이벤트는 최소한의 정보만을 가지고 있는 zero-payload 형태로 발행하여 통신의 복잡도를 줄일 수 있습니다. 위 상황의 경우 탈퇴한 회원 ID를 전달합니다.

Kubernetes

EKS 운영 부담을 줄이기 위해 AWS Lightsail 인스턴스에 k3s(쿠버네티스 경량화 버전)를 직접 설치하여 싱글 노드 클러스터를 구축했습니다. CI/CD 전략으로는 각각 Github Actions와 ArgoCD를 채택했습니다.

Monitoring

운영 환경 모니터링을 위해 Prometheus와 Grafana를 도입했습니다. Ubuntu 서버와 Spring Application Metrics를 Prometheus로 수집하고, Grafana Dashboard를 이용해 시각화 했습니다.

관련 문서

• API 설계
• ERD 설계
• 디자인 시스템