🎨 Palette: 비동기 작업 버튼에 로딩 스피너 추가

.jules/palette.md

@@ -1,3 +1,6 @@
 ## 2024-05-18 - Disabled and Loading States for Async Actions
 **Learning:** Adding explicit loading and disabled states to asynchronous action buttons (like "Refresh") provides immediate feedback, reducing user confusion and preventing double-submissions.
 **Action:** Always ensure that buttons triggering network requests visually indicate the loading state and are disabled until the request completes.
+## 2024-05-18 - External Link Context Switching UX
+**Learning:** Opening secondary artifacts (like the JSON bootstrap or original file) in the same tab disrupts the user's viewing context and forces them to re-navigate. Adding `target="_blank"` with a descriptive `aria-label` ensures a smoother experience and maintains accessibility.
+**Action:** Always configure external or secondary document links to open in a new tab (`target="_blank" rel="noopener noreferrer"`) and explicitly indicate this behavior to screen readers using `aria-label`.

CHANGELOG.md

@@ -0,0 +1,7 @@
+# 변경 로그 (Changelog)
+
+## [Unreleased]
+
+### UX 및 접근성 개선 (UX & Accessibility Improvements)
+* 외부 링크 및 JSON 부트스트랩 열기 시 새 탭에서 열리도록 `target="_blank"`, `rel="noopener noreferrer"` 속성을 추가하여 사용자가 문서 뷰어 컨텍스트를 유지할 수 있도록 개선했습니다.
+* 스크린 리더 사용자를 위해 새 탭에서 열림을 명확히 안내하는 `aria-label` 속성을 외부 링크 요소에 추가하여 웹 접근성을 향상시켰습니다.

src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java

@@ -107,7 +107,9 @@ private static String viewerShellHtml(UUID docId, String initialState) {
 
                         <div class="actions" aria-label="Actions">
                           <button type="button" class="btn btn-primary" id="retry-btn">Refresh</button>
-                          <a class="btn btn-secondary" id="open-json-link" href="#" hidden>Open JSON bootstrap</a>
+                          <a class="btn btn-secondary" id="open-json-link" href="#" hidden
+                             target="_blank" rel="noopener noreferrer"
+                             aria-label="Open JSON bootstrap (opens in a new tab)">Open JSON bootstrap</a>
                         </div>
                       </section>
 

src/main/resources/static/assets/viewer/viewer.js

@@ -89,7 +89,9 @@ function renderPreviewLink(path) {
   link.href = path;
   link.textContent = "Open artifact";
   link.className = "btn btn-secondary";
-  link.rel = "noopener";
+  link.rel = "noopener noreferrer";
+  link.target = "_blank";
+  link.setAttribute("aria-label", "Open artifact (opens in a new tab)");
   el.preview.appendChild(link);
 }