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

lang 속성이 중요한 이유

웹 접근성을 높이는 핵심 요소 중 하나가 바로 lang 속성입니다. 이 속성은 HTML 요소에 콘텐츠의 언어를 지정해 주는데요, 이렇게 하면 화면 판독기(Screen Reader) 같은 보조 기술이 더 정확하게 콘텐츠를 읽어줄 수 있습니다. 특히 다양한 언어를 고려해야 하는 사용자나 번역 도구를 통해 소통해야하는 사용자에게 특히 더 중요합니다.

웹사이트 언어를 설정하려면 사이트 설정으로 이동하여 사이트 언어 속성을 추가하세요. 이렇게 하면 lang웹사이트 전체에서 속성이 자동으로 업데이트됩니다.

Framer에서 사이트 언어 설정하기

Framer에서는 따로 HTML 코드를 수정할 필요 없이, 사이트 언어를 설정하면 lang 속성이 자동으로 적용되는데요. Settings > Site Settings > Site Language의 경로로 들어가 언어를 선택하면 전체 사이트의 lang 속성이 일괄적으로 업데이트됩니다.

로컬라이제이션

Framer는 기본적으로 로컬라이제이션(Localization) 기능을 지원하는데요. 다국어 사이트를 만들 경우 언어에 맞춰 lang 속성이 자동으로 전환됩니다.

여기에 더해 hreflang 태그도 자동으로 추가됩니다. 이 태그는 다른 언어로 된 페이지가 중복될 경우, 이를 검색엔진에 알려주는 역할을 합니다. 이를 통해 Google이 페이지 간의 관계를 파악하여 글로벌하게 SEO를 향상시킬 수 있습니다.

주의할 점

lang과 hreflang 태그는 자동 관리되며 UI에서 직접 수정할 수 없습니다. 따라서 타사 번역 서비스는, 태그나 웹사이트의 코드를 수정할 수 없다는 점을 참고해주시길 바랍니다.

본 글은 Framer 공식 블로그의 ‘Language attribute’ 내용을 번역·각색한 콘텐츠입니다.