당근(🥕)의 사례로 보는 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