genierenewal - 프로젝트 01

프론트엔드를 학원에서 준비를 하면서 첫번째로 시작하게 된 프로젝트를 소개합니다.

모든 소스는 깃에 있습니다. 해당 프로젝트는 1인 개인프로젝트로 저의 공부만을 위해 제작을 하였습니다.

git : zio-s.github.io/project-genie/pages/

genie

🛠 지니 리디자인 프로젝트 ( main - one page)

⚙️ 기술 스택

• SCSS: 스타일의 모듈화와 유지보수를 위해 사용
• GSAP: 스크롤 기반 애니메이션을 위한 타임라인 및 인터랙티브 효과 구현
• FullPage: FullPage.js를 사용하여 콘텐츠를 페이지 단위로 자연스럽게 전환하는 애니메이션을 구현했습니다.
• 그누보드: 커뮤니티 (적용 완료, 커스텀 마이징 예정) http://zioge.dothome.co.kr/bbs/board.php?bo_table=comu 로그인 (구현예정)

---

🎬 Features

🎵 Intro - "음악을 담다"

• CD 음반이 돌아가는 듯한 애니메이션을 통해 실제 음악이 재생되는 감각을 시각적으로 구현했습니다.

• 

🎼 Section 2 - "음악이란 무엇인가?"

• 음악의 본질과 감성을 표현하는 디자인을 구현했습니다.

• 

📈 Section 3 - 인기 차트

• 앨범을 순차적으로 나열하여 쉽게 볼 수 있도록 구성. 메인 앨범 이미지를 배경으로 배치하고, 사운드의 웨이브 효과를 랜덤하게 적용해 매번 다른 스피드를 연출합니다.

• 

📅 Section 4 - 이벤트 및 앨범 소식

• 최신 이벤트와 앨범 소식을 한눈에 볼 수 있도록 나열하였습니다.

• 

📲 Section 5 - App Player 홍보

• 편리한 앱 사용을 유도하기 위해 제작된 섹션입니다. GSAP 타임라인을 사용해 스크롤 시 부드럽게 움직이는 애니메이션을 구현했습니다.

• 

🎉 프로젝트의 주요 포인트

• 트렌디한 디자인: 음악의 감성을 살린 섹션별 유기적 구성
• 사용자 경험: 직관적인 인터페이스와 시각적 애니메이션
• 확장성: 그누보드와 같은 기능 추가 용이

 

 

작업을 어느정도 끝 마치고 ...

 

해당 프로젝트는 평소에 다른 사이트들을 보면서 와.. 나도 저렇게 스크롤 할때마다 예쁘게 움직이고 싶다.. 와 저게? 우와~ 이런 사이트를 해보고싶단 생각을 했습니다. 이번 프론트엔드 과정을 시작하면서 어렵겠지만 도전해보자!! 라는 마음으로 시작을 했습니다.

시작은 생각보다 너무 좋았습니다 막히는 부분이 많이 없었지만 첫번째 인트로 화면이 잘만들어졌지만 gsap과 fullpage의 동시 사용이 생각보다 너무 어려웠습니다. 이 두개를 같이 사용하는거에 꼬박 하루 투자를 할 정도로.. 

각종 버그를 계속 해결해 나아가면서 결국 지금 이렇게 글을 쓰게 되었지만, 다음 프로젝트도 gsap은 꼭 쓰려고 합니다. 제가 원하는 느낌의사이트를 만들려면 스크롤을 할때마다 화면단은 가만히 있으면 안되기때문이죠~ 다 하고나서 그누보드와 연동을 하였고, 게시판을 만들어 두었지만 게시판을 디자인을 하지는 못했습니다 간단하게 화면 가운데로 정렬 정도.. 저에게 있는 시간은 단 6개월 모든걸 하나하나 디테일을 신경쓰고 싶지만 불가능 하네요..