워드프레스 다단계 드롭다운 내비게이션 드릴다운 메뉴

한국어 콘텐츠로 된 워드프레스 사이트에 영어 버전을 추가하여 한글 텍스트를 영어 번역으로 교체하는 작업을 진행했습니다. 과거에는 전문 번역가를 고용할 경우 번역비 부담이 커서 다국어 사이트를 구축하는 것이 쉽지 않았지만 이제는 챗GPT로 사실상 무료로 번역할 수 있어 외국어 버전을 추가하는 사이트들이 늘어나고 있습니다.

WPML과 챗GPT를 사용하여 워드프레스 다국어 사이트 만들기 - 워드프레스 정보꾸러미

워드프레스 다단계 드롭다운 내비게이션 드릴다운 메뉴

사이트는 엘리멘터로 제작되었는데, 코딩으로 다단계 드롭다운 내비게이션(드릴다운 메뉴)이 구현되어 있었습니다. 

첫 번째 드롭다운 메뉴에는 상위 페이지(부모 페이지)들이 표시되고, 상위 페이지 항목을 선택하면 해당 페이지의 하위 페이지(자식 페이지)들이 두 번째 드롭다운 메뉴에 표시되는 형식으로 작동했습니다.

문제는 한국어 메뉴 항목들을 영어로 번역하면 메뉴 칸을 벗어나는 현상이 발생했습니다. 

이 때문에 이 문제를 해결하도록 코딩을 새롭게 하여 플러그인을 만들어게 되었습니다. 영어 버전에서는 메뉴 최소 너비를 늘리고 모바일에서는 2줄로 표시되도록 하는 등 기능을 추가했습니다.😄

기존 코드는 jQuery로 되어 있었는데, jQuery는 사이트 속도에 영향을 미칠 수 있어서 바닐라 자바스크립트로 재작성했습니다.

상위 페이지 메뉴를 선택하면 해당 상위 페이지에 속한 하위 페이지들이 표시되도록 하는 메뉴를 연동형/캐스케이딩 드롭다운(Cascading/Dependent Dropdowns) 또는 다단계 드롭다운 내비게이션(Multi-level Dropdown Navigation)이라고 합니다. 브레드크럼과 비슷한 형식으로 표시되어 브레드크럼 드롭다운 내비게이션(Breadcrumb Dropdown Navigation)이나 계층을 따라 내려가며 선택하는 내비게이션 패턴이기 때문에 드릴다운 메뉴(Drilldown Menu)라는 용어도 사용된다고 하네요.

한국어는 압축적이기 때문에 이런 메뉴를 표시하기에 최적화된 것 같습니다. 하지만 영어로 번역하면 길이가 1.5배 이상 늘어나기 때문에 메뉴 범위를 벗어나는 경우도 발생합니다. (예를 들어, 주차시스템에서 사용되는 용어인 "영상유도위치안내 시스템"을 영어로 번역하면 "Video-Based  Parking Location Guidance System" 등과 같이 번역할 수 있는데, 길이가 거의 두배 가까이 늘어가게 됩니다.😄 번역 텍스트의 길이가 늘어나는 경우 챗GPT에 요구하여 가능한 한 짧게 번역을 시도하는 것도 하나의 방법일 수 있습니다.)

이런 드릴다운 메뉴를 구현하고 싶은 경우 챗GPT에 요구 사항을 자세히 제공하여 코딩을 요청해볼 수 있습니다. 챗GPT 등 생성형 AI를 잘 활용하면 이런 기능을 어렵지 않게 구현할 수 있을 것입니다. (코딩에 대한 기본적인 지식이 있으면 원하는 코드를 보다 수월하게 만들 수 있으리라 생각됩니다.)

마치며

워드프레스가 오래 전부터 해외에서 큰 인기를 끌었지만, 우리나라에서는 불과 몇 년 전만 해도 워드프레스를 배척하는 분위기가 강했습니다. 최근 몇 년 사이 수익형 블로그 운영을 위해 워드프레스를 시작하는 사용자들이 크게 증가했습니다.

워드프레스는 단순한 블로그뿐만 아니라 포트폴리오, 회사 홈페이지, 쇼핑몰, 인터넷 강의(LMS) 사이트 등 거의 모든 사이트 제작에 활용할 수 있습니다.

웹 디자이너인 경우 엘리멘터와 빌더나 아바다 등과 같은 다목적 테마 사용법을 익혀서 원하는 디자인의 사이트를 어렵지 않게 만들 수 있어 새로운 기회가 될 수 있습니다. 복잡한 기능의 경우 플러그인을 활용할 수 있고, 페이지 빌더나 테마의 기능 또는 플러그인으로 해결할 수 없는 경우 해당 부분만을 개발자에게 의뢰하는 것도 고려할 수 있습니다. 실제로 이런 방식으로 사이트를 제작하시는 디자이너분들이 계십니다.

참고

https://avada.tistory.com/3697

엘리멘터로 만든 워드프레스 사이트를 WPML으로 다국어 사이트 변환 작업

https://avada.tistory.com/3788

카페24 뉴아우토반 상품에서 뉴매니지드 워드프레스 상품으로 변경