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

템플릿 열기와 찾기

Framer Marketplace는 웹 프로젝트를 시작하는 데 필요한 무료/유료 템플릿을 제공합니다. 요금별로 템플릿을 사용하는 방법은 아래를 참고해주세요.

• 무료 템플릿: 해당 플러그인의 Use for Free 버튼을 누르면 바로 워크스페이스에 추가돼요.

• 유료 템플릿: 결제 후 이메일로 Remix 링크가 전송되고, 이 링크를 클릭하면 자동으로 프로젝트가 워크스페이스에 복제됩니다.

대시보드에 프로젝트가 나타나지 않을 때

• 사이트를 새로고침 해보기

• 브라우저를 바꿨거나 새 계정이라면, 링크를 다시 클릭해보기

레이아웃 이해하기

편집을 시작하기 전에, 템플릿 구조를 살펴보는 것이 좋아요.

• 좌측 패널에서 모든 페이지와 섹션 구조를 볼 수 있습니다.

• Assets 패널에서는 글로벌 색상 스타일, 텍스트 스타일을 확인할 수 있습니다. 초기에 브랜드 색상이나 폰트를 맞춰두면 이후에 전체 사이트가 자동으로 업데이트돼 작업 효율을 높일 수 있습니다.

• 템플릿에 CMS가 포함되어 있다면 블로그 글, 상품 리스트처럼 반복되는 콘텐츠를 관리할 수 있습니다. 어떤 섹션이 CMS 데이터와 연결되어 있는지도 확인해보아야 합니다.해보시길 ㅂ

콘텐츠 커스터마이징

템플릿에 익숙해지면 이제 나만의 것으로 커스터마이징 하는 단계입니다. 대부분사용자는 텍스트와 이미지를 업데이트하는 것부터 커스터마이징을 시작합니다.

• 텍스트 수정: 더블 클릭 후 원하는 텍스트로 교체할 수 있으며, 글꼴/ 크기/정렬은 우측 속성 패널에서 조정 가능해요.

• 이미지 교체: 이미지 더블 클릭하여 Swap 기능을 사용해보세요.

• 색상 업데이트: 글로벌 컬러 토큰을 수정하면 사이트 전체에 반영돼요.

• 페이지 삭제: 좌측 패널의 페이지명을 우클릭한 후, Delete로 삭제하면 돼요. 다만, 삭제 시 내비게이션 메뉴도 꼭 함께 수정해야 해요.

Note: 일부 템플릿에는 Layout Templates가 포함되어 있어요. 내비게이션 / 푸터 / 배너 같은 공통 요소를 한 번만 수정하면 전체 페이지에 적용돼어 훨씬 수월한 관리를 할 수 있어요.

컴포넌트 편집

컴포넌트는 프로젝트 타일, 푸터, FAQ 섹션 등 사이트 전체에서 사용되는 재사용 가능한 요소를 말해요. 프레이머 템플릿은 레이아웃 전반의 일관성을 유지하기 위해 컴포넌트를 사용하고 있습니다.

• 마스터 컴포넌트 편집: 마스터 컴포넌트의 로고나 색상 등을 바꾸면, 해당 컴포넌트가 복제되어 있는 모든 페이지에 동시에 반영됩니다.

• 단일 인스턴스 편집: 일부 컴포넌트는 변수(Variable)로 세부 속성을 다르게 조정할 수 있어요. 예를 들어 FAQ 아이템의 제목만 바꾸거나, 버튼 색상만 변경하는 식으로 사용할 수 있습니다.

CMS 활용하기

블로그 글이나 포트폴리오 프로젝트 등 반복되는 콘텐츠를 관리해야 하는 페이지에는 CMS가 포함되어 있습니다. 각 페이지를 매번 편집하는 대신, 이를 CMS에 한 번만 등록해두면 연결된 모든 페이지가 자동으로 업데이트되며 관리됩니다.

CMS를 처음 다루어 보신다면 CMS 아카데미 튜토리얼을 참고하면 도움이 되실 겁니다.

연락처 폼 설정하기

많은 템플릿에는 연락처 또는 뉴스레터 가입을 도와주는 문의 폼(Contact Form)이 포함되어 있는데요. 이러한 폼은 기본 상태로는 동작하지 않고, 이를 어디로 보낼지 지정해줘야 합니다.

1. UI에서 Form를 삽입할 레이어를 선택하기

2. 우측 속성 패널에서 Send to 필드에 이메일 주소나 엔드포인트를 입력하기.

이 과정을 거쳐야 제출된 메시지가 실제로 내 메일함으로 전달되게 됩니다.

사이트 설정하기

페이지 타이틀, 메타 설명, 소셜 미디어 미리보기에 해당 사이트가 표시되는 방식을 세부적으로 조정하려면 사이트 설정 부분을 활용하시면 됩니다.

• 오른쪽 상단 모서리 Settings을 눌러서 수정할 수 있어요.

• 사이트의 가시성을 높이려면 SEO 필드를 채워 검색 노출을 개선해보세요.

• Google Analytics 같은 서드파티 도구를 사용하는 경우, 지정된 필드에 추적 ID를 입력하세요.

사이트 퍼블리시하기

디자인과 콘텐츠가 완료되었다면, “Publish”를 눌러 사이트를 게시할 수 있습니다. 자세한 내용은 사용자 지정 도메인 연결 가이드를 참고해보세요.

• 무료 서브 도메인: Framer에서 제공하는 서브 도메인으로 사이트를 테스트하거나 공유해볼 수 있어요.

• 커스텀 도메인 연결: Settings → Domains으로 이동하여 사용자 지정 도메인 연결 단계를 참고해보세요. Framer 요금제에 따라 DNS 레코드를 업데이트하거나, 등록기관에서 지원하는 경우 자동 연결 옵션 사용이 필요하게 될 수 있어요.

추가 정보

추가 정보가 필요하면 아래의 자료를 참조하여 활용해보시길 추천드려요. 또한 템플릿 관련 문의사항은 creators@framer.com 으로 이메일을 보내주세요.

• Framer Academy: 레이아웃, 인터랙션 등에 대한 튜토리얼 정보 제공

• Framer Support: 공식 지원팀에 문의하여 진행 상황 공유

• Framer Experts: 전문가를 고용해 맞춤 지원 받기

본 글은 Framer 공식 블로그의 ‘Just bought a template, what’s next?’를 번역·각색한 콘텐츠입니다.