사용 가이드로 건너뛰기
Localization Design작성자 Owl-Listener

Localization Design 스킬.

번역된 문자열만이 아니라 언어 간 차이에 맞춰 인터페이스를 준비하세요.

  • 디자인 시스템
  • 현지화
소스 검토 · Localization DesignSKILL.md
작업 디자인 시스템 산출물 • 확장, 말줄임, 유연한 크기 조정에 대한 컴포넌트 감사. • 미러링되는 요소와 유지되는 요소를 구분한 RTL 명세. • 로케일 형식 및 문자 체계 테스트 체크리스트. 시작하기 전에 대상 로케일의 텍스트, 폰트, 적절한 언어 또는 문화 검토가 필요합니다. 자동 현지화 플랫폼은 포함되어 있지 않습니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

하나의 언어를 넘어 인터페이스 설계하기

유연한 텍스트 레이아웃, 방향성, 비라틴 문자, 로케일 관례를 다루는 현지화 중심 UI 가이드입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Localization Design은 레이아웃이 원래 언어를 벗어날 때 깨지는 부분, 즉 더 긴 레이블, 다른 글쓰기 방향, 문자 체계별 타이포그래피, 날짜·숫자·통화·주소의 현지 형식을 다룹니다. 유연한 컨테이너, 논리적 CSS 속성, 긴 텍스트와 RTL 로케일을 모두 사용한 테스트를 권장합니다.

또한 번역과 문화 검토를 구분합니다. 기술적으로 미러링된 레이아웃도 부적절한 상징이나 가정을 사용할 수 있습니다. 소스에는 예시로 든 문화적 일반화와 확장 범위가 포함되어 있는데, 이는 현지 시장 검토를 유도하기 위한 것이며 한 국가의 모든 사용자에 대한 보편 규칙이 아닙니다.

예상 산출물

  • 확장, 말줄임, 유연한 크기 조정에 대한 컴포넌트 감사.
  • 미러링되는 요소와 유지되는 요소를 구분한 RTL 명세.
  • 로케일 형식 및 문자 체계 테스트 체크리스트.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    텍스트 확장 테스트

    최종 번역이 나오기 전에 확장 문자열이나 의사 현지화 문자열을 사용해 고정 너비와 잘리는 내비게이션 레이블을 찾아냅니다.

  2. 02
    방향 동작 정리

    물리적 left/right 가정을 start/end 의미 체계로 바꿉니다. 어떤 아이콘을 미러링하고 어떤 마크, 숫자, 미디어를 그대로 둘지 결정합니다.

  3. 03
    로케일 의미 검토

    폰트, 형식, 주소 구조, 문화적으로 민감한 이미지를 적절한 언어 또는 시장 전문가와 함께 확인합니다.

02 활용 상황

사용 시점

대상 로케일의 텍스트, 폰트, 적절한 언어 또는 문화 검토가 필요합니다. 자동 현지화 플랫폼은 포함되어 있지 않습니다.

적합한 경우

  • 다국어 출시 전컴포넌트를 일관되게 변경할 수 있는 단계에서 레이아웃 문제를 찾는 데 유용합니다.
  • 디자인 시스템 준비번역된 화면을 하나씩 따로 고치는 대신 컴포넌트 가이드에 현지화 요구사항을 추가합니다.

확인할 한계

  • 번역 서비스 아님최종 현지화 문구를 만들거나 보증하지 않습니다.
  • 문화 인증 아님폭넓은 예시는 특정 시장과 대상 사용자를 잘 아는 사람의 검토를 대체할 수 없습니다.

준비할 입력

  • 대상 로케일필요한 문자 체계, 글쓰기 방향, 형식 관례를 나열하세요.
  • 컴포넌트 샘플내비게이션, 폼, 카드, 버튼, 고밀도 데이터 뷰를 제공하세요.
  • 폰트와 콘텐츠실제 문자열 또는 의사 현지화 문자열과 승인된 폰트 대체 목록을 포함하세요.

03 핵심 결정

핵심 결정

  1. 선택적으로 미러링

    방향 화살표와 레이아웃 흐름은 반전될 수 있지만, 브랜드 마크와 수학 표기는 무작정 뒤집어서는 안 됩니다.

  2. 시스템을 현지화

    시맨틱 토큰 이름과 유연한 컴포넌트 크기 조정은 이후 로케일이 일회성 재정의에 덜 의존하게 합니다.

04 예시 브리프

집중 브리프로 시작하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소에 문서화된 설치 방법을 사용하고 참조된 보조 파일을 유지하세요. 이 항목은 실행 가능한 애플리케이션이 아니라 집중된 디자인 방법을 설명합니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md

대상 로케일의 텍스트, 폰트, 적절한 언어 또는 문화 검토가 필요합니다. 자동 현지화 플랫폼은 포함되어 있지 않습니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 조정하세요.

예시 브리프
localization-design을 사용해 독일어와 아랍어를 위한 계정 설정을 감사하세요. 레이블 확장, 논리적 간격, 방향성 아이콘, 혼합 방향 계좌번호, 날짜 형식을 검토하세요. 컴포넌트 수준의 변경 사항과 테스트 매트릭스를 작성하세요. 문화적 가정은 국가에 대한 고정관념을 규칙으로 취급하지 말고 사람의 검토 대상으로 표시하세요.

결과 점검

실제 출력을 아래의 관찰 가능한 기준과 비교해 확인하세요.

  • 긴 레이블이 고정 너비로 잘리지 않고 읽을 수 있게 유지됩니다.
  • RTL 동작이 방향성 컨트롤과 비방향성 자산을 구분합니다.
  • 날짜와 숫자는 문자열 재배열이 아니라 로케일 인식 형식을 사용합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 종속성이 포함된다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구사항은 바뀔 수 있습니다.

소스 소유자
Owl-Listener
라이선스
MIT
검토한 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
유연한 텍스트 레이아웃, 방향성, 비라틴 문자, 로케일 관례를 다루는 현지화 중심 UI 가이드입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타는 날짜 기준 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 확인할 질문

RTL은 모든 이미지를 뒤집는다는 뜻인가요?

아니요. 소스는 로고, 숫자, 많은 이미지를 예외로 듭니다. 미러링하기 전에 의미를 검토하세요.

의사 현지화가 번역 QA를 대체할 수 있나요?

아니요. 실제 번역이 나오기 전에 레이아웃과 문자 처리의 약점을 드러낼 수는 있지만, 자연스러움이나 문화적 적합성은 평가할 수 없습니다.

확장 비율을 정확한 값으로 봐야 하나요?

아니요. 대략적인 스트레스 테스트 지침입니다. 실제 텍스트와 레이아웃 테스트가 더 신뢰할 수 있습니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md