레디엔터테인먼트 모델, 프로젝트 관리 시스템

프로젝트 개요

레디엔터테인먼트에서 모델 정보 및 프로젝트를 관리하고, 모델 등록, 프로젝트별 모델 추천, 프로젝트 진행 및 계약 상황 관리 등의 서비스를 제공하는 페이지

프로젝트 정보

• 사내 페이지

기술 스택

• UI: HTML, SCSS
• FRONT: Vue3

주요 구현 기능

• API 공통 설정을 위한 코어 파일 설정 및 서비스별 API 파일 분리 및 관리
• 드롭박스, 서제스트, 각종 팝업 등 다양한 공통 컴포넌트 제작 및 활용
• 로그인 후 사용자 권한에 따른 페이지 및 컴포넌트 노출 관리
• 프로젝트 진행 상태에 따른 섹션 노출 분기

문제 및 해결

• 배포 후 페이지 404 현상
  • 문제 기존에는 이상이 없었으나 어느 시점에서 배포 후 일시적으로 페이지를 찾지 못해 404 에러가 뜨는 현상이 발생하였다.
  • 해결 이전 프로젝트에서 정적 빌드 결과물 배포 시 404 에러가 발생했던 원인이 멀티 파드 구성이었다는 점을 기반으로, 백엔드에 파드 구성 변화 확인 및 싱글 파드 구성 요청 등의 테스트를 통해 이슈 원인을 파악 및 백엔드에 정보 제공하였다.
• Atomic Design의 부적절한 활용
  • 문제 Atomic Design을 철저하게 UI 기준으로 구성하여 모든 HTML 요소들이 컴포넌트로 구현되어 있었으며, 다량의 데이터를 담고 있는 테이블을 그릴 때 성능 및 속도 이슈가 발생하였다.
  • 해결 다량의 데이터를 렌더링해야 하는 경우와 일반적인 경우에 대해 컴포넌트 사용과 태그 사용을 유연하게 배치하여 성능을 개선하였다.
• 도커 구성의 문제
  • 문제 기존에 주로 Nuxt를 활용하였기 때문에 프론트 서버가 붙어 있는 구성이었다. 이를 잘 고려하지 않고 도커 파일을 그대로 구성하여, 프론트 서버가 붙어 있지 않은 Vue 결과물을 배포할 때 문제가 있었다.
  • 개선 프로젝트 기간 내에는 보완하지 못했으나 해당 이슈가 있다는 부분을 파악했고, 프론트 서버가 있을 때의 결과물과 단순 정적 파일 빌드 결과물의 도커 구성 방식에 대한 차이점을 고려해 볼 수 있는 기회였다.

성과

• 인력 부족으로 프로젝트 중간에 투입되어 백업을 해야 하는 상황에서, 빠르게 내용을 파악하고, 공통 컴포넌트 구현 및 활용을 통해 모델, 프로젝트 관리, 시스템 분야에 관계없이 다양한 페이지를 개발 및 구현
  • 주로 모델 구현 파트와 프로젝트 관리 파트로 개발자들이 나뉘어 있었으나, 이에 관계없이 리소스가 부족한 모든 분야에서 개발 진행
• 프론트 협업자들과의 적극적인 소통을 통해 부족한 부분을 파악하고 협업