diff --git a/src/data/breadcrumb.json b/public/data/breadcrumb.json
similarity index 100%
rename from src/data/breadcrumb.json
rename to public/data/breadcrumb.json
diff --git a/src/data/nav/get-started.json b/public/data/nav/get-started.json
similarity index 100%
rename from src/data/nav/get-started.json
rename to public/data/nav/get-started.json
diff --git a/src/data/nav/guides.json b/public/data/nav/guides.json
similarity index 100%
rename from src/data/nav/guides.json
rename to public/data/nav/guides.json
diff --git a/src/scripts/breadcrumb.ts b/src/scripts/breadcrumb.ts
index b098813..5ac8870 100644
--- a/src/scripts/breadcrumb.ts
+++ b/src/scripts/breadcrumb.ts
@@ -1,5 +1,3 @@
-import translations from '../data/breadcrumb.json';
-
 /**
  *  Breadcrumb 아이템의 세그먼트 데이터 구조
  * - name: 세그먼트 이름
@@ -27,18 +25,36 @@ interface TranslationData {
   [key: string]: SegmentData;
 }
 
+/**
+ * Breadcrumb 번역 데이터를 로드합니다.
+ */
+async function loadTranslationData(): Promise<TranslationData> {
+  try {
+    const response = await fetch('/data/breadcrumb.json');
+    if (!response.ok) {
+      throw new Error('Failed to load breadcrumb translation data');
+    }
+    return await response.json();
+  } catch (error) {
+    console.error('Error loading breadcrumb translation data:', error);
+    // 기본값 반환 (빈 객체)
+    return {};
+  }
+}
+
 /**
  * 경로 세그먼트를 번역하고 링크 가능 여부를 확인합니다.
  * 계층적 구조를 고려하여 현재 경로에서 세그먼트를 찾습니다.
  * @param segments 전체 경로 세그먼트 배열
  * @param currentIndex 현재 처리 중인 세그먼트의 인덱스(깊이를 알기 위함)
+ * @param translationData 번역 데이터
  * @returns 해당 세그먼트 데이터 또는 null (데이터가 없는 경우)
  */
 function getSegmentData(
   segments: string[],
-  currentIndex: number
+  currentIndex: number,
+  translationData: TranslationData
 ): SegmentData | null {
-  const translationData = translations as TranslationData;
   let current = translationData[segments[0]];
 
   if (!current) {
@@ -59,13 +75,14 @@ function getSegmentData(
 /**
  * 현재 hash를 기반으로 breadcrumb 아이템들을 생성합니다.
  */
-function generateBreadcrumbItems(): BreadcrumbItem[] {
+async function generateBreadcrumbItems(): Promise<BreadcrumbItem[]> {
   const hash = window.location.hash.slice(1); // # 제거
 
   if (!hash || hash === '/') {
     return [{ name: '홈', path: '/', linkable: true }];
   }
 
+  const translationData = await loadTranslationData();
   const pathSegments = hash.split('/').filter((segment) => segment !== '');
   const breadcrumbItems: BreadcrumbItem[] = [
     { name: '홈', path: '/', linkable: true },
@@ -73,7 +90,7 @@ function generateBreadcrumbItems(): BreadcrumbItem[] {
 
   let currentPath = '';
   pathSegments.forEach((segment, index) => {
-    const segmentData = getSegmentData(pathSegments, index);
+    const segmentData = getSegmentData(pathSegments, index, translationData);
     currentPath += `/${segment}`;
 
     // translations 데이터에 없는 세그먼트는 breadcrumb에 추가하지 않음
@@ -131,12 +148,12 @@ function removePreviousBreadcrumb(): void {
 /**
  * Breadcrumb을 생성하고 div#content의 첫 번째 자식으로 추가합니다.
  */
-export function initializeBreadcrumb(): void {
+export async function initializeBreadcrumb(): Promise<void> {
   const contentDiv = document.getElementById('content')!;
 
   removePreviousBreadcrumb();
 
-  const breadcrumbItems = generateBreadcrumbItems();
+  const breadcrumbItems = await generateBreadcrumbItems();
   const breadcrumbElement = createBreadcrumbElement(breadcrumbItems);
 
   contentDiv.insertBefore(breadcrumbElement, contentDiv.firstChild);
diff --git a/src/scripts/components/nav-component.ts b/src/scripts/components/nav-component.ts
index 9523371..5f3ded5 100644
--- a/src/scripts/components/nav-component.ts
+++ b/src/scripts/components/nav-component.ts
@@ -34,7 +34,7 @@ export default class NavComponent extends HTMLElement {
     this.currentRoute = this.getCurrentRoute();
 
     try {
-      const response = await fetch(`/src/data/nav/${this.currentRoute}.json`);
+      const response = await fetch(`/data/nav/${this.currentRoute}.json`);
       if (!response.ok) {
         throw new Error(
           `Failed to load navigation data for ${this.currentRoute}`
@@ -44,7 +44,7 @@ export default class NavComponent extends HTMLElement {
     } catch (error) {
       console.error('Error loading navigation data:', error);
       // 기본값으로 get-started 데이터 반환
-      const fallbackResponse = await fetch('/src/data/nav/get-started.json');
+      const fallbackResponse = await fetch('/data/nav/get-started.json');
       return await fallbackResponse.json();
     }
   }
diff --git a/src/scripts/main.ts b/src/scripts/main.ts
index 0cc543d..0c11298 100644
--- a/src/scripts/main.ts
+++ b/src/scripts/main.ts
@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   try {
     await initializeMarkdownLoader();
     initializeTableContents();
-    initializeBreadcrumb();
+    await initializeBreadcrumb();
   } catch (error) {
     console.error('❌ main.ts: DOMContentLoaded : Markdown 로드 실패!', error);
     // 실제 다른 작업이 필요
@@ -22,7 +22,7 @@ window.addEventListener('hashchange', async () => {
   try {
     await initializeMarkdownLoader();
     initializeTableContents();
-    initializeBreadcrumb();
+    await initializeBreadcrumb();
     window.scrollTo(0, 0); // 페이지 이동 시 최상단으로 스크롤 이동
   } catch (error) {
     console.error('❌ main.ts: hashchange : Markdown 로드 실패!', error);