Design Systems & Component Libraries · 강의

국제화 (i18n)

다양한 언어, 문화 및 지역별 선호도에 원활하게 맞춰지는 구성 요소를 설계하고 개발합니다.

국제화 (i18n)은(는) CoddyKit의 무료 Design Systems & Component Libraries 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Design Systems & Component Libraries 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Design Systems & Component Libraries 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Intro to Internationalization

Internationalization (i18n) is the process of designing and developing your components and applications so they can be easily adapted to different languages, regional differences, and technical requirements of a target country, region, or culture.

Think of it as preparing your product for the world! It's not just about translation, but about making sure your UI works everywhere.

Understanding Locale

A locale is a set of parameters that defines the user's language, country, and any special variant preferences that should be used to present information.

en-US: English (United States)
fr-CA: French (Canada)
es-MX: Spanish (Mexico)

These codes help your system know how to format things correctly.

Translating Text with Keys

Instead of hardcoding text directly into your components, you use translation keys. These keys are like placeholders.

For example, instead of "Hello", you might use a key like "greeting.hello". Your application then looks up the actual translated text for that key based on the user's locale.

Code: Dynamic Greetings

Here's a conceptual example of how translation keys work. The getTranslatedString function would fetch the correct text based on the locale from a translation file.

public class Greeter {
  public static String getTranslatedString(String key, String locale) {
    if (locale.equals("en-US")) {
      if (key.equals("greeting.hello")) return "Hello!";
      if (key.equals("action.welcome")) return "Welcome!";
    } else if (locale.equals("es-MX")) {
      if (key.equals("greeting.hello")) return "¡Hola!";
      if (key.equals("action.welcome")) return "¡Bienvenido!";
    }
    return "Translation missing for " + key;
  }

  public static void main(String[] args) {
    String userLocale = "es-MX"; // Imagine this comes from user settings
    System.out.println(getTranslatedString("greeting.hello", userLocale));
    userLocale = "en-US";
    System.out.println(getTranslatedString("action.welcome", userLocale));
  }
}

Adapting Dates & Times

Dates and times are presented differently around the world. For example, "03/04/2023" means March 4th in the US but April 3rd in many other countries.

Your design system components should use locale-aware formatting utilities to display dates and times correctly for the user's region.

Formatting Numbers & Money

Number formats also vary. The decimal separator can be a dot (.) or a comma (,).

US: 1,234.56
Germany: 1.234,56

Currencies need their symbol and correct placement (e.g., $100.00 vs. 100,00 €).

Handling Text Direction

Most languages read from Left-to-Right (LTR). However, languages like Arabic, Hebrew, and Farsi read from Right-to-Left (RTL).

For RTL languages, the entire layout of your components needs to be mirrored. This includes text alignment, icon placement, and the flow of elements.

Cultural Imagery

Sometimes, images, icons, or even videos need to change based on the user's culture or region.

A picture that resonates well in one country might be confusing or even offensive in another. Your design system should support managing and delivering locale-specific assets.

Design Systems for i18n

A design system is key for good i18n because it provides:

Centralized Translations: All strings managed in one place.
Adaptable Components: Components designed to handle varying text lengths and RTL layouts.
Consistent Formatting: Standardized date, time, and number formatting.

This ensures a consistent global experience.

i18n Quick Check

You're building a button component for your design system. Which of these is the BEST practice for displaying the button's text to support internationalization?

i18n Recap

We've explored Internationalization (i18n), understanding that it's more than just translation.

We learned about locales and how they define regional preferences.
We saw how to use translation keys for dynamic text.
We discussed adapting dates, numbers, currencies, and layouts (RTL).
And finally, how a design system provides a powerful foundation for building globally-ready components.

Keep these principles in mind for truly global products!

자주 묻는 질문

“국제화 (i18n)” 강의는 무료인가요?

네 — “국제화 (i18n)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Design Systems & Component Libraries 강의 전체를 잠금 해제할 수 있습니다. Design Systems & Component Libraries 강의에는 총 4개의 강의가 포함되어 있습니다.

“국제화 (i18n)”에서 뭘 배우나요?

다양한 언어, 문화 및 지역별 선호도에 원활하게 맞춰지는 구성 요소를 설계하고 개발합니다. 브라우저에서 직접 실행하는 실습 코드로 Design Systems & Component Libraries을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Design Systems & Component Libraries을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Design Systems & Component Libraries은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“국제화 (i18n)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Design Systems & Component Libraries 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Design Systems & Component Libraries 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Design Systems & Component Libraries(으)로 돌아가기