예전 트레이딩뷰가 나오기 한참 전에 html과 canvas를 통해 CandleStick 차트를 간단하게 만들어 보았었다. 당시 감성으로 어두운 배경에 네온사인 느낌을 원했지만 내가 표현방법을 잘 몰라 어설프게 흉내낸 수준으로 끝냈었다. 최근 AI 코딩능력의 비약적인 발전으로 쉐이더를 활용해서 제대로 된 네온감성 차트를 만들어 보았다. 비록 10여년 전의 감성이지만…

1. 구현차트

주가에서 거래량이 유독 많은 지점은 수급이 교환되는 지점인데 이 부분을 굉장히 밝게 빛나는 효과를 줌으로써 눈에 잘 띄도록 하는 아이디어에서 만든 내용이다.

사실 붉은색과 파란색이 같이 강렬하게 빛이 난다면 사람 눈에는 파란색이 더 강하게 느껴지곤 한다.

User. 파란색과 붉은색이 같은 강도로 밝아질때 사람은 파란색을 더 밝다고 느끼는 이유는?

🤖 Gemini:

파란색과 붉은색, 어느 쪽이 더 밝을까?

결론부터 말씀드리면, “주변이 얼마나 밝은가"에 따라 다릅니다. 이는 인간의 시세포 특성인 ‘푸르킨예 현상(Purkinje effect)’ 때문입니다.

  1. 밝은 곳 (낮): 붉은색이 더 밝게 느껴짐
  • 중심 시력을 담당하는 ‘원추세포’가 작동합니다.
  • 원추세포는 긴 파장(노란색, 붉은색)에 더 민감하여 물리적 강도가 같아도 붉은색이 더 선명하고 밝게 보입니다.
  1. 어두운 곳 (밤): 파란색이 더 밝게 느껴짐
  • 어두운 곳에서 작동하는 ‘간상세포’가 주도권을 잡습니다.
  • 간상세포는 짧은 파장(푸른색 계열)에 훨씬 민감하게 반응합니다.
  • 따라서 어두워지면 붉은색은 금방 검게 변하지만, 파란색은 상대적으로 밝게 보입니다.

※ 요약: 낮에는 ‘레드’, 밤에는 ‘블루’가 더 밝게 인식됩니다.

2. 쉐이더 해석

프래그먼트 쉐이더 프로그램은 각 픽셀에 대응한다. 즉 전체 화면에서 하나의 픽셀이 수행되고 있을때 자신이 어떤 색을 내야하는지를 결정하는 프로그램이고 이는 GPU에 의해 가속되어 병렬로 처리된다. 생성된 소스를 보면 봉의 개수만큼 loop를 돌리고 있으므로 상당히 하드웨어 성능이 필요한 차트이다.

GLSL
vec3 baseColor = (bodyData.z > 0.0) ? vec3(1.0, 0.05, 0.35) : vec3(0.0, 0.55, 1.0);

전달된 차트데이터에서 .z는 부호이다. 음수는 하락봉을 나타내며 상승봉, 하락봉에 따라 색상을 다르게 선택한다.

GLSL
float bodyDist = sdBox(...);
float wickDist = sdSegment(...));
float dist = min(bodyDist, wickDist);

해당 픽셀이 봉에 속하는지 판별하기 위한 거리이다. 음수면 봉에 속하는 것이다.

GLSL
vec3 candleLight = baseColor * glow * intensity;
                
float coreMask = smoothstep(0.004, -0.004, dist);
vec3 coreColor = baseColor * intensity * 1.3; // 코어 밝기 계수 하향 (1.6 -> 1.3)
coreColor += vec3(0.9, 0.9, 1.0) * coreMask * 0.4 * intensity;

finalColor += mix(candleLight, coreColor, coreMask);

두가지 색을 결정한다. candleLight, coreColor 여기서 봉 외부이면 coreMask가 0이 되며 candleLight가 선택된다(mix에 의해) 그러면 glow효과가 적용되어 봉 주면 밝기 번지는 효과가 적용된다. 봉 내부이면 coreColor가 선택된다. 여기서 smoothStep에 의해 봉 근접한 엣지 부분은 coreColor에 더해지는 부분이 비율에 따라 덜 더해지므로 부드러운 가장자리처럼 변한다.

매우 복잡한 안티앨리어싱 방법인것 같다.

3. 생각

나는 주문개발쪽이라 매체쪽 개발자는 아니어서 hts, wts, mts 쪽으로는 문외한이지만 개인적으로는 Web 베이스로 통일 되어야 한다고 생각한다. 그럴 경우 필연적으로 차트의 성능이 고려될 시점이 올텐데 이렇게 쉐이더 가속을 사용할수 있을 것이다.

Gemini Pro 버젼을 결제해서 쓰고 있는데 쉐이더의 경우 학습이 많이 되었는지 정말 잘 만드는것 같다. AI 도움없이 내가 이렇게 복잡한 쉐이더를 응용해서 사용해볼 수 있었을까? 이는 반대의 경우도 마찬가지로 주식주문업무를 모르는 사람이 AI도움으로 쉽게 주요 뼈대 설계 할수 있지 않을까 싶다.