웹 접근성 강화: aria-hidden, aria-label, 포커스 표시기, 대비 개선 (#51)

- 모든 장식용 Material Symbol 아이콘에 aria-hidden="true" 추가
  (StatusSummaryBar, StationCard, ExternalMapLinks, DataFreshnessBar,
   ThemeToggle, ContactModal, About/Archive/Route 페이지 등)
- 장식용 이모지(✏️, 🔍, ⚠️)에 aria-hidden="true" 추가
- archive, route, about 페이지 nav 요소에 aria-label="상단 탐색" 추가
- SearchInput: focus:ring-0을 focus:ring-2로 변경하여 포커스 표시기 복원
- SearchInput, DevSettingsPanel: placeholder 투명도(/60) 제거로 대비 개선
- StationDetailClient: 로딩 스피너에 role="status" 및 aria-label 추가

https://claude.ai/code/session_01RjRxnGfDyE5Vs4Xmzi3Jd3

Co-authored-by: Claude <noreply@anthropic.com>

Author: brody-0125

web/src/app/about/page.tsx

@@ -7,17 +7,17 @@ export default function AboutPage() {
   return (
     <>
       {/* Navbar */}
-      <nav className="bg-surface border-b border-border">
+      <nav className="bg-surface border-b border-border" aria-label="상단 탐색">
         <div className="max-w-5xl mx-auto px-4 md:px-8 h-16 flex items-center justify-between">
           <Link href="/" className="flex items-center gap-2 text-status-operating hover:opacity-80 transition-opacity">
-            <span className="material-symbols-outlined text-3xl">subway</span>
+            <span className="material-symbols-outlined text-3xl" aria-hidden="true">subway</span>
             <span className="font-serif font-bold text-xl text-text-primary tracking-tight">나들이</span>
           </Link>
           <div className="flex items-center gap-3">
             <ThemeToggle />
             <Link href="/" className="text-sm text-text-secondary hover:text-status-operating transition-colors flex items-center gap-1">
               홈으로
-              <span className="material-symbols-outlined text-base">arrow_forward</span>
+              <span className="material-symbols-outlined text-base" aria-hidden="true">arrow_forward</span>
             </Link>
           </div>
         </div>
@@ -27,7 +27,7 @@ export default function AboutPage() {
         {/* Header */}
         <div className="text-center mb-12">
           <div className="inline-flex items-center justify-center w-16 h-16 bg-status-operating/10 rounded-full mb-6">
-            <span className="material-symbols-outlined text-status-operating text-3xl">handshake</span>
+            <span className="material-symbols-outlined text-status-operating text-3xl" aria-hidden="true">handshake</span>
           </div>
           <h1 className="font-serif text-3xl md:text-4xl font-bold text-text-primary mb-3">
             데이터 출처 및 투명성
@@ -68,15 +68,15 @@ export default function AboutPage() {
             <div className="grid grid-cols-3 divide-x divide-border">
               <div className="p-5">
                 <div className="flex items-center gap-1.5 text-text-secondary text-xs mb-1">
-                  <span className="material-symbols-outlined text-xs">settings</span>
+                  <span className="material-symbols-outlined text-xs" aria-hidden="true">settings</span>
                   출처
                 </div>
                 <p className="font-mono text-lg font-medium text-text-primary">서울 지하철</p>
                 <span className="text-xs text-status-operating font-medium">공식 API</span>
               </div>
               <div className="p-5">
                 <div className="flex items-center gap-1.5 text-text-secondary text-xs mb-1">
-                  <span className="material-symbols-outlined text-xs">speed</span>
+                  <span className="material-symbols-outlined text-xs" aria-hidden="true">speed</span>
                   지연 시간
                 </div>
                 <p className="font-mono text-lg font-medium text-text-primary">&lt; 60s</p>
@@ -95,7 +95,7 @@ export default function AboutPage() {
           {/* Accuracy Note */}
           <div className="border-l-4 border-status-maintenance bg-status-maintenance-bg rounded-lg p-5">
             <div className="flex items-center gap-2 mb-2">
-              <span className="material-symbols-outlined text-status-maintenance text-base">warning</span>
+              <span className="material-symbols-outlined text-status-maintenance text-base" aria-hidden="true">warning</span>
               <span className="font-bold text-text-primary">정확성에 관한 안내</span>
             </div>
             <p className="text-sm text-text-secondary leading-relaxed">

web/src/app/archive/page.tsx

@@ -5,21 +5,21 @@ import Link from 'next/link';
 export default function ArchivePage() {
   return (
     <>
-      <nav className="bg-surface-cream border-b border-border-cream">
+      <nav className="bg-surface-cream border-b border-border-cream" aria-label="상단 탐색">
         <div className="max-w-5xl mx-auto px-4 md:px-8 h-16 flex items-center justify-between">
           <Link href="/" className="flex items-center gap-2 text-primary hover:opacity-80 transition-opacity">
-            <span className="material-symbols-outlined text-3xl">subway</span>
+            <span className="material-symbols-outlined text-3xl" aria-hidden="true">subway</span>
             <span className="font-serif font-bold text-xl text-text-main tracking-tight">나들이</span>
           </Link>
           <Link href="/" className="text-sm text-text-muted hover:text-primary transition-colors flex items-center gap-1">
             대시보드로 돌아가기
-            <span className="material-symbols-outlined text-base">arrow_forward</span>
+            <span className="material-symbols-outlined text-base" aria-hidden="true">arrow_forward</span>
           </Link>
         </div>
       </nav>
       <main className="flex-1 w-full max-w-3xl mx-auto px-4 md:px-8 py-16 text-center">
         <div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-6">
-          <span className="material-symbols-outlined text-primary text-3xl">inventory_2</span>
+          <span className="material-symbols-outlined text-primary text-3xl" aria-hidden="true">inventory_2</span>
         </div>
         <h1 className="font-serif text-3xl font-bold text-text-main mb-3">데이터 아카이브</h1>
         <p className="font-serif text-lg text-text-muted italic mb-8">준비 중</p>

web/src/app/page.tsx

@@ -141,7 +141,7 @@ export default function HomePage() {
               <ThemeToggle />
             </nav>
             <div className="py-12 text-center">
-              <p className="text-4xl mb-3">✏️</p>
+              <p className="text-4xl mb-3" aria-hidden="true">✏️</p>
               <p className="mb-2 font-serif text-base font-bold text-text-primary">
                 더 입력하면 검색 결과가 표시됩니다
               </p>
@@ -183,7 +183,7 @@ export default function HomePage() {
               ))}
               {filteredStations.length === 0 && (
                 <div className="py-12 text-center">
-                  <p className="text-4xl mb-3">🔍</p>
+                  <p className="text-4xl mb-3" aria-hidden="true">🔍</p>
                   <p className="mb-2 font-serif text-base font-bold text-text-primary">
                     &lsquo;{query.trim()}&rsquo;와 일치하는 역이 없어요
                   </p>

web/src/app/route/page.tsx

@@ -5,21 +5,21 @@ import Link from 'next/link';
 export default function RoutePage() {
   return (
     <>
-      <nav className="bg-surface-cream border-b border-border-cream">
+      <nav className="bg-surface-cream border-b border-border-cream" aria-label="상단 탐색">
         <div className="max-w-5xl mx-auto px-4 md:px-8 h-16 flex items-center justify-between">
           <Link href="/" className="flex items-center gap-2 text-primary hover:opacity-80 transition-opacity">
-            <span className="material-symbols-outlined text-3xl">subway</span>
+            <span className="material-symbols-outlined text-3xl" aria-hidden="true">subway</span>
             <span className="font-serif font-bold text-xl text-text-main tracking-tight">나들이</span>
           </Link>
           <Link href="/" className="text-sm text-text-muted hover:text-primary transition-colors flex items-center gap-1">
             대시보드로 돌아가기
-            <span className="material-symbols-outlined text-base">arrow_forward</span>
+            <span className="material-symbols-outlined text-base" aria-hidden="true">arrow_forward</span>
           </Link>
         </div>
       </nav>
       <main className="flex-1 w-full max-w-3xl mx-auto px-4 md:px-8 py-16 text-center">
         <div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-6">
-          <span className="material-symbols-outlined text-primary text-3xl">map</span>
+          <span className="material-symbols-outlined text-primary text-3xl" aria-hidden="true">map</span>
         </div>
         <h1 className="font-serif text-3xl font-bold text-text-main mb-3">경로 안내</h1>
         <p className="font-serif text-lg text-text-muted italic mb-8">준비 중</p>

web/src/app/station/[code]/StationDetailClient.tsx

@@ -153,8 +153,8 @@ export default function StationDetailClient({ code }: { code: string }) {
         )}
 
         {!data && !error && (
-          <div className="flex flex-col items-center justify-center py-16 gap-3">
-            <div className="w-8 h-8 border-2 border-status-operating/30 border-t-status-operating rounded-full animate-spin" />
+          <div role="status" aria-label="데이터 로딩 중" className="flex flex-col items-center justify-center py-16 gap-3">
+            <div className="w-8 h-8 border-2 border-status-operating/30 border-t-status-operating rounded-full animate-spin" aria-hidden="true" />
             <p className="text-text-secondary text-sm">역 정보를 가져오고 있어요...</p>
           </div>
         )}
@@ -164,7 +164,7 @@ export default function StationDetailClient({ code }: { code: string }) {
             {/* Fault Banner */}
             {hasFault && (
               <div className="bg-status-fault-bg border border-status-fault-border rounded-xl p-4 mt-4 flex gap-3 items-start">
-                <span className="text-lg shrink-0 mt-0.5">⚠️</span>
+                <span className="text-lg shrink-0 mt-0.5" aria-hidden="true">⚠️</span>
                 <div className="text-[13px] leading-relaxed text-status-fault">
                   <strong>
                     {faultDetails.length === 1
@@ -211,7 +211,7 @@ export default function StationDetailClient({ code }: { code: string }) {
                           >
                             <div className="flex items-center justify-between mb-1">
                               <div className="flex items-center gap-2">
-                                <span className="material-symbols-outlined text-text-secondary text-lg">
+                                <span className="material-symbols-outlined text-text-secondary text-lg" aria-hidden="true">
                                   {FACILITY_TYPE_ICONS[type]}
                                 </span>
                                 <span className="font-serif font-semibold text-[14px] text-text-primary">

web/src/components/ContactModal.tsx

@@ -322,7 +322,7 @@ export default function ContactModal({ isOpen, onClose, onSubmit }: ContactModal
           >
             {status === 'loading' ? (
               <>
-                <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" aria-hidden="true" />
                 <span>전송 중...</span>
               </>
             ) : status === 'success' ? (

web/src/components/DataFreshnessBar.tsx

@@ -32,7 +32,7 @@ export default function DataFreshnessBar({ updatedAt, isStale }: DataFreshnessBa
       <div className="flex items-center gap-2">
         {isStale ? (
           <>
-            <span className="material-symbols-outlined text-base text-status-fault">warning</span>
+            <span className="material-symbols-outlined text-base text-status-fault" aria-hidden="true">warning</span>
             <p className="font-mono text-xs font-medium tracking-tight text-status-fault sm:text-sm">
               {relativeTime} 데이터 · 현장 확인 권장
             </p>

web/src/components/DevSettingsPanel.tsx

@@ -93,7 +93,7 @@ export default function DevSettingsPanel({ onSettingsChange }: { onSettingsChang
                     value={key}
                     onChange={(e) => setKey(e.target.value)}
                     placeholder="인증키 입력"
-                    className="flex-1 px-3 py-2 text-sm border border-border-cream rounded-sm bg-bg text-text-primary placeholder:text-text-secondary/60 focus:outline-2 focus:outline-status-operating focus:outline-offset-1 font-mono"
+                    className="flex-1 px-3 py-2 text-sm border border-border-cream rounded-sm bg-bg text-text-primary placeholder:text-text-secondary focus:outline-2 focus:outline-status-operating focus:outline-offset-1 font-mono"
                   />
                   <button
                     onClick={handleKeySave}

web/src/components/ExternalMapLinks.tsx

@@ -28,7 +28,7 @@ export default function ExternalMapLinks({ station }: ExternalMapLinksProps) {
           aria-label={`네이버 지도에서 ${station.name}역 길찾기 열기 (외부 앱)`}
         >
           네이버 길찾기
-          <span className="material-symbols-outlined text-sm">open_in_new</span>
+          <span className="material-symbols-outlined text-sm" aria-hidden="true">open_in_new</span>
         </a>
         <a
           href={buildKakaoDirectionsUrl(params)}
@@ -38,7 +38,7 @@ export default function ExternalMapLinks({ station }: ExternalMapLinksProps) {
           aria-label={`카카오맵에서 ${station.name}역 길찾기 열기 (외부 앱)`}
         >
           카카오 길찾기
-          <span className="material-symbols-outlined text-sm">open_in_new</span>
+          <span className="material-symbols-outlined text-sm" aria-hidden="true">open_in_new</span>
         </a>
       </div>
     </div>

web/src/components/SearchInput.tsx

@@ -49,7 +49,7 @@ export default function SearchInput({ value, onChange, compact }: SearchInputPro
           onKeyDown={handleKeyDown}
           placeholder="역 이름을 입력하세요 (예: 강남, 서울역)"
           aria-label="지하철역 검색"
-          className="block w-full rounded-md border border-border bg-bg py-2 pl-10 pr-20 font-sans text-text-primary transition-colors placeholder:text-text-secondary focus:border-border-strong focus:outline-none focus:ring-0"
+          className="block w-full rounded-md border border-border bg-bg py-2 pl-10 pr-20 font-sans text-text-primary transition-colors placeholder:text-text-secondary focus:border-border-strong focus:outline-none focus:ring-2 focus:ring-status-operating/30"
         />
         <div className="absolute inset-y-0 right-0 flex items-center gap-0.5 pr-1">
           {localValue && (
@@ -90,7 +90,7 @@ export default function SearchInput({ value, onChange, compact }: SearchInputPro
         onKeyDown={handleKeyDown}
         placeholder="역 이름을 입력하세요 (예: 강남, 서울역)"
         aria-label="지하철역 검색"
-        className="block h-[52px] w-full rounded-xl border-2 border-border bg-surface pl-12 pr-14 font-sans text-lg text-text-primary shadow-xs outline-none transition-colors placeholder:text-text-secondary/60 focus:border-status-operating focus:ring-0"
+        className="block h-[52px] w-full rounded-xl border-2 border-border bg-surface pl-12 pr-14 font-sans text-lg text-text-primary shadow-xs outline-none transition-colors placeholder:text-text-secondary focus:border-status-operating focus:ring-2 focus:ring-status-operating/30"
       />
       <button
         type="submit"