객체 매핑 설계로 코드 줄이기: 자바스크립트 단위 변환기(Unit Converter)

작성자:

안녕하세요!

우리가 웹 서핑을 하거나 해외 직구 사이트를 이용하다 보면 가장 먼저 마주하는 난관이 무엇일까요? 바로 한국과는 다른 ‘단위’ 시스템입니다. 미국의 인치(inch)나 파운드(lb), 혹은 부동산 사이트의 제곱미터(m2)와 평수 사이에서 우리는 늘 계산기를 두드리곤 합니다. 매번 포털 사이트에서 검색하는 번거로움을 해결하기 위해, 이번에는 우리 블로그에 직접 설치해서 언제든 꺼내 쓸 수 있는 ‘나만의 자바스크립트 단위 변환기’를 제작해 보았습니다. 이번 프로젝트는 단순한 계산기 구현을 넘어, 수많은 변환 공식을 어떻게 하면 ‘클린 코드’로 관리할 수 있을지에 대한 기술적인 고민을 깊게 담았습니다. 14번째 프로젝트인 타자 게임에서 로직의 흐름을 배웠다면, 이번 15번째 프로젝트에서는 데이터의 구조화를 배우는 중요한 변곡점이 될 것입니다.

1. 프로젝트 기획 및 설계: If문 지옥을 탈출하는 객체 매핑(Mapping)

자바스크립트 단위 변환기를 만들 때 가장 먼저 하는 실수는 모든 단위 조합에 대해 조건문을 만드는 것입니다. 예를 들어 if (단위 == ‘cm’ && 목표 == ‘inch’)와 같은 식이죠. 하지만 단위가 10개만 되어도 조합해야 할 조건문은 기하급수적으로 늘어납니다. 이러한 방식은 코드의 가독성을 해칠 뿐만 아니라, 새로운 단위를 추가할 때마다 기존 코드를 전부 수정해야 하는 치명적인 단점이 있습니다.

저는 이번 프로젝트에서 ‘2단계 변환 엔진(2-Step Conversion Engine)’이라는 아키텍처를 설계했습니다.

  1. 입력값 → 기준 단위(Base Unit): 사용자가 어떤 단위를 입력하든, 해당 카테고리의 표준이 되는 단위(길이는 Meter, 무게는 Kilogram)로 먼저 환산합니다.
  2. 기준 단위 → 목표 단위: 환산된 표준값을 다시 사용자가 원하는 목표 단위로 나눕니다.

이 방식을 사용하면 모든 단위 간의 상관관계를 일일이 계산할 필요 없이, 각 단위가 ‘표준 단위에 비해 얼마나 큰가’에 대한 비율(Ratio)만 정의하면 됩니다. 이것이 바로 객체 지향적 설계의 핵심이자 유지보수의 효율성을 극대화하는 전략입니다.

2. 자바스크립트 단위 변환기 메인 화면

자바스크립트 단위 변환기 메인 화면

3. 핵심 로직 분석: 데이터 기반 프로그래밍

const unitRatios = {
    length: {
        m: 1,      // 기준 단위
        cm: 0.01,  // 1cm는 0.01m
        inch: 0.0254, // 1인치는 0.0254m
        mile: 1609.34 // 1마일은 1609.34m
    }
};

이번 프로젝트의 가장 중요한 부분은 unitRatios라는 객체입니다. 코드를 살펴보면 각 카테고리별로 기준 단위(값 1)를 중심으로 다른 단위들의 비율이 정의되어 있습니다. 이 구조의 아름다움은 확장성에 있습니다. 만약 우리나라에서만 쓰이는 ‘자’나 ‘리’ 같은 단위를 추가하고 싶다면, 로직을 수정할 필요 없이 이 객체에 값 하나만 추가하면 앱 전체가 즉시 업데이트됩니다.

또한, oninput 이벤트를 사용하여 사용자가 숫자를 입력하거나 단위를 선택하는 즉시 convert() 함수가 실행되도록 설계했습니다. 과거의 웹 앱들이 “확인” 버튼을 눌러야 결과가 나왔던 것과 달리, 현대적인 UX는 실시간 피드백을 중시합니다. 사용자의 흐름이 끊기지 않도록 배려하는 것이 프론트엔드 개발자의 중요한 역할임을 다시 한번 상기하며 작업했습니다.

// 실제 변환 로직
function convert() {
    const val = parseFloat(inputValue.value);
    if (isNaN(val)) {
        resultValue.innerText = "0";
        return;
    }

    const category = categorySelect.value;
    const from = fromUnitSelect.value;
    const to = toUnitSelect.value;

    // 1단계: 기준 단위로 변환 -> 2단계: 목표 단위로 변환
    const baseValue = val * unitRatios[category][from];
    const result = baseValue / unitRatios[category][to];

    // 결과 출력 (소수점 4자리까지, 천단위 콤마)
    resultValue.innerText = result.toLocaleString(undefined, {
        maximumFractionDigits: 4
    });
}

4. UI/UX 디자인: 다크 모드와 시각적 계층

디자인 측면에서는 다크 테마를 적용했습니다. 짙은 네이비( #1e293b) 배경은 눈의 피로도를 낮춰주며, 중요한 정보인 결과값에는 선명한 네온 블루 컬러를 적용하여 시선이 자연스럽게 머물도록 유도했습니다.

특히 모바일 환경에서의 사용성을 고려하여 입력창과 선택창의 크기를 충분히 확보(Padding)했고, border-radius: 15px를 적용해 부드러운 카드 스타일의 레이아웃을 완성했습니다. 결과 영역은 별도의 박스(background: #334155)로 구분하여 “이곳이 최종 목적지”임을 시각적으로 강조했습니다. 숫자가 길어질 경우를 대비해 toLocaleString 메서드를 사용하여 천 단위마다 콤마를 찍어 가독성을 높인 것도 빼놓을 수 없는 디테일입니다.

또한, addEventListener를 통해 사용자가 숫자를 입력하거나 단위를 변경하는 즉시 결과가 바뀌도록 구현했습니다. 과거의 웹 앱들처럼 별도의 “변환하기” 버튼을 누를 필요가 없는 실시간 피드백은 사용자가 느끼는 편의성을 크게 향상시킵니다.

5. 트러블슈팅 및 성능 최적화

프로젝트를 진행하며 가장 신경 썼던 부분은 입력값의 예외 처리였습니다. 사용자가 숫자가 아닌 문자를 입력하거나 빈칸으로 두었을 때 에러가 발생하지 않도록 isNaN() 함수를 통해 방어적인 코드를 작성했습니다. 또한, 소수점이 무한히 길어지는 문제(예: $1 / 3 = 0.333…$)를 해결하기 위해 maximumFractionDigits: 4 설정을 추가했습니다. 이는 실생활에서 사용하기에 충분한 정밀도를 보장하면서도 UI가 깨지는 것을 방지해 줍니다.

6. 자바스크립트 단위 변환기 테스트

Smart Unit Converter

➔
변환 결과
0

이번 자바스크립트 단위 변환기 프로젝트를 진행하며 저는 “코드는 단순히 명령의 나열이 아니라 데이터를 다루는 지도”라는 점을 다시 한번 깨달았습니다. 수십 개의 조건문을 객체 하나로 바꾸었을 때 얼마나 효율적으로 코드 작성이 되는지 확실히 알 수 있는 시간이었습니다.

처음에는 수많은 if…else 문으로 모든 단위를 처리하려다 보니 코드가 너무 지저분해졌습니다. 이를 해결하기 위해 각 단위의 환산 비율을 ‘객체(Object)’로 매핑하여 관리하는 방식으로 리팩토링했습니다. 덕분에 코드 가독성도 좋아지고 새로운 단위를 추가하기도 훨씬 수월해졌습니다. 단순 구현을 넘어 유지보수가 쉬운 코드를 고민해 볼 수 있었던 좋은 기회였습니다.

데이터를 매핑하고 변환하는 로직은 이전에 만들었던 [자바스크립트 환율 계산기]의 비동기 환율 데이터 처리 로직과 비교해서 공부하면 더 효과적입니다.

블로그를 방문해주시는 여러분도 이 변환기를 직접 사용해보시며, 조금이나마 도움이 되셨으면 좋겠습니다. 또한, 여러분만의 단위를 추가해서 자신만의 도구로 커스터마이징해 보시는 것도 추천드립니다.

댓글 남기기