Kia Worldwide

브랜드·차량 콘텐츠와 스크롤 인터랙션

Opposites United, EV2, The Ocean Cleanup 등 주요 콘텐츠의 PC·모바일 반응형 UI와 스크롤 인터랙션을 개발했습니다.

차량 슬라이더의 전환·탐색 UI

EV·ICE·Hybrid·PBV 슬라이더의 전환 효과와 내비게이션, 모바일 페이지네이션을 구현했습니다.

이미지 준비 상태에 맞춘 슬라이더 높이 계산

높이 재계산 시점을 타이머 실행에서 실제 이미지 로딩 완료 기준으로 변경했습니다.

문제

슬라이더 초기화 시 이미지 로딩이 끝나지 않으면 실제 이미지 높이를 기준으로 레이아웃을 계산하기 어려웠습니다.

원인 확인

기존 타이머는 실행을 미룰 뿐 이미지 로딩 완료를 보장하지 않았습니다.

변경

이미지의 로딩 상태를 확인하고, 준비되지 않은 이미지는 로드 완료 이벤트를 기다린 뒤 높이를 다시 계산하도록 바꿨습니다. 이미지가 없거나 이미 준비된 경우도 처리하고, 정리 함수에서 이벤트 리스너를 제거했습니다.

결과

높이 계산을 비동기 이미지의 실제 준비 시점과 연결하도록 초기화 흐름을 개선했습니다.

iOS 바운스 스크롤을 고려한 헤더 방향 판정

상하단 예외 처리와 누적 이동량 기준을 추가해 바운스·미세 움직임과 실제 방향 전환을 구분하도록 개선했습니다.

문제

직전 위치와 현재 위치만 비교하면 iOS의 상하단 바운스와 미세 움직임도 스크롤 방향 전환으로 해석될 수 있었습니다.

변경

상단 overscroll에서는 헤더를 표시하고 누적 이동량을 초기화했습니다. 하단 근처에서는 상태 변경을 보류하고, 같은 방향의 이동량이 기준을 넘었을 때 표시·숨김 상태를 바꾸도록 했습니다.

결과

플랫폼 특유의 바운스와 작은 움직임을 고려하도록 공통 헤더의 상태 전환 기준을 정비했습니다.

Safari 영상 모션을 clip-path 방식으로 전환

Safari에서 발생한 영상 등장 모션 오류에 대응해 크기를 늘리는 방식에서 잘라내기 영역을 펼치는 방식으로 변경했습니다.

문제

공통 영상 등장 모션이 Safari에서 다르게 표시되는 문제가 있었습니다.

기존 방식

중앙에 배치한 영상 영역의 너비와 높이를 늘려 등장시키는 구조였습니다.

변경

영상 영역의 크기는 유지하고 clip-path의 잘라내기 범위를 펼치도록 바꿨습니다. 전환 대상도 clip-path로 맞추고, 영상의 배율과 위치 이동을 하나의 transform 값으로 통합했습니다.

결과

크기 변화에 의존하던 효과를 공통 영상 모션 컴포넌트에서 교체해 Safari 표시 오류에 대응했습니다.

이미지 36개 파일 용량을 약 90% 절감

EV·브랜드 이미지 36개를 WebP로 전환하고 참조 경로를 정비해 해당 이미지 파일 합계를 약 19.16MB에서 1.93MB로 줄였습니다.

변경

EV 이미지 30개와 브랜드 이미지 6개의 JPG·PNG 파일을 WebP로 전환하고, 사용하는 컴포넌트의 이미지 경로를 수정했습니다.

비교 범위

Git에 저장된 해당 36개 이미지 파일의 변경 전후 크기 합계 기준입니다. 1MB는 1,000,000바이트로 계산했습니다.

반복 콘텐츠를 데이터·props 기반으로 공통화

별도로 관리하던 좌우 콘텐츠 영역을 공통 컴포넌트로 통합했습니다. 콘텐츠 목록은 데이터로, 배치와 이미지 크기 차이는 props로 관리하도록 정리했습니다.

플랫폼 차량 슬라이더를 5개 역할로 분리

상위 슬라이더에 모여 있던 화살표 탐색·큰 차량 이미지·하단 설명·반원형 차량 배치·타이틀을 각각의 컴포넌트로 나누고 상위에서 조합하도록 바꿨습니다. 화면 영역별로 이해하고 수정할 수 있도록 책임을 분리했습니다.