[React] Toyota 클론코딩 리뷰

일본 자동차 브랜드 토요타 랜딩페이지를 클론코딩 해보았다.

토요타 랜딩페이지는 깔끔한 느낌에 과한 애니메이션이 없어서 눈이 피로하지 않은 매력적인 디자인을 갖고 있다고 생각한다.

그리고 여러 자동차의 이미지를 보여줘야하기 때문인지 슬라이드(캐러셀) 활용을 많이 한 것이 특징이다.

---

사용한 라이브러리

• styled-components
• recoil
• framer-motion
• react-icons
• react-multi-carousel
• react-responsive-carousel
• gh-pages

---

초안

이번 프로젝트 역시 클론코딩이 목적이었기 때문에 초안 없이 진행했다.

---

주요 기능

• 사용자가 일정 높이 이상 스크롤 시 상단 헤더바 숨김 / 표시
• 메인배너 단일 슬라이드
• 라인별 차종 멀티 이미지 슬라이드

---

완성본

0123

완성본 이미지

https://mediumryan.github.io/toyota-home/

Toyota Home

---

리뷰

• 전체적으로 박스 구조를 잡는데 시간이 오래 걸렸고, 원본과 퀄리티 차이가 많이 났다. grid, flex 이외에 한 섹션에 div 박스를 몇 개나 넣어야 하는지, text 요소에 p, span 어떤 태그를 사용해야 하는지 등의 공부가 많이 부족하다는 것을 느꼈다.
• 슬라이드를 만드는데 너무나 유용한 라이브러리를 두개나 찾을 수 있어서 좋았다. 내가 직접 만들 수 있다면 더 좋겠지만, 시간도 절약할 수 있고 공부는 따로 하면 되니까 계속 사용할 것이다.
• 일본어 폰트 적용이 너무 어렵다. 구글 폰트 이외에 어디서 구해야 하는지 / 적용해도 영어와 한자 사이의 굵기 차가 심한 이유가 무엇인지 모른 채로 진행했다. 차츰 알아가며, 마음에 안 드는 부분을 고쳐 나가야겠다.
• 마지막 footer 부분에 definition에 관련한 dl,dt,dd 태그를 처음으로 접했다. 솔직히 ul, ol, li의 리스트와 뭐가 다른지 잘 모르겠고, Toyota에서는 왜 definition 태그를 사용했는지 의문이다.
• 이미지나 url 링크를 변수로 담는데도 많은 시간이 걸렸다. 단축할 수 있는 방법이 있을까? ㅜ

---

참고

토요타 공식

https://toyota.jp/index.html

トヨタ自動車WEBサイト