리밸런싱 계산기의 매수 버튼이 빨간색인 이유

초록색 대시보드 앞에서 멈춘 손

결과 화면을 만들던 무렵의 이야기입니다. 이 계산기는 shadcn/ui와 Tailwind CSS로 화면을 구성했는데, 설계하며 참고한 대시보드 예제들은 국적을 가리지 않고 한 가지 문법을 공유하고 있었습니다. 오르는 것, 좋은 것, 긍정적인 것은 초록이고, 내리는 것, 나쁜 것, 부정적인 것은 빨강이라는 문법이죠. 차트 라이브러리의 기본값도, 예제 코드의 클래스 이름도 대부분 green과 red의 짝이었습니다.

그 흐름대로라면 매수 버튼은 초록, 매도 버튼은 빨강이 자연스러웠습니다. 그런데 매수·매도 표에 색을 입히려던 순간 손이 멈췄습니다. 확인차 열어 본 한국 증권사 앱들이 정확히 반대의 문법을 쓰고 있었기 때문입니다. 오른 종목은 빨갛고 내린 종목은 파랗습니다. 매수는 빨강, 매도는 파랑이고요. 눈에 익은 문법과 어긋난 화면은 사용자를 한 박자씩 멈칫하게 만들고, 사고팔 주수를 알려 주는 도구에서 그 한 박자는 실수로 이어질 수 있습니다.

사실 이 어긋남을 처음 실감한 것은 색을 정하던 날보다 조금 앞선, 시세 데이터를 검증하던 때였습니다. 계산기가 받아 온 애플 주가가 맞는지 미국 시세 사이트와 나란히 놓고 비교하는데, 한쪽에서는 초록이던 종목이 다른 쪽에서는 빨갛게 표시되어 있었습니다. 숫자는 같은데 색이 반대니, 몇 초 동안 어느 쪽이 오른 것인지 헷갈렸죠. 데이터를 확인하려던 자리에서 색 때문에 판단이 흔들리는 경험을 하고 나니, 이 문제를 대충 넘길 수 없게 됐습니다.

사소해 보여서 오히려 결정이 어려웠습니다. 색 하나 바꾸는 일이야 코드 한 줄이지만, 어느 쪽이 맞는지는 코드 바깥의 문제였으니까요. 결론부터 말씀드리면 이 계산기는 한국 관례를 따랐습니다. 매수는 빨강(#c6362f), 매도는 파랑(#2c5fb3)입니다. 다만 그렇게 정하기까지 알게 된 사실들이 생각보다 재미있어서, 이 글에 정리해 둡니다.

빨간불이 이익인 나라, 손실인 나라

시세 화면의 색 관례는 시장마다 다릅니다. 대략의 지도를 그려 보면 이렇습니다.

지역	상승	하락
한국	빨강	파랑
미국·유럽	초록	빨강
중국·대만	빨강	초록

같은 +5%라도 서울에서는 빨갛고 뉴욕에서는 초록이며, 같은 초록이 상하이 시세판에서는 하락을 뜻합니다. 어디까지나 일반적인 관례라 서비스마다 예외는 있습니다만, 큰 그림은 이렇게 갈립니다. 유래에 대해서는 여러 설명이 있는데, 동아시아에서 빨강이 전통적으로 길함과 번영의 색이었다는 문화적 배경이 자주 언급됩니다. 반대로 서구의 장부 전통에서 빨강은 손실을 적던 잉크의 색, 곧 경고의 색이었죠. 어느 쪽도 자연법칙이 아니라 각자의 역사에서 자라난 약속일 뿐입니다.

여기에는 재미있는 비틀림이 하나 숨어 있습니다. 한국어에도 '적자(赤字)'라는 말이 있습니다. 붉을 적 자를 쓰는, 장부의 손실을 뜻하는 단어입니다. 영어에도 in the red라는 표현이 있고 뜻은 한국어의 적자와 같습니다. 말 속의 빨강은 양쪽 모두 손실인데 한국 시세판의 빨강만 상승이니, 같은 색이 한 언어 안에서도 반대 의미를 오가는 셈입니다. 색과 의미의 연결이 절대적인 것이 아니라 약속의 문제라는 사실을, 이만큼 잘 보여주는 예도 드물다고 생각합니다.

한 가지 짚어 둘 것은, 상승·하락의 색과 매수·매도의 색이 같은 계열로 묶여 다닌다는 점입니다. 한국 증권사 앱에서 매수 주문 버튼과 호가창의 매수 잔량이 상승과 같은 빨강으로 칠해지는 것처럼, 색의 문법은 시세 화면을 넘어 주문 화면까지 이어집니다. 그래서 시세는 한국식으로, 버튼은 서구식으로 섞어 쓰는 화면은 최악의 선택이 됩니다. 어느 쪽 관례든 한 화면 안에서는 끝까지 일관되어야 하죠.

관례가 갈린다는 것은 색만 믿으면 사고가 난다는 뜻이기도 합니다. 해외 시세 사이트를 열었다가 온통 빨간 화면에 가슴이 철렁했는데 알고 보니 다 오른 날이었다는 이야기는 흔한 경험담이고요. 해외 자산을 담고 환율까지 살피는 분들이라면 두 문법 사이를 하루에도 몇 번씩 건너다니시게 됩니다. 게다가 색은 정보이기 전에 감정을 건드립니다. 손실이 이익보다 두 배쯤 무겁게 느껴지는 마음에게 손실의 색이 입혀진 숫자는 그냥 데이터가 아니라 통증에 가깝죠.

색에만 맡기지 않기로 했습니다

고민 끝에 이 도구가 정한 원칙은 두 가지였습니다.

첫째, 색은 한국 관례를 따르되 코드에는 색 이름을 남기지 않았습니다. CSS 토큰을 --red, --blue가 아니라 --buy, --sell로 지은 것이 그 결정의 흔적입니다. 화면 곳곳에는 text-buy, bg-sell 같은 의미 단위의 클래스만 있어서, 언젠가 다른 관례가 필요해지더라도 토큰 두 줄만 바꾸면 사이트 전체가 따라옵니다. 색은 바뀔 수 있는 약속이고, 코드에는 약속의 이름이 아니라 의미의 이름을 남기는 편이 오래간다고 배웠습니다.

둘째, 색이 유일한 신호가 되지 않게 했습니다. 계산 결과의 매수·매도 행에는 반드시 '매수', '매도'라는 글자와 +, − 부호가 색과 함께 붙습니다. 접근성 지침(WCAG)의 "색을 정보 전달의 유일한 수단으로 쓰지 말라"는 원칙이기도 하고, 적록색약이 있는 분들을 생각하면 당연한 선택이기도 했습니다. 공교롭게도 한국식 빨강·파랑 짝은 서구식 빨강·초록 짝보다 색각 이상이 있는 분들에게 구분이 쉬운 조합이라, 관례를 따른 것이 접근성 면에서도 손해가 아니었습니다.

이 원칙을 세우고 나니 토큰이 색 이상의 역할을 하기 시작했습니다. 예를 들어 계산 결과 아래의 '예상 잔여 현금'은 평소에는 무채색이지만, 목표 비중대로 사려면 현금이 모자라는 상황, 곧 잔여 현금이 음수가 되는 순간에는 매수와 같은 빨강으로 바뀝니다. "더 사야 하는데 돈이 부족하다"는 상태가 매수의 색으로 표시되는 것이라, 새 색을 추가하지 않고도 경고가 문법 안에서 자연스럽게 읽힙니다. 색을 두 개로 제한한 결정이 오히려 화면을 단순하고 읽기 쉽게 만들어 준 셈입니다.

마지막으로 하나 더 말씀드리면, 이 계산기에는 평단가 입력란이 없어서 수익률 화면 자체가 없습니다. 그래서 빨강과 파랑이 "내가 벌었나 잃었나"라는 감정의 색이 아니라, "몇 주를 사고 몇 주를 팔면 되나"라는 할 일의 색으로만 쓰입니다. 같은 두 가지 색이라도 붙는 자리가 다르면 하는 일이 달라집니다. 버튼 색 하나를 정하는 일이 알고 보니 이 도구가 사용자와 맺는 약속을 정하는 일이었다는 것이, 만들고 나서야 보였습니다.

이 글은 화면 설계와 색 관례에 대한 일반 정보이며, 특정 종목의 매매나 특정 투자 방식을 권하는 것이 아닙니다. 투자 판단과 그 결과에 대한 책임은 투자자 본인에게 있습니다.

---

함께 읽으면 좋은 글

• RebalanceGo 리밸런싱 계산기 사용법 — 이 글에서 이야기한 빨강과 파랑이 실제로 쓰인 화면
• 그 숫자는 몇 분 전의 가격입니다 — 색 다음으로 정해야 했던, 화면 속 숫자의 정직함 이야기