부동산 정보를 보면 면적 표기가 섞여 있습니다.
공고문은 ㎡, 대화는 평 단위를 쓰는 경우가 많아서 계산 실수가 자주 나옵니다.

문제: 왜 면적 비교가 자주 헷갈릴까?

1) 단위가 섞여서 바로 비교가 어렵다

84㎡와 25평은 감으로 비교가 쉽지 않습니다.

2) 가격 비교까지 하려면 계산 단계가 늘어난다

면적만 바꾸는 게 아니라 평당가(원/평)도 같이 봐야 매물 판단이 가능합니다.

3) 양방향 입력에서 값 꼬임이 생기기 쉽다

㎡를 바꿔서 평이 갱신되고, 다시 평 입력 이벤트가 연쇄 실행되면 UX가 불안정해집니다.

원리: 기준 상수 + 입력 잠금 + 가격 분기

1단계: 변환 상수 고정

  • 기준: 1평 = 3.305785㎡
  • ㎡ → 평: m2 / 3.305785
  • 평 → ㎡: pyeong * 3.305785

2단계: 입력 잠금(lock)으로 루프 차단

한쪽 입력을 프로그램적으로 갱신할 때는 lock=true로 재진입 이벤트를 막습니다.

3단계: 평당가는 선택 입력으로 분리

가격이 없으면 변환만 표시하고, 가격이 있으면 총액 ÷ 평으로 평당가를 추가 계산합니다.

핵심 코드

const FACTOR = 3.305785;
let lock = false;

const render = (source = 'm2') => {
  const m2Raw = Number(m2Input.value || 0);
  const pRaw = Number(pyeongInput.value || 0);
  const price = Math.max(0, Number(priceInput.value || 0));

  if ((m2Raw <= 0 && pRaw <= 0)) return setIdle('㎡ 또는 평 중 하나를 0보다 크게 입력하세요.');

  let m2 = 0;
  let p = 0;

  if (source === 'pyeong') {
    p = Math.max(0, pRaw);
    m2 = p * FACTOR;
  } else {
    m2 = Math.max(0, m2Raw);
    p = m2 / FACTOR;
  }

  lock = true;
  m2Input.value = m2.toFixed(2).replace(/\.00$/, '');
  pyeongInput.value = p.toFixed(2).replace(/\.00$/, '');
  lock = false;

  if (price > 0) {
    const per = price / p;
    outPricePer.textContent = `${Math.round(per).toLocaleString('ko-KR')}원`;
  }
};

핵심은 양방향 입력 동기화 안정성과 가격 계산 분기 처리입니다.

예외 처리 포인트

  • 면적 0 이하 입력: 계산 중단 + 안내 메시지
  • 비정상 숫자(NaN) 입력: 유휴 상태로 복귀
  • 가격 미입력: 평당가를 -로 처리해 오해 방지
  • 복사 API 실패: textarea + execCommand('copy') 폴백

내부 링크

요약

평수 계산기 로직의 핵심은 4가지입니다.

  • 1평=3.305785㎡ 상수로 변환 기준 고정
  • ㎡/평 양방향 입력을 lock으로 안정화
  • 가격 입력 유무에 따라 평당가 계산 분기
  • 복사·초기화·유휴 메시지로 실사용 UX 보완

FAQ

Q1. 84㎡는 몇 평인가요?

약 25.41평입니다.

Q2. 평당가는 어떤 공식으로 계산하나요?

총액(원) ÷ 면적(평)입니다.

Q3. 전용면적과 공급면적 중 무엇을 넣어야 하나요?

비교 목적에 따라 다릅니다. 실사용 비교는 전용면적, 공시/분양 기준 비교는 공급면적을 많이 사용합니다.