온보딩 페이지에 대하여

팀 프로젝트에서 온보딩 페이지를 담당하게 되었다. 보통 온보딩 페이지라고 하면 간단한 애니메이션이 포함되기 마련인데 막상 시작하려고 보니 어떤 식으로 하면 좋을지 감이 잡히지 않았다.

그래서 참고한 페이지가 이곳이었다.

이 정도 수준까지는 할 수 없지만, 좋은 온보딩 페이지가 어떤 애니메이션을 어떤 방식으로 구현하고 있는지 참고하고 싶었다. 그 결과, 온보딩 페이지에 나타나는 문구 중에서 핵심이 되는 부분과 연관을 지어 애니메이션을 줘야겠다는 생각이 들었다.

추가적으로 이미지의 path를 따라 그려주면 멋있지 않을까? 라는 아이디어가 떠올랐는데 검색을 통해 해당 페이지의 도움을 받아 만들어낼 수 있었다. stroke-width 값을 조절하는 방식인데, SVG 요소에 클래스 이름을 지정한 다음 CSS에서 stroke 속성을 변경하는 키프레임 애니메이션을 설정해 주었다.

온보딩 애니메이션 결과물

합쳐져 있는 아이콘을 어떻게 분리해서, 애니메이션에 어떤 의미를 담아 어떻게 적용하면 좋을지 고민한 내용을 녹여낸 결과물이라 완성한 다음 굉장히 뿌듯한 기분이 들었다.