Ticker UI 디자인: UI/UX/AX의 원칙과 실전

❌ 정적 표시 (공간 부족):
코스피 2,500 | 달러 1,430 | 유로 1,520 | 금 2,100 | [잘림...]

✅ 티커 (모든 정보 표시):
← 코스피 2,500 | 달러 1,430 | 유로 1,520 | 금 2,100 | 비트코인 88,000 →

<header>
    <h1 class="main-title">주식 시장 분석</h1>
    <p class="subtitle">2025년 10월 29일</p>

    <!-- 티커는 시각적으로 덜 두드러지게 -->
    <div class="ticker" role="marquee" aria-label="실시간 주식 정보">
        <div class="ticker-content">
            코스피 2,500.22 | 달러 1,430.80 | 유로 1,668.03
        </div>
    </div>
</header>

<style>
.main-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
}

.ticker {
    font-size: 14px;
    font-weight: 500;
    color: #555;                    /* 덜 두드러지는 색상 */
    background: #f5f5f5;            /* 부드러운 배경 */
    padding: 8px 0;
}
</style>

❌ 나쁜 예: 색상만으로 정보 전달
<span style="color: red;">-2.5%</span>
<span style="color: green;">+3.2%</span>

✅ 좋은 예: 아이콘 + 색상 + aria-label
<span class="change negative" aria-label="하락 2.5%">
    <svg class="icon-down" aria-hidden="true">▼</svg>
    <span>-2.5%</span>
</span>

<span class="change positive" aria-label="상승 3.2%">
    <svg class="icon-up" aria-hidden="true">▲</svg>
    <span>+3.2%</span>
</span>

<style>
.change {
    font-weight: 600;
}

.negative {
    color: #c62828;              /* 4.5:1 대비 */
}

.positive {
    color: #2e7d32;              /* 4.5:1 대비 */
}

.icon-down,
.icon-up {
    display: inline-block;
    width: 12px;
    margin-right: 4px;
}
</style>

✅ 좋은 위치: 주변 시야
┌───────────────────────────────────┐
│ ← Ticker (상단)                   │ ← OK: 주변 시야
├───────────────────────────────────┤
│                                   │
│    [메인 콘텐츠]                   │ ← 사용자 집중
│                                   │
│                                   │
├───────────────────────────────────┤
│ ← Ticker (하단)                   │ ← OK: 주변 시야
└───────────────────────────────────┘

❌ 나쁜 위치: 중앙 또는 메인 콘텐츠 옆
┌───────────────────────────────────┐
│    [메인 콘텐츠]                   │
│                                   │
├───────────────────────────────────┤
│ ← Ticker (중앙)                   │ ← ❌ 집중 방해!
├───────────────────────────────────┤
│    [메인 콘텐츠 계속]              │
└───────────────────────────────────┘

<div class="ticker-container">
    <!-- 일시 정지 버튼 -->
    <button
        id="ticker-pause"
        aria-label="티커 일시 정지"
        aria-pressed="false"
    >
        ⏸
    </button>

    <div
        class="ticker"
        role="marquee"
        aria-label="실시간 주식 정보"
    >
        <div class="ticker-content">
            코스피 2,500.22 | 달러 1,430.80
        </div>
    </div>
</div>

<style>
/* 호버 시 자동 일시 정지 */
.ticker-container:hover .ticker-content,
.ticker-container:focus-within .ticker-content {
    animation-play-state: paused;
}

.ticker-content {
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}
</style>

<script>
const pauseBtn = document.getElementById('ticker-pause');
const ticker = document.querySelector('.ticker-content');

pauseBtn.addEventListener('click', () => {
    const isPaused = pauseBtn.getAttribute('aria-pressed') === 'true';

    if (isPaused) {
        ticker.style.animationPlayState = 'running';
        pauseBtn.setAttribute('aria-pressed', 'false');
        pauseBtn.textContent = '⏸';
    } else {
        ticker.style.animationPlayState = 'paused';
        pauseBtn.setAttribute('aria-pressed', 'true');
        pauseBtn.textContent = '▶';
    }
});
</script>

<!-- 티커 외에 완전한 정보를 제공 -->
<div class="ticker-wrapper">
    <div class="ticker" role="marquee" aria-label="실시간 주식 정보">
        <!-- 스크롤되는 티커 -->
    </div>

    <!-- 전체 정보를 볼 수 있는 링크 -->
    <a href="/markets/live" class="view-all">
        전체 시장 정보 보기
    </a>
</div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

❌ WCAG 위반: 제어 불가능한 티커
<div class="ticker">
    <div class="auto-scroll">
        <!-- 계속 스크롤, 멈출 수 없음 -->
    </div>
</div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✅ WCAG 준수: 호버 시 일시 정지
<div class="ticker">
    <div class="auto-scroll">
        <!-- 호버/포커스 시 자동 일시 정지 -->
    </div>
</div>

<style>
.ticker:hover .auto-scroll,
.ticker:focus-within .auto-scroll {
    animation-play-state: paused;
}
</style>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✅ WCAG 준수: 명시적 제어 버튼
<button aria-label="티커 일시 정지" aria-pressed="false">
    ⏸
</button>

<!-- ✅ 올바른 사용: 비필수 정보 -->
<div
    role="marquee"
    aria-label="실시간 주식 정보"
    aria-live="off"
>
    <!-- 티커 콘텐츠 -->
</div>

스크린 리더 동작:
1. 사용자가 요소에 도달하면: "실시간 주식 정보 영역"
2. 자동 업데이트: 읽지 않음 (조용함)
3. 사용자가 원하면: 탐색하여 읽을 수 있음

❌ 잘못된 예: 중요한 알림에 marquee
<div role="marquee" aria-label="시스템 알림">
    서버 점검이 10분 후 시작됩니다
</div>
→ 스크린 리더가 읽지 않아 사용자가 놓칠 수 있음!

✅ 올바른 예: alert 사용
<div role="alert" aria-live="assertive">
    서버 점검이 10분 후 시작됩니다
</div>
→ 즉시 읽어줌

<!-- ❌ 키보드로 접근 불가 -->
<div class="ticker">
    <div class="ticker-item">코스피 2,500</div>
    <div class="ticker-item">달러 1,430</div>
</div>

<!-- ✅ 키보드로 탐색 가능 -->
<div class="ticker" role="marquee" aria-label="실시간 주식 정보">
    <a href="/stock/kospi" class="ticker-item" tabindex="0">
        코스피 2,500 <span class="sr-only">자세히 보기</span>
    </a>
    <a href="/currency/usd" class="ticker-item" tabindex="0">
        달러 1,430 <span class="sr-only">자세히 보기</span>
    </a>
</div>

<style>
/* 포커스 시 애니메이션 일시 정지 */
.ticker:focus-within .ticker-content {
    animation-play-state: paused;
}

/* 포커스 표시 */
.ticker-item:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* 스크린 리더 전용 텍스트 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
</style>

<!-- Googlebot이 페이지를 크롤링할 때 -->
<div class="ticker" role="marquee">
    <div class="ticker-content">
        코스피 2,500 | 달러 1,430 | 유로 1,668
    </div>
</div>

Googlebot의 시점:
- JavaScript 실행 전: 빈 티커 또는 초기 상태만 봄
- 애니메이션: 무시
- 동적으로 업데이트되는 값: 놓침
- 결과: 불완전한 정보 인덱싱

<!-- 1. 시맨틱 HTML로 정적 버전 제공 -->
<div class="ticker-wrapper">
    <!-- AI와 검색 엔진용 정적 콘텐츠 -->
    <div class="ticker-static" aria-hidden="true">
        <ul itemscope itemtype="https://schema.org/ItemList">
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <meta itemprop="position" content="1">
                <span itemprop="name">코스피</span>
                <span itemprop="value">2,500.22</span>
            </li>
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <meta itemprop="position" content="2">
                <span itemprop="name">달러</span>
                <span itemprop="value">1,430.80</span>
            </li>
        </ul>
    </div>

    <!-- 사람용 동적 티커 -->
    <div class="ticker" role="marquee" aria-label="실시간 시장 정보">
        <div class="ticker-content">
            코스피 2,500.22 | 달러 1,430.80
        </div>
    </div>
</div>

<style>
/* 정적 콘텐츠는 화면에서 숨김 (검색 엔진은 읽음) */
.ticker-static {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
</style>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "실시간 주식 시장 정보",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "코스피",
      "item": {
        "@type": "FinancialProduct",
        "name": "KOSPI",
        "price": 2500.22,
        "priceCurrency": "KRW"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "달러",
      "item": {
        "@type": "ExchangeRateSpecification",
        "currency": "USD",
        "currentExchangeRate": 1430.80
      }
    }
  ]
}
</script>

<!-- 1. 명확한 메타데이터 -->
<meta name="description" content="실시간 주식 시장 정보: 코스피, 달러, 유로 환율">

<!-- 2. 의미 있는 aria-label -->
<div
    class="ticker"
    role="marquee"
    aria-label="실시간 주식 정보: 코스피 2,500, 달러 1,430, 유로 1,668"
>
    <!-- 티커 콘텐츠 -->
</div>

<!-- 3. 대체 콘텐츠 링크 -->
<a href="/markets/live-data" class="ticker-alt">
    전체 시장 데이터 보기 (JSON/CSV 다운로드 가능)
</a>

<div class="ticker" role="marquee" aria-label="실시간 시장 정보">
    <div class="ticker-content">
        <span
            class="ticker-item"
            data-market="KOSPI"
            data-value="2500.22"
            data-change="+0.45"
        >
            코스피 2,500.22 ▲ +0.45%
        </span>

        <span
            class="ticker-item"
            data-currency="USD"
            data-rate="1430.80"
            data-change="-0.30"
        >
            달러 1,430.80 ▼ -0.30%
        </span>
    </div>
</div>

<!-- AI가 쉽게 파싱 가능 -->
<script>
// 스크래퍼가 이렇게 읽을 수 있음
const items = document.querySelectorAll('.ticker-item');
const data = Array.from(items).map(item => ({
    market: item.dataset.market || item.dataset.currency,
    value: parseFloat(item.dataset.value || item.dataset.rate),
    change: parseFloat(item.dataset.change)
}));
// 결과: 구조화된 데이터!
</script>

<!-- 웹페이지에 API 링크 명시 -->
<div class="ticker-wrapper">
    <div class="ticker" role="marquee">
        <!-- 티커 UI -->
    </div>

    <div class="ticker-api-info">
        <p>
            이 데이터는
            <a href="/api/markets/live" rel="alternate" type="application/json">
                JSON API
            </a>
            로도 제공됩니다.
        </p>
    </div>
</div>

<!-- Link 헤더로 명시 -->
<link
    rel="alternate"
    type="application/json"
    href="/api/markets/live"
    title="실시간 시장 데이터 API"
>

❌ 잘못된 예: 필수 정보
<div role="marquee">
    중요: 비밀번호를 변경하세요. 계정이 해킹 시도를 받았습니다.
</div>
→ 사용자가 놓칠 수 있음!

✅ 올바른 예: alert 사용
<div role="alert" class="alert-danger">
    <strong>중요:</strong> 비밀번호를 변경하세요.
    계정이 해킹 시도를 받았습니다.
</div>

❌ WCAG 위반
<div class="ticker">
    <div class="auto-scroll">
        <!-- 멈출 수 없음 -->
    </div>
</div>

✅ WCAG 준수
<div class="ticker">
    <div class="auto-scroll">
        <!-- 호버 시 일시 정지 -->
    </div>
</div>

<style>
.ticker:hover .auto-scroll {
    animation-play-state: paused;
}
</style>

<div class="market-summary">
    <h2>실시간 시장 정보</h2>

    <ul class="market-list">
        <li>
            <strong>코스피</strong>
            <span>2,500.22</span>
            <span class="positive">▲ +0.45%</span>
        </li>
        <li>
            <strong>달러</strong>
            <span>1,430.80</span>
            <span class="negative">▼ -0.30%</span>
        </li>
        <li>
            <strong>유로</strong>
            <span>1,668.03</span>
            <span class="positive">▲ +0.12%</span>
        </li>
    </ul>

    <a href="/markets" class="view-all">
        모든 시장 정보 보기 →
    </a>
</div>

<div class="market-tabs">
    <div role="tablist" aria-label="시장 정보">
        <button role="tab" aria-selected="true" aria-controls="panel-stock">
            주식
        </button>
        <button role="tab" aria-selected="false" aria-controls="panel-currency">
            환율
        </button>
        <button role="tab" aria-selected="false" aria-controls="panel-commodity">
            원자재
        </button>
    </div>

    <div id="panel-stock" role="tabpanel" tabindex="0">
        <!-- 주식 정보 -->
    </div>

    <div id="panel-currency" role="tabpanel" tabindex="0" hidden>
        <!-- 환율 정보 -->
    </div>

    <div id="panel-commodity" role="tabpanel" tabindex="0" hidden>
        <!-- 원자재 정보 -->
    </div>
</div>

<div class="rotating-cards">
    <div class="card active">
        <h3>코스피</h3>
        <div class="value">2,500.22</div>
        <div class="change positive">▲ +0.45%</div>
    </div>

    <!-- 5초마다 페이드 인/아웃 -->
</div>

<style>
.card {
    opacity: 0;
    transition: opacity 0.5s;
}

.card.active {
    opacity: 1;
}

/* 호버 시 자동 회전 멈춤 */
.rotating-cards:hover .card {
    animation-play-state: paused;
}
</style>