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

Framer 홈페이지의 새로운 비디오 버튼이 최근 큰 인기를 얻고 있습니다. 웹사이트에 영화 같은 분위기를 더해주는 멋진 기능이죠. 이 튜토리얼에서는 Framer에서 나만의 영화 같은 비디오 버튼을 만드는 방법을 소개합니다.

영화같은 비디오버튼 만들기

1. 프레임과 비디오 삽입

버튼의 배경이 될 프레임을 먼저 그립니다. 프레임 크기를 조절하고 모서리를 원하는 만큼 둥글게 만드세요. 그 후에 비디오를 삽입하고 버튼 너비에 맞게 스케일을 조절합니다. 그런 다음 비디오를 프레임 안으로 드래그해 업로드합니다.

2. 텍스트와 버튼 스타일링

다음으로 버튼에 텍스트와 아이콘을 추가합니다. 원하는 스타일로 꾸며주세요. 텍스트와 아이콘을 모두 선택한 후 ⌥ + ⌘ + ⏎(Mac) / ctrl + alt + ⏎(Windows)를 눌러 스택을 추가합니다. 스택을 프레임 안으로 드래그합니다. 텍스트 가독성을 높이려면 비디오의 불투명도를 약간 낮추세요.

3. 컴포넌트 만들기

버튼을 선택하고 컴포넌트를 생성합니다. 새로운 variant를 추가하고, 비디오의 불투명도를 다시 1로 올립니다. 기본 변형에는 포인터 커서를 추가합니다. 마지막으로 "mouse enter/leave"를 사용해 변형들을 연결합니다.

4. 호버 효과 추가 (선택 사항)

여기서 끝낼 수도 있지만, 특별한 효과를 더하고 싶다면 호버 효과를 넣을 수 있습니다. 버튼 컴포넌트를 선택하고 오버레이를 추가합니다. 원하는 대로 스타일링한 뒤 비디오 블록을 하나 더 끌어다 놓습니다. 크기를 조정하고 모서리를 둥글게 한 뒤, 버튼에 사용한 것과 같은 비디오를 업로드합니다.

프로젝트 따라해보기→

본 글은 Framer 공식 블로그의 ‘How to create a cinematic video button in Framer’를 번역·각색한 콘텐츠입니다.