비상계엄이 일어난 뒤 벌어진 경제지표의 하락

Last updated December 30, 2025 – Data Visualisation

시작하며

세상이 잘 돌아간다 싶으면 어디선가 예상치 못한 상황이 터진다. 이번엔 ‘내란’이라는 단어가 뉴스를 장식했다. 그것도 21세기 대한민국에서. 이런 상황을 마주하며 나는 조금 다른 방식으로 접근하고 싶었다. 화내봤자 딱히 내가 뭘 할 수 있는게 없기도 하고. 그래서 데이터를 통해 이 사건의 영향을 기록하는 내 방식대로 응대하기로 했다.

그래서 눈을 돌린 게 경제 지표다. 정치인들의 레토릭과 달리, 시가총액, 환율, 외국인 투자 동향 같은 숫자는 객관적인 사실을 데이터는 보여준다. 물론, 그 숫자를 어떻게 해석하고 맥락화하느냐는 또 다른 문제지만, 적어도 원본 데이터는 있는 그대로의 현실을 반영한다.

flowchart TD
    Start([시작점]) --> A
    
    A["정치적 사건<br/>(계엄 선포)"] 
    --> A1{영향 확산}
    
    A1 --> B1["📉 시가총액 하락"]
    A1 --> B2["📈 환율 상승"]
    A1 --> B3["기타 경제지표 변동"]
    
    B1 --> C
    B2 --> C
    B3 --> C
    
    C["📊 데이터 수집 & 시각화"]
    --> C1["Chart.js 차트 생성"]
    --> C2["Remotion 영상 제작"]
    --> D["객관적 증거 제시<br/>실제 경제적 영향 입증"]

    %% 스타일 정의
    classDef startEnd fill:#f9f9f9,stroke:#666,stroke-width:2px
    classDef political fill:#ffcdd2,stroke:#c62828,stroke-width:2px
    classDef decision fill:#fff3e0,stroke:#ef6c00,stroke-width:2px
    classDef economic fill:#e1f5fe,stroke:#0277bd,stroke-width:2px
    classDef process fill:#f3e5f5,stroke:#6a1b9a,stroke-width:2px
    classDef evidence fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px

    class Start,A1 startEnd
    class A political
    class A1 decision
    class B1,B2,B3 economic
    class C,C1,C2 process
    class D evidence

마침 민주 연구소에서 발행한 리포트를 보았는데, 표와 글자로 구성된 자세한 내용이 담긴 발행보고서 형태였다. 다만 이 양질의 자료가 정당 연구소 게시판 한 구석에 PDF 첨부파일로 안치되어 있다보니, 이 중요한 데이터가 더 많은 사람들에게 이해하기 쉽게 전달되면 좋겠다는 생각이 들었다.

그래서 내가 평소에 다루는 웹 기술로 이 데이터를 시각화해보기로 했다. 데이터 시각 디자인 공부해서 어따 써. 이럴때 써야지. 내가 데이터 분석 석사 과정에 진학한 이유 중 하나이기도 하다. 삶과 정치에서 이제 데이터로 만드는 스토리텔링이란 떼려야 뗄 수 없는 관계에 있으니까.

레이아웃 설계: 생각을 구조화하는 과정

머릿속 아이디어를 구현하기 위해 먼저 레이아웃을 구상했다. 피그마로 굳이 섬세하게 디자인을 잡기 보다는 브레인 스토밍 단계에선 그냥 스케치로 아이디어를 휙 휘갈긴 다음에 Mermaid나 ASCII로 주로 변환하는 편이다. 복잡한 툴보다는 ASCII 아트로 간단히 구조를 잡아보았다.

버전 1: 좀 더 상세하게

graph TB
    subgraph MAIN ["메인 컨텐츠 영역"]
        subgraph LEFT ["타임라인 네비게이션 (1/4)"]
            Event1["📅 2024-12-03<br/>윤석열 계엄 선포<br/>클릭 가능"]
            Event2["📅 2024-12-04<br/>계엄 해제 결의안<br/>미선택"]
            Event3["📅 2024-12-07<br/><br/>미선택"]
            EventMore["⋮<br/>더 많은 이벤트들"]
        end
        
        subgraph RIGHT ["📈 선택된 이벤트 상세 (3/4)"]
            EventDetail["2024년 12월 3일<br/>윤석열 대통령 비상계엄 선포"]
            
            subgraph CHARTS ["📊 주요 경제지표 변화"]
                Chart1["📈 시가총액 차트<br/>[Chart Area]"]
                Chart2["환율 차트<br/>[Chart Area]"]
            end
            
            subgraph IMPACTS ["추가 영향"]
                Impact1["• 외국인 투자자 1조원 순매도"]
                Impact2["• 소비자심리지수 12.5% 하락"]
                Impact3["• 금 가격 급등"]
            end
        end
    end
    
    %% 상호작용 표현
    Event1 -.->|클릭시 업데이트| EventDetail
    Event1 -.->|데이터 연동| CHARTS
    Event1 -.->|관련 정보| IMPACTS
    
    %% 스타일링
    classDef headerStyle fill:#2E86AB,stroke:#A23B72,stroke-width:3px,color:#fff
    classDef timelineStyle fill:#F18F01,stroke:#C73E1D,stroke-width:2px,color:#fff
    classDef detailStyle fill:#FFE66D,stroke:#FF6B35,stroke-width:2px,color:#000
    classDef chartStyle fill:#06D6A0,stroke:#118AB2,stroke-width:2px,color:#000
    classDef impactStyle fill:#EF476F,stroke:#F72585,stroke-width:2px,color:#fff
    classDef selectedStyle fill:#7209B7,stroke:#560BAD,stroke-width:3px,color:#fff
    
    class HEADER headerStyle
    class LEFT timelineStyle
    class RIGHT detailStyle
    class CHARTS,Chart1,Chart2 chartStyle
    class IMPACTS,Impact1,Impact2,Impact3 impactStyle
    class Event1,EventDetail selectedStyle

버전 2: 좀 더 구조적으로

flowchart LR
    subgraph Main["Timeline Dashboard Layout"]
        direction TB
        
        subgraph Row1["Header Row"]
            H1["Header Area"]
        end
        
        subgraph Row2["Main Content Row"]
            direction LR
            
            subgraph Col1["Left Column<br/>(Timeline Events)"]
                direction TB
                L1["📅 2024-12-03<br/>계엄 선포"]
                L2["📅 2024-12-04<br/>해제 결의안"] 
                L3["📅 ...<br/>더 많은 이벤트"]
                LScroll["📜 스크롤 가능"]
                
                L1 -.-> L2 -.-> L3 -.-> LScroll
            end
            
            subgraph Col2["➡️ Right Column<br/>(Event Details)"]
                direction TB
                
                subgraph DetailHeader["Event Header Section"]
                    RH["선택된 날짜, 이름"]
                end
                
                subgraph TabSection["Tab Navigation Section"]
                    RT["Key Indicators<br/>(시총/환율/코인...)"]
                end
                
                subgraph ChartSection["📈 Chart Section"]
                    RC["Selected Indicator<br/>Chart & Analysis<br/>차트 영역"]
                end
                
                subgraph MessageSection["💡 Key Message Section"]
                    RM["핵심 메시지<br/>"]
                end
                
                DetailHeader --> TabSection
                TabSection --> ChartSection  
                ChartSection --> MessageSection
            end
        end
        
        Row1 --> Row2
        L1 -.->|클릭| RH
        L2 -.->|클릭| RH
        L3 -.->|클릭| RH
    end
    
    classDef headerClass fill:#bbdefb,stroke:#1976d2,stroke-width:3px
    classDef leftClass fill:#c8e6c9,stroke:#388e3c,stroke-width:2px
    classDef rightClass fill:#ffe0b2,stroke:#f57c00,stroke-width:2px
    classDef keyClass fill:#ffcdd2,stroke:#d32f2f,stroke-width:3px
    
    class H1,DetailHeader headerClass
    class Col1,L1,L2,L3,LScroll leftClass
    class Col2,TabSection,ChartSection rightClass
    class MessageSection,RM keyClass

이런 방식으로 구조를 잡으면 머릿속 생각이 훨씬 명확해진다. 마치 유튜브 영상을 녹화하면서 자신의 생각을 정리하는 것과 비슷한 과정이다. 추상적인 아이디어가 구체적인 형태를 갖추게 되는 것이다.

왼쪽에는 시간 순서대로 중요 사건들을 나열하고, 오른쪽에는 선택된 사건과 관련된 경제 지표 변화를 시각화한다. 사용자가 타임라인에서 특정 시점을 클릭하면 해당 시점의 데이터를 확인할 수 있는 인터랙티브한 구조다. 단순하지만 효과적인 방식이다.

Chart.js: 효율적인 데이터 시각화 도구

차트 라이브러리는 여러 가지가 있지만, 이 프로젝트에는 Chart.js가 적합하다고 판단했다. D3.js는 기능이 풍부하고 커스터마이징 자유도가 높지만, 이 정도 선형 차트와 막대 차트를 구현하는 데는 Chart.js가 더 효율적이다. 문서화가 잘 되어 있고, 빠르게 결과물을 얻을 수 있다는 장점이 있다.

import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

// 데이터 구조
const data = {
  labels: ['12-02', '12-03 (계엄)', '12-04', '12-05', ...], // 날짜
  datasets: [
    {
      label: '코스피 지수',
      data: [2800, 2650, 2700, 2680, ...], // 실제 지수 데이터
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    },
    // 다른 지표 데이터셋도 추가 가능
  ],
};

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: '계엄 선포 전후 코스피 지수 변화', // 동적으로 변경 가능
    },
  },
  // 기타 옵션들...
};

function EconomicChart({ chartData, chartOptions }) {
  return <Line options={options} data={data} />;
}

export default EconomicChart;

EconomicChart.js

이런 식으로 구현하면 데이터를 시각적으로 효과적으로 표현할 수 있다. 중요한 것은 데이터의 스토리텔링이다. 단순히 선과 점으로 그려진 차트가 아니라, 해당 시점에 무슨 일이 있었는지 맥락을 함께 제공해야 데이터가 의미를 갖는다.

그렇게 해서 초안 작업을 완성한 게 아래의 모바일 버젼 차트이다.

얼추 이렇게 이벤트와 PDF로 적힌 리포트에서 발췌한 데이터 보고서들을 내 나름대로 재해석을 하여 ts파일에 dataSets 프로퍼티로 지정값을 저장했다.

디자인을 일일이 커스텀하기엔 너무 시간이 많이 드니 이번 프로젝트에선 딱히 aesthetic한 면은 크게 신경쓰지 않았다. 이 프로젝트를 진행하던 때는 3월 말이고 윤석열 내란수괴의 탄핵 선고일 지정이 되냐 마느냐는 간당간당한 사건의 중심이 있었기에 정보 개시의 속도가 가장 중요했다.

뭐 왠만한 Grid 시스템과 차트별 스타일링은 Tailwind와 Chart.js에서 제공하는 것만으로도 이미 충분했다.

효과적인 데이터 스토리텔링: 숫자에 맥락 더하기

차트만 보여주는 것은 충분하지 않다. 숫자가 어떤 의미를 갖는지, 그 변화가 얼마나 중요한지를 설명해주는 텍스트가 필요하다. 이를 위해 다음과 같은 전략을 구상했다:

핵심 메시지: 각 지표 섹션에 가장 중요한 인사이트를 간결하게 표현
- 배경색은 지표 특성에 맞게 설정 (예: 시가총액 - 청록색, 환율 - 주황색)
- 폰트 크기 24px로 시각적 우선순위 부여
- 예: 시가총액 하루 만에 XX조 감소 / 원/달러 환율 XXXX원 돌파
상세 정보: 카드에 상호작용 시 추가 정보 표시
- 애니메이션으로 사용자 경험 향상
- 폰트 크기 18px로 가독성 확보
- 예: 외국인 투자자, 대규모 순매도 발생 / 안전자산 선호 심리 강화, 금값 상승
시간에 따른 변화 표현: 타임라인 이동에 따라 다른 메시지 표시
- 같은 지표라도 시점에 따라 다른 스토리 전달
- 예: (초기) 코스피, 급격한 하락세 → (100일 후) 회복 추세 보이나 여전히 불안정

flowchart TD
    Start([사용자 진입]) --> BasicCard
    
    subgraph BasicCard ["지표 카드 (기본 상태)"]
        direction TB
        BasicMsg["핵심 메시지<br/>(24px Bold, 배경색)"]
        BasicChart["📊 차트 영역"]
        BasicMsg --> BasicChart
    end
    
    subgraph ExpandedCard ["지표 카드 (호버/확장 상태)"]
        direction TB
        ExpandMsg["핵심 메시지<br/>(24px Bold, 배경색)"]
        Detail1["상세 정보 1<br/>(18px Normal)"]
        Detail2["상세 정보 2<br/>(18px Normal)"]
        ExpandChart["📊 차트 영역"]
        
        ExpandMsg --> Detail1
        Detail1 --> Detail2
        Detail2 --> ExpandChart
    end
    
    subgraph Timeline ["타임라인 변경"]
        direction TB
        ContentChange["메시지 내용 변경"]
        TimeChange["같은 지표, 다른 시점"]
        ContextChange["다른 맥락"]
        
        ContentChange --> TimeChange
        TimeChange --> ContextChange
    end
    
    BasicCard -->|"호버/클릭"| ExpandedCard
    ExpandedCard -->|"↩️ 호버 해제"| BasicCard
    
    BasicCard -->|"📜 타임라인 스크롤"| Timeline
    ExpandedCard -->|"📜 타임라인 스크롤"| Timeline
    
    Timeline -->|"✅ 업데이트 완료"| BasicCard
    
    %% 스타일링
    classDef basicState fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef expandState fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef timelineState fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
    classDef interaction fill:#fff3e0,stroke:#e65100,stroke-width:2px
    
    class BasicCard,BasicMsg,BasicChart basicState
    class ExpandedCard,ExpandMsg,Detail1,Detail2,ExpandChart expandState
    class Timeline,ContentChange,TimeChange,ContextChange timelineState

이렇게 하면 데이터가 단순한 숫자에서 의미 있는 스토리로 변환된다. 우리는 변화의 규모뿐만 아니라 그 영향과 맥락까지 전달할 수 있게 된다.

사용자 경험 설계: 정보 탐색의 여정

좋은 데이터 시각화는 사용자가 자연스럽게 정보를 탐색할 수 있도록 안내해야 한다. 이를 위한 인터랙션 흐름을 다음과 같이 구성했다:

타임라인 이벤트 선택: 사용자가 왼쪽 타임라인에서 특정 사건(예: “계엄 선포”)을 클릭
- 결과: 선택된 이벤트가 강조되고, 오른쪽 상세 정보 영역이 해당 이벤트 내용으로 업데이트
경제지표 탭 네비게이션: 상세 정보 영역 상단에 관련 경제 지표 탭 제공 (예: [시가총액], [환율], [코인 시장])
- 결과: 선택된 탭이 활성화되고, 해당 지표의 정보가 표시됨
상세 데이터 확인: 사용자는 선택된 지표의 차트와 관련 정보 확인
- 추가 인터랙션: 차트 특정 지점에 호버하면 정확한 수치 확인 가능

graph TB
    subgraph UI["사용자 인터페이스"]
        subgraph Left["좌측 영역"]
            Timeline[타임라인 목록]
        end
        
        subgraph Right["우측 영역"]
            Detail[상세 정보]
            Tabs[📊 지표 탭]
            Chart[📈 차트/데이터]
        end
        
        subgraph Overlay["오버레이"]
            Tooltip[추가 정보]
        end
    end
    
    Timeline -->|클릭| Detail
    Detail -->|탭 클릭| Chart
    
    Timeline -.->|호버| Tooltip
    Detail -.->|호버| Tooltip
    Chart -.->|호버| Tooltip
    
    %% 스타일
    classDef leftPanel fill:#e8f5e8,stroke:#4caf50
    classDef rightPanel fill:#e3f2fd,stroke:#2196f3
    classDef overlayPanel fill:#fff3e0,stroke:#ff9800
    
    class Timeline leftPanel
    class Detail,Tabs,Chart rightPanel
    class Tooltip overlayPanel

이런 구조를 통해 사용자는 수동적 관찰자가 아닌 능동적 탐험가가 된다. 데이터를 직접 탐색하면서 “아, 이 시점에 이런 일이 있었고, 그 결과 경제 지표가 이렇게 변했구나”라는 인사이트를 스스로 발견할 수 있다.

사실 어떤 경우엔 이벤트가 발생했을 때 급 경제지표가 훅 변하기도 하지만(예시: 코스피지수, 환율시장) 소비자 지수 같은 거시적인 데이터가 필요한 경제지표는 이벤트 발생 당시에 딱 맞춰 배치하긴 어렵다. 그래도 내란이 벌어진 시점의 전후로 정치와 경제 다이나믹스가 더욱 가파른 것은 부정할 순 없을것이다. 전후로 2-3달간의 누적된 변화와 23-24년 윤석열 정부의 실적과 그 이전, 그리고 비상계엄 시전 이후로 누적치를 보며 그 사이에 벌어진 이벤트들이 어떤 식으로 이런 누적치에 가중을 주었을 지 양적인 패턴흐름을 읽는데는 도움이 될 것이다.

모든 사용자 관점에서의 이벤트 타임라인 뉴스를 읽으며 연관 정세를 데이터로 읽어보는 User Experience를 프로토타입을 지정하고 여러 필요요소를 반영한 최종 차트 페이지의 모습이다.

현재 진행 상황과 다음 단계

지금까지 기본적인 레이아웃과 Chart.js를 활용한 시각화를 구현했다. 완벽하지는 않지만, 개념 증명(PoC) 수준의 결과물은 나왔다. 코드는 아직 최적화가 필요하지만, 일단 기능적으로는 작동한다. 개발 과정에서 중요한 것은 완벽함보다 진전이다.

다음 단계로는 Remotion을 활용한 모션 그래픽 구현을 고려하고 있다. 정적인 차트를 넘어, 시간에 따른 데이터 변화를 애니메이션으로 보여주면 이해도가 더욱 높아질 것이다. 타임라인 스크롤에 따라 차트가 부드럽게 변화하고, 관련 메시지가 적절한 타이밍에 등장하는 방식으로 구현할 수 있다.

flowchart LR
    A["Chart.js 구현물<br/>정적 차트 웹 페이지"]
    B["Remotion 적용<br/>React 컴포넌트"]  
    C["모션 그래픽 영상<br/>애니메이션 결과물"]
    
    A --> B --> C
    
    classDef stage1 fill:#ffebee,stroke:#c62828,stroke-width:2px
    classDef stage2 fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px  
    classDef stage3 fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
    
    class A stage1
    class B stage2
    class C stage3

Remotion은 러닝 커브가 있는 라이브러리지만, 리액트 기반이라 기존 웹 개발 지식을 활용할 수 있다는 장점이 있다. 특히 윤석열 파면 순간의 경제 지표 데이터까지 추적해서 시각화 한다면, 단순한 차트를 넘어 역사적 사건의 경제적 영향을 기록하는 의미 있는 프로젝트가 될 수 있다.

이미지: 위 경제지표 컴포넌트들을 일부 변환하여 Remotion Chart 애니메이션으로 넣어보는 시험 중이다.

위 차트가 구현된 라이브 버젼을 보고 싶다면 아래 링크를 클릭하라.

Live Version: 비상계엄(241203) 이후 100일간의 경제지표

계엄 100일 경제 타임라인

결론: 데이터 저널링의 의미

이 프로젝트는 단순한 기술 실험이 아니라, 나만의 방식으로 중요한 사건을 기록하고 분석하는 과정이다. 일반적인 저널링이 감정과 생각을 글로 표현한다면, 데이터 시각 디자이너인 나는 코드와 데이터로 세상을 해석하고 기록하고자 한다.

결국 우리가 모으는 데이터라는 것은 삶의 정치에서 멀어질 수가 없는 것이고 이것을 좀 더 시각화해서 알기 쉽게 시각적으로 설명하는 것이 데이터시각디자인의 정수이다. 이것을 하기 위해 나는 데이터 분석 석사과정을 들어간 것일 것이다.

데이터는 단순한 숫자가 아니라, 우리 삶과 사회의 단면이다. 이를 체계적으로 수집하고, 의미 있게 시각화하는 과정은 역사를 기록하는 또 다른 방식이다. 이 프로젝트를 통해 내가 가진 기술로 사회적 사건을 객관적으로 기록하고, 더 많은 사람들이 쉽게 이해할 수 있도록 돕는 것이 목표다.

데이터를 다루는 사람으로서, 우리가 할 일은 그 데이터가 들려주는 이야기를 잘 들을 수 있도록 돕는 것이다. 이것이 데이터 시각디자인을 연구하는 내가 기여할 수 있는 방식이다. 이 프로젝트는 아직 진행 중이지만, 벌써 많은 인사이트를 나는 얻고 있다. 코드로 세상의 여러 사건들을 기록하는 이 과정이 어디까지 이어질지는 나도 모르지만, 계속 해보는 수밖에.