개발 배경: Date 객체의 혼돈에 맞서다
“UTC를 JST로 바꾸고 싶다”, “서버 로그의 시간이 어느 나라 시간인지 모르겠다”.
엔지니어라면 누구나 한 번쯤은 ‘날짜와 타임존’이라는 진흙탕에 발을 빠뜨려 본 경험이 있을 것입니다. 특히 JavaScript의 Date 객체는 직관적이지 않은 부분이 많아 오랫동안 개발자들의 골칫거리 중 하나였습니다.
지금까지는 Moment.js나 date-fns, Day.js 같은 외부 라이브러리를 도입하여 해결하는 것이 일반적이었습니다. 하지만 DevToolKits를 개발하면서 저는 스스로에게 한 가지 제약을 걸었습니다. **“단 한 곳의 시간 변환을 위해 수십 KB의 라이브러리를 사용자가 다운로드하게 할 필요가 있는가?”**라는 질문입니다.
“모던 브라우저의 표준 기능만으로도 충분히 가볍고 경쾌한 타임존 변환 도구를 만들 수 있을 것이다.” 이 개인적인 ‘도전장’에서 타임존 변환 도구의 개발은 시작되었습니다.
기술적 도전: 표준 API를 극한까지 활용하기
우리가 주목한 것은 브라우저에 기본 탑재되어 있는 Intl(Internationalization API)입니다.
1. Intl.DateTimeFormat을 이용한 ‘정확한 분해’
특정 타임존의 일시를 ISO 8601 형식으로 출력하는 것은 표준 API만으로는 의외로 까다롭습니다. 그래서 formatToParts를 사용하여 일시를 파츠 단위로 해체한 뒤 재조립하는 방식을 채택했습니다.
const formatter = new Intl.DateTimeFormat('en-CA', {
timeZone,
hour12: false,
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
// 연, 월, 일 등의 파츠를 개별적으로 추출
const parts = formatter.formatToParts(date).reduce((acc, cur) => ({
...acc, [cur.type]: cur.value
}), {} as any);이 ‘일단 분해한 뒤 원하는 모양으로 다시 조립한다’는 접근 방식을 통해 무거운 라이브러리를 전혀 쓰지 않고도 완벽한 포맷 처리를 구현해 냈습니다.
2. 동적 오프셋 추출 해킹
타임존 변환에서 가장 골치 아픈 것은 “JST는 +09:00” 같은 오프셋(차이) 정보입니다. 이를 직접 딕셔너리로 관리하면 서머타임 같은 변경 사항에 유연하게 대응할 수 없습니다.
그래서 timeZoneName: 'shortOffset' 옵션으로부터 브라우저가 알고 있는 최신 오프셋 정보를 추출하고, 이를 파싱하여 결합하는 로직을 구현했습니다.
// 브라우저가 가지고 있는 '그 순간'의 시차 정보를 가져오기
const offsetName = new Intl.DateTimeFormat('en-US', {
timeZone,
timeZoneName: 'shortOffset',
}).formatToParts(date).find(p => p.type === 'timeZoneName')?.value;이를 통해 “항상 OS나 브라우저가 가진 최신 타임존 데이터를 그대로 활용할 수 있다”는 강력한 장점을 얻게 되었습니다.
‘아무것도 하지 않음’이 선사하는 최고의 속도
이 도구는 페이지를 여는 그 즉시 사용할 수 있습니다.
무거운 스크립트가 파싱되길 기다릴 필요도, 서버 API에 요청을 보낼 필요도 없습니다.
브라우저가 원래 가지고 있던 능력을 최대한 끌어냄으로써 **‘라이브러리 불필요’ 및 ‘의존성 제로’**라는, 엔지니어가 꿈꾸는 궁극의 경량 도구를 완성했습니다.
마치며
타임존 변환 도구는 저에게 ‘브라우저 표준 기능의 가능성’을 다시금 확인시켜 준 프로젝트였습니다.
“라이브러리를 추가하기 전에 먼저 표준을 의심하라.” 이런 개발자의 자존심이 이 도구의 가벼운 동작으로 이어졌습니다.
전 세계의 시간을 더 가깝고 가볍게. 그 놀라운 속도를 직접 한번 경험해 보시기 바랍니다.