국제화

인터넷이 계속해서 전 세계의 사람들을 연결함에 따라 여러 지역과 로케일에 있는 사용자들에게 서비스를 제공하도록 설계하고 개발하는것이 매우 중요하게 되었다.

국제화

우리가 개발한 제품이 전 세계 사용자들이 접근할 수 있고, 올바르게 기능하고, 문화적으로 적절한 것을 보장

국제화 프랙틱스로 얻을 수 있는 결과

• 사용자 기반 증가

  • 도입함에 따라 큰 글로벌 청중을 얻고 사용자 기반 잠재적인 고객 기반을 얻을 수 있음

• 사용자 경험 향상

  • 사용자들이 선호하는 언어, 문화적 콘텍스트 안에서 제품에 접근할 수 있게 함에 따라 보다 개인화된, 참여도 높은 경험을 제공

• 규제 준수

  • 일부 국가들은 해당 지역의 언어로 애플리케이션에 접근할 수 있어야 한다는 법적 요구사항 존재

사용자가 보는 텍스트 문자열을 코드와 분리해 외부 리소스 파일이나 DB에 저장하는 것이 중요

복수형 처리

plural (복수의)

• 전 세계 사용자 대상으로하는 웹은 단순한 복수 규칙(영어로는 -s)이 보편적으로 적용되지 않음

• 언어마다 복수를 나타내는 규칙이 다름

날짜, 시간, 숫자 형식 나타내기

• 날짜, 시간, 숫자는 로케일 따라 다른 형식을 갖는 경우가 많음

• 내장 언어 기능을 사용해 날짜, 시간, 숫자가 정확하게 로케일에 맞는 형식을 갖게 해야함

RTL 언어 고려

오른쪽에서 왼쪽으로 쓰는 언어에 관한 레이아웃, CSS 스타일, 텍스트 정렬도 반드시 고려해야함

• 아랍어, 히브리어, 우드루어

텍스트 방향 (dir)

• HTML은 dir 속성을 갖고있음

  • rtl, ltr, auto(사용자 에이전트)

• 애플리케이션 안의 텍스트오 요소들이 URL 언어에 맞춰 올바르게 정렬됨을 보장

텍스트 정렬 (text-align)

CSS로 텍스트 정렬하는 방식

• start, end 값을 사용하면 문서 방향에 기반해 텍스트를 정렬해줌

폰트

RTL 언어를 디자인할 때 폰트 선택도 중요

• RTL 스크립트의 문자와 뉘앙스를 적절하게 지원해야함

• 일부 폰트들은 특정 문자를 지원하지 않거나 충분한 지원을 하지 않아 부적절한 혹은 일관성 없는 사용자 경험으로 이어짐

레이아웃 with CSS 논리적 속성

margin, padding, positioning 과 같은 다른 CSS 속성들도 방향 변화에 영향을 받음

• CSS 논리적 속성을 사용하면 레이아웃의 방향과 차원 매핑을 물리적이 아닌 논리적으로 통제 가능

• 전통적인 CSS는 물리적 차원의 방향(top, right, bottom, left)에 기반함

• 논리적 속성을 사용하면 콘텐츠의 흐름과 방향의 관계에 기반해 스타일을 기술

  • start, end, inline, block

  • 요소에 적용된 텍스트 작성 모드와 방향이 자동으로 적용됨

.content {
/* 텍스트 방향에 관계없이 margin이 요소와 텍스트 사이에 적용되는 것을 보장*/
  margin-inline-end: 10px;
}