Coremed

기업의 사명과 비전을 각각 풀스크린 이미지 위에 텍스트 오버레이 형태로 제시합니다. 사용자가 스크롤하여 해당 섹션에 진입하면 텍스트 박스가 페이드인 되는 애니메이션을 JavaScript의 Intersection Observer API를 활용하여 구현했습니다. 이를 통해 콘텐츠에 대한 주목도를 높이고, 각 섹션의 핵심 메시지들을 효과적으로 전달합니다.

"100여 개국"이라는 글로벌 허가 실적을 숫자 카운터 애니메이션으로 표현합니다. 사용자가 해당 섹션에 스크롤하면 0부터 100까지 숫자가 증가하는 효과를 JavaScript로 구현하여, 성과를 역동적으로 보여줍니다.

제품 페이지 상단에 메뉴와 대표 이미지를 배치했습니다. 바이오의약품, 케미컬의약품, 제품소식 등 카테고리를 명확하게 구분하여 사용자가 원하는 정보를 빠르게 찾을 수 있도록 했습니다. 현재 활성화된 메뉴는 '.on' 클래스를 통해 시각적으로 강조하여 사용자가 현재 위치를 쉽게 인지할 수 있도록 작업했습니다.

제품 정보를 table 코드를 사용하여 체계적으로 구조화했습니다. 표의 헤더와 본문을 명확히 구분하여 접근성을 높였으며, 각 셀의 의미를 정확히 전달할 수 있도록 시맨틱 마크업을 적용했습니다. 허가기관(EMA, FDA, MFDS)은 텍스트와 아이콘을 함께 사용하여 한눈에 글로벌 승인 현황을 파악할 수 있으며, 바이오시밀러와 바이오신약은 탭 버튼으로 구분하여 사용자가 관심 있는 카테고리를 선택적으로 탐색할 수 있도록 구현했습니다.

제품 정보는 의료 정보용으로만 사용되며 홍보나 판매를 목적으로 하지 않는다는 법적 고지사항을 하단에 명시했습니다. 이는 의료 관련 웹사이트의 필수 요구사항으로, 기업의 책임 소재를 명확히 하고 사용자에게 올바른 정보 활용을 안내하여 신뢰도를 높입니다.

지속가능 경영 보고서, ESG 평가등급, 인증서 등으로 구분된 메뉴를 상단에 배치했습니다. 현재 활성화된 메뉴는 시각적으로 강조하여 사용자가 현재 위치를 쉽게 인지할 수 있도록 했습니다.

연도별 ESG 보고서를 카드 형태로 나열했습니다. 각 카드는 이미지, 제목, 발행 날짜, CTA 버튼으로 구성되어 있으며, 호버 시 확대 효과를 CSS로 적용하여 클릭을 유도합니다. 카드가 화면에 진입할 때 순차적으로 나타나도록 Intersection Observer API를 사용하여 페이드인과 슬라이드업 애니메이션을 구현했습니다. 각 카드는 0.1초 간격으로 등장하여 리듬감 있는 시각적 경험을 제공합니다.