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

오버레이 콘텐츠란 무엇인가요?

오버레이(Overlay) 콘텐츠란, 사용자가 버튼을 클릭하거나 특정 동작을 했을 때 화면 위에 겹쳐서 나타나는 창이나 패널을 말합니다. 쉽게 말해, 팝업창이나 슬라이딩 메뉴처럼 기존 페이지 위에 떠서 보여지는 콘텐츠입니다.

• 툴팁이나 사이드바 패널: 사용자가 특정 요소 위에 마우스를 올리거나 클릭할 때 옆에 나타나는 정보창

• 모달 창: 어떤 버튼을 클릭하면 가운데 팝업이 뜨고, 배경이 흐려지는 창

• 모바일 메뉴: 햄버거 버튼을 누르면 전체 화면을 덮는 메뉴가 열리는 경우

Framer에서는 오버레이를 보통 Frame 컴포넌트에 고정 위치(Fixed Position)를 주고, 특정 트리거에 따라 Visible 속성을 On/Off 하여 구현하거나 Overlay 컴포넌트를 직접 사용해 상태 기반으로 표시 여부를 제어할 수 있습니다.

왜 오버레이 콘텐츠는 검색되지 않을까요?

Google은 요즘 웹페이지를 꽤 잘 이해하는 편이지만, 여전히 사람처럼 페이지를 보진 못합니다. 특히 페이지가 처음 로드될 때 화면에 보이지 않는 콘텐츠는 거의 크롤링하지 않습니다. Framer의 오버레이는 성능과 애니메이션을 위해 기본적으로 페이지가 처음 열릴 때 렌더링 되지 않기 때문에 오버레이 안에 어떤 글이나 링크가 있어도 Google은 이를 “처음에는 없는 정보”라고 판단합니다. 결과적으로, 오버레이 안의 콘텐츠는 검색 엔진에 노출되지 않고, 사이트의 SEO에 전혀 도움을 주지 않게 됩니다.
Note : 크롤링(Crawling)이란, 검색 엔진(Google, Naver 등)이 웹사이트 페이지 안의 텍스트, 이미지, 링크, 구조 등을 자동으로 수집하고 분석하는 과정을 말합니다.

내비게이션 바도 예외가 아닙니다.

오버레이를 활용해 메뉴나 링크를 숨기고 보여주는 내비게이션 바가 있다면, 이 역시 문제가 될 수 있습니다. 예를 들어, 어떤 페이지가 오버레이 메뉴 안의 링크에서만 접근 가능하다면, 내부 링크가 하나도 없는 것처럼 보이기 때문에 그 페이지는 검색 엔진이 ‘발견할 수 없는 페이지(Orphan Page)’가 됩니다.

해결 방법은 없을까요?

안타깝게도, 오버레이 안의 콘텐츠를 Google이 크롤링하도록 만드는 방법은 없지만, 다음과 같은 우회 방법으로 문제를 줄일 수 있습니다:

• 중요한 링크는 반드시 일반 영역에도 배치하기
  예: 페이지 하단(Footer)에 텍스트 링크 추가

• 오버레이 외부에 사이트맵 또는 링크 모음 제공하기
  예: 별도의 HTML 사이트맵 페이지 만들기

본 글은 Framer 공식 블로그의 ‘Fixing uncrawlable overlay content’을 번역·각색한 콘텐츠입니다.