Chrome 76에서 출시될 예정인 LayoutNG는 수년간의 노력 끝에 탄생한 새로운 레이아웃 엔진입니다. 몇 가지 흥미로운 즉각적인 개선사항이 있으며 추가 성능 향상 및 고급 레이아웃 기능이 제공될 예정입니다.
새로운 기능
- 성능 격리를 개선합니다.
- 라틴어 이외의 스크립트에 대한 지원 개선
- 플로팅 및 여백과 관련된 여러 문제가 수정되었습니다.
- 다수의 웹 호환성 문제를 해결했습니다.
LayoutNG는 단계적으로 출시됩니다. Chrome 76에서는 LayoutNG가 인라인 및 블록 레이아웃에 사용됩니다. 다른 레이아웃 원시 요소(예: 표, flexbox, 그리드, 블록 단편화)는 후속 출시에서 대체될 예정입니다.
개발자에게 표시되는 변경사항
사용자에게 표시되는 영향은 최소화되어야 하지만, LayoutNG는 매우 미묘한 방식으로 일부 동작을 변경하고 수백 개의 테스트를 수정하며 다른 브라우저와의 호환성을 개선합니다. 그러나 Google에서 최선을 다해도 일부 사이트 및 애플리케이션이 약간 다르게 렌더링되거나 동작할 수 있습니다.
성능 특성도 상당히 다릅니다. 전반적인 성능은 이전과 비슷하거나 약간 개선되었지만 특정 사용 사례에서는 성능이 개선될 수 있고, 다른 사용 사례에서는 적어도 단기적으로는 다소 하락할 것으로 예상됩니다.
부동
LayoutNG는 플로팅 요소 (float: left; 및 float: right;) 지원을 다시 구현하여 다른 콘텐츠와 관련된 플로팅 배치와 관련된 여러 정확성 문제를 수정했습니다.
겹치는 콘텐츠
기존 플로팅 구현은 플로팅 요소 주위에 콘텐츠를 배치할 때 여백을 올바르게 고려하지 않아 콘텐츠가 플로팅 자체와 부분적으로 또는 완전히 겹쳐졌습니다. 이 버그의 가장 일반적인 증상은 이미지가 패러그래프 옆에 배치되어 회피 로직이 줄의 높이를 고려하지 못할 때 나타납니다. (Chromium 버그 #861540 참고)
텍스트가 오른쪽의 플로팅 이미지와 겹쳐짐
텍스트가 오른쪽의 플로팅 이미지 옆에 배치됨
한 줄 내에서 동일한 문제가 발생할 수 있습니다. 아래 예는 플로팅 요소 뒤에 음수 여백이 있는 블록 요소를 보여줍니다(#895962). 텍스트가 플로팅과 겹쳐서는 안 됩니다.
텍스트가 떠 있는 주황색 요소와 겹쳐짐
텍스트가 떠 있는 주황색 요소 옆에 배치됨
컨텍스트 위치 형식 지정
블록 형식 지정 컨텍스트를 형성하는 요소의 크기가 플로트 옆에 지정되면 기존 레이아웃 엔진은 포기하기 전에 블록 크기를 고정된 횟수만큼 시도합니다. 이 접근 방식은 예측할 수 없고 불안정한 동작을 야기했으며 다른 구현과 일치하지 않았습니다. LayoutNG에서는 블록 크기를 조절할 때 모든 플로팅이 고려됩니다. (Chromium 버그 #548033 참고)
이제 절대 및 고정된 위치 지정이 W3C 사양을 더 잘 준수하고 다른 브라우저의 동작과 더 잘 일치합니다. 두 가지의 차이점은 다음 두 가지 경우에 가장 잘 드러납니다.
- 여러 줄의 인라인 포함 블록
절대 위치 지정된 포함 블록이 여러 줄에 걸쳐 있는 경우 기존 엔진은 줄의 하위 집합만 사용하여 포함 블록 경계를 잘못 계산할 수 있습니다. - 세로 쓰기 모드
기존 엔진은 세로 쓰기 모드에서 흐름 외 요소를 기본 위치에 배치하는 데 많은 문제가 있었습니다. 향상된 작성 모드 지원에 관한 자세한 내용은 다음 섹션을 참고하세요.
오른쪽에서 왼쪽 (RTL) 언어 및 세로 쓰기 모드
LayoutNG는 양방향 콘텐츠를 비롯하여 세로 쓰기 모드와 RTL 언어를 지원하도록 처음부터 설계되었습니다.
양방향 텍스트
LayoutNG는 유니코드 표준에 정의된 최신 양방향 알고리즘을 지원합니다. 이 업데이트는 다양한 렌더링 오류를 수정할 뿐만 아니라 짝 지어진 대괄호 지원과 같은 누락된 기능도 포함합니다(Chromium 버그 #302469 참고).
직교 흐름
LayoutNG는 예를 들어 절대 위치 지정된 객체의 배치, 직교 흐름 상자의 크기 조정 (특히 백분율이 사용되는 경우)을 비롯한 세로 흐름 레이아웃의 정확성을 개선합니다. W3C 테스트 모음의 1,258개 테스트 중 이전 레이아웃 엔진에서 실패한 103개 테스트가 LayoutNG에서 통과했습니다.
내장 크기 조정
이제 블록에 직교 쓰기 모드의 하위 요소가 포함된 경우 내부 크기가 올바르게 계산됩니다.
텍스트 레이아웃 및 줄바꿈
기존 Chromium 레이아웃 엔진은 텍스트 요소를 하나씩, 행별로 배치했습니다. 이 접근 방식은 대부분의 경우에 효과적이었지만 스크립트를 지원하고 우수한 성능을 달성하기 위해 많은 추가 복잡성이 필요했습니다. 또한 측정 불일치가 발생하기 쉬워 크기-콘텐츠 컨테이너와 콘텐츠의 크기가 미묘하게 다르거나 불필요한 줄바꿈이 발생했습니다.
LayoutNG에서는 텍스트가 단락 수준에서 레이아웃된 후 줄로 분할됩니다. 이를 통해 성능이 개선되고 텍스트 렌더링 품질이 향상되며 줄바꿈이 더 일관되게 이루어집니다. 가장 눈에 띄는 차이점은 다음과 같습니다.
요소 경계를 넘어 조인
일부 스크립트에서는 특정 문자가 서로 인접할 때 시각적으로 결합될 수 있습니다. 아랍어의 예를 살펴보세요.
이제 LayoutNG에서 문자가 서로 다른 요소에 있더라도 조인이 작동합니다. 다른 스타일이 적용되더라도 조인은 유지됩니다. (Chromium 버그 #6122 참고)
그래프eme은 언어의 문자 체계에서 가장 작은 단위입니다. 예를 들어 영어 및 로마자를 사용하는 다른 언어에서는 각 문자가 그래프임입니다.
아래 이미지는 기존 레이아웃 엔진과 LayoutNG에서 다음 HTML을 렌더링한 결과를 각각 보여줍니다.
<div>نسق</div>
<div>نس<span>ق</span></div>
두 번째 문자의 형식이 어떻게 변경되는지 확인합니다.
이제 두 버전이 동일합니다.
중국어, 일본어, 한국어 (CJK) 리그쳐
Chromium은 이미 리그쳐를 지원하고 기본적으로 사용 설정하지만 몇 가지 제한사항이 있습니다. 렌더링 최적화로 인해 여러 CJK 코드 포인트가 포함된 리그쳐는 기존 레이아웃 엔진에서 지원되지 않습니다. LayoutNG는 이러한 제한을 삭제하고 스크립트와 관계없이 리가쳐를 지원합니다.
아래 예는 Adobe SourceHanSansJP 글꼴을 사용하여 세 가지 임의의 연결 문자의 렌더링을 보여줍니다.
MHz는 올바르게 리그쳐를 형성하지만
マンション 및 10点은 그렇지 않습니다.
세 그룹 모두 예상대로 리그쳐를 형성합니다.
콘텐츠 크기 요소
콘텐츠에 맞게 크기가 조절되는 요소 (예: 인라인 블록)의 경우 현재 레이아웃 엔진은 먼저 블록의 크기를 계산한 다음 콘텐츠에 레이아웃을 실행합니다. 글꼴 kern이 공격적으로 적용되는 경우와 같이 경우에 따라 콘텐츠 크기와 블록 크기가 일치하지 않을 수 있습니다. LayoutNG에서는 블록의 크기가 실제 콘텐츠를 기반으로 하기 때문에 이러한 오류 모드가 제거되었습니다.
아래 예는 콘텐츠 크기에 맞게 조정된 노란색 블록을 보여줍니다. 이 텍스트는 케어닝을 사용하여 T와 - 사이의 간격을 조정하는 Lato 글꼴을 사용합니다. 노란색 상자의 경계는 텍스트의 경계와 일치해야 합니다.
마지막 T 뒤의 공백에 유의합니다.
상자의 왼쪽 및 오른쪽 가장자리가 텍스트의 경계와 일치하는 방식에 유의합니다.
줄바꿈
위에서 설명한 문제와 마찬가지로 크기-콘텐츠 블록의 콘텐츠가 블록보다 크면 (넓으면) 콘텐츠가 불필요하게 줄어들 수 있습니다. 이는 매우 드물지만 혼합된 방향성 콘텐츠에서 발생하는 경우가 있습니다.
불필요한 줄바꿈과 오른쪽의 여백을 확인합니다.
상자의 왼쪽과 오른쪽 가장자리가 텍스트의 경계와 일치하는 방식을 확인합니다.
추가 정보
LayoutNG에서 수정된 특정 호환성 문제 및 버그에 관한 자세한 내용은 위에 링크된 문제를 참고하거나 Chromium 버그 데이터베이스에서 Fixed-In-LayoutNG로 표시된 버그를 검색하세요.
LayoutNG로 인해 웹사이트가 손상된 것으로 의심되는 경우 버그 신고를 제출해 주시면 조사를 진행하겠습니다.