대상 Jongga, O’Food

개요

종가(JONGGA)와 오푸드(O’Food)는 대상의 글로벌 브랜드로, 제품의 통합 커뮤니케이션 플랫폼입니다. 종가의 경우 한식, 이른바 “K-푸드” 를 브랜드 고유의 스토리텔링으로 넣어 글로벌적인 브랜드 가치를 제안하고있으며, 오푸드 역시 다채로운 한식에 대한 해외 소비자들의 이해를 높이기 위해 종가와 유사한 가치제안을 두고 있습니다. 두 프로젝트 모두 전반적인 페이지 고도화 퍼블리싱을 진행하였습니다. * 종가(JONGGA) 웹사이트는 현재 리뉴얼되어 사이트 형태가 아래 구현내용과 상이할 수 있습니다.

진행 방식

운영 프로젝트이며, jsp 환경에서 Javascript / jQuery / css 를 사용하여 작업했습니다. 디자인 수급은 zeplin 으로 이루어졌고, 본인 이외에 디자인 1명, BE 1명의 구성으로 작업이 진행되었습니다. jsp 환경이었기에 백엔드 개발자의 설정 도움(톰캣 설치 등)을 받아 작업했습니다.

주요 작업 내용

• 오푸드(O’Food)

  • 메인/서브 페이지 퍼블리싱과 유지보수를 통해 변경된 콘텐츠를 반영

  • Swiper 를 통한 슬라이드 구현

  • 모바일 적응형 퍼블리싱을 통해 PC 외 디바이스 호환성을 제공

• 종가(JONGGA)

  • 메인/서브 페이지 퍼블리싱과 AOS 라이브러리를 기반으로 애니메이션 적용

  • 팝업 상태를 URL 파라미터로 제어하여 공유 시 동일한 화면을 유지할 수 있도록 개선 Blog

  • 모바일 적응형 퍼블리싱을 통해 PC 외 디바이스 호환성을 제공

💫 Trouble shooting

• AOS 애니메이션 최적화 이슈

  문제: 페이지 스크롤 시 모든 요소에 애니메이션이 적용되어 다소 산만한 UX 경험과 부가적인 성능 저하가 우려됐음

  해결: AOS.init() 설정에서 once: true 옵션을 사용하여 애니메이션이 한 번만 실행되도록 최적화

• 팝업 URL 공유 이슈

  문제: 링크로 공유 되어야할 팝업이 필요했으며, 열릴 때 이전 스크롤 위치가 유지되어 사용자가 맨 위부터 보지 못하는 문제가 발생

  해결: 파라미터를 객체화하여 추출된 id 값으로 링크가 생성될 수 있게 추가하였으며, setTimeout 과 scrollTop(0) 을 사용하여 팝업 열림 후 스크롤 위치를 맨 위로 초기화하여 사용자 경험도 같이 개선

• 반응형 디자인 모바일 최적화

  문제: 모바일 환경에서 터치 인터랙션 시 기본 하이라이트 효과가 사용자 경험을 방해

  해결: CSS 에서 -webkit-tap-highlight-color 속성을 사용하여, 터치 시 발생하는 기본 하이라이트 효과를 제거하고 일관된 UX를 제공