레트로 CRT 셰이더 효과와 실시간 파라미터 튜닝

고해상도 3D 그래픽이 판치는 현대 게임 시장에서, 도트 아트(Pixel Art)와 레트로 감성은 고유의 독창적인 스타일로 확고히 자리 잡았습니다.

하지만 깨끗하게 렌더링된 사각 픽셀은 옛날 방구석에서 뚱뚱한 브라운관 TV(CRT)로 즐기던 그 부드럽고 뭉개진 감성과는 다소 거리가 있습니다.

이번 글에서는 셰이더로 레트로 감성을 완성해 주는 핵심 요소들을 살펴보고, MDX 컴포넌트를 이용한 실시간 CRT 필터 조정기를 통해 파라미터를 튜닝해 보겠습니다.

flowchart LR
    Scene[원본 프레임버퍼] --> UVWarp[1. UV 구형 왜곡]
    UVWarp --> Chromatic[2. R/B 채널 색수차]
    Chromatic --> Scanline[3. Sine 스캔라인 생성]
    Scanline --> Vignette[4. 비네팅 & 모서리 감쇠]
    Vignette --> Final[최종 레트로 CRT 화면 Output]

---

1. CRT 화면의 3대 요소

1) 스캔라인 (Scanlines)

CRT 모니터는 브라운관 뒤의 전자총이 위에서 아래로 한 줄씩 화면을 주사(Scan)하며 상을 맺히게 합니다. 이때 주사선 사이의 미세한 간격이 검은 줄처럼 표현되는데, 이를 스캔라인이라고 부릅니다. 현대 화면에서는 픽셀 셰이더에서 화면의 Y 좌표를 주기적인 사인(Sine) 함수 또는 나눗셈 연산으로 제어하여 어둡게 처리합니다.

2) 화면 곡률 왜곡 (Screen Curvature)

옛날 모니터는 평면이 아니라 둥근 구형태의 유리 표면이었습니다. 화면 중앙은 편평하고 외곽으로 갈 수록 왜곡되어 모서리가 둥글게 보였습니다. 셰이더에서는 UV 좌표를 중앙 $(0.5, 0.5)$을 기준으로 왜곡시키는 렌즈 디스토션 공식을 적용합니다.

3) 색수차 (Chromatic Aberration)

RGB 전자총의 물리적인 미세한 정렬 오차로 인해, 물체의 경계면에 붉은색과 푸른색 채널이 번져 보이는 현상입니다. 텍스처를 샘플링할 때 R 채널과 B 채널의 UV 오프셋을 미세하게 달리하여 구현합니다.

---

2. [실시간 시뮬레이터] CRT 파라미터 조절기

아래의 게임 화면 시뮬레이터에서 슬라이더를 직접 조절하여 각 옵션이 비주얼에 주는 효과를 확인해 보세요!

---

3. 웹 셰이더(WebGL/GLSL)로 구현하기

실제 WebGL 기반의 게임 엔진(예: Three.js, Phaser, 혹은 Godot의 CanvasItem Shader)에서 사용할 수 있는 CRT 조각 셰이더(Fragment Shader) 코드는 다음과 같이 작성됩니다.

shader_type canvas_item;

// 화면 왜곡 강도
uniform float curvature = 3.0;
// 스캔라인 밀도 및 세기
uniform float scanline_count = 320.0;
uniform float scanline_strength = 0.25;

vec2 curve(vec2 uv) {
    uv = uv * 2.0 - 1.0;
    vec2 offset = abs(uv.yx) / curvature;
    uv = uv + uv * offset * offset;
    uv = uv * 0.5 + 0.5;
    return uv;
}

void fragment() {
    // 1. 왜곡 적용
    vec2 uv = curve(SCREEN_UV);
    
    // 외곽은 검게 처리 (Vignette)
    if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
        COLOR = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
        // 2. 텍스처 샘플링 (여기서는 단순 픽셀 색상 가져오기)
        vec4 col = texture(SCREEN_TEXTURE, uv);
        
        // 3. 스캔라인 적용
        float scanline = sin(uv.y * scanline_count * PI * 2.0);
        scanline = (scanline + 1.0) * 0.5; // 0.0 ~ 1.0 범위로 변환
        col.rgb -= scanline * scanline_strength;
        
        COLOR = col;
    }
}

디지털 화면 위에 입히는 약간의 아날로그식 오차와 왜곡은 사용자의 잠재의식 속에 자리 잡은 ‘클래식에 대한 기억’을 강하게 자극합니다. 여러분의 게임에도 나만의 맞춤형 CRT 필터를 입혀 분위기(Mood)를 한 층 살려 보세요!