4주차 여섯번째 - 스크롤 애니메이션 페이지 구현(with Next.js)

다섯번째 수업을 진행하였다.

이번 수업은 과제에 적용해야하는 Next.js 를 비롯하여 SPA, SSR/CSR 그리고 SEO 에 대한 수업을 듣게 되었다.

Next.js 는 듣기만 들어보고 실제로는 써본적이 없었기 때문에 단순히 라이브러리처럼 설치하여 사용하면 되는건가? 라는 생각을 했었는데, 실제로 사용해보니 그냥 CRA 를 사용하는 것과 많은 부분이 달랐다.

 

이번 과제는 두개의 기업 과제 중에 선택해야 했는데 우리 팀은 그 중에 많이 적용해보지 못했던 스크롤 애니메이션이 많이 들어간 과제를 선택하게 되었다. 게다가 이번 과제에서는 E2E Test 를 구현해야한다는 조건이 있었다. 써보지 못한 프레임워크(Next.js)에다가 써보지 못한 E2E 테스트 툴(Cypress)을 3일 안에 적용해야했기에 현실적으로 생각했을 때 할 수 있을 것 같은 과제를 선택한 것이였다.

 

❗️구현해야하는 것들

•  현재 게시되어 있는 홈페이지의 메인 화면과 동일한 레이아웃 구현
•  홈페이지와 동일한 반응형 디자인
•  태블릿 이미지 내부에 영상 자동 재생
•  애니메이션이 재생되는 로고 GIF 추가
• 순서대로 체크 이미지가 나오는 애니메이션 적용
•  도서 이미지가 우에서 좌로 무한히 흐르는 형태의 애니메이션
•  좌 -> 우로 책갈피가 순서대로 나오는 애니메이션
•  좌/우 버튼을 통한 전환, 무한 로테이션
• 버튼이 내려가고 말풍선이 나오는 애니메이션

 

🥳 과제 구현

1. Navigation, DownloadButton

기본 Navigation

width 가 좁을때 (반응형)

기본 Navigation 스크롤시

width가 좁을때 (반응형) 스크롤시

우선 Navigation은 다른 Navigation 들과 비슷하게 상단 고정이였지만 조금이라도 스크롤을 내릴시 background-color 를 white 로 변경해주고 내부에 들어가는 로고나 메뉴들이 black 으로 적용되어야 했다. 다른 스크롤 애니메이션은 aos, gsap 을 이용했지만 이 경우에는 scrollY를 받아오는 hook 을 만들어 0일때/0초과일때 로 스타일을 적용하였다.

Download버튼은 우측 하단에 fixed 로 고정된 버튼을 만드는 것이 다였다.

 

2. useMedia Hook 구현

이번 과제에서의 반응형은 단순히 CSS 의 변화뿐만아니라 HTML 내용자체도 width 에 따라 달라졌는데 이를 위한 라이브러리가 있을 법 하다고 생각하여 검색해보니 react-responsive 패키지에 useMediaQuery 라는 훅을 사용하면 쉽게 해결할 수 있었다.

https://www.npmjs.com/package/react-responsive

react-responsive

이번 프로젝트에서는 768px, 1200px 두개의 분기점이 대부분의 컴포넌트에서 필요했기 때문에 useMedia 에 설정하여 각 컴포넌트에서 호출하는 방법으로 반응형 컨텐츠를 설정하였다.

 

3. 리뷰 캐러셀 적용

직접 구현한 캐러셀 부분

리뷰 부분은 swiper 라는 패키지를 이용하여 캐러셀을 제작하였다.

그냥 눈으로 봤을 때는 사진과 버튼 부분 역시 swiper 내에 있는 요소들이라 생각했는데 알고보니 내부의 텍스트 영역(아이디 + 글)만 swiper 영역이였다. 따라서 그 외의 애니메이션들을 맞추어 따로 제작해야했었는데 이 부분에서 약간의 어려움이 있었다.

 

- 애니메이션 타이밍

swiper 에는 몇ms  단위로 오토 슬라이드를 진행할지 설정을 할 수 있었는데 처음엔 여기에 설정한 시간과 애니메이션에서 설정할 시간을 동일하게 맞추면 되지 않을까 라는 생각을 했다. 하지만 애니메이션이 시작하는 부분과 swiper 가 시작하는 시기가 조금이라도 달라진다면 아주 어색해질 것이라 생각들기도 해서 다른 방법을 생각해보았다. 이런 패키지들을 몇번 이용하다보면 '이런 기능은 있겠지'라는 느낌이 조금씩 드는데 캐러셀이다보니 현재 슬라이드의 번호를 상태로 반환해주는 props 가 있을것 같다고 생각하여 찾아보니 역시나 있었다. 이를 이용하여 현재 슬라이드 번호가 바뀔때마다 프로필 사진 뒤의 아이콘이 회전하는 애니메이션과 하단의 상태바가 늘어나는 애니메이션을 편하게 적용할 수 있었다.

 

- next, prev 버튼

기존 홈페이지의 구조를 보면 next, prev 버튼이 swiper 에 내장된 버튼을 이용한 것이 아닌 swiper 외부에 버튼을 만들어 기능을 추가한 것으로 보였다. 이때문에 swiper 공식 문서를 이리저리 보았는데 잘 찾지를 못했었다. react 프로젝트에서 사용하는 것이기 때문에 react 문서를 보았지만 별 내용이 없었다. 그리고 내부의 navigation은 안쓰는거란 생각에 갇혀버린 탓에 제대로 보지 못한게 시간이 오래걸렸던 이유 중 하나였다.

https://swiperjs.com/swiper-api#navigation

Swiper API

이 문서대로 props의 navigation에 boolean 타입이 아닌 옵션을 넣으면 금방 해결할 수 있었다.

 

4. 체크 애니메이션 순차적으로 나오도록 적용

gif 로 잘 담아보려했는데 촬영하기 어려웠다...

시작하기 전엔 쉬울줄 알았는데 어려웠던 부분이 바로 이 부분이였다.

체크 애니메이션 소스는 gif 로 제공해주셨었는데 이를 스크롤이 해당하는 영역에 왔을 때 3개가 텀을 두고 순서대로 재생되게 해야했었다.

기존홈페이지를 보니 gif 는 스크롤이 해당 영역에서 벗어났을 때에는 img 태그의 src 의 내용이 사라졌다가 스크롤이 도착했을 때 gif 소스를 넣어 재생되는 구조였다.

스크롤이 해당 영역에 진입하고 벗어나는 위치는 그 홈페이지에서의 절대적인 수치를 계산해 넣는 방법이 나을것 같아서 실제로 scrollY 값을 측정해보았다. 1680 ~ 2870 값이 해당하는 영역이였기 때문에 이 영역에 도달할 때에 src에 gif 파일을 넘겨주고 그렇지 않은 경우에는 null 을 넣어주는 방식으로 코드를 작성하게 되었다. 다음으로는 순차재생인데 각 컴포넌트에 map을 돌릴때 index 를 props 로 넘겨주어 setTimeout의 delay 에 해당하는 index * 500 으로 넣어주어 각 요소들의 딜레이가 다르도록 설정해주었다.

처음에는 이렇게 넣어주었고 그 이후엔 팀원분의 도움을 받아 gsap 으로 수정하여 코드를 작성하게 되었다.

 

✔︎ cypress

https://www.cypress.io/

이번 과제의 기능들을 다 구현한 뒤 드디어 cypress 의 시간이 돌아왔다.

cypress 란 오픈소스 프로젝트로 E2E(End to End) 테스트를 위한 도구라고 한다.

테스트 자체를 많이 경험해보지 못했었는데 이번에 cypress 를 적용해보면서 문법부터 차근차근히 찾아보게 되었다.

아주 친절하게도 공식문서가 설명이 아주 잘되어있었다.

https://docs.cypress.io/api/commands/and

and | Cypress Documentation

이번에 작업한 프로젝트는 페이지 이동이 없는 하나의 페이지로 구성되어있었기 때문에 라우트에 관한 테스트를 할 수는 없었지만 다양한 테스트를 할 수 있다는걸 알게 되었다.

구현한 테스트로는

1. 각각 컴포넌트별로 스크롤이벤트가 잘 발생하는지

2. 반응형 디자인이 적용되었는지

3. Next.js 로 개발을 진행했기 때문에 SSR 으로 프로젝트를 불러와지는지

등을 테스트해볼 수 있었다.

 

배포 링크: https://17seoul-mainpage.netlify.app/

깃허브 링크: https://github.com/som-syom/Week3_MainPage

⭐️ 마무리

프로젝트를 시작하기 전엔 '그나마' 할 수 있을 만한 것을 골랐다고 생각했었는데 막상 진행하다보니 역시나 새롭고 어려운것 투성이였다.

팀원들과 역시나 이번 과제에서도 밤을 새게 되었고 끝끝내 모든 기능을 구현하고 나니 굉장히 뿌듯함을 느꼈다.

Next.js, cypress, aos, gsap, swiper 등.. 다양한 패키지나 프레임워크들을 사용할 기회가 되어서 도움도 많이 되었다 느꼈지만 이런 다양한 패키지들을 쓰다보며는 나도 언젠가는 다른 개발자들을 위한 패키지를 꼭 한번 만들어보고싶단 생각이든다.