Show GN: 한글 넣으면 어색해지는 디자인 시스템, 한국어 우선으로 다시 만들었습니다
요약
라틴 알파벳 중심의 기존 디자인 시스템이 한국어 적용 시 발생하는 어색함을 해결하기 위해, 한국어를 최우선으로 고려한 새로운 디자인 시스템을 설계했습니다. 한글의 구조적 특성을 반영한 여백 보정과 디자인-코드 간의 일치성을 통해 개발 효율성을 높였습니다.
핵심 포인트
- 한글의 네모틀 구조와 baseline을 고려한 여백 및 행간 보정
- 어절 단위 줄바꿈 및 한국형 폼 레이아웃 적용
- 피그마와 코드 API 명칭 일치를 통한 핸드오프 비용 절감
- 접근성(키보드, 스크린리더, 명도 대비)을 설계 단계부터 반영
한국어 서비스를 만드는데 디자인 시스템(MUI, shadcn 등)은 라틴 알파벳 기준이라, 한글을 넣으면 "되긴 되는데 어색한" UI가 됩니다. 한글은 네모틀 구조·어절 단위 줄바꿈·다른 baseline을 갖고, 폰트만 Pretendard로 바꿔도 제어 안 되는 상하 여백 탓에 컴포넌트마다 행간·높이를 다시 보정해야 하죠.
그래서 한국어를 1순위로 두고 처음부터 다시 설계했습니다.
- 한글 여백 보정: Pretendard 기본 + 행간·높이·치수를 한글 기준으로
- 한국형 폼: 어절 단위 줄바꿈, 라벨을 입력창 위에 배치
- 디자인=코드 API 일치: 제3자 피그마라 "번역"이 필요했던 기존과 달리, 만든 팀이 직접 피그마와 코드의 - 이름을 맞춤 → 그대로 import, 핸드오프 비용 급감
- 접근성: 키보드·스크린리더·명도 대비 처음부터 고려
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0