스퀘어스페이스에서 전환하기: 언어 버튼을 디자인하는 방법

이제 Squarespace 사이트를 다국어로 만들었습니다. 브라보, 칭찬합니다, 마브룩 -정말 멋집니다!

이제 어떻게 할까요?

최근 스퀘어스페이스에 대해 자주 언급하는 것을 보셨을 텐데요, 그 이유는 수많은 고객들이 스퀘어스페이스를 사용하고 있으며(심지어 전자상거래용으로도) 정말 훌륭한 성과를 거두고 있기 때문입니다.

우리가 본 최고의 Weglot Squarespace 사이트는 특히 "이제 무엇을 할까요?"라고 질문한 후 사이트의 세부 사항을 계속 다듬어 온 사이트입니다.

Weglot 사용의 장점 중 하나는 언어 전환 버튼 디자인에 유연성을 부여할 수 있다는 점입니다. 대부분의 웹 디자이너가 말하듯이 페이지에서 가져온 요소(플러그인, 애드온 또는 기타 앱 구성 요소)의 모양과 느낌을 완전히 제어할 수 있는 것은 드문 사치입니다.

사이트에 추가하는 앱이나 플러그인은 특정 방식으로 보이도록 미리 프로그래밍되어 있고 이를 만든 개발자의 브랜딩을 따르는 경우가 많습니다. 이렇게 하면 사용자는 플러그인 요소가 사이트의 고유 요소가 아니며 다른 곳에서 가져온 것임을 분명히 알 수 있습니다. 완벽하게 작동하는 위젯이라 하더라도 사이트의 다른 부분과 시각적으로 눈에 띄게 될 수 있습니다.

Weglot 그런 식으로 작동하지 않거나 적어도 그럴 필요는 없습니다. 스퀘어스페이스 사이트에 Weglot 설치하면 페이지 오른쪽 하단에 다음과 같은 언어 전환 버튼이 표시됩니다:

아주 기본적이죠? 이 1단계 언어 전환기의 기본 개념은 최대한 중립적인 디자인으로, 요란한 색상이나 거친 타이포그래피 없이 필요한 기능을 수행하는 명확하고 깔끔한 버튼으로 구성되어 있습니다.

그리고 많은 사람들이 기능적인 외관을 좋아하는데, 이는 완벽하게 괜찮습니다. 흰색 직사각형이 여러분과 여러분의 사이트에 어울린다면 이런 말이 있다는 것을 알고 있을 것입니다(그렇지 않을 수도 있지만 이제 알게 될 것입니다): "망가지지 않았다면 고치지 마라." (프랑스어로 "고장나지않았다면고치지말라"는 말도 있습니다.)

하지만 멋지고 깔끔한 사각형을 보고도 만족감에 젖어 있지 않다면 희망을 잃을 필요는 없습니다.

버튼은 어디에 넣어야 하나요?

'버튼 배치'라는 개념 자체가 사소하게 느껴질 수도 있지만, 하루에 얼마나 많은 버튼을 누르는지 생각해 보세요. 여기에는 스마트폰 키보드의 키도 포함됩니다. 지금은 2019년이고 우리의 손가락은 비누와 물보다 더 많은 버튼과 접촉할것입니다(역겹지만 사실입니다). 요점은 버튼은 어디에나 있다는 것입니다.

가능한 모든 독자가 사이트를 읽을 수 있도록 하는 것이 최우선 과제라면(특히 전환율을 높이거나 전 세계에서 사이트에 더 쉽게 접근할 수 있도록 하려는 경우라면 더욱 그렇습니다), 독자가 즉시 자신의 언어로 전환할 수 있도록 해야 합니다.

부수적인 문제.

네, 제대로 읽으셨습니다. 물론 크기 또한 중요한데, 작은 버튼은 눈에 잘 띄지 않으므로 클릭할 가능성이 더 낮습니다.

하지만 웹 디자인은 근본적으로 공간 퍼즐이며, 게임으로 생각하면 게임판은 좌우와 상하, 또는 원하는 경우 'X'와 'Y'라는 두 개의 주축이 있는 2차원 직사각형으로 제한되며, 웹사이트의 핵심은 많은 정보를 담을 수 있다는 것입니다. 이 제한된 공간에 링크, 이미지, 동영상 및 기타 재미있는 인터랙티브 요소를 모두 넣으면서 다른 요소를 가리지 않고 가장 중요한 요소를 돋보이게 만들 수 있는 방법은 무엇일까요?

페이지에서 요소의 위치, 즉 각 축을 따라 얼마나 멀리 떨어져 있는지가시청자가 해당 요소를얼마나 빨리 찾을 수 있는지와 해당 요소와 상호 작용할 가능성에 결정적인영향을 미친다는 사실을 뒷받침하는 연구 결과가 있습니다. 이 두 가지 조건이 반드시 인과관계가 있는 것은 아니지만, 클릭 유도 문안("CTA")이나 버튼 배치와 관련하여 사용자의 고유한 선호도를 고려할 가치가 있을 만큼 상관관계가 높습니다.

그렇다면 이 연구는 정확히 무엇을 말하는 것일까요?

당연히 사용자의 모국어 또는적어도 웹 검색에 가장 익숙한 언어는 웹 페이지와 상호 작용하는 방식에 매우 중요한 영향을 미칩니다.

머티리얼 디자인의 UI-UX 디자인 전문가들이 왼쪽에서 오른쪽으로 읽는 언어(예: 영어)와 오른쪽에서 왼쪽으로 읽는 언어(예: 아랍어 또는 히브리어)에서 어떤 웹 페이지 요소를 조정해야 하고 어떤 요소를 조정하지 않아야 하는지에 대한 심층적인 가이드를 발표했습니다.

이 글에서 자세히 설명하지는 않겠지만, 언어 방향을 조정하는 버튼보다 더 복잡한 시각적 요소(예: 아이콘)가 있는 경우 여기에서 확인할 수 있습니다.

즉, 우리가 익숙한 독서 방향이 다른 위치의 CTA에 대한 민감도에 영향을 미치는 이유에는 구텐베르크 다이어그램이라는 구체적인 심리적 설명이 있는데, 그 중 하나는 페이지의 요소를 보는 순서와 각 요소에 소비하는 시간 사이의 관계를 설명하는 구텐베르크 다이어그램입니다.

이 현상을 자세히 설명하는 웹상의 다른 많은 자료(예: 이 자료)가 있지만, Weglot 언어 전환 버튼을 기본적으로 페이지의 오른쪽 하단에 배치하기로 한 결정은 우연이 아니라고 말하는 것으로 충분합니다. 2차원 화면에서 이 위치는 터미널 영역에 해당하며, LTR을 읽는 사용자가 눈을 쉬고 제시된 CTA와 상호 작용할 가능성이 매우 높습니다. 문제의 CTA가 언어 전환 버튼인 경우, 사용자가 사이트에 액세스할 수 있는 방법을 찾는 데 큰 어려움이 없을 것입니다.

대체로 버튼을 배치하는 페이지의 측면은 사용자가 버튼을 얼마나 쉽게 찾을 수 있는지에 큰 영향을 미칩니다. 사이트의 초기 언어가 영어, 프랑스어, 스페인어, 중국어 간체 등 LTR 형식인 경우 버튼을 페이지의 오른쪽에 배치해야 합니다.

물론 아랍어, 히브리어, 페르시아어와 같은 RTL 언어로 초기 사이트를 구축하는 경우에는 그반대로 왼쪽에 해당 버튼을 배치하는 것이 좋습니다.

두바이 글꼴 웹사이트는 홈페이지의 기본 언어인 영어와 영어 페이지의 오른쪽 상단에 있는 버튼을 통해 선택할 수 있는 아랍어 모두에 대한 완벽한 예시를 제공합니다. 언어가 바뀌었을 때 이 방향성이 어떻게 달라지는지 주목하세요.

하지만 메뉴를 볼 수 있을까요?

대신 '기본 광학 영역' 영역에 넣으면 어떨까 하는 생각이 들 수도 있습니다. -이는 타당한 질문입니다.

이 섹션은 여전히 브랜드 또는 기타 프로젝트를위한 웹사이트이므로로고와 같은 영향력 있는 개인 식별자를 위해 이 섹션을 예약하는 것이 좋습니다.

그러나 터미널 영역과 마찬가지로 빈 공간이 많은 영역은 특히 페이지 상단에 가로 메뉴가 있는 경우(요즘 대부분의 웹사이트가 그러하죠) 버튼 배치에 좋은 후보입니다.
상단 메뉴 모음은 언어 전환 버튼을 배치하기에 매우 좋은 위치이며, 특히 Squarespace에서는 더욱 그렇습니다 .

스퀘어스페이스의 메뉴 버튼: 스타일화, 합성 및 현지화하기

스퀘어스페이스의 메뉴 모음에 Weglot 언어 전환 버튼을 통합하는 것은 매우 쉽습니다(어떤 종류의 메뉴 모음에도 적용되므로 언어 방향성이 작동 방식에 영향을 미치지 않습니다).

사이트 편집기에서 '페이지'를 클릭하면 다음과 같은 사이드바로 이동합니다:

'기본 탐색' 제목 옆의 '+' 기호를 클릭하면 기본 헤더 메뉴에 링크 및/또는 드롭다운 메뉴를 추가할 수 있습니다.

사이트에서 사용 가능한 언어를 기본 메뉴에 직접 옵션으로 포함할지 여부...

...또는 통합 드롭다운 메뉴의 요소로...

...프로세스는 동일합니다. 드롭다운 메뉴를 만드는 경우 기본 탐색 메뉴의 "+" 명령과 같이 링크를 추가할 수도 있으며, 사이트에 추가한 각 언어에 대해 다음 프로세스를 수행할 수 있습니다.

기본 메뉴 모음 또는 통합 드롭다운 메뉴에 링크를 추가하도록 선택하면 다음과 같은 팝업이 표시됩니다:

링크의 제목을 사이트를 변경하려는 언어의 이름으로 지정합니다. 물론 원래 사이트를 영어로 구축하는 경우 "Español"이 아닌 "Spanish"와 같이 원래 언어의 이름으로 해당 언어를 호출할 수도 있지만, 해당 언어를 사용하는 사람들이 더 쉽게 인식할 수 있도록 해당 언어의 고유 이름을 제목으로 사용하는 것이 좋습니다. 즉, '스페인어' 대신 'Español', '프랑스어' 대신 'Français' 등을 선택하는 것입니다.

다음으로, 이 제목이 연결되기를 원하는 링크를 입력해야 합니다. Weglot 스퀘어스페이스 사이트는 하위 폴더에 중복된 페이지가 아니라 각 언어에 대한 개별 하위 도메인으로 구성되어 있으므로 실제로는 별도의 URL로 연결되지 않습니다. 대신 "Weglot" 문자열 뒤에 작업 중인 언어의 두 글자 ISO 언어 코드를 입력하세요( 전체 목록은 여기에서 확인할 수 있습니다).

이 작업을 완료하면 언어 제목이 기본 메뉴에 완벽하게 통합된 것을 볼 수 있습니다...

...이 사람들처럼요.

다국어 Squarespace 사이트는 기본적으로 매끄럽고 멋진 디자인이 보장되며, 이는 클릭 앤 드래그만으로 쉽게 사이트를 다듬고 전문가처럼 보이게 하는 Squarespace 템플릿의 특성입니다.

물론 그렇다고 해서 사이트의 모양을 개인화하여 나만의 사이트를 만들려고 시도하는 것을 방해해서는 안 됩니다.

다국어 사이트의 경우 개인 브랜딩 요소를 버전 간에 일관되게 유지하는 것이 특히 중요하며, 이는 다국어 사이트 디자인의 기본 원칙중 하나로 이미지 색상 팔레트부터 타이포그래피 스타일, 버튼 스타일에 이르기까지 사이트 미학을 종합적으로 관리하는 것을 의미합니다. 언어 전환 버튼은 전체 스키마에서 핵심적인 부분이며, 버튼이 페이지의 전체적인 시각적 테마와 잘 어울려야 사이트가 더욱 아름다워집니다.

동시에 앞서 살펴본 것처럼 버튼이 다른 페이지 요소보다 조금이라도 눈에 띄어 사용자가 쉽고 빠르게 찾을 수 있도록 해야 합니다. 검색 가능성을 위한 차별성과페이지 품질을 위한 일관성 사이에서 어떻게 균형을 이룰 수 있을까요?

이것은 말 그대로 역설이지만 풀 수 없는 문제는 아닙니다. 다음은 창의적으로 배치되고 디자인된 언어 전환 버튼으로 영감을 주는 몇 가지 다국어 Squarespace 사이트입니다.

시쿠 프로젝트

시칠리아에 본사를 둔 시쿠 프로젝트는 이탈리아 현지 백년초 선인장의 섬유로 만든 혁신적인 주얼리 회사로(네, 백년초 선인장 섬유는 실제로 친환경적인 단단한 소재를 만드는 데 사용될 수 있습니다 ), 이중 언어로 된 웹사이트는 주얼리 제품만큼이나 세련되게 디자인되어 있습니다.

영어와 이탈리아어 사이를 오갈 수 있는 언어 전환 드롭다운 메뉴는 페이지 오른쪽 상단의 기본 탐색 메뉴에 (시각적으로 접근성이 뛰어난) 진주처럼 자리 잡고 있습니다.

익스페디션 수영

시쿠 프로젝트 웹사이트는 단색에 이미지가 많고 깔끔한, 우리가 흔히 상상하는 스퀘어스페이스 사이트의 모습과 비슷해 보입니다. 하지만 Squarespace 사이트는 다채롭고 엉뚱할 수도 있습니다. 브뤼셀의 Expedition Swim 프로젝트가 선택한 방식이 바로 그것입니다.

이 사이트의 목표는 지역 주민들이 새로 청소한 도시의 연못에서 가족들과 수영을 즐기도록 유도하는 것입니다. 장난스럽고 밝으며 물결 모양과 애니메이션으로 가득한 이 사이트는 (짐작하셨겠지만) 물을 연상시키며, 언어 전환기가 탐색 표시줄의 오른쪽 상단에 완벽하게 들어맞습니다.

드롭다운 클릭 없이 프랑스어, 영어, 네덜란드어의 세 가지 언어를 각각 보편적으로 인식할 수 있는 두 글자 언어 코드(FR, EN, NL)로 표시하여 사용자 친화적으로 만들었습니다. 시원한 여름 액티비티를 찾는 어린이부터 어른까지 누구나 2초 만에 사이트를 자신의 언어로 전환하는 방법을 쉽게 알아낼 수 있습니다.

SalesCandy

SaaS 스타트업 SalesCandy는 근본적으로 다문화 사회이며 본질적으로 다국어를 사용하는 말레이시아에 기반을 두고 있습니다. 이러한 비즈니스 환경에서는 다국어 사이트가 절대적으로 필요하며, SalesCandy는 모든 독자가 모국어에 액세스할 수 있도록 하기 위해 세심한 주의를 기울였습니다.

어떻게 이럴 수 있었을까요? 특히 두 가지가 있습니다. a) 언어 드롭다운 메뉴가 페이지 오른쪽에 멋지게 배치되어 있고, b) 언어 옵션이 기본적으로 다음과 같이 작성되어있습니다:

영감을 얻고 싶으신가요?

저희도 그러길 바랍니다. 다국어 사용자를 위해 Squarespace 사이트 또는 스토어를 시작하고 최적화할 준비가 되었다면 디자인 프로세스를 시작하는 방법과 세부 사항을 다듬은 후 Squarespace에서 글로벌화하는 방법에 대한 몇 가지 팁을 확인하세요.