성수 POC 온라인 쇼룸
브랜드 공간의 분위기와 콘텐츠를 온라인 환경에서 효과적으로 전달하기 위한 온라인 쇼룸 프로젝트에서 웹 퍼블리싱 전반을 담당했습니다. 반응형 웹 구조를 기반으로 페이지 레이아웃과 콘텐츠 흐름을 설계하고, 사용자 경험을 고려한 인터랙션 중심의 UI 구현에 집중했습니다.
전체 페이지 마크업과 레이아웃 구성, 콘텐츠 배치를 직접 구현했으며, JavaScript를 활용해 사용자 동작에 따라 자연스럽게 반응하는 동적 인터랙션 요소들을 적용했습니다. Unity 기반 화면 연동을 제외한 대부분의 웹 퍼블리싱 작업을 수행하며, 실제 사용 환경에서의 완성도와 안정성을 높이는 데 주력했습니다..
PM, 디자이너, 개발자와 긴밀히 협업하며 요구사항과 일정에 맞춰 작업을 조율했고, 변경사항과 이슈에 유연하게 대응했습니다. GitLab 기반 형상관리 환경에서 버전 관리와 협업을 진행하며, 디자인 시안을 웹 환경에 맞게 해석·구현하는 동시에 유지보수와 확장성을 고려한 구조적인 퍼블리싱을 지향했습니다.
메인 페이지에서 사용자 스크롤에 따라 건물이 층별로 분리되는 인터랙션 구현 요청이 있었습니다. 초기에는 층별 이미지를 개별로 분리한 뒤, 스크롤 위치에 따라 인터랙션되도록 구현하는 방안을 검토했습니다.
그러나 프로젝트 특성상 고객 요청에 따른 수정 가능성이 높다는 점을 고려해, 유지보수에 유리한 영상 기반 방식으로 구현 방향을 전환했습니다. 이로 인해 스크롤 위치와 영상 타임라인을 연동해야 했으며, 당시에는 관련 구현 경험이 없어 별도의 학습과 테스트가 필요했습니다.
스크롤 값과 영상 타임라인 간의 관계를 중심으로 동작 구조를 정리하고, 이를 구현 로직으로 단계적으로 적용해 문제를 해결했습니다. 그 결과 요구된 인터랙션을 안정적으로 구현할 수 있었습니다.
관련 스터디 문서
스크롤 기반 영상 제어를 활용한 페이지로, 스크롤 위치에 따라 건물이 회전하며 특정 공간이 강조되는 구조입니다. 스크롤에 따라 강조되는 공간에 맞춰 해당 영역의 정보를 확인할 수 있는 버튼을 노출해야 했으며, 버튼이 정확한 위치에 고정될 필요가 있었습니다.
해당 페이지는 반응형 환경으로 구성되어 있어, 배경 영상은
object-fit: cover 방식으로 표시하였습니다. 이로 인해 화면 크기에 따라 가로나 세로가 잘리는
상황을 고려해야 했고, 단순 비율 계산만으로는 버튼을 영상 속 특정 공간에 정확히 고정하기 어려웠습니다.
이러한 제약을 해결하기 위해 원본 비율과 화면 크기를 기준으로 스케일과 여백을 계산해 버튼 위치를 보정하는 구조를 적용했으며, 반응형 환경에서도 배경 영상에서 강조된 공간에 버튼이 안정적으로 유지되도록 구현하였습니다.
관련 스터디 문서
고난도 과제와 일정 제약이 함께 작용하는 상황에서, 기존 방식만으로는 한계가 있다고 판단했습니다. 관련 자료를 조사하고 구현 방식을 구조적으로 정리해 접근함으로써, 제한된 기한 내에 요구 사항을 충족할 수 있었습니다.
영상 요소가 다수 포함된 페이지를 작업하며, 품질과 성능 요구 사이의 균형이 구조 설계 단계에서부터 중요하다는 점을 체감했습니다. 이를 통해 영상 중심 페이지에서는 초기 설계 단계에서의 경량화와 성능 고려가 핵심이라는 인식을 갖게 되었습니다.