맥을 사용하는 유저라면 다들 아마도 “기획서.pdf”가 윈도우 컴퓨터에서 “ㄱㅣㅎㅚㄱㅅㅓ.pdf”로 바뀌는 경험을 해보았을 것이다. 이 현상은 유니코드의 정규화(normalization) 방식의 차이로 인해 발생한다. 맥에서는 NFD로, 윈도우나 리눅스에서는 NFC 방식으로 파일명을 저장해서 발생하는 것이다.
사실 파일 내용 자체에 이상이 생기는 건 아니라서 큰 문제는 아니지만, 제목이라고 할 수 있는 파일명이 저렇게 깨져서 보이는 것은 아무래도 불편이 크다. 이 문제를 해결하기 위해서 이전에 C언어로 unicode_norm이라는 CLI 툴(이전 글 링크)을 만든 적이 있지만 역시 사용자들에게 로컬에 설치하라고 하는 것부터가 약간의 장벽인 것 같다.
그런 의미로 웹 브라우저에서 실행되는 유니코드 파일명 정규화 프로그램을 만드는 게 어떨까라는 생각으로 웹 버전을 만들게 되었다. 웹사이트에 접속만 하면 되서 정말 간단하게 실행이 가능하다. 파일이 서버에 업로드되지는 않고, 전부 브라우저 내부에서 로컬로 처리되기 때문에 파일 유출에 대한 걱정을 하지 않아도 될 것이다.
웹사이트 링크: https://unicode-norm.guessme.info/ko
사실 매우 간단한 프로그램이긴 하다. 브라우저의 자바스크립트에서 이미 문자열에 대해서 normalize 함수를 제공해주고 있기 때문에 그것을 그대로 쓰기만 하면 됐다. 별다른 라이브러리 없이 “한글”.normalize(“NFD”) 같은 방식으로 처리가 가능하다. HTML의 input type=”file”에서 선택된 파일의 파일명을 읽는 것이 가능하고, 자바스크립트로 로컬에서 파일 다운로드를 하는 것도 쉽게 가능하기 때문에 기능 구현 자체는 전혀 어렵지 않다. (물론, 브라우저의 버그로 인한 것인지 MacOS의 Chrome 및 Firefox에서는 input type=”file”이 항상 파일명을 NFD 형식으로 읽는 현상을 발견했다. Safari에서는 파일명을 원본 그대로 읽어서 해당 문제는 없었다)
아주 간단한 프로그램이지만, 그렇다고 공을 들이지 않은 것은 아니다. 이번에 공을 들인 부분은 번들 사이즈를 최소화하는 것, 다국어 지원 그리고 검색 엔진 최적화이었다.
가끔씩 특정 프레임워크의 예찬론자(?)를 만나는 경우가 있다. “요즘 개발하는데 React를 안 쓴다고?”, “이번에 새로 나온 xx 프레임워크가 아주 좋다더라” 등의 이야기를 듣게 되는데, 사실 React나 프레임워크 등을 쓰면 편한 것은 맞다. 나도 프레임워크를 쓰는 것은 좋아하지만, 그렇지만 프레임워크를 쓰게 되면 번들 사이즈가 불필요하게 커지는 부작용도 발생한다. 커지는 번들 사이즈는 네트워크 트래픽도 많이 차지하게 될 것이고, 로딩 시간에도 악영향을 끼칠 것이다. 그래서 간단한 프로그램에는 되도록 프레임워크를 사용하지 않고, 어느 정도 복잡한 프로그램에는 프레임워크를 사용하려고 하는 편이다.
이번처럼 매우 간단한 프로그램을 만드는데, 여기에다가 React를 쓴다거나, NextJs를 쓴다거나 하는 것이 너무 과한 것처럼 느껴졌다. “닭 잡는데 소 잡는 칼을 쓴다”라는 속담이 어울리는 상황이다. 이런 이유로 html + css + vanilla javascript로 만들게 되었다. 워낙 웹 관련 기술이 많이 발달을 해서 vanilla javascript로 개발을 해도 그렇게 큰 불편은 느껴지지 않았다.
하지만 문제는 다국어 지원(internationalization)이였다. “2개의 프로그램을 만드는 것”보다는 “1개의 프로그램을 만들고 거기에 여러 개의 언어 지원이 가능하도록 해주는 것”이 보다 손쉽게 유저를 늘릴 수 있는 방식을 것이다. 하지만 다국어 지원을 어떻게 해야하는가? 이번에 만드는 프로그램은 매운 단순한 정적인 웹사이트(static site)이기 때문에, 다국어 지원을 가능하게 하기 위해서는 클라이언트 사이드에서 문자열을 치환을 해주거나(client side rendering), 빌드할 때 여러 벌의 언어로 사이트를 생성을 해야할 것이다(static site generation, SSG). 클라이언트 사이드에서 문자열을 치환해주는 것은 검색엔진 최적화 측면에서 불리한 것 같아서 빌드 시 생성으로 결심했다.
하지만, 문제는 미니멀한 정적 사이트 생성 툴을 찾기가 어려웠던 것이다. SSG를 해주는 유명한 프레임워크들은 NextJs, Astro 등이 있었는데, 전부 React라던가, Vue 등의 프레임워크를 쓰는 것이 강제되고 있었다. 그렇게 되면 다시 또 “번들 사이즈를 최소화”하겠다는 원칙이 어긋나게 된다. 결국은 정적 사이트 생성 툴을 직접 만들어서 직접 여러 벌의 언어의 html을 생성해주는 기능을 구현하게 되었다.
이번에 이런 툴들을 만들면서 상당히 재미를 느꼈다. 거기다가 다음에 또 뭔가 간단한 프로그램을 만들 때도 재사용할 수 있을 것이기 때문에 꽤 마음에 든다. 지금은 HTML에 대해서만 치환을 해주고 있어서, 자바스크팁트 코드 내부에 번역이 필요한 문자열을 넣을 수 없는 문제점이 있다. 그래서 지금은 HTML 내부에 문자열을 심어 놓은 뒤, 자바스크립트에서 읽어오는 방식으로 처리를 했는데, 이것이 좋은 방식인지는 잘 모르겠다. 내가 만든 미니멀한 internationalization static site generation 툴이 많이 다듬어지면 오픈소스로도 공개하고 싶다.
제 글을 읽어주셔서 감사합니다.
답글 남기기