프로젝트 정보

중외제약 공식 웹사이트와 관련 레퍼런스를 분석하여 기능/레이아웃 요소를 클론코딩으로 구현하고, 브랜드 특성에 맞춰 색상·구성·UI를 재디자인하여 Figma 및 퍼블리싱을 병행했습니다.

<aside> 📎

원본 사이트

https://www.dapharm.com/ko

</aside>

진행상황

문서

https://www.figma.com/design/vV91FDZEEKrFhBSnaqusTb/1차-웹사이트-리디자인?node-id=0-1&t=7AFeBCws9nLkyItk-1

기능 및 구조 분석

• 반응형

  • max-width: 1366px
  • max-width: 768px

• 이미지 슬라이드

  • 5초 간격으로 이미지 변경
  • 우하단 시간초표시
    • z-index
    • trasition
  • 좌하단 클릭해서 이미지 넘어감
  • 이미지가 넘어갈 때마다 이미지슬라이드의 글자가 슬라이드업
  • gsap - from()
  • swiper- autoplay

• 메뉴에 호버

  • 슬라이드 다운
  • 배경색 바뀜
  • 메뉴 글씨 호버
    • 글자색 바뀜

• 메뉴는 스크롤 다운하다가 스크롤 업하면 다시 나타난다.

• 반응형 max-width: 768;

  

• 다음 페이지로 넘어가면
  • 메뉴가 슬라이드업
  • 다음페이지가 겹쳐지면서 슬라이드 업
• 다 올라오는 순간 글자가 슬라이드 업
  • 위 텍스트부터 순차적으로
    • 맨 위 작은 파란글씨는 거의 바로 나옴
    • 아래요소들은 순서대로 나오는게 느껴짐
  • 보이지 않던 텍스트
    • 마우스 스크롤시 슬라이드 업
    • → 화면에 보이는 순간 작동됨

• 반응형 max-width: 768;