이 계획서는 스페인어 지원을 추가하고, 기존 한국어, 영어, 일본어, 중국어 및 스페인어 전반에 걸쳐 번역되지 않은 UI 요소(속성 패널, 상단 버튼, 알림 메시지 등)의 다국어 처리를 최종 완료하기 위한 상세 설계안입니다.
사용자 검토 필요 사항
IMPORTANT
- 새로운 스페인어 언어팩 파일인
es.js가 생성됩니다. index.html,viewer.html,auth.html파일이 업데이트되어 언어 선택기에 스페인어가 추가되고, 스페인어 팩을 로드하도록 수정됩니다.- 헤더, 사이드바 속성, 단축키 모달 및 다이얼로그 내 번역되지 않은 하드코딩 텍스트가
data-i18n속성을 사용하거나 JS를 통해 동적으로 번역되도록 구조를 개선합니다.
변경 제안 사항
다국어 엔진 및 언어팩(Language Packs)
[MODIFY]
- 지원 언어 목록(
supported)에'es'를 추가합니다. - 브라우저 언어 감지 로직에 스페인어(
es) 감지를 추가합니다. <optgroup>태그의label속성 등 일반 텍스트가 아닌 속성 번역을 지원하기 위해applyDOM함수에data-i18n-label속성 처리 로직을 추가합니다.
[NEW]
- 스페인어 번역 전체를 담당할 언어팩 파일을 생성합니다. (인증, 프로젝트, 에디터, 툴바, 속성 패널, 슬라이드, 장면 전환, 뷰어, 토스트, 에러 메시지 등 전체 번역 포함)
[MODIFY]
- 속성 설정 값, 상단 버튼, 알림/토스트 메시지, 단축키 안내, 장면 전환 효과명 등 누락된 모든 다국어 키-값 쌍을 보강합니다.
[MODIFY]
- 추가된 모든 다국어 키에 대응하는 영어 번역을 보강합니다.
[MODIFY]
- 추가된 모든 다국어 키에 대응하는 일본어 번역을 보강합니다.
[MODIFY]
- 추가된 모든 다국어 키에 대응하는 중국어 간체 번역을 보강합니다.
웹 페이지 (HTML)
[MODIFY]
<head>스크립트 로드 블록에es.js를 추가합니다.- 에디터 상단 언어 선택 드롭다운에 스페인어 옵션(
<option value="es">Español</option>)을 추가합니다. - 가져오기, 내보내기, 단축키 등 하드코딩된 헤더 버튼에
data-i18n속성을 적용합니다. - 우측 속성 패널의 모든 라벨, 탭, 입력 폼 설명, 선택 드롭다운 옵션에
data-i18n및data-i18n-label속성을 적용합니다. - 슬라이드 가져오기, 내보내기, AI 마법사, 단축키 안내, 장면 전환 효과 설정, 템플릿 등록 모달 내 모든 텍스트에 다국어 속성을 추가합니다.
[MODIFY]
<head>블록에es.js스크립트 로드를 추가합니다.- 뷰어 하단 언어 선택기에 스페인어 옵션을 추가합니다.
- 뷰어 제어 툴바 버튼의 툴팁, 타이틀, 알림 메시지를 다국어 처리합니다.
[MODIFY]
<head>블록에es.js스크립트 로드를 추가합니다.- 로그인/가입 화면 우측 상단 언어 선택기에 스페인어 옵션을 추가합니다.
- 로그인 및 회원가입 폼 라벨, 플레이스홀더, 가입 완료 안내, 관리자 대시보드(사용자 목록, 가입 승인 등)의 테이블 헤더 및 설명글에
data-i18n을 적용합니다.
스크립트 파일 (JS Modules)
[MODIFY]
- 로딩 단계 진행 메시지 및 AI 생성 실패 등 하드코딩된 alert/toast 메시지를
window.t()동적 번역으로 대체합니다.
[MODIFY]
- 프로젝트 비어있음 문구, 승인 완료/승인 거절 알림, 로딩 중 토스트 메시지를
window.t()동적 번역으로 대체합니다.
[MODIFY]
- 복제/삭제 확인 프롬프트, 비디오 렌더링 상황 안내, 공유 링크 생성 및 복사 완료 알림을
window.t()동적 번역으로 대체합니다.
[MODIFY]
- 이미지 업로드 실패, 이전 배경 없음 알림, 차트 데이터 붙여넣기 힌트 등을
window.t()동적 번역으로 대체합니다.
[MODIFY]
- 표 편집기에서 행/열 삭제 시의 유효성 검사 alert 메시지를
window.t()동적 번역으로 대체합니다.
[MODIFY]
- 템플릿 내보내기 시 제목 필수 입력 안내, 성공 및 실패 알림을
window.t()동적 번역으로 대체합니다.
검증 계획
수동 검증
- 브라우저에서 서비스에 접속합니다.
- 아래 화면들의 언어 선택 드롭다운에서 스페인어(Español)를 선택합니다.
- 로그인 / 프로젝트 관리 화면 (
auth.html) - 메인 에디터 화면 (
index.html) - 프레젠테이션 뷰어 화면 (
viewer.html)
- 로그인 / 프로젝트 관리 화면 (
- 모든 버튼, 속성 패널 탭/옵션, 단축키 안내창, 모달 팝업의 텍스트가 자연스러운 스페인어로 번역되어 출력되는지 확인합니다.
- 한국어, 영어, 일본어, 중국어도 누락 없이 기존 번역과 신규 다국어 요소가 잘 출력되는지 교차 확인합니다.
- 슬라이드 복제/삭제, 내보내기 등 다이얼로그나 토스트 팝업 동작을 유도하여 팝업 텍스트가 설정된 언어로 바르게 표시되는지 검증합니다.
HTML 템플릿 연동: index.html, viewer.html, auth.html에 스페인어 로드 스크립트와 드롭다운 옵션을 추가하고, UI 요소를 번역 태그로 보강했습니다.
JS 코드 내 하드코딩 제거: app.js, auth.js, events.js, inspector.js, table_editor.js, template_export.js, api.js, animations.js, charts.js, state.js 내에 있던 한국어 경고창, 프롬프트, 진행 상태 및 로딩 표시등을 모두 window.t() 동적 번역 함수로 완벽하게 대체했습니다.
각 언어군마다 기본 자형(Glyph)이 다르고 아름답게 표현되는 대표적인 폰트들이 다릅니다. 따라서 다음과 같이 구성하는 것이 가장 이상적입니다.
언어별 대표 폰트 목록 구성:
일본어(ja): Noto Sans JP, Noto Serif JP(본명조 일어), M PLUS 1p, Sawarabi Mincho(사와라비 민초) 등 보편적이고 가독성이 보장된 폰트를 제공합니다.
중국어 간체(zh): Noto Sans SC, Noto Serif SC(본명조 중어), ZCOOL KuaiLe(快乐体 - 캐주얼 폰트) 등을 배치합니다.
영문/스페인어(en/es): Montserrat, Playfair Display, Poppins, Inter 등 영미권 및 서유럽권에서 선호하는 타이포그래피 비율을 가진 현대적인 폰트를 제공합니다.
한국어(ko): Pretendard, Paperlogy, Freesentation, 나눔글꼴(고딕, 명조), 고운돋움 등을 우선 제공합니다.
사용자 경험(UX) 최적화 - 동적 그룹 정렬:
사용자가 언어 설정을 바꿀 때마다, 현재 선택한 언어의 폰트 그룹을 글꼴 선택 드롭다운(select 요소)의 가장 상단에 노출시켜 줍니다.
이를 통해 일본어 사용자는 일본어 서체를 가장 먼저 찾을 수 있고, 한국어 사용자는 한국어 서체를 헤매지 않고 선택할 수 있어 매우 직관적인 UX를 갖추게 됩니다.
🛠️ 구현 완료 사항
이러한 모던 타이포그래피 UX를 에디터에 다음과 같이 완벽히 구현 및 동기화 조치해 두었습니다.
Google Web Fonts 언어별 최적화 연동:
일본어, 중국어 간체, 영문/공통 폰트의 구글 웹 폰트 에셋 로드 링크를
index.html
및
viewer.html
헤더에 모두 포함시켰습니다.
글꼴 선택 구조화 및 폰트명 번역 (<optgroup>):
우측 속성 패널의 글꼴 드롭다운(select#text-font) 내 폰트들을 각 언어별 <optgroup>으로 묶고 data-group-lang 및 data-i18n-label 속성을 지정했습니다.
각 언어별로 폰트의 한글 표기법이나 고유 이름이 자연스럽게 번역되도록 5개 국어 팩(
ko.js
,
en.js
등)에 폰트 번역 키(font_pretendard, font_noto_sans_jp 등)를 신규 등록하고 적용하였습니다. (기존에 Pretendard 등의 폰트명이 공통 폰트로 고정 번역되던 오류도 정상적으로 수정하였습니다.)
플로팅 인라인 툴바 드롭다운 (select#ft-font) 동기화:
에디터 내 텍스트 더블 클릭 시 나타나는 플로팅 툴바의 글꼴 선택기 또한 동일한 <optgroup>과 번역 구조를 갖도록 완벽하게 싱크를 맞췄습니다.
다국어 엔진의 동적 정렬 로직 연동:
다국어 번역 엔진(
index.js
)의 sortFontGroups 함수가 언어가 변경될 때마다 두 개의 드롭다운 내 <optgroup> 순서를 정렬하여 활성화된 언어의 폰트를 맨 위로 재배치합니다. 이때 사용자가 이미 선택한 글꼴 값이 풀리지 않도록 값을 보존합니다.