From 22927712ec35e0a4b405a50334adcd02de705789 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 25 Aug 2026 14:16:49 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?=EC=99=B8=EB=B6=80=20=EB=A7=81=ED=81=AC=EC=97=90=20=EC=83=88=20?=
 =?UTF-8?q?=EC=B0=BD=20=EC=97=B4=EB=A6=BC=20=ED=88=B4=ED=8C=81(title)=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .Jules/palette.md |  4 ++++
 i18n.js           | 22 ++++++++++++++++------
 index.html        | 32 ++++++++++++++++----------------
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a7cf4c..97631d2 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -21,3 +21,7 @@
 ## 2024-07-15 - Expand clickable area of project cards
 **Learning:** Using an anchor tag to wrap an entire card (block-level element) can result in verbose and confusing screen reader output. However, restricting the clickable area to just the title makes the UI harder to interact with (violating Fitts's Law).
 **Action:** Apply `position: relative` to the card container and use a `::after` pseudo-element with `position: absolute; inset: 0;` on the title's anchor tag. This expands the clickable area to the whole card while keeping semantic and accessible HTML structure.
+
+## 2024-08-25 - 외부 링크에 접근성 향상을 위한 title 속성과 i18n 적용
+**Learning:** 외부 링크(`target="_blank"`)가 새 창에서 열린다는 사실을 스크린 리더와 시각 사용자에게 인지시키기 위해 커스텀 CSS(.sr-only) 추가 없이 기존 `i18n.js` 구조를 확장(`data-i18n-title` 지원)하는 방식으로 다국어 접근성 툴팁을 추가하는 것이 더 유연하고 효과적임을 발견함.
+**Action:** 시각적인 디자인 변경 없이 접근성 힌트를 주고 싶을 때 `title` 어트리뷰트와 `i18n.js` 속성 확장을 활용할 것.
diff --git a/i18n.js b/i18n.js
index 00b81d3..27837cb 100644
--- a/i18n.js
+++ b/i18n.js
@@ -144,7 +144,8 @@ const messages = {
     "work.fourTitle": "작업 흐름",
     "work.fourBody": "반복 탐색은 줄이고 근거 확인과 사람의 판단은 남기는 흐름.",
     "footer.founded": "Founded by",
-    "footer.line": "Context into judgment. Judgment into action."
+    "footer.line": "Context into judgment. Judgment into action.",
+    "a11y.newWindow": "(새 창에서 열림)"
   },
   en: {
     metaTitle: "Contextual Wisdom Lab",
@@ -291,7 +292,8 @@ const messages = {
     "work.fourTitle": "Agentic workflows",
     "work.fourBody": "Workflows that reduce repeated search while preserving evidence checks and human judgment.",
     "footer.founded": "Founded by",
-    "footer.line": "Context into judgment. Judgment into action."
+    "footer.line": "Context into judgment. Judgment into action.",
+    "a11y.newWindow": "(Opens in a new tab)"
   }
 };
 
@@ -365,14 +367,22 @@ function setLanguage(lang) {
 
   if (!isInitialDefault) {
     if (!i18nNodes) {
-      i18nNodes = document.querySelectorAll("[data-i18n]");
+      i18nNodes = document.querySelectorAll("[data-i18n], [data-i18n-title]");
     }
 
     // Only update textContent if it actually changed to avoid layout recalculations
     i18nNodes.forEach((node) => {
-      const newText = dict[node.dataset.i18n];
-      if (newText && node.textContent !== newText) {
-        node.textContent = newText;
+      if (node.hasAttribute("data-i18n")) {
+        const newText = dict[node.dataset.i18n];
+        if (newText && node.textContent !== newText) {
+          node.textContent = newText;
+        }
+      }
+      if (node.hasAttribute("data-i18n-title")) {
+        const newTitle = dict[node.dataset.i18nTitle];
+        if (newTitle && node.getAttribute("title") !== newTitle) {
+          node.setAttribute("title", newTitle);
+        }
       }
     });
   }
diff --git a/index.html b/index.html
index a2dbbd7..83bde77 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
         <a href="#projects" data-i18n="nav.projects">프로젝트</a>
         <a href="#forks" data-i18n="nav.forks">Fork</a>
         <a href="#work" data-i18n="nav.work">작업</a>
-        <a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab">GitHub</a>
+        <a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">GitHub</a>
       </nav>
       <div class="language-switch" role="group" aria-label="Language">
         <button type="button" data-lang="ko" lang="ko" aria-pressed="true" aria-label="한국어">KO</button>
@@ -59,7 +59,7 @@ <h1 data-i18n="hero.title">맥락지혜 연구실</h1>
             구슬이 서 말이어도 꿰어야 보배이듯, 문서, 메일, 로그, 회의록을 맥락 안에서 엮어 사람이 무엇을 결정하고 무엇을 실행할지 보이게 하는 AI 의사결정 지원 시스템을 연구하고 만듭니다.
           </p>
           <div class="hero-actions" role="group" aria-label="Homepage actions">
-            <a target="_blank" rel="noopener noreferrer" class="button primary" href="https://github.com/ContextualWisdomLab" data-i18n="hero.primaryCta">GitHub 보기</a>
+            <a target="_blank" rel="noopener noreferrer" class="button primary" href="https://github.com/ContextualWisdomLab" data-i18n="hero.primaryCta" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">GitHub 보기</a>
             <a class="button secondary" href="#dikw" data-i18n="hero.secondaryCta">DIKW 보기</a>
           </div>
         </div>
@@ -254,19 +254,19 @@ <h2 data-i18n="references.title">참고문헌</h2>
         <ol class="reference-list">
           <li>
             <span data-i18n="references.ackoff">Ackoff, R. L. (1989). From data to wisdom. Journal of Applied Systems Analysis, 16(1), 3-9.</span>
-            <a target="_blank" rel="noopener noreferrer" href="https://faculty.ung.edu/kmelton/documents/datawisdom.pdf">https://faculty.ung.edu/kmelton/documents/datawisdom.pdf</a>
+            <a target="_blank" rel="noopener noreferrer" href="https://faculty.ung.edu/kmelton/documents/datawisdom.pdf" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">https://faculty.ung.edu/kmelton/documents/datawisdom.pdf</a>
           </li>
           <li>
             <span data-i18n="references.baskarada">Baskarada, S., &amp; Koronios, A. (2013). Data, information, knowledge, wisdom (DIKW): A semiotic theoretical and empirical exploration of the hierarchy and its quality dimension. Australasian Journal of Information Systems, 18(1).</span>
-            <a target="_blank" rel="noopener noreferrer" href="https://doi.org/10.3127/ajis.v18i1.748">https://doi.org/10.3127/ajis.v18i1.748</a>
+            <a target="_blank" rel="noopener noreferrer" href="https://doi.org/10.3127/ajis.v18i1.748" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">https://doi.org/10.3127/ajis.v18i1.748</a>
           </li>
           <li>
             <span data-i18n="references.fricke">Frické, M. (2009). The knowledge pyramid: A critique of the DIKW hierarchy. Journal of Information Science, 35(2), 131-142.</span>
-            <a target="_blank" rel="noopener noreferrer" href="https://doi.org/10.1177/0165551508094050">https://doi.org/10.1177/0165551508094050</a>
+            <a target="_blank" rel="noopener noreferrer" href="https://doi.org/10.1177/0165551508094050" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">https://doi.org/10.1177/0165551508094050</a>
           </li>
           <li>
             <span data-i18n="references.brienza">Brienza, J. P., Kung, F. Y. H., Santos, H. C., Bobocel, D. R., &amp; Grossmann, I. (2018). Wisdom, bias, and balance: Toward a process-sensitive measurement of wisdom-related cognition. Journal of Personality and Social Psychology, 115(6), 1093-1126.</span>
-            <a target="_blank" rel="noopener noreferrer" href="https://doi.org/10.1037/pspp0000171">https://doi.org/10.1037/pspp0000171</a>
+            <a target="_blank" rel="noopener noreferrer" href="https://doi.org/10.1037/pspp0000171" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">https://doi.org/10.1037/pspp0000171</a>
           </li>
         </ol>
       </section>
@@ -327,39 +327,39 @@ <h2 data-i18n="projects.title">공개 프로젝트</h2>
         </div>
         <div class="naruon-grid project-grid">
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/naruon" data-i18n="projects.naruonTitle">Naruon</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/naruon" data-i18n="projects.naruonTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">Naruon</a></h3>
             <p data-i18n="projects.naruonBody">메일, 첨부, 일정, 작업을 맥락으로 묶어 판단과 실행으로 연결하는 AI 이메일 워크스페이스입니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/pg-erd-cloud" data-i18n="projects.pgErdTitle">pg-erd-cloud</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/pg-erd-cloud" data-i18n="projects.pgErdTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">pg-erd-cloud</a></h3>
             <p data-i18n="projects.pgErdBody">PostgreSQL 스키마를 리버스 엔지니어링하고 ERD와 DDL 공유 흐름으로 관리하는 클라우드 MVP입니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/bandscope" data-i18n="projects.bandscopeTitle">BandScope</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/bandscope" data-i18n="projects.bandscopeTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">BandScope</a></h3>
             <p data-i18n="projects.bandscopeBody">곡을 섹션, 역할, 템포, 연습 우선순위로 분석하는 로컬 우선 리허설 앱입니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/codec-carver" data-i18n="projects.codecCarverTitle">codec-carver</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/codec-carver" data-i18n="projects.codecCarverTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">codec-carver</a></h3>
             <p data-i18n="projects.codecCarverBody">긴 녹음을 메타데이터를 보존한 FLAC/Opus 조각으로 변환하는 Python CLI입니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/newsdom-api" data-i18n="projects.newsdomTitle">newsdom-api</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/newsdom-api" data-i18n="projects.newsdomTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">newsdom-api</a></h3>
             <p data-i18n="projects.newsdomBody">스캔된 일본어 신문 PDF를 기사, 제목, 본문, 이미지 구조의 DOM형 JSON으로 파싱하는 API입니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/scopeweave" data-i18n="projects.scopeweaveTitle">scopeweave</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/scopeweave" data-i18n="projects.scopeweaveTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">scopeweave</a></h3>
             <p data-i18n="projects.scopeweaveBody">트리 편집, 진행률 계산, CSV/JSON, 주간 Gantt를 지원하는 정적 HTML/CSS/JS WBS 플래너입니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/VibeSec" data-i18n="projects.vibesecTitle">VibeSec</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/VibeSec" data-i18n="projects.vibesecTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">VibeSec</a></h3>
             <p data-i18n="projects.vibesecBody">바이브코딩 앱을 위한 보안 가드레일입니다. AI 개발 도구 규칙, 정적 점검, 리뷰와 수정 프롬프트를 다룹니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/fast-mlsirm" data-i18n="projects.fastMlsirmTitle">fast-mlsirm</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/fast-mlsirm" data-i18n="projects.fastMlsirmTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">fast-mlsirm</a></h3>
             <p data-i18n="projects.fastMlsirmBody">MLSIRM/MLS2PLM 모형의 시뮬레이션, 적합, 복원 진단을 빠르게 수행하는 Python/Rust 패키지입니다.</p>
           </article>
           <article>
-            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/waf-ids-ai-soc" data-i18n="projects.wafIdsTitle">waf-ids-ai-soc</a></h3>
+            <h3><a target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab/waf-ids-ai-soc" data-i18n="projects.wafIdsTitle" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">waf-ids-ai-soc</a></h3>
             <p data-i18n="projects.wafIdsBody">DNSBL 게시 기능을 갖춘 Rust 우선 WAF/IDS/AI SOC 게이트웨이입니다.</p>
           </article>
         </div>
@@ -431,7 +431,7 @@ <h2 data-i18n="work.title">연구에서 제품으로</h2>
       >
       <p>
         <span data-i18n="footer.founded">Founded by</span>
-        <a target="_blank" rel="noopener noreferrer" href="https://github.com/seonghobae">Seongho Bae</a>.
+        <a target="_blank" rel="noopener noreferrer" href="https://github.com/seonghobae" title="(새 창에서 열림)" data-i18n-title="a11y.newWindow">Seongho Bae</a>.
         <span data-i18n="footer.line">Context into judgment. Judgment into action.</span>
       </p>
     </footer>