삼성 지속가능성경영

개요

환경, 사회, 거버넌스 분야에 걸쳐 삼성전자의 전략과 주요 성과를 담은 보고서 형식의 웹사이트입니다. 이는 기업 활동이 외부에, 또는 외부요인이 기업에 미치는 영향을 모두 고려한 평가를 통해 지속가능경영에 대한 활동을 다루고있습니다. 해당 프로젝트에서 전반적으로 메인/서브페이지의 적응형 퍼블리싱 및 기능 개선, 접근성 강화를 주로 진행하였습니다.

진행 방식

운영 프로젝트이며, 기본적인 html 환경에서 Javascript / jQuery / CSS 를 사용하여 작업했습니다. 디자인 수급은 figma 로 이루어졌고, 본인을 포함한 프론트엔드 파트 2명은 본사, 그 외 디자이너와 기획, 백엔드 개발 각 1명씩은 PTK, 웨버샌드윅 측으로 팀즈(비즈니스 메신저)를 통해 원격으로 협업하였습니다.

주요 작업 내용

• 1. 운영 및 유지보수

• 1-1. 서브 페이지 (Planet, People, Principle, Focus, Digital Library)

  • 전체적인 유지보수 및 퍼블리싱 작업

  • 탭, 스와이퍼 등 기존 기능 오류를 해결하여 사용자 경험을 개선

  • alt, aria 속성, 포커스 이벤트 등을 전면 수정하여 웹 접근성 표준을 충족, 다양한 사용자가 접근 가능한 환경으로 구현

  • 중복된 기능을 공통 함수로 리팩토링하여 코드의 효율성과 유지보수성을 크게 향상

  • 팝업의 콘텐츠를 업데이트 하고 리뉴얼 퍼블리싱 진행

  • 지속가능한 제품 페이지, 기후행동 페이지 고도화

    • - svg 를 활용한 페이지네이션 커스텀 Blog

• 2. 구축

• 2-1. 폐휴대폰 수거 캠패인 페이지

  • 폐휴대폰 캠페인 페이지 퍼블리싱 및 개발

    • - Swiper 를 이용해 세로 풀페이지 슬라이드 스크롤 구현 (마우스휠 이벤트 활용, throttle 로 성능 최적화) Blog

  • 캠페인 신청 사이트 퍼블리싱 및 개발

    • - Swiper 의 hashNavigation 을 이용해 새로고침 없이 페이지 이동 구현 Blog
    • - select 박스 option 선택에 따른 input 입력창 추가/삭제 기능 구현 Blog

• 2-2. 모두가 가능한 경험 페이지

  • GSAP을 활용해 마우스 휠 기반 이중 스크롤링과 텍스트 딜레이 애니메이션을 구현한 인터랙션 구현

  • 로띠 애니메이션을 적용 및 팝업 생성 기능 구현

• 3. 모바일 대응

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

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

  • 표는 가로 스크롤 방식으로, 리스트는 Swiper 슬라이드로 전환해 모바일 사용성을 크게 개선

💫 Trouble shooting

• 웹 접근성 강화

  문제: 운영 페이지에서 일부 이미지에 alt 속성이 누락되거나, 컨텐츠에 접근 시 시/청각 문제가 있는 사용자가 보조기기를 사용하기 불편한 상황이 발생 → ex) 키보드를 이용시 포커싱이 순서대로 동작하지 않거나, 스크린리더기를 활용 시 내용을 제대로 인식하지 않는 문제 등

  해결: alt, aria 속성을 적용하고 스크린리더기 테스트 및 포커스 이벤트를 전면 수정하여, 다양한 사용자가 접근 가능한 환경을 구현

• 코드 중복으로 인한 유지보수성 저하

  문제: 동일한 기능이 여러 페이지에서 반복적으로 작성되어 코드 관리와 유지보수가 어렵고, 수정 시 오류 가능성이 높았던 경우가 많았음

  해결: 공통 함수를 별도 모듈로 분리하여 재사용성을 높이고, 유지보수 효율성을 개선

• 퍼포먼스 저하 (마우스휠 슬라이드)

  문제: 세로 풀페이지 슬라이드 구현 시 마우스휠 이벤트가 과도하게 발생하여 스크롤이 끊기는 등, 성능 저하가 발생

  해결: throttle 을 적용하여 이벤트 호출 빈도를 최적화하고, 부드러운 인터랙션을 제공