가격이 일곱 자리가 되자 화면이 터졌다

거래대금 상위 목록은 종목 하나가 가로 한 줄짜리 카드다. 왼쪽부터 종목명, 섹터, 그리고 오른쪽에 가격·등락률·거래대금이 붙는다.

몇 달 동안 아무 문제가 없었다. 그러다 어느 날 딱 한 줄만 이상했다. 삼성전기 줄에서 거래대금 숫자가 카드 오른쪽 모서리를 넘어가 잘려 있었다.

여섯 자리를 넘는 종목을 생각 못 했다

그날 삼성전기는 1,435,000원이었다.

내가 화면을 만들 때 머릿속에 있던 가격은 73,500 같은 다섯 자리, 많아야 450,000 같은 여섯 자리였다. 국내 주식 대부분이 그 범위다. 그래서 각 칸의 폭을 그 기준으로 잡았다.

가격이 일곱 자리가 되면서 쉼표까지 아홉 글자가 됐다. 두 글자가 늘었을 뿐인데 오른쪽 끝의 거래대금이 카드 밖으로 밀려났다.

왜 잘리지 않고 삐져나갔나

여기가 내가 몰랐던 부분이다. 나는 칸이 좁아지면 알아서 ...으로 잘릴 거라고 생각했다. 종목명에는 이미 그렇게 해뒀으니까.

한 줄 카드를 좁은 엘리베이터라고 생각하면 이해가 쉽다. 안에 여러 명이 서 있다. 한 명이 짐을 더 들고 타서 자리가 부족해졌다. 이럴 때 다들 조금씩 몸을 붙이면 되는데, 아무도 안 비켜준다. 각자 “나는 내 크기보다 작아질 수 없다”가 기본값이기 때문이다.

1. 칸들의 기본값은 "안 줄어듦"이다 내가 몰랐던 사실. 자기 내용보다 작아지지 않는 게 기본 동작이다
2. 가격이 두 글자 늘어난다 일곱 자리 종목이 목록에 들어왔다
3. 다른 칸들이 자리를 안 내준다 줄어들 수 있다고 따로 지정하지 않았다
4. 칸을 다 합친 폭이 카드보다 커진다 카드에 "넘치면 자르라"는 설정도 없어서 그냥 밖으로 나갔다

가장 어이없었던 건 섹터 칸이었다. 거기엔 “넘치면 말줄임표로 처리하라”고 이미 써놨는데, 바로 옆에 “늘어나지도 줄어들지도 마라” 는 설정이 같이 붙어 있었다. 줄어들지 말라고 해놓고 줄어들면 말줄임표를 보여달라고 한 셈이다. 앞의 지시가 이겨서 섹터 칸은 절대 안 줄었다.

고친 방법

세 가지를 같이 바꿨다.

첫째, 섹터와 종목명이 줄어들 수 있게 했다. “먼저 나서서 늘어나진 않지만, 공간이 부족하면 양보하라”로 바꿨다. 다만 무한정 줄어들어서 종목명이 한 글자만 남으면 안 되니까 바닥은 정해뒀다. 줄어들 수 있게 하되 최소 크기는 지킨다.

둘째, 카드가 넘친 내용을 자르게 했다. 이건 예방책이다. 앞으로 내가 예상 못 한 긴 값이 또 들어와도, 최소한 카드 밖으로 튀어나가 옆 줄을 침범하지는 않는다.

셋째, 전체를 조금씩 줄였다. 글자 크기를 0.5px씩, 칸 사이 간격을 2px, 좌우 여백을 1px. 하나하나는 눈에 안 보이는 조정인데 다 합치니 일곱 자리 가격이 들어갈 자리가 생겼다.

왜 두 줄로 안 바꿨나

가격을 아랫줄로 내리면 폭 걱정이 아예 없어진다. 그렇게 안 했다.

이 화면의 목적이 한눈에 여러 종목을 훑는 것이기 때문이다. 한 줄이 두 줄이 되면 화면에 보이는 종목 수가 절반이 된다. 일곱 자리 종목 몇 개 때문에 나머지 전부의 밀도를 희생하는 건 손해였다.

왼쪽 그룹과 오른쪽 그룹 사이의 빈 칸에 최소 2px을 남겨둔 것도 같은 이유다. 완전히 0이 되면 종목명과 가격이 딱 붙어버린다. 2px이라도 있으면 붙어 보이지는 않는다.

남은 교훈

1. 실제 데이터의 최댓값을 확인해라. 나는 “국내 주식 가격”의 범위를 내 경험으로 짐작했다. 실제로는 100만원 넘는 종목이 여럿 있다. 한 번만 조회해 봤으면 알았을 일이다.
2. “줄어들지 마라”와 “줄어들면 …으로 표시해라”를 같이 쓰면 뒤엣것은 죽은 설정이다. 줄어들 수 없는 칸은 말줄임할 일도 없다.
3. 넘친 내용을 자르는 설정을 미리 걸어둬라. 근본 해결은 아니지만, 예상 못 한 값이 들어왔을 때 화면 전체가 무너지는 대신 그 칸에서 멈춘다.

이 수정은 8줄 추가, 8줄 삭제였다. 파일 하나만 건드렸고 30분쯤 걸렸다. 다만 “왜 안 줄어들지”를 이해하는 데 그 30분의 대부분을 썼다.