-
간결하면서 전달력이 좋고 예쁜 UI를 가지고 있고 레거시가 적어보이는 웹사이트를 골랐습니다.
-
타 웹사이트보다 요소와 이벤트의 양이 훨씬 많음에도, 도전의식을 불러와 HTML/CSS/JS 만을 이용하여 웹사이트를 나만의 시각으로 재구성하였습니다.
-
브라우저상 결과는 같지만, 알아보기 쉽게 직관적으로 토스의 홈페이지 애니메이션 방식을 바꾼 곳도 있습니다.
-
수 십개의 이벤트 핸들러가 존재하다보니, 성능 저하가 발생하였습니다. 이를 예방하고자, 한번만 일어나는 이벤트들은, 이벤트 발생 후 이벤트를 제거하여 줬으며, 이에 사용된 변수들의 메모리도 반환시켜줬습니다.
- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요
- 부분적으로 BEM 방법론을 도입해보세요.
- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
기본 스크롤 애니매이션 구현은 제가 작성한 블로그에 적었습니다. https://koeyhhh.tistory.com/20
그 외의 애니메이션은 간략하게 gif로 담습니다.
- 스크롤 마다 퍼져나가는 아이콘
- 스크롤 마다 배경화면을 막는 속성의 길이 변경
- 스크롤 거리만큼 Opacity와 Tranform 속성 변경
실제 Toss 홈페이지에서는 2번 항목을 Wallpaper 위에 왼쪽 오른쪽 흰 상자를 transform 하여서 배경이미지를 가리는 형식으로 구현을 하였습니다. 그리고 배경화면에는 overflow hidden 속성을 주어 Wallpaper를 가려서 구현하였습니다.
저는 좀 더 직관적이게 부트캠프에서 배운 flex와 스크롤에 따른 상자의 Width 속성을 조절하여 위와 같은 애니메이션을 구현하였습니다.