디지돔의 새로운 언어 전환기 디자인 컬렉션

웹사이트 디자인을 해본 적이 있거나, 심지어 그저 생각해본 적이 있는 사람이라면 누구나 이 사실을 알고 있습니다: 아름답고 매력적인 디자인 사이에서 적절한 균형을 찾는 것은 쉽지 않습니다. 단순하고 효과적인 사용자 경험을 제공하는 디자인을 찾는 것도 쉽지 않습니다. 이는 웹사이트의 모든 요소에 해당되는 사실이며, 이 글에서는 언어 전환기 버튼에 집중함으로써 더욱 구체적으로 살펴보려 합니다.

웹 콘텐츠 번역 솔루션인 Weglot 언어 전환 버튼을 통해 사용자 경험(UX) Weglot 다국어 사이트를 구축할 수 있게 합니다. Weglot 통합하면 기본 버튼이 제공되는데, 이 버튼은 단순하면서도 효과적입니다. 하지만 창의적인 디자인을 원한다면 더 개성 있는 버튼을 원할 수 있습니다. 이 경우 기본 설정을 활용하거나 템플릿을 사용할 수 있으며, CSS에 능숙하다면 직접 버튼을 디자인할 수도 있습니다.

이 글에서는 저희 스위처 갤러리에서 찾아볼 수 있는 언어 전환기 템플릿들을 살펴보겠습니다. 더 많은 옵션을 원하신다면, Finsweet과 협업하여 제작한 저희 컬렉션을 확인해 보세요.

협업 정보

몇 년 전, 저희는 Webflow 내에서 잘 알려진 웹 에이전시인 Finsweet과 협력하여 어떤 Webflow 복제 및 재사용이 가능한 여러 언어 전환기 디자인을 개발했습니다. 심지어 어떤 기술에서도 사용할 수 있습니다. 이 언어 전환기들은 모든 종류의 사이트에서 8,000회 이상 복제되며 큰 성공을 거두었습니다!

그러나 점점 더 많은 디자이너, 특히 웹 에이전시 팀은 개발하는 웹사이트의 사용자에게 독특한 경험을 제공하기 위해 자체 스위처를 조정하거나 디자인하는 등 틀에서 벗어난 생각을 하기 시작했습니다.

디지돔(Digidop)의 경우도 마찬가지입니다. 2021년 설립된 이 웹 에이전시는 Webflow 전문 프랑스 에이전시 중 최초로, 그리고 유일하게 트리플 인증( Webflow , 클라이언트 퍼스트, Webflow 리더) Webflow . 이후 다양한 분야의 고객사를 대상으로 60개 이상의 웹 프로젝트를 완료했으며, 무료 콘텐츠와 온라인 아카데미를 통해 노하우를 공유해 왔습니다. 에이전시의 두 창립자인 플로리안과 토마스는 Weglot 가장 활발한 파트너 중 하나로, 창립 초기부터 함께해 왔습니다. 그들은 다양한 문서와 영상을 통해 Weglot 대한 전문 지식을 Weglot 공유해 왔을 뿐만 아니라, 무엇보다도 Weglot 대한 실질적인 피드백을 항상 기꺼이 제공해 주었습니다. 이는 저희가 도구를 지속적으로 개선할 수 있게 해준 소중한 자산이었습니다.

에이전시와 협력하여 새로운 언어 전환기 컬렉션을 제공하려고 생각했을 때, Digidop 팀의 경험과 비판적이고 기술적인 안목이 유익한 협업으로 이어질 것이라는 확신이 들었습니다.

따라서 첫 번째 단계는 Weglot Digidop 팀이 스위처의 기술적 통합과 동작 방식을 개선하여 최대한 매끄럽게 만드는 방법을 고민하는 것이었습니다. 그 다음에는 Digidop 팀의 예술적·디자인적 역량을 발휘하여 5가지 언어 스위처 디자인을 구상해냈으며, 이를 여기서 상세히 소개해 드리겠습니다.

웹사이트에 적용할 5가지 언어 전환기 디자인

미니멀리즘과 세련된 라인이 최근 웹에서 큰 트렌드로 자리잡았습니다. 디지돔의 첫 번째 언어 전환기 세트가 바로 이 트렌드를 따르고 있습니다. 기본적으로 Weglot 제공하는 것과 매우 유사한 단순한 드롭다운 형태이지만, 매우 간결한 라인을 자랑합니다. 사용자가 다루기 쉬울 뿐만 아니라 무엇보다도 모든 웹사이트 디자인에 적용 가능한 보편성을 갖추고 있습니다.

UX 측면에서 간결함을 유지하기 위해 두 번째 언어 전환기를 소개합니다. 언어명과 화살표만 표시되며 그 외에는 아무것도 없습니다. 이 언어 선택 버튼은 보편적으로 접근 가능하며 사이트 디자인을 복잡하게 만들지 않습니다. 단순하고 효과적이며 눈에 거슬리지 않습니다.

이러한 매우 단순한 디자인의 한계 중 하나는 사이트가 다수의 언어를 제공할 때 발생합니다. 언어 전환기는 단순함을 유지해야 하며 쇼핑 목록처럼 보이지 않아야 합니다. 간결한 디자인을 유지하면서 이 문제를 해결하기 위해 Digidop 에이전시는 이 세 번째 언어 전환기를 개발했습니다. 단순히 언어를 클릭하면 언어 선택 창이 열리도록 설계되었습니다. 대형 창 형태의 메뉴 역시 최근 웹사이트 트렌드입니다. 이 언어 전환기는 다국어 사이트에 이상적입니다.

지난 몇 달간 웹 서핑을 하다 보면 색상이 매우 적거나, 심지어 강한 대비를 이루는 두 가지 색상만 사용한 사이트를 접했을 것입니다. 아름답고 효과적인 결과를 얻으려면 요소를 깔끔하게 정리하는 데 주의를 기울여야 합니다. 바로 이 점이 네 번째 언어 전환기가 해결하고자 하는 과제입니다. 여기서는 전등 스위치처럼 하나를 클릭하여 언어를 선택합니다. 물론 이 디자인은 두 가지 언어만 제공하는 경우에 가장 효과적입니다.

같은 맥락에서 일부 사이트에서는 대문자까지 사용하는 등 크고 때로는 대담한 글꼴을 사용하여 거칠고 투박한 양색 접근 방식을 추진하고 있습니다. Citadium 사이트가 바로 그런 사이트입니다. 이러한 트렌드를 바탕으로 디지돕 팀은 이 다섯 번째이자 마지막 스위처를 내놓았습니다. 2개 또는 많은 수의 언어에 사용할 수 있으며 사용자가 쉽게 액세스할 수 있도록 보장합니다.

‍

이 언어 전환기는 여러분이 사용하고, 가지고 놀고, 심지어 영감을 얻을 수 있도록 설계되었습니다. 여러분의 디자인과 UX에 맞게 복제하고 커스터마이징할 수 있습니다. 이번 새로운 콜라보레이션에서는 디지돕의 추천을 바탕으로 이 컬렉션을 한 단계 더 발전시켜 프론트엔드에서 재사용할 수 있는 기회를 제공했습니다. 또한 프로젝트의 목업 단계에서도 자유롭게 사용할 수 있습니다.

디지돕의 공동 창립자인 토마스 라본이 이 동영상에서 이 협업의 모든 비밀을 공개하고 Figma에서 언어 전환기를 직접 사용하는 방법을 설명합니다. 여기에서 Figma 파일을 찾을 수 있습니다.

그러면, 과감히 도전하여 이 언어 전환기 템플릿을 Webflow 바로 재사용하고 싶다면, 여기에서 복제 가능한 모든 컴포넌트를 찾을 수 있습니다. 디지돔(Digidop)의 공동 창립자인 플로리안 보델로(Florian Bodelot)가 이 언어 전환기 사용법을 안내해 드릴 것입니다.

마무리하며

이제 웹사이트 디자인 프로젝트에서 이러한 구성 요소를 재사용하는 것은 여러분에게 달려 있습니다. 피드백, 기술 지원 및 뛰어난 디자인 기술을 제공한 Digidop 에이전시 팀에 감사의 말씀을 전합니다. 프로젝트를 더욱 발전시키는 데 도움이 될 교육 콘텐츠도 잊지 말고 확인해 보세요.

웹 디자인이 끊임없이 진화함에 따라 새로운 언어 전환기 컬렉션을 출시할 계획입니다. 디자인 아이디어가 있으시면 주저하지 마시고 알려주세요.