👩‍🎨 UI 버그 - 상한선 설정

최근 한화의 투수 폰세 선수가 류현진을 넘어 최다 탈삼진 18개를 잡았다.🎉🥳🎊👏🏆

바로 확인하러 네이버에 들어갔는데...

UI 버그를 발견했다. 팀 하루 삼진 갯수 20개를 기록하자 그래프가 깨지며 뷰가 이상하게 출력되는 현상이 나타났다. 네이버가 삼진의 개수가 20개 이상에 대한 오류를 처리하지 않은 것이다. (누가 삼진 20개 나올 줄 알았겠어!!!!^^)

🛠 원인: 최대값 제한 없이 무조건 그리면 생기는 일

이 문제는 "의도하지 않은 데이터 범위"에 대한 예외처리 미흡에서 시작된다.

막대 그래프를 그릴 때, 대체로 다음과 같은 식을 쓰게 된다:

const width = (value / maxValue) * 100 + '%';

문제는 maxValue를 고정값으로 하거나, 혹은 maxValue 없이 직접 비율을 잡을 경우이다.
고정값으로 잡게 되면 삼진 수가 많아질 것에 대비한 상한선 제어, 비율 조정이 불가능하다.

✅ 해결 방법: 예외처리를 통한 범위 캡핑(Capping) 및 UI 보호

이러한 예외를 해결할 수 있는 방법 3가지를 소개하자면,

1. 상한선 설정

const cappedValue = Math.min(value, MAX_LIMIT);
const width = (cappedValue / MAX_LIMIT) * 100 + '%';

Math.min(a, b)는 a와 b 중에서 더 작은 값을 반환한다.

즉, value가 MAX_LIMIT을 초과할 경우에도 MAX_LIMIT까지만 사용되도록 상한선(capping)을 설정한 것이다.

2. log 스케일 적용 (값이 급격히 커지는 경우 유용)

const width = (Math.log(value + 1) / Math.log(maxValue + 1)) * 100 + '%';

일반적인 선형 스케일에서는 value가 커질수록 width도 비례해서 커지기 때문에, 값이 한쪽으로 몰린 데이터에서는 UI가 깨지기 쉽다.

log를 쓰면 작은 값은 좀 더 키우고, 큰 값은 완만하게 줄여서 균형 있는 시각화가 가능하다.

3. 비정상 값 안내 메시지 표시

if (value > MAX_REASONABLE) {
  showWarning("이 항목의 값이 정상 범위를 초과했습니다.");
}

사용자 입장에서 “그래프가 왜 이상하게 나왔지?” → “아! 값이 너무 컸구나.”
이렇게 납득 가능한 피드백을 제공할 수 있는 방법이다.

✍️ 마무리 & 느끼점

해결방법을 공부하면서, 앞서 소개한 오류는 1번 상한선 설정의 해결방법으로 해결하는 것이 가장 적합하다는 생각이 들었다. 이번 삼진 수 UI 오류 사례처럼, 평소엔 잘 되던 코드도 극단적인 입력값에 의해 쉽게 깨질 수 있기 때문에 프론트엔드는 "모든 데이터는 언젠가 우리를 배신한다"는 마음가짐으로 설계되어야 한다는 것을 깨닫게 되었다.