-
프레이머 다국어 기능개발/No-code 2025. 1. 9. 14:27
구직을 하다보니, 포트폴리오 사이트를 만들어야겠다고 생각했다.
2016년 즈음, HTML과 CSS 그리고 지인 찬스를 빌려 내 사이트를 만든 적이 있었다. 직접 도메인을 구매하여 호스팅 비를 내며 운영을 했었는데, 새로운 프로젝트가 생길 때 마다 업데이트하기 여간 힘들었던 기억이 있다. 요즘은 노코드 툴이 잘 되어 있으니 나에게 맞는 툴을 찾아 꾸준히 업데이트 하고 싶었다. 웹플로우(Webflow)와 프레이머(Framer) 사이에서 고민하다가 직접 사용해보고 조금 더 디자인 친화적인 프레이머로 결정!
일단, 프레이머에서 기본으로 제공되는 템플릿 중 가장 포트폴리오에 적합한 녀석을 삼아 토대로 삼았다.
(내가 사용한 템플릿: Pearl - Free · Dawid Pietrasiak)
이후, 내 사이트가 생긴다면 가장 하고 싶었던 '다국어' 기능을 넣고 싶었다.
프레이머에서는 Localization 기능으로 다국어 기능을 쉽게 구현할 수 있다.
Localization in Framer
Effortlessly tailor your website to many languages and regions with everything from Localized text and images to adaptive designs & content per Locale.
www.framer.com
* 본 포스팅은 Framer 내 Localization Feature을 바탕으로 작성되었습니다.
[요약]
1. Localization: 모드 진입
2. Add locale: 언어 추가
3. Add locale: 언어값 입력
4. Localization Table: 번역할 문구표
5. Translate: 번역하기
6. After localization on canvas: 적용된 모습 확인하기
7. Add locale selector: 언어변경 셀렉터 추가하기
8. 기본 언어 변경하기
1. Localization
Localization 다국어 기능을 사용하기 위해, 우측 상단 패널에서 Localization(지구본 모양)을 선택해 주세요.
2. Add Locale
Add Locale 아직 설정한 다국어가 없는 초기 화면입니다.
Add Locale 을 눌러주세요.
3. Add Locale Value
저는 영어와 한국어 두가지를 설정하고자 해요.
기본 언어가 영어로 되어있어서 한국어를 추가하겠습니다.
[ 설정 값 ]
Language: Korean
Region: South Korea
Name: Korean (South Korea)
Slug: ko
Fallback*: English (Default)
* 설정한 언어가 제대로 동작하지 않을 때, 이에 대처하는 언어값을 모두 입력한 뒤에 아래 Add 버튼을 눌러주세요.
4. Localization Table
Localization Table > Filter > Home 설정이 완료된 언어는 좌측 Locales 패널에 언어가 표시됩니다.
+ Add를 눌러서 여러가지 언어를 추가할 수 있습니다.
기본적으로 모든 페이지 리스트가 나옵니다.
상단 패널에서 Filter를 누르면 특정 페이지로 이동할 수 있습니다.
저는 Home으로 이동하겠습니다.
5. Translate AI
Home에서 사용한 텍스트들이 나열되어 있습니다.
좌측은 기본 언어(영어) 우측은 번역될 언어(한국어)가 보이는 곳 입니다.
아직 번역되지 않은 텍스트는 우측에 NEW 라고 표기됩니다.
5-1. 원하는 텍스트만 번역하기(부분 번역)
English > Korean 번역을 원하는 행을 선택하여 직접 작성하거나, Translate AI 버튼을 눌러 자동으로 번역 할 수 있어요.
Open in Overlay Open in Overlay를 선택하면 번역 패널을 열 수 있어요!
Translate done 번역이 완료되면 NEW 에서 DONE 으로 바뀌어요!
5-2. 전체 번역하기(통번역)
translate with AI entire page 페이지 전체 번역을 원한다면, 페이지명이 나온 회색 행의 Translate 버튼을 눌러주세요.
Translate all 모든 번역이 완료되었다면, 다시 우측 상단 Localization(지구본 모양)을 선택하여 Localization모드를 종료해 주세요.
6. After localization on canvas
English > Korean 로컬라이제이션 메뉴 설정이 끝나면 캔버스 하단 패널에서 언어를 바꿔가며 작업할 수 있습니다.
기본값은 아무래도 영어로 설정되어 있고, 한국어로 변경하면 Editting Korean (South Korea)라고 나오는 군요.
캔버스에서 변경하면 Localization과도 연동이 되어 있는 듯 보이네요.
7. Add locale selector
Insert locale selector 다음으로 상단 네비게이션에 locale selector를 추가해 주겠습니다.
Insert를 통해 Locale Selector 를 네비게이션에 추가해 줍니다.
원하는 레이어 위치에 추가해 줍니다.
Icon(Add Object) Click 우측 패널에서 Locale Selector 컴포넌트 속성을 변경할 수 있습니다.
Icon을 클릭하여 오브젝트를 추가해 줍니다.
아이콘은 Default 선택 시, 지구본 아이콘이 나와요. 색상이나 사이즈를 조절해 주세요.
기본 아이콘도 귀엽지만 원한다면 Custom으로 아이콘을 넣을 수 있어보이네요.
Preview Preview를 통해서 확인하면 Locale Selector 선택 시, Localization에서 추가했던 언어가 잘 보입니다.
반응형 일 때, Locale Selector가 어디에 어떻게 위치할 지는 천천히 생각해 봐야겠습니다.
상세한 CSS는 차차 진행하면서 다듬어 볼 예정입니다.
8. Change the Default Language option(기본 언어 변경하기)
언어 변경 방법을 알아봤으니, 제가 작업할 기본 언어를 다시 세팅해보겠습니다.
저는 먼저 한국어로 작업하고, 영어로 변경하고자 해요.
8-1. 기본 언어 변경 방법
Default Language option 다시 Localization 모드로 들어가서 화살표로 표시된 곳을 눌러주세요.
Edit Default Languate 그리고 Edit Default Language를 눌러주세요.
Site Language (English > Korean) Site Language에서 South Korea를 검색하여 언어를 Korean으로 변경해 주세요.
그리고 우측 상단에 Save를 눌러 저장해 주세요.
8-2. Locale Language 번역할 다국어 변경 방법
Default Langage(Left), Locale Language(Right) 기본 언어를 한국어로 저장하고 나오면, Default Language와 Locale Language 모두 Korean으로 되어 있다.
기본 언어를 변경했으니, 반대로 Locale 언어를 변경해주자.
Edit Locale 
Locale Options 3. Add Locale Value 와 같은 방법으로 언어를 변경하고 Update를 눌러 저장해 주세요.
참고로, 위에서부터 순서대로 Language > Region 을 선택하세요!
언어를 먼저 설정해야 그 언어를 사용하는 Region이 필터링 되서 나옵니다~
Default Langage(Left), Locale Language(Right) 이제 Localization모드를 종료하고 Canvas로 돌아와서 기본 언어가 Korean 으로 바뀐 것을 확인 할 수 있습니다.
Preview 템플릿의 기본언어가 영어여서 아직 바꿀 것이 많지만,
초기 세팅을 잘 해놓으면 나중에 다국어 모드를 유용하게 사용할 수 있을 것 같습니다!