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

리디렉션이란 무엇일까?

리디렉션은 특정 URL을 방문했을 때 자동으로 다른 URL로 라우팅해 주는 기능입니다. 주로 아래와 같은 상황에서 사용됩니다.

• 사이트 구조(URL)를 새롭게 정리할 때

• 기존 페이지를 새 디자인이나 레이아웃으로 교체할 때

• 사용자가 주소를 잘못 입력했을 때도 정상 페이지로 안내하도록 경로를 확보해놓고 싶을 때

특히 검색 엔진 최적화(SEO) 관점에서 중요한 이유는, 기존에 검색 결과에 노출되던 URL이 갑자기 사라지면 순위가 떨어질 수 있기 때문입니다. 리디렉션을 설정하면 검색 엔진이 새로운 URL을 자동으로 불러오는데요, 이는 특히 페이지 URL을 불러오는 동안 검색 엔진 순위를 유지하는 데 유용합니다.

리디렉션 만드는 방법

Framer에서 사이트 설정 → Redirects 메뉴를 통해 리디렉션을 관리할 수 있습니다.

1. Site Settings → Redirects로 이동하기

2. 원래의 URL과 새로운 URL을 입력하기

3. 여러 개의 리디렉션이 있다면, 순서를 드래그 앤 드롭으로 조정해 우선순위를 조정하기

4. 필요 시 … 메뉴에서 수정하거나 삭제하기

5. 사이트를 Publish하거나 Update하면 적용 완료돼요

Note: 캔버스나 CMS에서 경로를 바꾼 경우, 리디렉션 설정이 자동으로 업데이트되지 않으니 직접 수정해야 합니다. 자세한 내용은 해당 사이트 내의 리디렉션 비디오를 참고해주세요.

폴더 전체를 리디렉션하기

경우에 따라 블로그처럼 여러 글이 있는 폴더 전체를 한 번에 리디렉션해야 할 수도 있습니다. Framer는 이를 위해 아래의 방식을 지원합니다.

와일드카드(*) 활용

모든 경로의 세그먼트와 폴더를 일치시키기 위해 *를 사용합니다.

예시)

• /blog/* 는 /blog/hello-world나 /blog/2022/07/18/hello-world 와 모두 매칭돼요.

• /blog/*/post/* 는 /blog/2022/post/hello-world나 /blog/2022/learning-framer/posts/07/18/hello-world처럼 중첩된 경로도 매칭 가능해요.

캡처 그룹(:1, :2 등)

이전 URL에서 일치하는 그룹을 참조하려면 새로운 URL에서 :1, :2 등을 사용합니다.

예시)

• 이전 URL: /blog/*/post/*

• 새로운 URL: /article/:1/entry/:2

• 결과적으로 /blog/my-blog/post/getting-started 를 /article/my-blog/entry/getting-started로 리디렉션 할 수 있어요.

슬러그 매칭(:slug)

:slug를 사용하면 슬래시 사이의 특정 구간을 일치시킬 수 있습니다.

예시)

• 구 주소: /blog/:year/:month/:day

• 새 주소: /article/:year-:month-:day

• 결과적으로 /blog/2022/07/18 을 /article/2022-07-18로 리디렉션 할 수 있어요.

리디렉션의 한계

• Framer에서는 현재 도메인 내의 하위 경로만 리디렉션이 가능해요.

• www.abc.com → www.xyz.com처럼 전체 도메인을 리디렉션 해야 한다면, 이전 도메인의 호스팅 제공업체에서 도메인 단위 리디렉션을 설정해야 합니다. 그 후 Framer에 새 도메인을 연결하고, 세부 경로 리디렉션은 필요에 따라 처리하면 돼요.

마무리

리디렉션은 단순히 주소를 바꾸는 작업 같지만, 사이트 SEO와 사용자 경험에 큰 영향을 주는 중요한 설정입니다. 위 단계를 수행한 후에도 문제가 해결되지 않으신다면, 문의 페이지를 통해 문의해 주시면 도움을 드리겠습니다.

본 글은 Framer 공식 블로그의 ‘How to setup redirects to maintain SEO ranking’을 번역·각색한 콘텐츠입니다.