본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

낙서 효과로 전달하는 창의성과 개성

웹사이트에 낙서 요소를 추가하면 창의적이고 장난스러운 분위기를 전달할 수 있습니다. 이 프로젝트는 바로 리믹스하여 요소를 복사-붙여넣기 할 수 있으며, 원하는 대로 커스터마이즈할 수도 있습니다. 코딩을 전혀 하지 않고도 세밀하면서 다이나믹한 낙서 효과를 만들 수 있다는 점이 장점입니다.

드로잉 애니메이션

낙서가 그려지는 듯한 애니메이션은 @benjaminnathan이 만든 Animator 컴포넌트를 활용해 구현할 수 있습니다. Scribble에 Animator를 연결하면 손쉽게 낙서하는 듯한 효과가 완성됩니다.

이 프로젝트는 특정 섹션이 화면에 들어왔을 때 애니메이션이 시작되도록 구성됐는데요. 이를 위해 두 가지 Variants를 가진 컴포넌트를 만들었는데, 하나는 Animator가 숨겨진 상태(Default), 다른 하나는 Animator가 표시되어 애니메이션이 실행되는 상태(Animate)입니다. 여기에 Scroll Variant Effect를 적용해 화면에 보일 때 자동으로 전환되도록 설계했습니다.

미세한 움직임 설정하기

낙서를 미세한 움직임을 주려면, 같은 낙서에 두 가지 변형 컴포넌트를 만들어 변화를 주면 됩니다.

두 변형 컴포넌트의 형태를 약간 다르게 하고, Appear Interaction을 연결해 왕복 애니메이션을 실행하면 됩니다. Delay를 0.2초로 설정하면 부드럽고 자연스러운 움직임이 연출됩니다. 페이지에 생동감와 리듬감을 더하면서도 과하지 않게 표현할 수 있습니다.

낙서의 배치

텍스트 콘텐츠는 Stack으로 정리하되, 낙서는 Absolute Position으로 배치해 레이아웃을 살짝 깨뜨리듯 연출했습니다. Properties 패널의 Position Type에서 Absolute를 선택해 자유롭게 위치시킬 수 있습니다. 이렇게 하면 질서정연한 텍스트 사이에서 낙서가 더 역동적으로 움직이는 듯한 효과를 줍니다.

더 많은 낙서 둘러보기

이 프로젝트에는 몇 가지 낙서가 더 포함되어 있는데요, 앞서 설명한 방법대로 낙서 애니메이션을 적용할 수 있습니다. 이를 활용하여 다양한 위치에 배치하고 변형을 주면서 자유롭게 사용해보세요.

Remix →

본 글은 Framer 공식 블로그의 ‘Incorporating dynamic scribbles into your website’를 번역·각색한 콘텐츠입니다.