웹 서비스의 규모가 확장되고 다루는 데이터의 종류가 늘어날수록 UI/UX의 파편화 문제는 필연적으로 발생한다.
특히 다국어 로컬라이징이나 번역 관리 시스템(TMS)처럼 수많은 텍스트와 메타데이터가 얽혀 있는 시스템에서는 화면마다 UI 문법이 다를 경우 사용자가 느끼는 피로감이 극에 달하게 된다.
‘Language Monster’ 프로젝트의 16번째 스프린트에서는 그동안 축적된 데이터 마이그레이션 위자드의 컴팩트 디자인 스타일을 번역 관리 시스템 전반에 적용하고, 파편화되어 있던 언어 필터와 데이터 구조를 완벽하게 동기화하는 대규모 디자인 시스템 통합 작업을 단행하였다.
이 과정에서 겪은 레이아웃 최적화 기법과 타입 시스템 고도화, 그리고 프로덕션 빌드 최적화 노하우를 상세히 공유한다.
1. 슬라이드에서 뷰 토글 방식으로의 대전환 및 가로 스크롤 완전 박멸
기존 번역 관리 테이블(TranslationTableV2)은 10개가 넘는 다국어 컬럼과 메타데이터를 소화하기 위해 가로 스크롤과 슬라이드 인터랙션 방식을 채택하고 있었음. 하지만 이는 데이터의 직관적인 교차 검증을 방해하는 요소였음. 이를 마이그레이션 스타일로 통일하여 화면 공간 효율성을 극대화하였음
ㄱ. whitespace-nowrap과 레이아웃 속성의 재정의
- 가로 스크롤 제거: 테이블 컨테이너의 레이아웃 속성을 기존
overflow-x-auto에서overflow-hidden으로 변경하여 화면 밖으로 무분별하게 공간이 늘어나는 것을 차단하였음. - 동적 셀 피팅:
table-fixed로 묶여 있던 고정식 격자 구조를whitespace-nowrap기반의 가변형 구조로 개편하여 데이터 길이에 따라 유기적으로 반응하도록 수정하였음. - 인터페이스 일관성: 화면 중앙에 모호하게 위치하던 기본정보/번역정보 뷰 전환 토글 버튼을 마이그레이션 UI 스펙과 동일한 우측 상단으로 재배치하여 사용자의 시선 흐름을 일원화하였음.
2. 정보 밀도 한계 돌파를 위한 10px 타이포그래피 및 컬럼 너비 최적화
데스크톱 표준 해상도(1024px 이상)에서 가로 스크롤 없이 수많은 필드를 한눈에 보여주기 위해, 컴포넌트 전반의 타이포그래피와 고정 너비(Width)를 피셀(px) 단위로 미세 조정한 컴팩트 디자인을 완성하였음
[기본정보 뷰 레이아웃 너비 명세]
원문(25%) ──> 중요(30px) ──> 분류(40px) ──> 플랫폼(46px) ──> 버전(36px) ──> KEY/ID(55px) ──> 설명(60px)
고도화된 너비 설계 덕분에 사용자는 중요 메타데이터를 유실하지 않으면서도 한 화면에서 완벽한 가시성을 확보하게 되었음
더불어 디자인 일관성을 위해 테이블 헤더, 셀 데이터는 물론이고 인라인 편집 모드의 EditableCell, 상태 변경 셀렉트 박스, 우선순위 뱃지에 이르기까지 시스템 내 모든 텍스트 요소를 text-[10px] 규격으로 완전히 통일하였음
3. 전역 LANGUAGE_ORDER 통일을 통한 용어집과 번역 관리의 동기화
페이지나 데이터베이스 데이터에 따라 다국어 필터 버튼의 순서가 제각각으로 렌더링되던 파편화 문제를 전면 해결하였음
- 이탈리아어(it) 확장을 통한 10대 언어 구축
: 기존 다국어 명세에 이탈리아어(it)를 신규 편입시켜 총 10개국 언어 셋을 완성하였음. - 하드코딩 및 정렬 오류 제거
: 기존 DB의display_order정렬 방식에만 의존하던 구조에서 벗어나, 시스템 전역에서 공통으로 사용할 엄격한 언어 순서 배열(LANGUAGE_ORDER) 인터페이스를 수립하였음. - 언어순서 명세
: export const LANGUAGE_ORDER = [‘en’, ‘ja’, ‘zh’, ‘zh-CN’, ‘zh-TW’, ‘fr’, ‘es’, ‘pt’, ‘de’, ‘it’];
이를 TranslationFiltersBar 및 용어집(glossary) 관리 라우트 페이지에 공통 적용하여 사용자가 어떤 메뉴로 이동하더라도 동일한 시각적 순서로 언어 필터 토글 버튼을 제어할 수 있도록 정돈하였음.
4. 엔터프라이즈급 아키텍처를 위한 타입 시스템 중앙화 및 프로덕션 최적화
프론트엔드 UI의 변화와 더불어, 장기적인 유지보수성과 빌드 효율을 높이기 위해 소스 코드 레벨의 아키텍처 정밀 가공 작업을 병행하였음
ㄱ. src/types/migration.ts 생성을 통한 도메인 타입 격리 및 추상화
: 기존에 각 컴포넌트 파일이나 개별 API 라우트 단에 파편화되어 선언되어 있던 마이그레이션 관련 핵심 인터페이스들을 단일 모듈로 통합
- 중앙 관리 대상 타입
:PreviewEntry,CommitResponse,MigrationAction명세를src/types/migration.ts신규 파일로 분리 독립시켰음. - 전역 Export 파이프라인
: 루트 디렉토리의src/types/index.ts에서 해당 파일의 모든 요소를 내보내도록 처리하여, 개별 컴포넌트들이 복잡한 상대 경로 대신 클린 코드로 타입을 참조할 수 있도록 의존성을 단순화하였음. - API 응답 스펙 보강
: 마이그레이션 커밋 성공 시 단순 카운트만 리턴하던 기존 방식에서, 대상 제품을 명시하는product_code와 최종 임포트된 레코드 수를 보장하는imported카운터를 응답 객체 명세에 강제 주입하여 데이터 추적성을 확보하였음
ㄴ. 개발 환경 환경 변수 분리를 통한 런타임 콘솔 로그 제어
배포 본 빌드 시 클라이언트 브라우저나 서버 로그에 무분별하게 찍히는 디버그용 console.log 스팸 현상을 제거하기 위한 환경 격리 코드를 심었음.
주요 API 및 커스텀 훅, 코어 컴포넌트 전반에 걸쳐 현재 환경 변수(process.env.NODE_ENV)가 development 모드일 때만 로그가 트리거되도록 안전 메커니즘을 적용하여, 프로덕션 환경에서의 메모리 낭비를 방지하고 빌드 본의 실행 퍼포먼스를 가시적으로 끌어올렸음
5. 릴리즈 성과 검증
이번 릴리즈의 핵심은 시스템 전반의 디자인 결을 하나로 맞추었다는 점에 있다. 1222a87(UI/UX 개선), 0117f26(언어 필터 동기화), 94a8866(순서 동기화) 등의 핵심 마이크로 커밋들이 성공적으로 메인 브랜치에 녹아들었음.
이로써 용어집, 번역 관리, 데이터 마이그레이션 위자드가 마치 하나의 거대한 컴팩트 컴포넌트처럼 유기적으로 작동하는 강력한 웹 디자인 인프라가 완성되었음. 향후에는 모바일 환경에서의 데이터 시인성을 보장하기 위한 반응형 압축 테이블 레이아웃 설계 작업에 착수할 예정임.