2026.05.06 · Vol. III · No. 19
GLOBAL · 한국 시장 / Vol. III · Issue 19

디자인 시스템 — 흑백 + Material Symbols + MDX 컴포넌트

Moo Corp 블로그의 시각 디자인 가이드. 차트, 통계 카드, 콜아웃 박스 사용 예시.

이 글은 Moo Corp 블로그가 제공하는 시각 컴포넌트의 사용 예시입니다. 모든 분석 글은 흑백 디자인을 따르고, 강조나 시각화는 Material Symbols 아이콘과 MDX 컴포넌트로 처리합니다.

핵심 요약 박스

핵심 요약 · Key Takeaways
  • 흑백 단색 팔레트로 시각 잡음을 줄였습니다
  • Material Symbols 아이콘으로 의미를 표시합니다
  • MDX 컴포넌트로 차트, 통계, 콜아웃을 본문에 임베드합니다
  • 광고 슬롯은 본문 상단과 하단에 자동 배치됩니다

통계 카드 (StatGrid + StatCard)

종목 분석 글의 첫 부분에 회사 핵심 지표를 한눈에 보여줍니다.

시가총액
$4.85T
전일 대비 -4.6%
ROE
104%
업계 최상위
순이익률
55.6%

콜아웃 (Callout)

리스크나 카탈리스트를 본문 흐름에서 분리해 강조합니다.

인용구 (Quote)

핵심 문장을 본문에서 분리해 시각적 휴식을 줍니다.

AI 인프라 투자는 이제 시작입니다. 향후 4년간 1조 달러 규모의 데이터센터 업그레이드가 진행됩니다.

— Jensen Huang, NVIDIA CEO

차트 (TradingView 임베드)

종목 글에는 가격 차트를 자동 임베드합니다.

가격 차트 NASDAQ:NVDA

데이터 테이블 (DataTable)

분기 실적이나 비교 분석에 활용합니다.

NVIDIA 분기별 매출 (단위: 십억 달러)
분기매출전년 동기 대비
Q4 202539.3+78%
Q1 202644.0+69%
Q2 2026 (E)48.5+56%
NVIDIA IR, FMP

일반 마크다운

표준 마크다운 요소도 모두 흑백 디자인에 맞춰 렌더링됩니다.

  • 리스트 항목 1
  • 리스트 항목 2
  • 리스트 항목 3

인용 블록도 흑백 보더로 표시됩니다. 본문 흐름과 자연스럽게 연결됩니다.

본문은 Pretendard Variable 폰트로 한국어 가독성을 최적화했고, 줄 간격은 1.85, 단어 분리는 한국어 친화적으로 설정되어 있습니다.

마무리

이 디자인 시스템은 분석 가독성을 우선합니다. 색상이나 이모지로 강조하는 대신, 타이포그래피와 구조적 컴포넌트로 정보를 위계화합니다.