해외에서 만든 UI 프레임워크를 가져와 쓰다 보면 화면이 미묘하게 어색해집니다. 영문 기준 레이아웃에 한글을 얹었을 때 발생하는 시각적 불일치 때문입니다. 폰트를 한글용으로 교체해도 컴포넌트 구석구석 어긋나는 여백의 느낌은 쉽게 지우기 어렵습니다.

라틴 알파벳 기준이 만든 여백의 어색함

한글은 글자마다 높낮이 기준선인 baseline이 영문과 완전히 다릅니다. 영어 기준 컴포넌트에 한글을 얹으면 상하 여백이 어긋나며 불균형이 발생합니다. 폰트 변경만으로는 제어하기 힘들어 컴포넌트 자체의 행간과 치수를 한글 구조에 맞춰 재조정해야 합니다. 차이가 큽니다.

줄바꿈 규칙도 화면 가독성을 결정하는 중요한 요소입니다. 영어는 단어 단위로 흐르지만 한글은 어절 단위로 끊길 때 흐름이 매끄럽습니다. 입력 폼의 라벨 위치도 영향을 받습니다. 라벨을 입력창 좌측에 두면 한글 단어 길이 차이로 레이아웃이 깨지기 쉬워 입력창 위에 배치하는 방식이 훨씬 안정적입니다.

글자 자체의 네모틀 구조도 고려해야 합니다. 알파벳처럼 위아래로 튀어나오는 ascender나 descender 영역이 없어 한글은 꽉 찬 사각형 형태를 유지합니다. 사각형 구조를 무시하고 기존 라이브러리의 패딩 값을 그대로 쓰면 텍스트가 위로 치우치거나 아래로 가라앉습니다. 정밀한 조정이 필수적입니다.

코드와 피그마의 일치로 줄이는 핸드오프 비용

디자이너와 개발자가 소통할 때 명칭 불일치는 제품 개발 속도를 늦추는 주범입니다. 기존 프레임워크를 무작정 도입하면 피그마 컴포넌트 이름과 개발 코드의 API가 달라 매번 조율하는 단계를 거쳤습니다. 컴포넌트 설계 초기 단계부터 이름을 일대일로 맞추면 화면 설계서가 곧 개발 코드로 이어집니다. 효율적입니다.

오픈소스 프로젝트인 daleui 는 한글 최적화와 협업 편의성을 패키지 하나에 담아냈습니다. React 환경에서 패키지를 설치하면 Pretendard 와 JetBrains Mono 폰트 설정이 기본 적용됩니다. 복잡한 CSS 커스텀 없이 균형 잡힌 버튼과 입력창을 렌더링합니다. 접근성 기준인 키보드 탐색과 명도 대비도 초기 설계 단계부터 통합했습니다.

직접 피그마와 코드의 명칭을 맞추는 작업은 핸드오프 과정에서 발생하는 커뮤니케이션 비용을 크게 낮춥니다. 번역 과정이 사라지니 개발자는 디자인 시안을 보고 고민 없이 컴포넌트를 가져다 씁니다. 라이브러리를 설치하고 스타일 파일을 가져오는 것만으로 한글 환경에 맞는 기본 뼈대가 완성됩니다. 단순함이 힘입니다.

한글을 1순위로 둔 설계 방식은 단순한 시각적 개선을 넘어 제품 개발 속도를 높입니다. 글로벌 표준이라는 이름 아래 덮어두었던 화면의 어색함을 이제 걷어냅니다.

요약

  • 한글은 네모틀 구조와 고유의 baseline을 가지므로 영문 기준 디자인 시스템의 상하 여백과 행간을 한글 기준으로 재조정해야 시각적 불균형을 해결할 수 있습니다.
  • 어절 단위 줄바꿈과 입력창 상단 라벨 배치 등 한국어 사용자의 가독성과 레이아웃 안정성을 고려한 컴포넌트 설계가 필요합니다.
  • 피그마의 디자인 컴포넌트 명칭과 개발 코드의 API 이름을 일대일로 일치시키면 핸드오프 과정의 소통 비용을 크게 절감할 수 있으며 daleui 같은 오픈소스로 이를 손쉽게 구현할 수 있습니다.