홈페이지 제작, 모션그래픽을 넣는다면?
GIF 아이콘과 모션그래픽
* 본 포스팅은 바름 사내 렉처를 발췌하여 작성되었습니다. 바름은 업무 향상을 위한 사내 교육을 정기적으로 실시하고 있습니다.
이번 렉처 주제는 GIF 아이콘과 모션 그래픽입니다. 마케팅에 최적화된 홈페이지를 제작하더라도 디자인을 고려 안 할 수 없죠. 클라이언트는 영감 있는 디자인을 원하는데, 각자의 주관적인 견해를 모두 담아내기 위한 노력은 필요합니다. 단, 마케팅에 방해가 되면 안 되겠죠?
이번 홈페이지 제작과 관련된 렉처는 디자인팀에서 클라이언트의 Needs에 대한 피드백 겸 모션그래픽과 GIF를 통한 홈페이지 제작이 어떤 디자인적 차이점을 보이는지 알아보았습니다.
그럼 주제인 GIF아이콘과 모션그래픽에 대해 알아보죠.
GIF 아이콘?
웹 페이지 내 움직이는 그래픽 이미지를 애니메이션 GIF(Graphics Interchange Format) 파일을 사용해 모션을 준 아이콘을 뜻하죠. Java, Flash 등을 사용해 애니메이션 GIF와 동일한 효과를 얻을 수 있으나 아이콘 같은 작은 영역에서는 GIF를 사용하는 것이 로딩 속도가 빠릅니다.
모션그래픽?
모션그래픽(Motion Graphic)은 비디오나 애니메이션에 쓰이는 기술로, 형태와 동세의 변화를 만드는 것이죠. 애프터 이팩트, 프리미어 등의 다양한 프로그램을 이용해 사진 또는 그림, 텍스트, 영상 등에 움직임과 각종 효과를 주는 과정으로 더 특색 있고 퀄리티 높은 영상 이미지를 제작할 수 있어요.
모션 그래픽이 적용된 사례 홈페이지들을 잠시 살펴보죠!
https://avocode.com/design-report-2017
GIF 아이콘이란 것이 갑자기 하늘에서 뚝 떨어진 것은 아닙니다. 특히 모션그래픽 기술과 합쳐지며 기존에는 간단하고 딱딱한 느낌의 움직임이라면 지금은 자연스럽고 다양한 움직임을 취해 보다 자연스러운 모션으로 콘텐츠의 퀄리티를 높여주고 있습니다.
특히 모션그래픽에서 모션(Motion)은 의미 있고 적절하며 관심을 집중시키고 지속시켜야 된다는 단어 속 의미와 목표가 있는데요.
시스템의 현재 상태를 알리는 마이크로 인터랙션 사용이 증가하면서 GIF 아이콘은 보다 높은 퀄리티의 모션이 요구되고 있죠.
그럼 이런 GIF아이콘과 모션그래픽 사례들을 참고해보고 우리 웹사이트의 홈페이지 제작에도 영감을 불어넣어보도록 해봐요!
인트로 / 로딩 화면
https://www.pinterest.co.kr/pin/332210909995674871/
온보딩(Onboarding)
https://www.pinterest.co.kr/pin/9499849193773238/
https://www.pinterest.co.kr/pin/22166223150306696/
https://www.pinterest.co.kr/pin/390757705163712314/
콘텐츠 이해를 돕기 위한 목적
https://www.pinterest.co.kr/pin/319755642284560291/
바름의 더 많은 소식 보기
