본문 바로가기
카테고리 없음

애플 스크롤 애니메이션을 적용한 웹 사이트

by Naker 2022. 4. 19.

애플 스크롤 애니메이션을 이용한 웹 사이트 인트로

애플의 스크롤 애니메이션

애플 홈페이지에 올라오는 제품 소개 탭을 들어가 보면 스크롤에 맞춰 애니메이션 되는 웹 페이지를 볼 수 있습니다. 안 그래도 애플을 좋아하는 편이었기 때문에, 애플 홈페이지에 나오는 스크롤을 기반으로 웹 페이지에 애니메이션이 들어가는 사이트를 만들어 보고 싶다는 생각이 들었습니다. 그래서 만들어낸 웹 사이트가 'Life, Marathon'입니다.

웹 사이트의 소재

Life Marathon은 일본의 한 광고의 내용을 참고해서 만들었는데요. 애플의 스크롤 애니메이션을 이용해서 어떤 사이트를 만들어 볼지 굉장히 많은 고민을 했습니다. 그리고 그 고민의 끝에는 어릴 적 감명받았던 일본 광고의 대사를 문장으로 나눠서 보여주는 것이었죠. 그렇게 되면 바로 이전에 진행했던 Ramble 프로젝트와 마찬가지로 텍스트 위주의 애니메이션을 다루기 때문에 높지 않은 난이도로 스크롤 애니메이션을 진행해볼 수 있다고 판단했습니다.

그럼 애니메이션은 어떻게 구상했는가

웹 사이트의 소재를 정하고 나서, 어떤 애니메이션을 구현할지에 대한 고민은 그렇게 길지 않았습니다. 텍스트를 다루는 단순한 애니메이션은 종류가 몇 없기도 했고, 소재를 정한 시점부터 어떤 방식으로 애니메이션을 보여줄지 어느 정도 생각을 해 놓았기 때문입니다.

스크롤을 계속해서 내리게 되면 마치 웹 사이트가 하나의 영상처럼 재생되는듯한 분위기의 애니메이션을 구상을 했고, 실제로 그런 애니메이션 구현하기 위해 여러 가지 시도를 했습니다.

텍스트 랜덤 배치 애니메이션

텍스트를 랜덤으로 배치한 애니메이션

텍스트를 x, y, z 축마다 각각 화면을 벗어나지 않는 랜덤 값을 줘서 배치시켰습니다. 텍스트가 랜덤 위치에서 서서히 나오는 애니메이션을 통해 복잡한 생각을 하나씩 풀어나가는 듯한 느낌을 연출했습니다. 또 다음 애니메이션으로 넘어가기 직전의 텍스트는 무조건 가운데에 나타나도록 배치를 했습니다. 그래서 보는 사람으로 하여금 다음 나올 텍스트는 앞의 내용과 상반되는 내용이며, 애니메이션의 분위기 또한 바뀔듯한 느낌을 받도록 연출했습니다.

강렬한 분위기를 주는 애니메이션

애니메이션 분위기를 바꾸면서 긴박감을 연출

텍스트를 랜덤으로 배치한 애니메이션에 이어서 바로 강렬한 분위기와, 앞의 내용을 부정하는 텍스트들을 넣었습니다. 그렇게 자연스럽게 주장하고자 하는 부분을 강조하는 느낌을 줄 수 있었습니다.

텍스트 기반 애니메이션을 준비하면서 텍스트로 이루어진 광고나, 타이포그래피 등을 자주 봤습니다. 많은 작품들을 참고한 후에서야 텍스트가 순간적으로 바뀌고 배경과 텍스트 색이 반전되는 효과로 강렬한 인상을 주는 애니메이션을 사용하자라고 생각했습니다. 그래서 광고에서 전달하고 싶은 의미를 담고 있는 문장들을 이런 강렬한 인상을 주는 애니메이션과 함께 구현을 했습니다.

절정 후의 결말은 잔잔하게

결말에 가까워질수록 잔잔해지는 애니메이션

일반적인 소설의 플롯처럼, 강조하고자 하는 부분을 굉장히 강렬하게 표현한 후, 서서히 잔잔해지는 결말 애니메이션을 추가했습니다. 이런 흐름을 가져와서 애니메이션에 그대로 쓰니, 광고에서 전하고자 하는 의미는 물론이고, 생생한 감정까지 전달하는 느낌을 연출할 수 있었습니다. 그리고 웹 페이지에 처음 들어가면 나오는 문구인 '인생은 마라톤이다'라는 글을 그대로 보여준 후, '인생은 마라톤이 아니다'라는 글로 애니메이션 되는 과정을 보여줬습니다. 처음과 끝을 맺어주는 연출을 해서 더욱 강한 여운이 남을 수 있도록 구현을 했습니다.

더 욕심부려보자면

Life, Marathon에 사용된 텍스트 애니메이션들은 영상과 비슷한 분위기로 연출을 해보자라는 생각으로 구현이 됐습니다. 그래서 다양한 영상 매체를 참고하여 사람들이 멋지다고 느끼는 애니메이션들을 웹상에서 구현을 했기 때문에 역시 웹에서 구현된 모습도 꽤나 인상적입니다. 하지만 인터랙션이 가능한 웹 페이지의 특성 중 오직 스크롤만 사용했기 때문에 한편으로는 아쉬운 점도 있는데요. 이 Life, Marathon이라는 프로젝트 또한 Ramble 프로젝트와 마찬가지로, 기회가 된다면, 다양한 인터랙션을 추가해서 더욱 퀄리티를 높일 수 있도록 리뉴얼 작업을 거치겠습니다.

또한 이번에 사용된 텍스트들 일본 광고의 문구들을 사용했는데, 이 또한 리뉴얼 작업을 거치면서 저만의 글로 채워 넣을 수 있으면 좋겠네요.

댓글0