당근(🥕)의 사례로 보는 Gastby로 랜딩 페이지 개발하기

당근 기술 블로그에 재밌는 회고 글이 올라와서 요악해서, 공유 해봅니다!

좋은 팁들이 많아서 랜딩페이지를 개발하려는 프론트엔드 개발자 분들께서 얻어가실 게 많을 거 같아요ㅎㅎ

1. 개발 프레임워크 선택

   데드라인이 1달 정도 남았고, 새로운 기술을 배워 적용할 시간이 충분하지 않은 상태에서 Gatsby를 선택!

   • 경험한 Gatsby 장단점

     • image 플러그인을 사용하면 브라우저 크기에 맞는 이미지 생성 및 제공을 알아서 해 줌. preload / lazy 로딩만 판단해서 선언하면 끝! (장점)

     • 로그 툴을 붙일 때 head 태그 안에 스크립트를 넣어주는 작업도 미리 만들어진 플러그인에 id 값을 넣으면 알아서 붙여 줌! (장점)

     • SSG(Static Site Generation) 성격을 가져 정적으로 미리 페이지를 뽑아 둠. 유저의 브라우저 크기를 미리 알 수 없어 클라이언트 사이드에서 Break Point를 계산하고 이에 맞는 애니메이션을 적용 하는 과정에서 엉키는 부분이 생겼음 (단점)
       
       *각자 처한 상황과 기획안에 맞게 더 편안하고 익숙한, 잘 할 수 있는 프레임워크를 택하는 것이 중요함!
       
       

2. 처음부터 안드로이드, iOS 에뮬레이터를 켜고 개발하자.

   데스크탑 유저를 중심으로 생각했으나, 리브랜딩 랜딩 페이지를 오픈하려고 보니 모바일 사용량이 압도적으로 많았음. 그 중에서 안드로이드 유저가 가장 많다는 것을 파악했음. 평소 크롬브라우저를 켜놓고 개발 했으나 차라리 안드로이드 에뮬레이터를 켜고 거기에서개발을 시작했으면 더 좋지 않았을까를 회고함
   

   *만들고 있는 랜딩 페이지가 대상으로하는 유저를 처음부터 설정하고, 우선순위를 따지는 것이 중요함
   
   

3. 라이브러리 선택할 때는 최대한 메이저 라이브러리를 선택하자.

   react를 사용하고 있기도 했고, 리액트 컴포넌트로 선언해서 사용하는 방식이 애니메이션 흘러가는 것에 직관적이라 생각해 react-gsap를 사용했어요. 결론을 말하자면 막바지에는 gsap로 마이그레이션 했어요. 브레이크 포인트별로 애니메이션과 프렌지션을 따로 걸어줘야 하는 상황이 있었는데 react-gsap에는 클라이언트 사이드에서 충돌하는 이슈가 있었고 브레이크 포인트에 대한 인터페이스를 제공하지 않았어요. 하지만 gsap에는 브레이크 포인트와 관련된 인터페이스가 있었죠.
   
   *라이브러리 선택 시에는 급한 경우가 아니라면 파생된 라이브러리를 지양하는 것이 중요함
   
   

4. 모바일 호버 스타일링
   보통 hover 이벤트는 마우스를 올렸을 때 발생하는 이벤트인데 모바일 기기에는 마우스가 없기 때문에 이벤트의 발생과 종류가 애매해요. 그래서 hover media query를 통해 현재 기기가 호버 매커니즘을 지원하는지 여부에 따라 스타일링을 할 수 있어요!

   @media (hover:hover) {
     a:hover {
       color: white;
       background: black;
     }
   }

   
   

   
   

5. 전체 화면을 덮는 모달이 요구사항에 있다면 히스토리 API 조작하기

안드로이드 유저들은 뒤로 가기 버튼을 눌러 모달이 끄거나, 페이지를 나가는 것이 익숙한데 히스토리 조작을 하지 않으면 뒤로 가기 버튼 누를 시 페이지를 이탈해 버려요. 큰 이슈이기에 history.pushState 해주고 popstate 이벤트 리스너를 붙여서 popstate가 일어날 때 모달을 닫아주면 돼요!

이 외 본인의 개발 경험을 담아 다양한 회고를 작성한 전체 글을 확인하고 싶으신다면 아래 링크에서 확인해 주세요!

https://medium.com/daangn/%EB%8B%B9%EA%B7%BC-%EB%A6%AC%EB%B8%8C%EB%9E%9C%EB%94%A9-%EC%BA%A0%ED%8E%98%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EA%B0%9C%EB%B0%9C%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B4-%EA%B2%83-b41d866df9b7