모범 사례를 살펴보세요: Squarespace 다국어 사이트 디자인

최근 몇 가지 훌륭한 다국어 Squarespace 사이트 사례를 소개해 드렸습니다. 이러한 특정 페이지를 선택한 이유는 무엇일까요? 무엇이 이 페이지들을 차별화할까요?

이 사이트들은 정말 예쁘다.

전에도 말했지만 다시 한 번 말씀드리겠습니다: Squarespace 템플릿은 미적으로 매력적입니다. 스퀘어스페이스의 메인 웹사이트는 2017년에 웹비 어워드 (온라인 회사로서는 최고의 업적 중 하나)를 수상했으며, 그 이후로 브랜딩을 더욱 강화했습니다.

그리고 Squarespace 메인 사이트 자체가 매우 세련된 만큼, 사용자를 위한 플랫폼의 사이트 구축 옵션도 마찬가지로 세련된 것이 당연합니다. 간단히 말해, Squarespace는 자체 규칙을 따릅니다.

스퀘어스페이스 사이트 소유자는 2019년 이후에는 개인 사이트, 전자상거래 스토어(전자상거래 공급업체의 70%가 해외 판매가 수익성이 있다고 답함), 비즈니스용 사이트 등 사이트를 글로벌화하는데 관심이 있을 것입니다.

해외 진출을 결정했다면 사이트 콘텐츠에서 가장 먼저 고려해야 할 요소 중 하나는 언어입니다.

Squarespace를 사용하면 자신의 언어로 사이트를 매우 쉽게 구축할 수 있습니다. 원하는 템플릿을 설치한 다음 디자인 대시보드를 통해 직관적으로 액세스할 수 있는 글꼴, 색상, 간격 및 격자 옵션 등 다양한 디자인 매개변수를 가지고 놀 수 있습니다.

스퀘어스페이스 다국어

Squarespace에 부족한 한 가지 단순화 기능은 다음과 같은 기본 솔루션입니다. Squarespace 다국어 사이트.

페이지를 수동으로 복제하고 직접 번역하는 방법에 대한 지침을 제공하지만 포트폴리오와 같은 소규모 사이트에서는 이 솔루션이 효과가 있을 수 있지만 대규모 사이트에는 적합하지 않습니다. 또한 중복된 페이지는 검색 엔진에서 선호하지 않으므로 다국어 SEO에 적합한 솔루션이 아닙니다.

여기에서 다국어 SEO 모범 사례에 대해 자세히 알아보세요:

다음과 같은 통합 솔루션 사용 Weglot과 같은 통합 솔루션을 사용하는 것이 훨씬 빠르고 에너지를 절약할 수 있는 솔루션입니다.

스퀘어스페이스 다국어 디자인

그러나 사이트를 번역하고 나면 번역된 버전이 화면에 표시되는 방식과 원본 버전이 표시되는 방식 간에 몇 가지 차이가 있음을 알 수 있습니다.

언어마다 다르게 보이는 것은 당연한 일입니다. 영어 단어 '쉘'은 다섯 글자에 불과하지만 프랑스어에서는 문자 수가 두 배인 '코퀼라주'로 번역됩니다.

예를 들어 사이트를 처음부터 새로 구축하는 경우와 같이 대부분의 웹 디자인 환경에서는 페이지를 번역하면 단락 정렬과 텍스트 블록이 서로 상호 작용하는 방식이 엉망이 될 수 있습니다. Weglot모든 Squarespace 템플릿과 호환되므로 일반적으로 이러한 문제가 발생하지 않으며, Squarespace 템플릿은 전문가가 고도로 적응할 수 있도록 설계되었습니다.

그렇다고 해서 다국어 Squarespace 사이트에 적합한 템플릿을 선택하고 사용자 정의하기 위해 따라야 할 몇 가지 기본 원칙이 없다는 의미는 아닙니다.

다국어 지원을 염두에 두고 Squarespace 디자인 인터페이스를 살펴봅니다.

1. 스퀘어스페이스 다국어 템플릿 시간입니다.

이미 알고 계시겠지만, Squarespace를 사용해 본 적이 있다면 디자인 매개변수가 템플릿으로 정리되어 있습니다. Squarespace 템플릿은 미니멀하고 이미지가 많으며 모바일과 데스크톱 화면 모두에 적합한 비율을 갖춘 것으로 유명합니다.

다음은 현재 Weglot 고객이 Squarespace 사이트를 다국어로 전환하기 위해 사용 중인 템플릿 중 일부입니다:

포르테: 깔끔한 라인과 대비

포르테는 화이트 큐브 콘셉트를 디지털로 구현한 것으로, 현대 미술 갤러리와 같은 모양과 느낌으로 제작되었습니다. 홈페이지에서 자동화된 배경 슬라이드쇼에 여러 이미지를 넣을 수도 있습니다.

표시되는 배경 이미지의 밝기에 따라 로고를 검정색에서 흰색으로(또는 그 반대로) 전환하는 사전 설정을 통해 포르테는 여러 가지 방식으로 시각적으로 조정할 수 있습니다.

포르테를 사용하여 디자인한 프라하에 기반을 둔 건축가 스테판 하블릭의 온라인 포트폴리오를 살펴보세요. 그의 영어와 체코어 사이트는 똑같이 날카롭고 유익한 정보를 제공합니다.

영향력: 이름에 모든 것이 담겨 있습니다.

Impact의 가장 큰 특징은 아마도 메인 타이틀 공간의 크기일 것입니다. 비즈니스 이름이나 1위 키워드는 Impact 홈페이지에서 진정한 주인공입니다.

로마와 베를린에 기반을 둔 변호사 발렌티나 메이어가 이탈리아어와 영어 고객 모두를 위해 아름답게 번역된 인터페이스를 유지하면서 개인 브랜드를 강화한 방법을 알아보세요:

브라인: 시차에 대한 힘

페이지에 약간의 움직임을 추가하면(특히 직접 프로그래밍할 필요가 없는 경우) 독자의 시선을 쉽게 사로잡을 수 있습니다. 이 점이 바로 Brine 템플릿 제품군이 Squarespace의 미니멀한 템플릿과 차별화되는 점입니다. Brine에서는 전체 화면 배너 이미지가 페이지의 나머지 콘텐츠보다 약간 느리게 스크롤됩니다.

웹 디자인 업계에서는 이 방법이 사이트에 3D 느낌을 주고 사용자를 더욱 몰입시킬 수 있는 가장 쉬운 방법 중 하나라는 사실은 널리 알려져 있습니다.

Brine의 또 다른 장점은 무엇인가요? 다국어 지원입니다.

(실제로 Squarespace의 다국어 사이트 데모 중 하나는 Brine 제품군의 템플릿인 Nueva로 제작되었습니다. 이에 대해서는 잠시 후에 설명하겠지만 여기에서 살펴볼 수 있습니다.)

프랑스의 그래픽 디자이너 엠마뉴엘 시아무스는 개인 갤러리 사이트에서 자신의 섬세한 그림에 생명을 불어넣기 위해 Brine을 선택했고, 그 효과는 정말 놀라웠습니다.

2. 텍스트가 포함된 이미지 대신 이미지 위에 텍스트 블록을 사용합니다.

포토샵, 일러스트레이터 또는 캔바를 즐겨 사용하는 사용자라면 배경 이미지나 텍스트가 포함된 기타 그래픽을 만드는 데 관심이 있을 것입니다. 예를 들어 많은 디자이너가 사이트 빌더에서 제공되지 않는 사용자 정의 글꼴을 사용하고자 할 때 이 작업을 선호합니다.

하지만 Squarespace 사이트 콘텐츠를 다국어로 만들 계획이라면 이 방법은 좋은 아이디어가 아닙니다.

Weglot 같은 앱은 이미지의 이름, 캡션, 이미지를 설명하는 키워드 등 이미지 주변의 메타데이터를 번역하여 Google 이미지와 같은 검색 엔진에 표시할 수 있지만정적 이미지 (일반적으로 JPEG, PNG 또는 GIF 형식)내의 텍스트는 번역할 수 없습니다.

( Weglot 대시보드에서는 언어별로 다른 이미지를 업로드할 수 있으므로 각 언어에 맞는 정적 텍스트로 이미지를 다시 만들고 싶다면 각 이미지를 해당 언어와 연결할 수 있는 공간이 있다는 점도 참고하세요).

하지만 솔직히 말해서 이미지 텍스트를 여러 언어로 포토샵하는 작업은, 특히 여러 언어가 있는 경우,길고 지루한 과정이 될 수 있습니다.

다음과 같이 텍스트가 이미 있는 나만의 Squarespace 배너 이미지를 미리 디자인하는 대신...

...이미지 자체를 업로드할 수 있습니다:

...Squarespace의 이미지 편집기를 사용하여 원하는 효과(흐림, 밝기 변경 등)를 적용하세요:

...이미지를 배너 이미지 (아래 스크린샷에 표시됨) 또는 블록의 배경 이미지로 추가한 다음 그 위에 바로 텍스트 블록을 추가합니다.

이렇게 하면 다국어 사이트를 만들 때 텍스트를 감지할 수 있고 문자가 남지 않도록 할 수 있습니다.

이미지에 대한 프로 팁: 처음부터 웹사이트를 디자인하는 데 익숙한 경우(모범 사례에서는 일반적으로 이미지의 크기가 "화면에 최적화"되어야 한다고 명시되어 있으므로 반드시 초고해상도가 아니어도 됩니다)에는 항상 그렇지는 않지만 Squarespace에서는 이미지가 클수록 좋습니다.

대부분의 Squarespace 템플릿은 큰 배너 (예: Brine, Bedford 또는 Hyde)가 중심이며, 때로는 배경 이미지 스타일로 페이지 전체를 차지하기도 합니다( Keene, Polaris 또는 Marta와 비슷합니다).

또한 기본 배너 이미지로 선택한 이미지가 모든 디바이스에서보기 좋게 표시되도록 하려면 페이지 상단의 아래쪽 화살표를 클릭하고 이 메뉴에서 다른 보기 형식으로 변경하여 태블릿 및 모바일 페이지를 미리 볼 수 있습니다:

3. 타이포그래피를 맞춤 설정합니다.

타이포그래피는 모든 언어적 맥락에서 웹 디자이너가 가장 중요하게 고려해야 할 사항 중 하나이며, 누군가가 사이트를 읽는다면 가능한 한 즐거운 경험을 선사하고 싶을 것입니다.

다국어 타이포그래피 결정과 관련하여 일반적으로 Squarespace 사이트를 다른 알파벳/스크립트를 사용하는 언어로 번역하지 않는 한 크게 걱정할 필요가 없습니다 . 이 경우라면 이 부분에 더 주의를 기울여야 합니다.

스퀘어스페이스는 매우 간소화되어 있으며, 대부분의 스퀘어스페이스 템플릿은 글꼴을 너무 많이 바꾸지 않을 때 가장 멋지게 보입니다. 대부분의 디자이너는 글꼴이 너무 많으면 안 된다고 말합니다(Canva의 타이포그래피 모범 사례 목록 9번에서 그 이유를 설명합니다).

다국어를 사용하는 Squarespace 사이트 디자이너에게는 희소식입니다. 이론적으로는 사용자 정의 CSS를 사용해야 하는 경우 언어마다 다른 글꼴을 지정할 수 있지만, 모든 언어에서 보편적으로 렌더링되는 글꼴을 사용하는 것이 눈과 디자인 작업에 훨씬 더 쉽습니다. 이렇게 하면 언어 간에 브랜딩의 일관성을 유지할 수 있으며, 이는 전 세계 고객에게 어필하려는 경우 매우 중요할 수 있습니다.

Google 글꼴 및/또는 Adobe 글꼴에서 사용 가능한 글꼴을 확인하여 시작할 수 있습니다(전자는 Adobe의 경우 무료이지만, 일반적으로 개인용으로 원하는 글꼴을 다운로드하려면 계정이 있어야 합니다).

이러한 글꼴 베이스에는 실제로 Squarespace에서 사용할 수 있는 것보다 더 많은 스타일이 포함되어 있지만, 여러 알파벳을 지원하는 글꼴 패밀리를 파악하는 가장 좋은 방법은 Squarespace에서 이를 수행할 수 있는 방법이 없는 것입니다.

예를 들어 Google 글꼴에서는 '언어' 메뉴에서 원하는 스크립트를 선택하면 어떤 글꼴이 어떤 스크립트를 지원하는지 확인할 수 있습니다.

(이 메뉴의 이름은 약간 오해의 소지가 있습니다. 실제로 옵션이 다음과 같은 이름이 아닌 언어의 이름이 아니라 스크립트 의 이름입니다. 예를 들어 아랍어는 일반적으로 아랍어 문자를 사용하지만 영어, 프랑스어, 독일어 및 기타 많은 언어가 라틴어 문자를 사용하지만 모두 라틴어에서 파생된 것은 아닙니다) 스크립트 이름을 공유하는 언어가 몇 가지 있습니다.

필요한 스크립트를 모두(또는 모두) 지원하는 글꼴을 찾았다면 Squarespace에서 사용할 수 있는지 다시 확인하세요. 여기에서 Squarespace의 전체 글꼴 목록을 확인할 수 있습니다.

4. 스퀘어스페이스 언어 전환 버튼을 사용자 지정합니다.

깃발 아이콘을 사용할지 여부를 결정합니다.

이는 때때로 어려운 결정이 될 수 있습니다. 전통적인 디자인 관점에서 보면 언어 선택 메뉴에서 국기를 언어와 연관시키는 것은 매우 직관적으로 보입니다. 사이트의 원래 홈페이지 언어가 전혀 기억나지 않더라도 시각적인 랜드마크가 되어 자신의 언어를 인식할 수 있기 때문입니다.

하지만 국기는 엄밀히 말해 언어가 아닌 국가를 나타낸다는 점을 기억하세요. 대부분의 언어는 두 개 이상의 국가에서 사용될 뿐만 아니라 많은 국가에서 두 개 이상의 공식 언어를 사용합니다.

예를 들어 인도 국기가 힌디어로 표시되는 것은 실용적인 의미가 거의 없습니다. 힌디어는 기술적으로 인도에서 가장 많이 사용되는 언어이지만 인도의 16개 공식 언어 중 하나에 불과하기 때문입니다 ! 이 경우 인도 고객에게 어필하려면 Squarespace 사이트를 이러한 지역 언어 중 하나 이상으로 번역해야 할 뿐만 아니라 다른 언어보다 상징적으로 선호하는 언어를 사용하지 않는 것이 좋습니다.

기본 탐색 메뉴에 포함하세요.

표준 Weglot 언어 전환 버튼은 매우 중립적이지만 사이트 전체 브랜딩을 최대한 일관성 있게 만들고 싶을 수 있으며, 언어 버튼을 이 전략의 일부로 만드는 가장 좋은 방법은 기본 탐색 메뉴에 포함시키는 것입니다.

이렇게 하면 사이트의 모든 페이지에서 항상 같은 위치에 표시되며 색상과 글꼴 스타일이 다른 탐색 버튼과 비슷해집니다.

스퀘어스페이스 사이트 편집기의 "페이지" 섹션으로 이동하여 이 작업을 수행할 수 있습니다. "기본 탐색" 아래에 기본 탐색 모음에 버튼을 추가할 수 있는 "+" 버튼이 표시되며, 이 버튼을 클릭하면 아래 스크린샷과 같이 작은 창이 나타납니다:

링크 제목을 링크가 연결될 언어 이름으로 지정하고 '링크' 콘텐츠 상자에 "Weglot" 뒤에 해당 언어의 두 글자 언어 코드를 입력합니다.

기본으로 돌아가기: 다국어 Squarespace의 성공을 위한 4가지 주요 사항

이제 Squarespace의 다국어 지원 디자인 기능 중 일부를 살펴보고 몇 가지 예를 살펴봤으니, Squarespace 사이트를 다국어 영역으로 가져올 때 염두에 두어야 할 사항을 요약해 보겠습니다:

• 템플릿을 현명하게 선택하세요. 템플릿 선택이 나머지 워크플로우를 정의한다는 점에서 이것은 모든 Squarespace 사용자가 내리는 가장 근본적인 결정입니다. 번역에서도 보기 좋은 템플릿을 선택해야 합니다.

• 텍스트를 이미지와 분리하세요. 사용자가 텍스트를 읽을 수 있도록 하려면 텍스트가 이미 있는 이미지를 업로드하지 말고, 텍스트가 없는 이미지를 배너 또는 미디어 항목으로 업로드하고 Squarespace의 여러 텍스트 블록 옵션을 사용하여 그 위나 주변에 입력하세요.

• 글꼴이 핵심입니다. 필요한 모든 스크립트에서 Squarespace에서 사용할 수 있는 글꼴을 사용하면 사이트 전체에서 모든 방문자에게 일관된 브랜딩을 제공할 수 있습니다.

• 버튼에 활기를 불어넣으세요. 사용자 정의된 언어 전환 버튼은 다국어 Squarespace 사이트에 더 자연스럽게 배치되고 어색해 보이지 않으며, 타겟 언어 사용자도 원래 언어 사용자만큼이나 고려되고 있다는 느낌을 받을 수 있는 또 다른 작은 디테일이 될 것입니다.

다른 CMS와 마찬가지로 Weglot Squarespace에서 정말 잘 작동합니다. 지금 무료 평가판을 사용해 보세요.

스퀘어스페이스 사이트에 Weglot 설치하는 방법을 알아보세요.