[Product] 목표 달성 7단계 - 탐색

[kyubumjang]

목표

• 대한테크 웹페이지

주요 기업 홈페이지 탐색

• 현대자동차
• 삼성 전자
• SK hynix
• gaonchips
• 싸인텔레콤
• infoshare
• DB hitek
• synopsys korea
• cadence
• primarius
• libertron
• cnf

[kyubumjang]

이 중에서 현대자동차, 삼성 전자, sk hynix, gaon chips 참고하면 좋을 것 같습니다.

현대자동차

• 제품 캐러셀 형태로 보여주는 것
• 3D 모델로 볼 수 있게
• 브랜드 제품 호버 시 확대

삼성 전자

• 메인화면 애니메이션
• 화면 구성 이후 영상 나오는 캐러셀
• 제품 설명
• 주요 이벤트 소개
• 캐러셀 만들 때 참고할 사항이 많음

SK Hynix

• 메인 화면 영상 나오는 부분
• 깔끔한 차트, 지표 기반으로 소개하는 부분
• 스크롤 아래로 내릴 때 헤더 없어지고 올릴 때는 헤더가 생기도록 구현한 부분

GAON CHIPS

• 헤더 투명하게
• 메인 화면 영상 나오는 것
• 스크롤 시 애니메이션 처리하는 부분

[kyubumjang]

더 탐색해봐야하는 것

• 캐러셀 구현을 할 지 다른 UI 라이브러리를 사용할 지 탐색
• 3D 모델을 보여줄 수 있는 방법(three.js, d3.js)에 대해 필요한 기술이나 지식에 대해 탐색
• 호버 시 zoom 하는 기능 탐색
• 메인 화면 애니메이션은 어떻게 하는 것인지
• 영상은 어떻게 보여주고 있는 것인지
• 화면에 움직이는 띠는 어떻게 구현한 것인지(단순 영상인지 아닌지)
• 스크롤 내릴 때 올릴 때 헤더 처리 방법에 대해서
• 스크롤 내릴 때 투명하게 보일 수 있는 방법에 대해서
• 스크롤 시 애니메이션 처리 방법

위에 대해 더 찾아봐야됨

[kyubumjang]

• 캐러셀 구현을 할 지 다른 UI 라이브러리를 사용할 지 탐색
• 탐색을 해본 결과 daisy-ui, tailwind ui, flow-bite 등 여러 라이브러리가 있으나 그걸 사용하면서 빠르게 구현하는 것도 좋지만 내가 구현할 수 있고 커스텀을 할 수 있게 내부 라이브러리를 뜯어보면서 구현하는게 실력 향상을 위한 목적이나 사이드 프로젝트의 의미가 있을 것으로 예상됨
• tailwind 기반 주요 라이브러리
• 탐색 결과 daisy-ui 기반으로 컴포넌트 개발할 예정