당근 리브랜딩 캠페인 페이지를 개발하며 배운 것

Tags

Top Highlights

• 처음부터 “스마트폰, 태블릿”이 아니라 “작은 스마트폰, 큰 스마트폰, 태블릿”으로 나눠서 갔으면 수월하게 작업했을 것 같아요. 0px ~ 360px (작은 스마트폰) 360px ~ 480px (큰 스마트폰) 480px ~ 768px (작은 태블릿) 768px ~ 990px (큰 태블릿) 990px ~ 1200px (작은 데스크탑) 1200px ~ (큰 데스크탑)

• 브레이크 포인트별로 애니메이션과 트렌지션을 따로 걸어줘야 하는 상황이 있었는데 react-gsap 에는 클라이언트 사이드에서 어떤 애니메이션을 보여줘야 하는지 결정하는 순간에 충돌이 나는 이슈가 있었고, 따로 브레이크 포인트와 관련된 인터페이스를 제공해 주지 않았어요. 하지만 gsap 라이브러리에는 브레이크 포인트와 관련된 인터페이스가 있었어요. react-gsap 가 gsap 의 인터페이스를 그대로 pass 해주고 있지도 않고, 문서도 잘 적혀있지도 않았어요. 제가 오픈소스 제공자라고 해도 메인 라이브러리인 gsap 를 먼저 고치고 문서도 고치지, 그 외에 파생된 라이브러리는 업데이트가 그보다 느리고, 관리도 덜 될 것 같아요. 항상 정상적인 동작만 생각해서 정상적으로 동작했으면 좋겠지만 여러 가지 요인들 때문에 그렇지 못할 가능성이 높아요. 라이브러리 선택할 땐 최대한 메이저 라이브러리를 선택하지, 정말 급한 경우가 아니라면 파생된 라이브러리를 선택하는 일은 지양해야 할 것 같아요.

• 그래서 hover media query를 통해서 기본적으로 현재 기기가 호버 메커니즘을 지원하는지 여부에 따라서 스타일링을 할 수 있어요. @media (hover: hover) { /* when hover is supported */ a:hover { color: white; background: black; } }