섹터가 여덟 개를 넘자 화면 절반이 회색이 됐다
섹터마다 색을 칠하려고 여덟 개를 손으로 정해뒀는데, 실제 시장에는 섹터가 훨씬 많았다. 색 목록을 늘리지 않고 해결한 방법.
거래대금 상위 목록에서 종목 줄의 배경을 섹터 색으로 칠했다. 같은 색이 몇 줄 연달아 보이면 “지금 이 섹터가 몰려 있구나”를 글자를 읽지 않고도 알 수 있다.
색은 손으로 정해뒀다. 반도체는 분홍, 전력기기는 노랑, 방산은 청록… 이런 식으로 여덟 개. 내가 자주 보는 섹터를 골랐다.
문제는 시장에 섹터가 여덟 개보다 훨씬 많다는 것이었다. 화학, 기계·장비, 운송장비, 유통, 건설, 의료·정밀기기, IT 서비스, 음식료… 이 섹터 종목은 전부 같은 회색으로 칠해졌다. 화면 절반이 회색이었다. 색으로 구분하겠다는 원래 목적이 그 절반에서는 작동하지 않았다.
색을 스무 개 더 고르려다 말았다
처음엔 그냥 색을 더 추가하려고 했다. 그런데 하다 보니 문제가 보였다.
- 섹터 목록은 고정이 아니다. 키움이 분류를 바꾸거나 새 업종이 생기면 또 회색이 늘어난다
- 나중에 내가 직접 테마를 추가할 계획이었다(폭염, 원전 같은 이벤트 테마). 그건 개수를 미리 알 수 없다
- 스무 개를 손으로 고르면서 서로 안 겹치는 연한 색을 유지하는 건 생각보다 어려웠다
개수를 모르는 대상에 색을 나눠주는 문제였다. 그러면 목록을 늘릴 게 아니라 규칙을 만들어야 한다.
이름에서 색을 계산했다
섹터 이름 자체에서 색을 뽑아내기로 했다.
- 섹터 이름을 숫자로 바꾼다 "반도체"라는 글자를 규칙에 따라 계산해서 하나의 숫자로 만든다
- 그 숫자로 색상환 위의 위치를 정한다 빨강부터 한 바퀴 도는 360단계 중 몇 번인지
- 밝기와 채도는 연한 파스텔 범위로 묶어둔다 어떤 색이 걸려도 배경으로 쓸 수 있는 밝기만 나온다
- 이름이 같으면 항상 같은 색이 나온다 계산이라서 저장할 필요가 없다
핵심은 마지막 줄이다. 색을 어디에 저장할 필요가 없다. 새로고침해도, 프로그램을 재시작해도, 다른 탭에서 그려도 “반도체”는 항상 같은 색이다. 저장할 게 없으면 관리할 것도 없다.
왜 색상환 방식인가
색을 컴퓨터에 지정하는 방법은 여러 가지인데, 흔히 쓰는 #RRGGBB 방식으로는 이걸 못 한다. 빨강·초록·파랑 값을 무작위로 뽑으면 새까맣거나 형광색이 나온다. 글자를 얹을 배경으로 쓸 수 없다.
내가 쓴 방식은 색을 색조 / 채도 / 밝기 세 가지로 나눠서 지정한다. 그래서 밝기와 채도는 내가 원하는 범위에 묶어두고 색조만 흩뿌릴 수 있다. 밝기를 연한 쪽으로 고정해두면 어떤 색조가 나와도 파스텔이다. 검은 글씨가 항상 읽힌다.
이게 진짜 이점이다. 무작위로 색을 뽑으면서도 결과의 품질을 보장할 수 있다.
색이 비슷하게 걸리는 문제
색조만 흩뿌리면 문제가 하나 남는다. 360단계에 섹터 스무 개를 뿌리면 평균 18단계씩 떨어지는데, 계산 결과가 고르게 퍼지지는 않아서 두 섹터가 5단계 차이로 붙는 경우가 생긴다. 5단계 차이는 사람 눈에 같은 색이다.
그래서 채도와 밝기도 세 단계씩 흔들었다. 조합이 아홉 가지(3×3)라, 색조가 비슷해도 하나는 진하고 하나는 흐려서 구분이 된다.
더 잘게 쪼개볼까도 했는데, 그 차이는 눈으로 구분이 안 돼서 의미가 없었다.
여덟 개는 그대로 뒀다
전부 계산으로 바꾸지 않고 원래 손으로 정한 여덟 개는 남겼다.
내가 매일 보는 섹터들이라 이미 색에 익숙해져 있었기 때문이다. 반도체는 분홍, 방산은 청록. 이걸 갑자기 바꾸면 화면을 처음부터 다시 익혀야 한다. 기계가 정한 색보다 이미 몸에 밴 색이 낫다.
“기타”도 따로 뺐다. 분류가 안 된 종목이라 회색이 오히려 맞는 표시다.
하마터면 만들 뻔한 최악의 버그
색을 고치면서 다른 게 걸렸다. 아이폰에서 “운송장비/부품” 같은 긴 섹터명이 칸을 밀어냈다. 그래서 화면에는 네 글자로 줄여 표시하기로 했다.
여기서 조심해야 할 게 있었다. 색은 원래 이름으로 계산하고, 줄이는 건 표시할 때만 해야 한다. 줄인 이름으로 계산하면 “운송장비/부품”과 “운송장비”가 다른 색이 된다. 같은 섹터가 화면 위치에 따라 다른 색으로 보이는, 도저히 원인을 못 찾을 버그가 된다.
“IT 서비스”와 “IT서비스”를 둘 다 등록해 둔 것도 비슷한 이유다. 키움이 띄어쓰기를 일관되게 주지 않았다.
남은 교훈
- 개수를 모르는 대상에는 목록이 아니라 규칙을 써라. 목록은 언젠가 반드시 모자란다.
- 무작위로 색을 뽑을 때는 밝기와 채도를 고정하고 색조만 흔들어라. 그래야 결과가 항상 쓸 만하다.
- 표시하려고 가공한 값으로 계산하지 마라. 원본으로 계산하고 표시만 가공해야 한다.
이 글은 개인 프로젝트의 개발 기록입니다. 투자 자문이나 종목 추천이 아니며, 글에 등장하는 종목명은 프로그램의 동작을 설명하기 위한 예시입니다. 투자 판단과 그 결과에 대한 책임은 투자자 본인에게 있습니다.