[3-24] 8/1 ~ 8/15 프론트엔드 프로젝트

📌 코드: https://github.com/ebulsok/KDT-pj-627.git

📌 결과물: https://3-24.netlify.app/

 

🔎 프로젝트 목적: 프론트엔드로 웹페이지 구현하기

🔎 프로젝트 소개: 3개국의 총 24개 건축물을 소개하는 페이지, 3-24

🔎 사용한 스택: HTML, CSS(Sass), JS

🔎 구현하고자 했던 기능: KDT에서 배운 것을 최대한 활용하고자 했다.

메인 페이지의 경우, GSAP 라이브러리, 특히 scrollTrigger를 이용하여 4종류의 스크롤 애니메이션을 구현했다.

 

첫번째 스크롤 페이지는

1. 배경색이 바뀐다.

2. 가운데에 있는 큰 글씨가 작아진다.

3. 뒤에 있는 글씨(건축물 이름)가 무한적으로 흐르기 시작한다.

3번은 블로그 글(https://blogpack.tistory.com/1120)을 참고하여 구현했다.

 

두번째 스크롤 페이지는

1. 배경색이 바뀐다.

2. 글자가 단어 단위로 나타난다.

3. Korean, / Spanish, / and Italian 은 같은 자리에서 스크롤된다.

3번은 ul태그와 overflow를 활용하여 구현했다.

 

세번째 스크롤 페이지는

1. 배경색이 바뀐다.

2. 글씨가 나타남과 동시에 아래로 이동한다.

 

네번째 스크롤 페이지는

1. 소제목이 나타난다.

2. 티켓 3개가 차례로 나타난다.

 

다이어리 페이지는 뮤직 플레이어(2022.09.05 - [KDT/TIL] - 8/1 8/3 TIL : 뮤직 플레이어)를 토대로 했으나

1. prev/next 버튼을 없애는 대신 mousedown/mouseup 메소드를 사용하여 드래그앤드롭으로 카드(다이어리)를 움직일 수 있게 했다.

2. 특정 카드를 클릭하면 가운데로 위치시키기 위해 각도를 계산하여 rotate 시켰다.

3. 다이어리 느낌을 주기 위해 책이 펼쳐지는 전환 효과를 구현했다.

 

이 중 내가 맡은 부분은 형광펜 표시를 해뒀다!

 

🔎 후기

1. branch까지 이용하면서 git으로 협업하는 것은 처음이었는데, 큰 문제는 발생하지 않았으나 쉽지 않았다. 실제로 conflict도 생겨서 팀원들과 함께 해결했다. 강사님이 branch는 보통 기능별로 만드는 것이 일반적이라고 말씀해주셨는데, 우리 프로젝트는 프론트로만 구현했을 뿐만 아니라, 페이지나 기능이 여러 개가 아니었기 때문에 개인별 branch로 사용했던 느낌이다. 제대로 활용하지는 못했던 것 같다.
2. 모든 사항에 대해 공지를 하고, 제때 업데이트를 받는 것 둘 다 중요한 것임을 느꼈다. 이번 프로젝트에서는 이런 부분이 제대로 이루어지지 않았다. 처음했던 팀프로젝트에서 매일 저녁에 회의시간을 가졌던 것이 매우 유용한 것임을 깨달았다.
3. 디자인적인 면에서 모든 팀원의 의견을 모으기가 가장 어려웠다. 다들 프로젝트에 열심히 참여해주셨기에 감사하지만, 티켓과 다이어리 디자인을 맡아준 팀원에게 특히 감사하다.😭
4. 문제가 있다... 두번째 스크롤 페이지 ul의 width가 스크롤에 따라 변경되는 거라서 그런지(?) 작동되지 않는 경우가 왕왕 있다. 새로고침을 하면 제대로 작동되긴 하는데..