개인 프로젝트: 삼원호스 웹사이트

Overview

가족이 운영하는 실제 제조업 사업체의 회사 소개 및 제품 소개 웹사이트를 만들며, 단순 구현을 넘어 SEO, 렌더링 전략, 이미지 최적화, 서버 리소스 절감, CI/CD 자동화까지 전 과정을 직접 개선했습니다. OCI 무료 티어 서버의 제한된 자원 환경에서 Nuxt3(Vue), NestJS, Docker, Nginx 기반 서비스를 직접 설계·개발·배포·운영한 프로젝트입니다.

Background

삼원호스는 가족이 운영하는 유압호스·피팅·카플러 중심의 산업자재 전문 기업으로, 오프라인 거래 중심의 사업 정보를 온라인에서도 신뢰감 있게 전달할 수 있는 웹사이트가 필요했습니다. 초기에는 사용자 서비스와 관리자 서비스를 분리하고 각각의 API 서버를 구성했지만, OCI 무료 티어 서버 환경에서는 서비스 규모 대비 리소스 사용량이 과도했습니다. 이에 사용자 서비스는 SEO와 초기 로딩 성능을 고려해 ISR 구조로 전환하고, 관리자 서비스는 검색엔진 노출이 필요 없는 내부 시스템 특성을 반영해 CSR 및 Nginx 정적 서빙 구조로 최적화했습니다.

Tech Stack

Key Tasks

• Nuxt3(Vue) 기반 사용자 서비스와 관리자 서비스 개발
• NestJS 기반 API 서버 개발 및 분리된 API 서버 통합
• TypeORM 기반 데이터 모델링과 SQLite 적용
• Docker/Nginx 기반 운영 환경 구성 및 GitHub Actions 배포 자동화
• Swagger 기반 API 문서화
• SEO 메타 태그, OG 태그, JSON-LD 구조화 데이터, sitemap, robots 구성
• 사용자 서비스는 ISR 구조로 전환하고 관리자 서비스는 CSR 전환 및 Nginx 정적 서빙 구조로 개선
• 이미지 업로드 시점에 다중 해상도와 WebP 이미지를 사전 생성하도록 개선
• 공통 Image 컴포넌트와 picture/source 태그 기반 반응형 이미지 제공

Outcomes

• 제한된 OCI 무료 티어 환경에서 서비스 운영 구조와 리소스 사용량 최적화
• 사용자 서비스 ISR 전환과 관리자 서비스 CSR 전환으로 각 서비스 목적에 맞는 렌더링 전략 적용
• 분리된 API 서버 통합과 SQLite 적용으로 운영 복잡도와 서버 리소스 사용량 감소
• 업로드 시점 이미지 사전 최적화로 실시간 이미지 처리 부담과 캐시 관리 복잡도 감소
• SEO 및 검색엔진 색인 대응 경험 확보

Insights

• 서비스 성격에 따라 SSR/ISR/CSR 전략을 분리해야 제한된 인프라에서도 효율적으로 운영할 수 있음을 확인
• 요청 시점 이미지 처리보다 업로드 시점 사전 생성 구조가 작은 서버에서 더 예측 가능한 운영 모델임을 경험
• 개발, 배포, 운영을 직접 맡으며 코드 구조와 인프라 리소스가 함께 설계되어야 함을 체득

Links

• 삼원호스 사이트 보기