피드로 돌아가기
GeekNewsFrontend
원문 읽기
Show GN: 한글 넣으면 어색해지는 디자인 시스템, 한국어 우선으로 다시 만들었습니다
한글 특화 Baseline 및 API 일치화를 통한 UI/UX 최적화 디자인 시스템 구축
AI 요약
Context
라틴 알파벳 기준의 기존 Design System 사용으로 인한 한글 UI의 시각적 불균형 발생. Pretendard 폰트 적용 후에도 제어되지 않는 상하 여백과 Baseline 차이로 인한 컴포넌트별 개별 보정 작업의 반복적 발생.
Technical Solution
- 한글 고유의 네모틀 구조와 Baseline을 반영한 전용 수치 체계 설계
- Pretendard 기반의 행간 및 컴포넌트 높이 최적화를 통한 시각적 일관성 확보
- 어절 단위 줄바꿈 규칙 적용 및 라벨 상단 배치 구조의 한국형 Form 설계
- Figma 디자인 토큰과 코드 API 명칭을 1:1로 매칭하여 Handoff 비용 최소화
- 명도 대비 및 스크린리더 호환성을 고려한 Accessibility 표준 기본 적용
실천 포인트
- 다국어 서비스 설계 시 언어별 Baseline 및 폰트 렌더링 특성 분석 필요 - 디자인-개발 간의 커뮤니케이션 비용 절감을 위한 명명 규칙(Naming Convention) 동기화 검토 - 컴포넌트 단위의 개별 보정보다 시스템 차원의 글로벌 스타일 가이드 수립 권장