목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Framer에서 이메일, 전화, SMS 링크 추가하기
웹사이트에서 이메일 주소나 전화번호를 클릭할 시, 바로 열리도록 설정해두면 사용자가 연락처로 훨씬 쉽게 연락할 수 있습니다. Framer에서는 몇 단계만 거치면 이러한 링크를 간단히 추가할 수 있으니 해당 가이드를 잘 따라해보시기 바랍니다.
이메일 링크 만들기
링크를 넣을 요소를 선택하세요.
오른쪽 속성 패널에서 Link 옆에 있는
+아이콘을 클릭해주세요.Link To 필드에
mailto:이메일주소형식으로 입력하고 Enter를 눌러주세요.
전화번호 링크 만들기
링크를 넣을 요소를 선택하세요.
오른쪽 속성 패널에서 Link 옆에 있는
+아이콘을 클릭해주세요.Link To 필드에
tel:전화번호형식으로 입력하고 Enter를 눌러주세요.
SMS 링크 만들기
링크를 넣을 요소를 선택하세요.
오른쪽 속성 패널에서 Link 옆에 있는
+아이콘을 클릭해주세요.Link To 필드에
sms:전화번호형식으로 입력하고 Enter를 눌러주세요.
Note: 이메일/전화/SMS 링크는 Preview 모드에서는 정상 동작하지 않을 수 있습니다. 정확한 작동 여부를 확인하려면 사이트를 Publish한 뒤 실제 환경에서 테스트해주세요.
자주 묻는 질문(FAQ)
Q. 링크를 이미지나 버튼에도 적용할 수 있나요?
네. Framer의 Link 속성은 텍스트를 포함한 모든 레이어(Frame, Image, Button 등)에 전부 적용 가능합니다.
Q. Preview 모드에서 제대로 작동이 안 되는 이유는 무엇인가요?
Preview는 실제 브라우저 환경이 아니기 때문입니다. 메일/전화 앱과 연결하는 행동은 Publish 후 실제 기기에서 테스트해야만 정상 동작합니다.
Q. 클릭 가능한 링크 스타일(밑줄, 색상 등)을 커스텀할 수 있나요?
네. Framer는 텍스트 레이어 자체에 스타일을 적용하는 방식이기 때문에 기본 스타일이 강제되지 않습니다. 색상/호버 효과/애니메이션 등 기본 텍스트와 동일하게 모두 자유롭게 커스텀 할 수 있습니다.
본 글은 Framer 공식 블로그의 ‘How do I add clickable email & phone number links’를 번역·각색한 콘텐츠입니다.
