Show GN: 한글 넣으면 어색해지는 디자인 시스템, 한국어 우선으로 다시 만들었습니다

1 week ago 15

한국어 서비스를 만드는데 디자인 시스템(MUI, shadcn 등)은 라틴 알파벳 기준이라, 한글을 넣으면 "되긴 되는데 어색한" UI가 됩니다. 한글은 네모틀 구조·어절 단위 줄바꿈·다른 baseline을 갖고, 폰트만 Pretendard로 바꿔도 제어 안 되는 상하 여백 탓에 컴포넌트마다 행간·높이를 다시 보정해야 하죠.

그래서 한국어를 1순위로 두고 처음부터 다시 설계했습니다.

  • 한글 여백 보정: Pretendard 기본 + 행간·높이·치수를 한글 기준으로
  • 한국형 폼: 어절 단위 줄바꿈, 라벨을 입력창 위에 배치
  • 디자인=코드 API 일치: 제3자 피그마라 "번역"이 필요했던 기존과 달리, 만든 팀이 직접 피그마와 코드의 - 이름을 맞춤 → 그대로 import, 핸드오프 비용 급감
  • 접근성: 키보드·스크린리더·명도 대비 처음부터 고려
Read Entire Article