글로벌 서비스를 지향하는 다국어 번역 관리 시스템(TMS)에서 데이터의 정보 밀도를 높이고, 여러 모듈 간의 UI 디자인 시스템을 하나로 통합하는 것은 사용자의 작업 효율성을 결정짓는 핵심 공정이다.
각 메뉴마다 상태를 표시하는 방식이 다르거나 데이터 출처 명세가 파편화되어 있으면, 대규모 현지화 자원을 다루는 언어학자(Linguist)와 관리자의 피로도가 극에 달하게 된다.
최근 진행된 ‘Translation Manager’ 프로젝트의 23번째 스프린트에서는 용어집(Glossary)과 번역관리(Translations) 모듈의 UI/UX 레이아웃을 대대적으로 개편하여 시스템 전반의 비주얼 가이드라인을 통일하고, 레거시 출처 코드 변환을 위한 데이터베이스 DDL/DML 마이그레이션 공정을 완벽하게 처리하였다.
이 과정에서 정립한 테이블 너비 최적화 기법, 반응형 뷰별 열 차별화 전략, 그리고 정적 타입 확장 노하우를 상세히 공유한다.
1. 용어집(Glossary) 모듈 개선: 출처 데이터 정규화와 레이아웃 컴팩트화
기존 용어집 모듈은 데이터 마이그레이션 인입 자원의 출처가 한글과 영어, 레거시 키값(imported) 등으로 파편화되어 렌더링 일관성이 떨어졌고, 테이블 내부의 열 너비가 불균형하여 시각적 피로도가 높았음.
ㄱ. 메타데이터 소스 타입의 영문 통일 및 DB 제어
출처 표시 규격화: 한글 혼용을 배정하고 국제화 대응이 가능하도록 소스 라벨 체계를 전면 영문 소문자(
manual,excel_import,ai_generated,migration) 포맷으로 일원화 통합하였음.물리 데이터베이스 DDL/DML 패치: 원격 PostgreSQL 환경에서 기존에 걸려 있던 체크 제약조건을 안전하게 드롭한 뒤,
migration스펙을 포함하는 신규 제약조건을 주입하고 레거시imported로우 데이터를migration으로 일괄 갱신(UPDATE) 처리하였음.
ㄴ. 정보 밀도 최적화를 위한 격리형 탭 레이아웃 명세
화면 공간의 한계를 극복하기 위해 테이블 레이아웃 속성을 table-auto에서 일관된 레이아웃 유지가 가능한 table-fixed 구조로 전환하고, 격리 탭 명세를 다음과 같이 픽셀(px) 및 비율(%) 단위로 미세 조율하였음.
기본정보 탭: 체크박스(30px) ──> 용어(30%) ──> 문맥(30%) ──> 출처(10%) ──> 상태(10%) ──> 사용수(10%) ──> 작업(10%).
번역정보 탭: 번역 텍스트에 집중할 수 있도록 용어 열을 1/2 수준(15%)으로 대폭 축소하고, 남은 영역을 활성화된 다국어 컬럼들이 균등 분배하도록 설계함.
언어 기본값 확장: 기본 활성 언어 트래킹 범위를 영어 단일 타깃(
["en"]) 구조에서["en", "ja", "zh-CN", "zh-TW", "zh-HK", "es", "fr", "de", "it", "pt"]체계의 10대 글로벌 표준 로케일로 확장하여 기본 활성화되도록 기본값을 변경하였음.
2. 번역관리(Translations) 모듈 개선: 뷰별 상태 열 차별화 및 인터랙션 고도화
번역 관리 모듈 역시 기존의 단순한 탭(Tab) 스타일 필터를 직관적인 버튼(Button) 형태로 개편하여 용어집과의 디자인 싱크를 맞추었음. 또한 사용자가 조회하는 컨텍스트(뷰)에 따라 노출되는 필드를 유기적으로 분리하여 인지 부하를 대폭 낮추었음.
기본정보(Info) 뷰: 상태 변경 액션이 중심이 되므로, 색상이 매핑된 규격형 상태 셀렉트 박스를 전면 배치하여 직관적인 토글 처리가 가능하게 하였음.
번역정보(Translations) 뷰: 다국어 번역본 데이터 교차 검증에만 집중할 수 있도록 상태 열을 전격 영구 삭제 처리하였음. 대신 우측 작업 열에만
AI 재번역,히스토리,삭제등 코어 인터랙션 단추들을 컴팩트하게 압축 연동하였음.작업 열 스퀴즈(Squeeze) 기법: 화면 공간을 조금이라도 더 확보하기 위해 고정 너비를 과감하게 깎아내었음. 기본정보 뷰의 작업 열은 65px에서 32px(1/2)로 축소하였고, 번역정보 뷰의 작업 열은 70px에서 24px까지 한계치로 압축하여 데이터 렌더링 영역을 극대화하였음.
3. 시각적 피드백 강화를 위한 상태 코드별 고대비 CSS 팔레트 이식
화면 내에서 번역 및 용어의 진행 단계를 직관적으로 판별할 수 있도록 테두리, 배경, 텍스트가 유기적으로 묶인 컬러 매트릭스 시스템을 컴포넌트 전반에 이식하였음.
ㄱ. TranslationRow.tsx 내 인라인 가독성 스타일 명세
사용자가 데이터 상태를 변경할 때 런타임에 즉각 시각적 경고 및 안정감을 주도록 컴팩트한 text-[10px] 규격 셀렉트 박스에 고대비 폰트 컬러 조화 코드를 주입하였음.
고대비 디자인 시스템은 용어집 모듈의 pending(대기), approved(승인), rejected(반려), not_used(미사용) 매트릭스 라벨과도 완벽하게 결을 같이 하도록 동기화되었음.
4. 엔터프라이즈 코드 품질 관리를 위한 타입 안전성 확장
UI 및 데이터베이스 레이어의 대대적인 개편과 더불어, 컴파일 단계에서 잠재적 타입 추론 결함이 발생하지 않도록 중앙 타입 아키텍처 파일 전반에 걸쳐 도메인 모델 확장을 수행하였음.
ㄱ. GlossaryTerm 인터페이스 리터럴 스펙 확장
기존에 분파되어 존재하던 출처 문자열들을 정적 분석 도구가 명확히 검증할 수 있도록 엄격한 리터럴 유니온 타입 기법을 적용하여 명세화하였음.
이를 통해 원격 데이터 조회 후 클라이언트 단에서 바인딩하는 useGlossaryData.ts 훅과 백엔드 최종 저장소 트랜잭션 라우트 핸들러(migration/commit API) 전반의 타입 정합성을 완전무결(0 errors)하게 마감하는 성과를 이룩하였음.
5. 사용자 경험(UX) 개선 지표 리포트
이번 스프린트에서는 24c085e (출처 영문 변경), 16f4627 (번역 뷰 상태 열 제거), 68da12e (상태 필터 버튼 개선) 등 일관된 사용자 경험을 담보하는 8개의 고품질 마이크로 커밋이 메인 브랜치에 안전하게 병합되었음.
UI 패턴이 완벽하게 통일됨에 따라 사용자 오조작 가능성이 획기적으로 낮아졌으며, 불필요한 메타데이터 열 제거 및 작업 열 너비 하이어라키 최적화 공정을 통해 실제 화면 내 정보 밀도가 가시적으로 향상되는 정량적 쾌거를 달성하였음.
레이아웃 인프라 튜닝이 마무리된 만큼, 다음 작업 구간에서는 다국어 언어별 가변 너비 스펙에 유기적으로 대응하는 ‘반응형 고정 테이블 CSS 미세화’ 공정에 본격 돌입할 예정임.