LunariaJS 현지화 대시보드: 번역 진행 상황을 한눈에 파악하기

이전 글들에서는 LunariaJS의 설치, 설정, 실행 방법을 배웠습니다. 오늘은 LunariaJS의 가장 강력한 기능인 현지화 대시보드를 깊이 있게 살펴보고, 이를 활용해 다국어 프로젝트를 효율적으로 관리하는 방법을 배워보겠습니다.

💡 공식 문서: LunariaJS 한국어 문서 - 대시보드

대시보드 개요

현지화 대시보드란 무엇인가요?

현지화 대시보드는 프로젝트의 번역 상태를 보여주는 시각화 인터페이스입니다. 유지보수자가 가장 관심을 갖는 몇 가지 질문에 답해 줍니다:

전체 진행 상황은 어떤가요? 각 언어의 번역 완료도는 얼마인가요?
어떤 파일에 관심이 필요한가요? 어떤 번역이 오래되었나요? 무엇이 아직 누락되었나요?
번역 품질은 어떤가요? 번역이 원본 문서와 동기화되어 있나요?

왜 대시보드가 필요한가요?

전통적인 현지화 관리에서는 번역 상태를 추적하기 위해 보통 다음이 필요합니다:

스프레드시트를 수동으로 유지
파일에 다양한 TODO 주석 추가
기여자가 직접 진행 상황을 보고하도록 의존

이러한 방법들은 모두 명확한 문제가 있습니다: 정보가 분산되어 있고, 업데이트가 적시에 이루어지지 않으며, 유지보수가 어렵습니다.

LunariaJS 대시보드는 자동화를 통해 이러한 문제를 해결합니다:

자동 업데이트: 빌드할 때마다 자동으로 번역 상태 분석
중앙 집중 표시: 모든 언어, 모든 파일의 상태를 한눈에 확인
실시간 동기화: Git 저장소 상태와 완전히 동기화

대시보드 인터페이스 분석

메인 인터페이스 레이아웃

대시보드에 접속하면 깔끔한 인터페이스를 볼 수 있습니다:

┌─────────────────────────────────────────────────────────────┐
│  🌙 My Project - Localization Status                        │
├─────────────────────────────────────────────────────────────┤
│  [언어 선택기]  [상태 필터]                                   │
├─────────────────────────────────────────────────────────────┤
│  전체 진행률                                                 │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source) ████████████████████ 100%         ││
│  │  🇨🇳 中文              ██████████████░░░░░░  85%         ││
│  │  🇯🇵 日本語            ████████████░░░░░░░░░░ 70%         ││
│  │  🇰🇷 한국어            ████████░░░░░░░░░░░░░░ 55%         ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  파일 목록                                                   │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  📄 index.md                    🟢 🟢 🟢 🟢             ││
│  │  📄 getting-started.md          🟢 🟢 🟡 🟢             ││
│  │  📄 configuration.md            🟢 🟢 🟢 🔴             ││
│  │  📄 api/overview.md             🟢 🔴 🔴 🔴             ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

영역 설명

1. 상단 내비게이션 바

프로젝트 제목
언어 전환기 (다국어 인터페이스 지원 시)
테마 전환 (라이트/다크 모드)

2. 언어 선택기

특정 언어를 선택해 해당 언어 관련 번역 상태만 표시합니다:

[전체 언어 ▼]  [English]  [中文]  [日本語]  [한국어]

3. 상태 필터

번역 상태별로 파일을 필터링합니다:

[전체 상태 ▼]  [✅ 완료]  [⚠️ 오래됨]  [❌ 누락]

4. 전체 진행률 영역

각 언어의 전체 번역 완료도를 표시합니다:

요소	설명
언어 깃발/아이콘	언어 식별자
언어 이름	언어 전체 이름
진행률 바	완료도 시각화
퍼센트	구체적인 완료 비율

5. 파일 목록 영역

추적 중인 모든 파일과 그 번역 상태를 나열합니다.

번역 상태 상세 설명

LunariaJS는 세 가지 상태로 각 번역 파일의 상태를 식별합니다.

🟢 Done (완료)

의미: 번역이 완료되었고 원본 파일과 동기화됨.

판정 조건:

번역 파일이 존재함
번역 파일의 최종 수정 시간 ≥ 원본 파일의 최종 수정 시간

예시:

📄 getting-started.md
├── 원본 파일: en/getting-started.md (수정됨: 2026-02-28)
├── 번역: ko/getting-started.md (수정됨: 2026-02-28) ✅
└── 상태: 🟢 완료

조치 제안: 작업 불필요, 번역이 이미 최신 상태임.

🟡 Outdated (오래됨)

의미: 번역은 존재하지만 원본 파일이 업데이트되어 번역 동기화가 필요함.

판정 조건:

번역 파일이 존재함
번역 파일의 최종 수정 시간 < 원본 파일의 최종 수정 시간

예시:

📄 configuration.md
├── 원본 파일: en/configuration.md (수정됨: 2026-02-28)
├── 번역: ja/configuration.md (수정됨: 2026-02-20) ⚠️
└── 상태: 🟡 오래됨 (8일 뒤처짐)

조치 제안:

원본 파일의 최신 변경 사항 확인
번역 파일 업데이트
업데이트된 번역 제출

🔴 Missing (누락)

의미: 번역 파일이 존재하지 않음.

판정 조건:

번역 파일이 예상 경로에 존재하지 않음

예시:

📄 api/overview.md
├── 원본 파일: en/api/overview.md (존재함)
├── 번역: ko/api/overview.md (존재하지 않음) ❌
└── 상태: 🔴 누락

조치 제안:

번역 파일 생성
원본 파일 내용 번역
새 번역 제출

파일 상태 추적

단일 파일 상태 보기

파일명을 클릭하면 상세 정보를 볼 수 있습니다:

┌─────────────────────────────────────────────────────────────┐
│  📄 getting-started.md                                      │
├─────────────────────────────────────────────────────────────┤
│  원본 파일 경로: docs/en/getting-started.md                  │
│  최종 업데이트: 2026-02-28 14:30 (commit: abc1234)          │
│  파일 크기: 4.2 KB                                           │
├─────────────────────────────────────────────────────────────┤
│  번역 상태                                                   │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source)  ✅ 원본 파일                      ││
│  │  🇨🇳 中文              ✅ 완료 (2026-02-28)              ││
│  │  🇯🇵 日本語            ⚠️ 오래됨 8일 (2026-02-20)        ││
│  │  🇰🇷 한국어            ❌ 누락                           ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  [원본 파일 보기]  [번역 편집]                                │
└─────────────────────────────────────────────────────────────┘

일괄 상태 분석

대시보드는 일괄 분석 뷰를 제공하여 문제 영역을 빠르게 식별할 수 있습니다:

언어별 분석:

언어 상태 요약
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
언어      완료    오래됨    누락    총계
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
中文      38      3         1       42
日本語    30      8         4       42
한국어    25      10        7       42
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

디렉토리별 분석:

디렉토리 상태 요약
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
디렉토리              완료율    오래됨    누락
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
docs/                 85%       5         2
docs/api/             60%       8         4
docs/guide/           90%       2         1
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Git 커밋 연결

대시보드는 Git 히스토리와 깊게 통합되어 각 상태가 구체적인 커밋에 연결됩니다:

📄 configuration.md

변경 히스토리:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 2026-02-28 abc1234 "Update configuration docs"
   수정자: @username
   변경: +15 -3 lines

📌 2026-02-20 def5678 "Add new config options"
   수정자: @another-user
   변경: +8 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

이 파일은 2026-02-28에 업데이트되었으며, 번역은 8일 뒤처짐.

필터링 및 검색 기능

언어별 필터링

특정 언어를 선택하면 해당 언어 관련 번역 상태만 표시합니다:

// 필터링 로직
filterByLanguage('ko')  // 한국어 번역 상태만 표시

사용 시나리오:

한국어 번역 담당자가 한국어 번역 진행 상황만 확인
특정 언어의 누락된 번역을 빠르게 찾기

상태별 필터링

처리가 필요한 파일을 빠르게 필터링합니다:

필터 옵션	표시 내용	사용 시나리오
전체 상태	모든 파일	전체 상황 확인
완료만	🟢 녹색 상태	성과 확인, 완료 항목 재확인
오래됨만	🟡 노란색 상태	가장 자주 사용 - 업데이트가 필요한 번역 찾기
누락만	🔴 빨간색 상태	완전히 번역되지 않은 파일 찾기

파일 경로로 검색

파일 경로 퍼지 검색을 지원합니다:

검색: [api___________]

결과:
📄 api/overview.md
📄 api/authentication.md
📄 api/endpoints/users.md
📄 api/endpoints/posts.md

복합 필터링

여러 필터 조건을 조합할 수 있습니다:

언어: [한국어 ▼]  상태: [오래됨 ▼]  검색: [guide]

결과:
📄 guide/installation.md      🟡 오래됨 3일
📄 guide/configuration.md     🟡 오래됨 8일

대시보드 사용자 정의

사용자 정의 테마

CSS 변수로 대시보드 외관을 사용자 정의할 수 있습니다:

/* lunaria-theme.css */
:root {
  --lunaria-color-primary: #6366f1;
  --lunaria-color-success: #22c55e;
  --lunaria-color-warning: #eab308;
  --lunaria-color-danger: #ef4444;

  --lunaria-bg-primary: #ffffff;
  --lunaria-bg-secondary: #f8fafc;
  --lunaria-text-primary: #1e293b;
  --lunaria-text-secondary: #64748b;
}

.dark {
  --lunaria-bg-primary: #0f172a;
  --lunaria-bg-secondary: #1e293b;
  --lunaria-text-primary: #f8fafc;
  --lunaria-text-secondary: #94a3b8;
}

설정 사용자 정의

lunaria.config.json에서 대시보드를 사용자 정의할 수 있습니다:

{
  "dashboard": {
    "outputDir": "public/i18n-status",
    "title": "My Project Localization Status",
    "description": "Track the translation progress of our documentation",
    "uiLanguage": "ko",
    "customCss": "./lunaria-theme.css",
    "favicon": "./public/favicon.ico"
  }
}

기존 사이트에 통합

대시보드를 기존 문서 사이트에 임베드할 수 있습니다:

방식 1: 하위 경로로

// astro.config.mjs
export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      // 대시보드는 /i18n-status 경로에 위치
    }),
  ],
});

방식 2: 내비게이션 링크

// 문서 사이트 내비게이션에 링크 추가
{
  label: '번역 상태',
  link: '/i18n-status/',
  icon: 'translate',
}

사용자 정의 배지 추가

대시보드에 사용자 정의 배지 표시를 추가할 수 있습니다:

{
  "dashboard": {
    "badges": [
      {
        "label": "한국어 번역",
        "status": "85%",
        "color": "green"
      },
      {
        "label": "일본어 번역",
        "status": "70%",
        "color": "yellow"
      }
    ]
  }
}

실용적인 팁

1. 정기적으로 대시보드 확인

다음 시점에 대시보드를 확인하는 것을 권장합니다:

주간 팀 회의 전
새 버전 출시 전
새 원본 문서 추가 후
번역 기여자가 PR을 제출한 후

2. 대시보드로 작업 분배

대시보드 스크린샷이나 링크를 번역 팀에 공유하세요:

## 이번 주 번역 작업

[LunariaJS 대시보드](/i18n-status/)를 확인하세요

우선순위:
1. 🟡 오래된 번역 (8개 파일)
2. 🔴 누락된 번역 (4개 파일)

목표: 이번 주에 모든 오래된 번역 업데이트 완료.

3. 진행률 목표 설정

대시보드 제목에 목표를 표시하세요:

{
  "dashboard": {
    "title": "번역 진행률 (목표: 3월 말까지 90% 달성)"
  }
}

4. 대시보드 데이터 활용

대시보드가 생성한 JSON 데이터는 다른 용도로 활용할 수 있습니다:

// data/status.json
{
  "summary": {
    "total": 42,
    "ko": { "done": 38, "outdated": 3, "missing": 1 },
    "ja": { "done": 30, "outdated": 8, "missing": 4 }
  }
}

이 데이터를 활용하여:

자동화된 보고서 생성
README에 배지 표시
CI/CD 조건 트리거

대시보드 모범 사례

1. 대시보드를 최신 상태로 유지

// package.json
{
  "scripts": {
    "build": "astro build && lunaria build",
    "dev": "concurrently \"astro dev\" \"lunaria build --watch\""
  }
}

2. 팀 공유 액세스

대시보드를 공개 URL에 배포
기여 가이드에 대시보드 링크 추가
정기적으로 커뮤니티 채널에 진행 상황 공유

3. 품질 목표 설정

지표	목표	확인 빈도
전체 완료도	≥ 90%	매주
오래된 번역	≤ 5개	매 PR
누락된 번역	0	출시 전

4. 대시보드와 Issue 통합

GitHub Issue에서 대시보드를 참조하세요:

## 번역 작업

`getting-started.md`를 한국어로 번역해 주세요.

참조: [대시보드 상태](/i18n-status/#getting-started.md)

요약

LunariaJS 현지화 대시보드의 핵심 가치:

기능	가치
시각화 진행률	번역 완료도를 한눈에 파악
상태 추적	오래되거나 누락된 번역 자동 식별
Git 통합	번역 상태가 코드 히스토리와 동기화
필터링 검색	처리가 필요한 파일을 빠르게 찾기
사용자 정의 가능	프로젝트 브랜드와 워크플로우에 맞게 조정

핵심 포인트:

세 가지 상태: 🟢 완료, 🟡 오래됨, 🔴 누락
필터링 기능을 활용해 문제를 빠르게 찾기
정기적으로 대시보드를 확인해 번역 동기화 유지
팀과 대시보드를 공유해 협업 효율 향상

다음 단계

다음 글에서는 LunariaJS와 Git의 깊은 통합을 살펴보고, 다음 방법을 배우겠습니다:

Git을 활용해 현지화 변경 사항 추적
오래된 번역 감지 원리 이해
효율적인 팀 협업 워크플로우 설계
브랜치 전략에서의 번역 문제 해결

기대해 주세요!

💡 추천 읽기:

LunariaJS 한국어 문서

LunariaJS 대시보드 설정

LunariaJS 영어 문서

LunariaJS 일본어 문서

LunariaJS 중국어 문서