프레이머(Framer)는 디자인과 개발이 결합된 노코드 툴로, 퍼블리싱 과정도 비교적 간단하다. 이번 글에서는 프레이머에서 웹사이트를 퍼블리싱 하는 방법과 퍼블리싱 후 발생할 수 있는 문제 해결 방법까지 정리해보려고 한다.
특히 썸네일 정보 표시, 언퍼블리시, 커스텀 도메인 적용 등 실제 경험을 바탕으로 다루어보려고 한다.
1. 프레이머에서 웹사이트 퍼블리싱 하는 방법
프레이머에서 제작한 웹사이트를 퍼플리싱 하는 과정은 다음과 같다.
1) 웹사이트 편집이 완료되었는지 확인
모든 페이지와 링크를 점검하고, 모바일/데스크톱 환경에서 미리보기를 진행한다.
2) 퍼블리싱 버튼 클릭
프레이머 편집 화면 우측 상단의 'Publish' 버튼을 클릭하면 기본 제공되는 framer.app 도메인으로 사이트가 배포된다.
3) 웹사이트 URL 확인
퍼블리싱이 완료되면 https://your-project.framer.app형식의 URL이 생성된다.
2. 퍼블리싱 이후 웹사이트 정보 표시 방법
웹사이트 링크를 누군가에게 보냈을 때 웹사이트 정보(Open Graph 메타 태그)가 원하는대로 표시되도록 설정하려면 다음과 같이 설정하면 된다.
프레이머 페이지 사이트 정보 설정
- 상단 메뉴에서 Settings - General 탭으로 이동한다.
- Site Title, Site Description 항목을 채운 후 Save를 눌러 저장한다.
💡 사이트 정보를 설정 후 저장하게 되면, 아래와 같이 설정한 정보가 노출된다.
3. 퍼블리싱 이후 Unpublish(게시 취소) 방법
프레이머에서는 웹사이트를 퍼블리싱한 후, 필요할 경우 다시 언퍼블리시할 수 있다.
1) 프레이머 프로젝트로 이동
2) 우측 상단의 Settings 버튼 클릭
3) General - Site settings의 하단에 있는 'Unpublish' 선택
4) 웹사이트 접속 확인 : 언퍼블리시가 완료되면 해당 URL로 접속해도 웹사이트가 보이지 않는다.
4. Custom Domain 설정 방법
기본적으로 프레이머는 famer.app 도메인을 제공하지만, 무료 플랜에서도 제한된 형태로 커스텀 도메인을 사용할 수 있다.
커스텀 도메인 설정 방법 (무료 플랜)
1) 프레이머 프로젝트로 Settings - Domain 탭으로 이동
2) Custom Domain에 원하는 서브도메인 이름 입력 (ex. myproject)
3) 제공된 도메인 옵션 중 하나를 선택 (framer.website / photos / media / wiki)
4) 제출하면 새 도메인 활성화
무료 서브 도메인의 경우 다음과 같은 제한 사항이 있다.
- 월간 방문자수 1,000명 제한
- 웹사이트 푸터에 'Made in Framer' 브랜딩 표시
필요 시 유료 플랜으로 업그레이드하여 완전한 커스텀 도메인을 사용하는 것이 좋다.
5. 퍼블리싱 이후 'Edit in Framer' 바 제거 방법
프레이머에서 퍼블리싱 후 웹사이트 하단에 Edit in Framer 바가 계속 떠 있는 경우가 있다. 어떤 이유에서인지는 모르겠지만, 브라우저나 디바이스를 바꿔서 접속해도 동일한 문제가 발생했는데 이를 해결하는 방법을 찾았다.
1) 프레이머 커뮤니티에서도 해당 문제가 보고됨
2024년 2월쯤, 여러 사용자가 해당 문제를 프레이머 팀에 리포트했으며 개발팀이 이를 인지하고 있다고 답변한 상태였다. 하지만 딱히 뾰족한 해결책도 찾지 못했고, 기약없이 기다릴 수도 없는 노릇이었다.
👉🏻프레이머 커뮤니티 사용자 리포트 바로가기 : How to remove The Framer Editor Bar from the production site?
2) 해결 방법 : Custom Domain 적용
- 기본 도메인(framer.app)을 사용하면 Edit in Framer가 사라지지 않음
- Custom Domain 설정 후 퍼블리싱하면 자동으로 제거됨을 확인
다만 커스텀 도메인 적용 전에도 다른 사람들에게 링크를 보냈을 때는 Edit in Framer 바가 뜨지 않는다고 했다.
프로젝트 오너인 나는 크롬에서 '강력한 새로고침'을 해도 동일한 현상이 발생하여 확인이 불가능한 부분이었기에, 혹시나 동일한 문제를 겪고 있다면 커스텀 도메인으로 변경해보길 바란다.
6. 마무리
이번 글에서는 프레이머에서 웹사이트를 퍼블리싱하는 방법과 퍼블리싱 후 프로덕션 버전에서 발생할 수 있는 문제 해결법을 공유했다.
특히 무료 버전에서는 스테이징 환경이 없어 퍼블리싱 후 직접 테스트해야 하는 점이 다소 불편할 수 있다. 하지만 적절한 설정을 통해 최적화된 웹사이트를 운영할 수 있으며, 퍼블리싱 후 발생하는 이슈에 대비해 설정을 꼼꼼히 확인하는 것이 중요하다.
관련 글 보기
👉🏻2025.03.11 - [IT 기획 & 자기 계발] - 코딩 없이 랜딩 페이지 만드는 법 | 프레이머(Framer) 활용 가이드
'기획자의 툴 활용법 > APP & IT 리뷰' 카테고리의 다른 글
| M1 맥북에서 애플 인텔리전스 써보니 | 실사용 후기 (0) | 2025.04.09 |
|---|---|
| 디지털 디톡스 시작하기 좋은 iOS 앱, 도파민 베리어 후기 (0) | 2025.03.27 |
| 커플 기록 앱 ‘썸원(SumOne)’ 리뷰 | 반려몽 키우는 법 & 유료 기능 차이 (2) | 2025.03.13 |
| 코딩 없이 랜딩 페이지 만드는 법 | 프레이머(Framer) 활용 가이드 (0) | 2025.03.11 |
| 뽀모도로 앱 '얼티밋 포커스' 사용 후기 | 집중력을 극대화하는 방법 (0) | 2025.03.03 |