이모션글로벌

개요

자회사인 이모션 글로벌 홈페이지이며, 본사에 대한 정보, 포트폴리오, 의뢰 서비스, 입사지원 서비스 등을 제공하는 웹사이트입니다. 메인 및 서브페이지를 통틀어 고도화 작업을 진행하였습니다.

진행 방식

운영 프로젝트이며, Vue.js 환경에서 scss 를 사용하여 리뉴얼된 디자인을 바탕으로 고도화 작업을 진행했습니다. 디자인 수급은 figma 로 이루어졌으며, 본인을 포함한 프론트엔드(2), 백엔드(1), 기획자(2), 디자이너(2) 각 파트별로 2명씩 투입되었습니다.

주요 작업 내용

• 1. 메인페이지

  • 퍼블리싱 및 개발

    • - 변경된 레이아웃과 콘텐츠를 반영하고, 메인 동영상 교체와 사운드 제어 버튼을 구현하여 직관적인 미디어 제어 경험을 제공
    • - 객체 데이터 구조를 파악해 반복문으로 적용함으로써 콘텐츠 관리 효율성 및 재사용성을 높임
    • - Swiper 를 활용한 슬라이드 구현

• 2. ABOUT

  • 디자인에서 요구되는 인터랙션 → GSAP 기반 패럴렉스 스크롤, Lottie 애니메이션, 이미지 가로 스크롤 등을 적용하여 완성도를 높임

• 3. CAREERS

  • 지원 자격 탭 기능, 입력 폼 검증, 실시간 value 반영 기능을 구축하여 지원자가 직관적으로 값을 입력하고 오류를 줄일 수 있는 UX 환경 조성

  • aside 영역의 fixed 적용으로 지원 진행 중 필요한 정보 확인에 대한 편의성 향상

  • Vue 의 기본 기능과 Swiper 라이브러리 충돌 문제를 해결하여 안정적인 탭 기능 구현 Blog

• 4. REQUEST

  • 입사 지원 페이지(CAREERS / apply)와 동일한 로직으로 적용

• 5. 모바일 대응

  • 적응형 퍼블리싱으로 PC와 모바일 모두에 최적화된 레이아웃을 제공해 접근성과 가독성을 향상

  • 모바일 전용 로띠 애니메이션을 적용하여 기기 특성에 맞는 인터랙션을 구현

💫 Trouble shooting

• Vue와 Swiper 라이브러리 충돌 이슈

  문제: 입사지원 페이지의 슬라이드에서 Vue의 기본 기능과 충돌하여 탭 기능이 정상 작동하지 않는 이슈 발생

  해결: v-swiper 디렉티브를 사용하여 Vue 컴포넌트와 Swiper 를 분리하고, observer: true, observerParents: true 옵션을 추가하여 DOM 변경 감지 → 탭 전환 시에도 Swiper가 정상 작동하도록 개선 Blog

• GSAP 애니메이션 메모리 누수 방지

  문제: About 페이지에서 ScrollMagic과 GSAP를 사용한 패럴렉스 스크롤 애니메이션에서 컴포넌트 언마운트 시 Scene이 제대로 정리되지 않아 메모리 누수 발생

  해결: destroyed() 라이프사이클에서 ScrollMagic 의 이전 Scene을 완전히 정리하고, activated() 훅에서 새로운 Scene을 생성하도록 처리 → 메모리 누수 문제 해결

• 파일 업로드 크기 및 개수 제한 처리

  문제: 입사지원 페이지에서 이력서 업로드 시 파일 크기와 개수 제한을 프론트엔드에서 체크해야 하는데, 사용자 경험이 좋지 않았음

  해결: 특정 메서드에서 파일 크기를 체크하고, 초과 시 즉시 알림을 표시하여 사용자가 즉시 인지할 수 있도록 처리 → 업로드 실패율 감소