내 코드에서 찾은 버그들

새 기능을 만들다가 기존 코드의 버그를 여럿 찾았습니다. 넷 다 몇 주 동안 방치돼 있던 것들입니다.

① 계산 과정이 벌어져 있었다

계산기의 풀이 과정을 보여주는 .calc-steps li가 이렇게 돼 있었습니다.

.calc-steps li {
  display: flex;
  gap: 12px;
}

왼쪽에 번호 배지를 붙이려고 flex를 썼습니다. 그런데 flex 컨테이너는 자식 요소를 전부 flex 아이템으로 만듭니다.

문장 안에 <sup>이나 <strong>이 있으면 그것들도 전부 별개의 아이템이 되고, gap: 12px가 그 사이사이에 전부 들어갑니다.

지수가 본체에서 떨어져 나와서 2 ⁴처럼 보였고, flex 아이템은 기본적으로 줄바꿈이 안 되니 모바일에서 화면 밖으로 나갔습니다.

.calc-steps li { display: block; }
.calc-steps li::before { display: inline-flex; vertical-align: -4px; margin-right: 10px; }

배지를 ::before로 옮기고 inline-flex로 바꿨습니다. <strong>을 쓰는 모든 계산기가 영향을 받고 있었습니다.

배경에 깔아둔 글로우 레이어에 max-width: 130%가 걸려 있었습니다. 375px 화면에서 좌우로 각각 56px씩 삐져나갔습니다.

1차로 100vw로 고쳤습니다. 화면 폭을 넘지 않게 한 거죠. 그런데 768px 창에서 여전히 8px이 남았습니다.

100vw는 스크롤바 폭까지 포함합니다. 세로 스크롤바가 있는 페이지에서는 실제 콘텐츠 영역보다 항상 큽니다.

max-width: 100%;   /* 부모 폭 기준 — 스크롤바와 무관 */

여기서 더 중요한 걸 배웠습니다. 저는 scrollWidth > clientWidth로 가로 스크롤 여부를 확인하고 있었는데, 이걸로는 부족합니다. 실제로 scrollLeft를 밀어보고 0이 아닌 값이 남는지 확인해야 합니다.

d.scrollLeft = 999;
var actuallyScrolled = d.scrollLeft;   // 0이면 스크롤 안 됨
d.scrollLeft = 0;

1차 수정 때 scrollWidth만 보고 "고쳤다"고 판단했다가 다시 돌아왔습니다.

관련 계산기 목록을 정의한 배열에서 '/vat-calculator/' 키가 두 번 선언돼 있었습니다.

'/vat-calculator/' => ['/fee-calculator/', ...],
...
'/vat-calculator/' => ['/percent-calculator/', ...],   // 앞의 것을 덮어씀

PHP는 경고 없이 조용히 뒤엣것으로 덮어씁니다. 문법 오류가 아니니 php -l도 통과합니다.

그래서 부가세 페이지에서 수수료 계산기 링크가 사라진 상태로 몇 주를 지냈습니다. 내부 링크 하나가 없어진 건 화면을 봐도 티가 안 납니다. 원래 없었던 것처럼 보이니까요.

지금은 배열 키 개수와 고유 키 개수를 비교하는 검사를 넣어뒀습니다.

이게 제일 아찔했습니다.

명절 날짜표를 만들려고 15년치를 뽑아서 검증하다가 걸렸습니다.

	우리 데이터	실제
2028년 한국 설날	1월 26일	1월 27일 (틀림)
2028년 중국 춘절	1월 26일	1월 26일 (맞음)

우리 데이터는 한국 음력이 아니라 중국 음력이었습니다.

음력 1일은 삭(달이 태양과 같은 방향에 놓여 완전히 가려지는 순간)이 든 날입니다. 그런데 이 "순간"을 어느 시간대로 판정하느냐에 따라 날짜가 갈립니다. 한국은 UTC+9, 중국은 UTC+8입니다.

삭이 한국 시간으로 0시~1시 사이에 걸리면, 중국 시간으로는 아직 전날입니다. 그해는 음력 1일이 하루 어긋나고, 그 뒤로 설날·추석이 전부 밀립니다.

널리 쓰이는 음력 변환 라이브러리 상당수가 중국 역법 데이터를 씁니다. 대부분의 해에는 결과가 같아서 티가 안 납니다.

여기서 15년치 명절 날짜표를 발행했다면 틀린 날짜를 퍼뜨렸을 겁니다.

표를 만들지 않기로 했습니다. 대신 왜 어긋나는지 설명과 한국천문연구원 확인 안내를 음력 변환기 페이지에 넣었습니다.

틀릴 수 있는 부분을 감추는 것보다 알려드리는 편이 낫다고 판단했습니다.

네 개의 공통점이 있습니다. 전부 화면에서 안 보였습니다.

그래서 다른 일을 하다가 발견했습니다. 명절 표를 만들려다 음력 오류를 찾았고, 계산기를 추가하려다 중복 키를 찾았습니다.

버그를 찾으려고 찾은 게 아니라, 기존 코드를 다시 건드릴 일이 생겨서 찾았습니다. 오래 안 건드린 코드가 맞다는 보장은 어디에도 없습니다.