LayoutNG

Chrome 76에서 출시될 예정인 LayoutNG는 수년간의 노력을 마친 새로운 레이아웃 엔진입니다. 몇 가지 즉각적인 개선사항이 적용되며 추가적인 성능 개선 및 고급 레이아웃 기능이 제공될 예정입니다.

새로운 기능

  1. 성능 격리를 개선합니다.
  2. 라틴어 이외의 스크립트 지원 개선.
  3. 부동 소수점 수 및 여백과 관련된 많은 문제를 수정했습니다.
  4. 많은 웹 호환성 문제를 수정합니다.

LayoutNG는 단계적으로 출시됩니다. Chrome 76에서는 LayoutNG가 인라인 및 블록 레이아웃에 사용됩니다. 다른 레이아웃 프리미티브(예: 테이블, Flexbox, 그리드, 블록 조각화)는 후속 출시에서 대체됩니다.

개발자에게 표시되는 변경사항

사용자에게 표시되는 영향은 최소화되어야 하지만, LayoutNG는 일부 동작을 매우 미세하게 변경하고 수백 개의 테스트를 수정하며 다른 브라우저와의 호환성을 개선합니다. Google에서 최선을 다하고 있지만 이로 인해 일부 사이트와 애플리케이션이 약간 다르게 렌더링되거나 동작할 수 있습니다.

성능 특성도 상당히 다릅니다. 전체적으로 성능이 이전과 비슷하거나 약간 나아졌긴 하지만, 특정 사용 사례에서는 성능이 향상될 수 있고, 다른 사용 사례에서는 적어도 단기적으로는 어느 정도 퇴행할 것으로 예상됩니다.

부동

LayoutNG는 플로팅 요소 (float: left;float: right;) 지원을 다시 구현하여 다른 콘텐츠와 관련된 float 배치의 여러 정확성 문제를 해결합니다.

겹치는 콘텐츠

기존 플로팅 구현에서는 플로팅 요소 주위에 콘텐츠를 배치할 때 여백을 올바르게 고려하지 않아 콘텐츠가 플로팅 자체와 부분적으로 또는 완전히 겹치게 되었습니다. 이 버그의 가장 일반적인 증상은 회피 로직이 줄 높이를 고려하지 못하는 단락 옆에 이미지가 배치될 때 나타납니다. (Chromium 버그 #861540을 참고하세요.)

플로팅 이미지 오버레이가 표시된 상단 텍스트 줄
그림 1a, 레거시 레이아웃 엔진
텍스트가 플로팅 이미지와 오른쪽에 겹침
왼쪽에는 적절한 텍스트, 오른쪽에는 플로팅 이미지
그림 1b, LayoutNG
텍스트는 오른쪽의 플로팅 이미지 옆에 배치됨

한 줄 내에서 동일한 문제가 발생할 수도 있습니다. 아래 예는 플로팅 요소 다음에 음수 여백이 있는 블록 요소를 보여줍니다. (#895962) 텍스트가 플로팅과 겹쳐서는 안 됩니다.

주황색 상자 위에 표시된 텍스트 줄
그림 2a, 레거시 레이아웃 엔진
텍스트가 플로팅 주황색 요소와 겹침
주황색 상자 오른쪽에 적절한 텍스트
그림 2b, LayoutNG
텍스트가 플로팅 주황색 요소 옆에 배치됨

서식 지정 컨텍스트 배치

블록 형식 지정 컨텍스트를 구성하는 요소의 크기가 부동 소수점 수 옆에 조정되면 기존 레이아웃 엔진은 포기하기 전에 블록의 크기를 정해진 횟수만큼 지정하려고 합니다. 이 접근 방식은 예측할 수 없고 불안정한 동작을 초래했으며 다른 구현과 일치하지 않았습니다. LayoutNG에서는 블록 크기를 조정할 때 모든 부동 소수점 수를 고려합니다. Chromium 버그 #548033을 참고하세요.

절대 위치 및 고정 위치가 이제 W3C 사양을 더 잘 준수하고 다른 브라우저의 동작과 더 잘 일치합니다. 둘 간의 차이점은 두 경우에서 가장 잘 나타납니다.

  • 블록을 포함하는 여러 줄 인라인
    절대 위치에 있는 블록이 여러 줄에 걸쳐 있는 경우 기존 엔진은 선의 하위 집합만 잘못 사용하여 포함된 블록 경계를 계산할 수 있습니다.
  • 세로 쓰기 모드
    기존 엔진에는 세로 쓰기 모드의 기본 위치에 흐름이 없는 요소를 배치하는 데 많은 문제가 있었습니다. 개선된 쓰기 모드 지원에 관한 자세한 내용은 다음 섹션을 참고하세요.

RTL (오른쪽에서 왼쪽) 언어 및 세로 쓰기 모드

LayoutNG는 처음부터 양방향 콘텐츠를 포함하여 세로 쓰기 모드와 RTL 언어를 지원하도록 설계되었습니다.

양방향 텍스트

LayoutNG는 유니코드 표준에 정의된 최신 양방향 알고리즘을 지원합니다. 이 업데이트를 통해 다양한 렌더링 오류가 수정될 뿐만 아니라 페어링된 대괄호 지원과 같은 누락된 기능이 포함됩니다(Chromium 버그 #302469 참고).

직교 흐름

LayoutNG는 절대 위치로 배치된 객체의 배치, 직각 흐름 상자의 크기 (특히 퍼센트가 사용되는 경우)를 포함하여 수직 흐름 레이아웃의 정확성을 개선합니다. W3C 테스트 모음의 1,258개 테스트 중 103개의 테스트가 LayoutNG에서 이전 레이아웃 엔진에서 통과했습니다.

내장 크기 조정

이제 직각 쓰기 모드의 블록에 하위 요소가 포함되어 있을 때 고유 크기가 올바르게 계산됩니다.

텍스트 레이아웃 및 줄바꿈

기존 Chromium 레이아웃 엔진은 텍스트를 요소 및 줄별로 배치했습니다. 이 접근 방식은 대부분의 경우 잘 작동했지만 스크립트를 지원하고 우수한 성능을 얻기 위해서는 많은 복잡성이 필요했습니다. 또한 측정 불일치가 발생하기 쉬웠으며, 이로 인해 크기별 콘텐츠 컨테이너 크기 및 콘텐츠의 미세한 차이 또는 불필요한 줄바꿈이 발생했습니다.

LayoutNG에서 텍스트는 단락 수준에서 배치된 다음 줄로 분할됩니다. 이렇게 하면 성능이 향상되고 텍스트 렌더링의 품질이 향상되며 보다 일관된 줄바꿈이 가능합니다. 가장 큰 차이점은 아래에 설명되어 있습니다.

요소 경계를 넘어 연결

일부 스크립트에서는 특정 문자가 인접해 있을 때 시각적으로 연결될 수 있습니다. 다음 아랍어 예를 확인해 보세요.

이제 LayoutNG에서 문자가 다른 요소에 있는 경우에도 조인이 작동합니다. 다른 스타일이 적용될 때도 조인이 보존됩니다. (Chromium 버그 #6122를 참고하세요.)

그래프는 언어 쓰기 시스템의 가장 작은 단위입니다. 예를 들어 영어 및 라틴 알파벳을 사용하는 다른 언어에서 각 문자는 그래폰입니다.

아래 이미지는 각각 기존 레이아웃 엔진 및 LayoutNG에서 다음 HTML의 렌더링을 보여줍니다.

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>
왼쪽에는 적절한 그래프가, 오른쪽에서는 부적절한 렌더링이 분리되어 있습니다.
그림 3a, 기존 레이아웃 엔진
두 번째 문자의 형태 변경 확인
결합된 그래픽이 적절하게 표시됨
그림 3b, LayoutNG
이제 두 버전이 동일함

한국어, 중국어, 일본어 (CJK) 합자

Chromium은 이미 합자를 지원하고 기본적으로 사용 설정하지만 몇 가지 제한사항이 있습니다. 여러 CJK 코드포인트가 포함된 합자(ligature)는 렌더링 최적화로 인해 기존 레이아웃 엔진에서 지원되지 않습니다. LayoutNG는 이러한 제한을 없애고 스크립트에 상관없이 합자를 지원합니다.

아래 예는 Adobe SourceHanSansJP 글꼴을 사용하여 세 개의 임의 합자 렌더링을 보여줍니다.

중간 글자 조합이 합자를 형성하지 않음
그림 4a, 레거시 레이아웃 엔진
MHz가 합자를 올바르게 형성하지만
マンホッをン 및 10点은 그렇지 않음
적절한 합자 표시
그림 4b, LayoutNG
세 그룹 모두 예상대로 합자를 형성함

콘텐츠에 맞게 크기 조정 요소

콘텐츠에 맞게 크기가 조절되는 요소 (예: 인라인 블록)의 경우 현재 레이아웃 엔진이 블록의 크기를 먼저 계산한 다음 콘텐츠에서 레이아웃을 실행합니다. 글꼴이 적극적으로 커닝되는 등의 일부 경우에는 콘텐츠의 크기와 블록 간의 불일치가 발생할 수 있습니다. LayoutNG에서는 실제 콘텐츠에 따라 블록 크기가 조정되므로 이러한 장애 모드가 제거되었습니다.

아래 예는 콘텐츠에 맞게 크기가 조정된 노란색 블록을 보여줍니다. 커닝을 사용하여 T와 - 사이의 간격을 조정하는 Lato 글꼴을 사용합니다. 노란색 상자의 경계는 텍스트의 경계와 일치해야 합니다.

텍스트 컨테이너 끝에 표시되는 후행 공백
그림 5a, 기존 레이아웃 엔진
마지막 T 뒤의 후행 공백 확인
텍스트 경계에는 추가 공백이 없습니다.
그림 5b, LayoutNG
상자의 왼쪽 및 오른쪽 가장자리가 텍스트 경계와 어떻게 일치하는지 확인하세요.

줄바꿈

위에서 설명한 문제와 마찬가지로, 크기-콘텐츠 블록의 콘텐츠가 블록보다 큰 (더 넓음) 콘텐츠는 때때로 불필요하게 래핑될 수 있습니다. 이는 매우 드물지만 방향성이 혼합된 콘텐츠에서 발생하는 경우가 있습니다.

이른 줄바꿈이 표시되어 추가 공간을 발생함
그림 6a, 기존 레이아웃 엔진
오른쪽에 불필요한 줄바꿈과 추가 공간 확인
불필요한 공백이나 줄바꿈이 표시되지 않음
그림 6b, LayoutNG
상자의 왼쪽 및 오른쪽 가장자리가 텍스트 경계와 어떻게 일치하는지 확인하세요.

추가 정보

특정 호환성 문제 및 LayoutNG에 의해 수정된 버그에 관한 자세한 내용은 위에 링크된 문제를 참고하거나 Chromium 버그 데이터베이스에서 Fixed-In-LayoutNG로 표시된 버그를 검색하세요.

LayoutNG로 인해 웹사이트 장애가 발생한 것으로 의심되는 경우 버그 신고를 제출해 주시면 조사해 보겠습니다.