🖼 Next.js의 랜딩 페이지는 어떻게 만들어졌을까?

- 눈길을 끄는 랜딩 페이지 속에 숨겨진 디테일한 요소들의 개발 과정을 공유합니다. --- Next.js를 당장 사용하고 있지는 않더라도 랜딩 페이지 정도는 한 번 쯤 들어가보셨을 것입니다. 요즘 트렌드에 맞춰 깔끔한 디자인을 갖고 있지만, 소소한 애니메이션들이 있어서 그런지 너무 심심하게 느껴지지도 않아요. 이런 디자인을 저도 개인적으로 선호하는데, 이를 직접 구현한 개발자의 후기가 공유되어 소개해드립니다. SVG, 가상 선택자와 HTML 데이터셋, CSS 변수 등 JavaScript 없이도 이러한 디자인을 직접 구현할 수 있다는 점이 흥미로워서 개인적으로 아주 재밌게 읽었습니다. - 선이 그어지듯이 움직이는 애니메이션 - 조명이 깜빡거리는 듯한 애니메이션 - 포커스 상태 - 인용구에서 따옴표 마크 - 명시적 접근성 라벨링 - HTML 데이터셋을 스타일링에 적극 활용하기 - 전류가 전선을 타고 CPU로 흐르는 듯한 애니메이션 - 카드 형태의 일러스트 https://rauno.me/craft/nextjs