ハングルを入れると不自然になるデザインシステムを、韓国語優先で作り直しました
(github.com/DaleStudy)韓国語のサービスを作る際、デザインシステム（MUI、shadcn など）はラテンアルファベット基準のため、ハングルを入れると「動くことは動くが不自然」な UI になってしまいます。ハングルは四角い字面の構造・語節単位の改行・異なるベースラインを持ち、フォントを Pretendard に変えるだけでも制御しきれない上下の余白のせいで、コンポーネントごとに行間や高さを再調整しなければなりません。
そこで、韓国語を最優先に置き、最初から設計し直しました。
- ハングル余白補正: Pretendard を基本に、行間・高さ・寸法をハングル基準で調整
- 韓国語向けフォーム: 語節単位の改行、ラベルを入力欄の上に配置
- デザイン=コード API の一致: サードパーティ製 Figma で「翻訳」が必要だった従来と違い、作ったチームが Figma とコードの名前を直接そろえることで、そのまま import でき、ハンドオフのコストを大幅に削減
- アクセシビリティ: キーボード・スクリーンリーダー・コントラスト比を最初から考慮
1件のコメント
ただでさえ不自然な文章のせいで悩んでいたのに、
ありがとうございます。