모델 에이전시 인터렉티브 웹사이트 프론트엔드 및 CMS 구축 전문가

[프로젝트 개요]
- 매니지먼트 에이전시의 기존 웹사이트를 리뉴얼하는 프로젝트입니다. 기획 및 디자인은 클라이언트 측에서 자체적으로 제공하며, 개발사는 제공된 디자인을 바탕으로 영상과 움직임이 포함된 인터렉티브 프론트엔드 퍼블리싱과 직관적인 컨텐츠 관리가 가능한 CMS 백엔드 구축을 담당합니다.

[프로젝트 배경 및 목표]
- 광고 및 미디어 산업의 특성에 부합하는 트렌디하고 시각적인 웹사이트를 구축하고자 합니다. 영상과 애니메이션을 적극 활용하여 에이전시의 포트폴리오와 소속 모델을 효과적으로 홍보하고, 내부 관리자가 개발 지식 없이도 텍스트, 이미지, 영상 콘텐츠를 기사 형태로 쉽게 업데이트할 수 있는 관리자 환경을 마련하는 것이 최종 목표입니다. 사용자 회원가입 기능을 배제하여 불필요한 개발 공수를 줄이고 시각적 완성도에 집중합니다.

[과업 범위]
1. 수행 범위
- 프런트엔드/Client 개발 (약 10페이지 분량)
- 백엔드 개발 (콘텐츠 관리용)
- 서버/DB/인프라 구성
- 웹사이트 퍼블리싱 및 애니메이션 구현

2. 상세 기능 요구 사항
2-1. 메인 페이지 (인터렉티브 구현)
- 전체 화면 배경 영상 자동 재생 기능 적용
- 사용자 스크롤 반응에 따른 텍스트 요소 페이드인 및 페이드아웃 효과 구현
- 마우스 오버 시 이미지 크기 확대 및 색상 반전 애니메이션 적용
- 동적 전환 효과를 포함한 페이지 간 이동 라우팅 처리

2-2. 서브 페이지 (포트폴리오 및 기사)
- 모델 및 광고 포트폴리오 썸네일 그리드 배열 구현
- 썸네일 클릭 시 상세 이미지 및 영상이 포함된 모달 창 출력 기능 적용
- 카테고리 필터링 버튼 클릭 시 화면 새로고침 없는 리스트 비동기 정렬 구현
- 텍스트 가독성을 고려한 미디어 인더스트리 맞춤형 폰트 렌더링 및 자간 간격 최적화 적용

2-3. 관리자 페이지 (CMS)
- 포스트 등록을 위한 에디터 기능 적용
- 등록된 기사 및 포트폴리오의 노출 여부를 토글 버튼으로 설정하는 상태 변경 기능 구현
- 메인 페이지 배경 영상 교체를 위한 파일 업로드 및 용량 제한 알림 기능 적용
- 전체 콘텐츠 목록에 대한 수정 및 삭제 버튼 제공

[기술/제조 스택]
- 개발사에서 가장 효율적으로 인터렉티브 애니메이션과 CMS를 구현할 수 있는 스택(워드프레스, 아임웹, 헤드리스 CMS, React, Vue 등)을 자유롭게 제안해 주시기 바랍니다.

[클라이언트 준비 사항]
- 화면 설계서 및 기능 정의서
- UI 디자인 원본 파일
- 웹사이트에 등록될 텍스트, 이미지, 영상 에셋 초도 물량

[주요 일정]
1. 희망 착수일: 2024년 9월 1일 (협의에 따라 변동 가능)
2. 최종 오픈(납품) 희망일: 착수일로부터 2개월 이내

[지원 자격 및 우대 사항]
1. 지원 자격
- GSAP, WebGL 등 인터렉티브 웹 구현 경험
- 직관적이고 사용하기 쉬운 자체 CMS 또는 오픈소스 CMS 구축 역량
2. 우대 사항
- 에이전시, 엔터테인먼트, 미디어, 광고 산업군의 웹사이트 제작 포트폴리오 보유
- 애니메이션 기획 및 최적화에 대한 선제적 제안이 가능한 개발사

[참고 사이트]
- https://bnbindustry.com/news/
- 해당 사이트 처럼 만들기를 원하는 것은 아닙니다만, 영상과 움직임이 있어서 참고 url로 넣었습니다.

[산출물]
- 웹사이트 소스코드 원본
- 관리자 페이지 사용 매뉴얼 문서
- 서버 인프라 구성도 및 접속 정보 문서