이 시스템을 만들기 전에 저는 이미 하단 <select> 태그를 이용한 기능을 만들어두었습니다. 그냥 다른 언어로 된 같은 게시물이 있으면 변수에 그 주소를 미리 적어두고, 그 언어를 선택하면 그 곳으로 링크해주는 기본적인 기능입니다. 구글 블로거(블로그스팟)일 때는 제가 문서 구조를 바꿀 수 없으니 어쩔 수 없이 이런 방식을 사용했습니다. 근데 지킬로 옮겼잖아요? 이제 할 수 있잖아요?
너무 하나하나 설명드리지는 않을게요. 웹 구조는 브라우저로 다 뜯어볼 수 있기도 하고요. 대충 어떤 생각으로 어떻게 만들었는지만 설명드리겠습니다.
구상
일단 스위치는 있고, localStorage로 테마 저장했던 것처럼 언어도 저장하면 될 것 같고, 테마에서 그랬던 것처럼 localStorage에서 정보 뽑아서 body에 dataset으로 기록해놓으면 될 것 같았습니다.1 그 상태에서 태그를 바꾸려면 어떻게 할까 고민했습니다. 이때 고려했던 것은 두 가지입니다. 자바스크립트 없이도 문서 구조가 완벽할 것, 유지 보수가 용이할 것. 마침 또 aria 속성들을 어떻게 번역해야 하나 고민하고 있었습니다. 자연스레 aria-label 처럼 html 속성에 적어 놓은 정보를 이용하는 방향을 생각하게 됐습니다.
포인트
Array.from(태그.attributes).filter(attr => attr.name.endsWith(문구)).reduce((arr, attr) => {
arr.push(attr.name);
return arr;
},[])
이 부분이 히트입니다. 어떤 태그 안에서 특정 문구로 끝나는 속성들만 골라서 배열로 만드는 부분입니다. 미리 클래스로 다국어 설정할 태그들을 걸러주고 그 안에서 저 위 코드로 다국어 정보를 골라낸 다음 진짜 속성 부분을 대체합니다.
예를 들어 <img alt="강아지" alt-ko="강아지" alt-en="Puppy"> 이런 식으로 적어놓는 거예요. 그래서 body의 dataset에 해당하는 부분이 속성의 뒤에 붙어있으면, 그 어미를 뺀 본 속성에 그 값을 넣어주는 식입니다. 본 값이 한국어인데 ko가 필요한 이유가 있습니다. 이게 링크 타고 이동하는 경우는 괜찮은데 언어 바꿔도 페이지는 바뀌지 않게 하는 경우(예를 들어 검색창 같은 경우) 다른 언어로 갔다가 다시 한국어로 오면 원래대로 못 돌아오더라고요.
태그 내용 같은 경우도 속성에 content-ko 이런 식으로 넣어주고 innerHTML을 바꿔주는 식으로 했습니다.
게시물은 별개 페이지로
이 방법은 대규모 변경에는 적합하지 않습니다. 클라이언트 사이드에서 돌아가기 때문입니다. 그래서 게시물 같은 경우는 따로 페이지를 작성하고, UI 정도만 이렇게 하시는 걸 권장드립니다. 또 if문으로 최대한 사용하지 않을 때는 자바스크립트가 동작하지 않도록 했습니다.