[개발] ASP.NET 웹 페이지 전역화를 위한 HTML 레이아웃 지침

ASP.NET 웹 페이지 전역화를 위한 HTML 레이아웃 지침

사용자 인터페이스는 문자열에 포함된 텍스트 크기에 맞게 모든 컨트롤의 크기를 조정하므로 HTML 레이아웃 구현을 위해서는 지역화 담당자가 문자열만 번역해야 합니다. 지역화 프로세스에서 컨트롤 크기를 수동으로 조정하는 단계가 없어지고 이로 인해 오류 및 버그가 없어지므로 매우 유용합니다. 그러나 컨트롤의 레이아웃은 문자열 길이에 따라 변경되므로 지역화된 웹 사이트를 신중하게 테스트해야 합니다.

다음은 전역화할 ASP.NET 웹 페이지를 디자인하는 경우 권장되는 몇 가지 지침입니다.

• 절대 위치를 사용하지 마십시오.

  절대 위치를 지정하면 요소의 배치와 크기가 자동으로 조정되지 않습니다. 다음 코드 예제와 같이 절대 위치를 지정하면 안 됩니다.

  코드 복사

  <!-- Do not do this. -->
  <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">

• 폼에 사용 가능한 너비와 높이를 지정하십시오.

  다음과 같은 두 가지 방법을 사용할 수 있습니다.

  • 주요 요소(예: 표)의 크기를 width=100%로 조정합니다.

    예를 들면 다음과 같습니다.

    코드 복사

    <!-- A table sized to take up entire width of the form.-->
      <table width=100%>

  • 폼의 전체 크기를 기준으로 CSS 스타일시트 식을 사용하여 요소의 크기를 조정합니다.

    예를 들면 다음과 같습니다.

    코드 복사

    <!-- A div element sized to take up half the width and height of the form. -->
    <div style=' 
      height: expression(document.body.clientHeight / 2);
      width: expression(document.body.clientWidth / 2); '>

• 각 컨트롤에 대해 별도의 표 셀을 사용하십시오.

  이렇게 하면 텍스트를 개별적으로 줄 바꿈할 수 있으므로 텍스트 레이아웃이 오른쪽에서 왼쪽으로 배치되는 culture에 대해서도 맞춤을 올바로 적용할 수 있습니다.

• 텍스트 줄 바꿈을 허용하고 텍스트가 포함된 표 셀에 nowrap 특성을 사용하지 마십시오.

  텍스트를 어떤 언어로 변환하더라도 한 줄에 표시할 수 있도록 충분한 공간이 있는 경우에만 nowrap 특성을 사용하십시오.

• 확인란 및 라디오 단추를 레이블 텍스트와 분리합니다.

  확인란 및 라디오 단추의 레이블을 컨트롤과 다른 별개의 셀에 넣어야 합니다. 이렇게 하면 텍스트가 확장될 경우 제대로 줄 바꿈할 수 있습니다. 그러나, 기본적으로는 번역된 텍스트가 한 줄에 배치될 수 있는 충분한 공간을 두어 폼을 디자인해야 합니다.

• 번역된 텍스트가 길 경우를 위해 공간을 남겨두고 고정 너비를 사용하지 마십시오.

  텍스트를 다른 언어로 번역하면 길이가 늘어날 수 있습니다. 경험에 따르면 10자 미만인 짧은 문자열은 300%, 10~20자인 중간 길이의 문자열은 200%, 20자가 넘는 긴 문자열은 100% 증가에 대비하여 공간을 남겨두는 것이 좋습니다.

  셀이 전체 표 크기에 비례하여 확장될 수 있도록 표 셀 너비를 폼 너비의 백분율로 설정하는 것도 하나의 방법이 될 수 있습니다. 그러나 HTML 레이아웃 엔진에서 대부분의 작업을 자동으로 수행할 수 있으므로 상대 크기를 100%를 제외하고 가능한 작은 값으로 지정하는 것이 좋습니다.

  코드 복사

  <!-- The table cell is sized to take up one quarter of the width of the table. -->
  <td width=25%>

• 가능하면 여러 단추의 크기를 한 곳에서 조정합니다.

  일련의 단추를 같은 크기로 만들어야 하는 경우가 종종 있습니다. 가능하면 한 곳에서 단추 집합 전체에 대해 크기를 설정하십시오. 목록 상자와 그룹 상자에 대해서는 텍스트가 확장될 수 있도록 여유를 두어야 합니다.

• 가능하면 높이를 설정하지 마십시오.

  텍스트를 포함하는 표 셀이나 컨트롤의 셀 높이를 설정하지 마십시오. CSS 스타일시트 요소에 대해 줄 높이를 설정할 수 있습니다. 셀 높이를 설정하면 사용자가 브라우저에서 텍스트 크기를 설정할 때 페이지의 모양이 바뀝니다.

• HTML 태그에 왼쪽 또는 오른쪽 맞춤을 사용하지 마십시오.

  일반적으로 모든 표 셀에 대해 align="left" 또는 align="right"를 설정하지 마십시오. 텍스트 레이아웃이 오른쪽에서 왼쪽으로 배치되는 culture에 대해 이러한 설정을 사용하면 폼의 레이아웃에 문제가 발생할 수 있습니다.

• 변경해야 할 수도 있는 인라인 CSS 스타일시트 값을 사용하지 마십시오.

  지역화 담당자가 변경해야 할 수도 있는 모든 CSS 스타일시트 값은 인라인 대신 스타일시트에 넣어야 합니다. 페이지의 글꼴 설정이 이에 해당합니다.