
캐스케이드 레이어
캐스케이드 레이어(Cascade layers)는 CSS의 특수성과 상속이 작동하는 방식을 더욱 정교하게 다듬는다. 이해하기에는 다소 추상적이지만 CSS의 기본이기도 하다. 레이어는 일종의 논리적 공간으로, CSS 엔진이 캐스케이딩, 특수성 및 상속을 기반으로 요소에 적용할 스타일을 결정하는 데 사용하는 알고리즘에 삽입된다.레이어의 주요 사용 사례는 여러 스타일 소스를 손쉽게 하나의 프로젝트로 결합하도록 하는 것이다. 여러 CSS 소스 라이브러리를 내부적으로 충돌하지 않는 명명된 테마로 결합할 수 있으므로 여러 팀이 다채로운 대규모 CSS 코드베이스에서 협업하기가 한결 쉬워진다.
추가된 주요 구문은 @layer 규칙 및 관련 프로그래밍 요소다. @layer로 선언된 스타일 집합 내에서는 모든 스타일이 함께 캐스케이딩된다. 소비 페이지에서 발생하는 충돌은 가져온 레이어의 순서에 따라 해결된다. 캐스케이드 레이어의 사양에는 다음과 같은 설명이 나온다.
저작자는 레이어를 만들어 요소 기본값, 타사 라이브러리, 테마, 구성요소, 재정의 및 기타 스타일 관련 사항을 나타낼 수 있으며, 각 레이어 내의 선택기나 특수성을 변경하거나 소스 순서에 의존하여 레이어 간 충돌을 해결하지 않고도 명시적인 방법으로 레이어 캐스케이드 순서를 다시 지정할 수 있다.
예를 들어 @main 및 @library 두 개의 레이어 스타일을 정의할 수 있다. 이 둘을 가져오면 레이어 가져오기 순서에 따라 스타일의 우선순위가 결정된다. 캐스케이드 레이어는 주 레이어로 들어가서 스타일 수준에서 충돌을 해결할 필요 없이 레이어 수준에서 스타일 경합을 해결할 수 있게 해준다.
비활성 속성
현재 크롬, 엣지, 사파리를 포함한 대부분의 브라우저가 inert를 지원한다. 파이어폭스 112에는 향후 추가될 예정이다. inert 속성은 모든 요소에서 대화형이 아님을 나타내는 데 사용할 수 있는 전역 속성이다. 일반화된 disabled 속성과 비슷한 면이 있다. 실제로 inert는 컨트롤과 비슷한 버튼에 의해 적용되거나 상속될 때 동일한 효과를 낸다. 또한 inert 속성은 스크린 리더와 같은 보조 기술에서 요소가 보이지 않도록 한다. 정리하면, 이전에는 활성 부분을 긍정적으로 정의해야 했지만 inert를 사용하면 사용자 인터페이스의 비활성 부분을 부정적으로 정의할 수 있다.:has 의사 클래스
추가된 :has 의사 클래스(pseudo-class)는 CSS의 선택기 측면에서 흥미롭다. 기사 작성 시점을 기준으로 파이어폭스를 제외한 모든 주요 브라우저가 지원하며 파이어폭스의 경우 layout.css.has-selector.enabled를 true로 설정해 사용할 수 있다.MDN 문서에 따르면 :has는 “상대적 선택기 목록을 인수로 취함으로써 참조 요소와 관련하여 부모 요소 또는 이전 형제 요소를 선택하는 방법”이다. 기본적으로 :has는 다른 요소를 포함하는 요소를 선택할 수 있게 해준다. 예를 들어 <span>이 포함된 모든 <div>를 선택하려면 <예시 1>과 같이 :has 선택기를 사용하면 된다.
<예시 1> :has 의사 클래스 사용(예 1)
이 정도만 해도 선택기 체인에서 요소를 선택하는 방법으로 상당히 유용하지만 이게 전부가 아니다. 예를 들어 <예시 2>에서 볼 수 있듯이 바로 뒤에 단락이 있는 모든 <div>를 선택할 수 있다.
<예시 2> :has 의사 클래스 사용(예 2)
그리드 레이아웃과 subgrid
CSS가 처음 등장한 시점부터 개발자들은 CSS의 몇 가지 큰 단점에 대해 불만을 제기해왔다. 우선 중앙에 배치하기와 같은 흔한 작업에 지나치게 복잡한 과정이 필요하다. 또 다른 큰 문제는 적절한 그리드 레이아웃을 얻기가 어렵다는 점이었는데, 이 문제는 CSS 그리드 레이아웃 모듈이 나오면서 해결됐다.이제 그리드는 모든 브라우저에서 완벽하게 지원되고 표준화됐다. 그리드 레이아웃은 display: grid 선언으로 표시되며, 직사각형 레이아웃을 정의하는 것 외에 2차원으로 그리드를 제어할 수 있다는 측면에서 파이어폭스와 일종의 사촌 관계라고 할 수 있다. 연구에 따르면 CSS를 다루는 대부분의 개발자는 그리드 레이아웃을 알고 있고 상당수가 사용 중이다.
subgrid 값은 그리드 레이아웃의 새로운 기능으로, 매우 유용하다. subgrid는 부모 레이아웃을 상속하는 자식 그리드를 정의할 수 있게 해준다. 이는 그리드 디스플레이를 다른 그리드 안에 중첩하는 것과는 다르다. 중첩의 경우 자식 그리드가 자체적인 차원과 간격을 정의한다. subgrid를 사용하면 부모의 레이아웃이 적용되지만 필요한 경우 subgrid에서 레이아웃의 여러 측면을 재정의할 수 있다.
이 기사를 작성하는 시점을 기준으로 subgrid는 파이어폭스 71 이상, 사파리 16 이상에 구현돼 있다. 구글 크롬과 마이크로소프트 엣지도 로드맵에 있으므로 향후 지원될 예정이다. subgrid 값은 앞으로 매우 유용한 레이아웃 기능이 될 것이다.
accent-color 옵션
일부 디스플레이 요소는 흔히 사용됨에도 불구하고 전통적으로 스타일을 지정하기가 어렵다. 예를 들어 확인란과 라디오 버튼은 브라우저의 구현을 숨기면서 이러한 요소의 동작을 모방하는 맞춤형 위젯으로 대체되는 경우가 많다. 새로운 CSS accent-color 옵션을 사용하면 이와 같은 요소를 지정할 수 있다. 예를 들어 <예시 3>과 같이 페이지의 모든 라디오 버튼에 자홍색을 적용할 수 있다(라이브 예제도 참조).<예시 3> CSS에서 라디오 버튼 색상 제어하기
input[type="radio"] {
accent-color: magenta;
}
</style>
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>
스크롤 스냅
CSS는 웹 브라우저에서 스크롤 스냅 동작을 제어하기 위한 유용한 일련의 속성을 제공한다. 이 기능에는 몇 년 전부터 사용되는 부분도 포함되지만 최신 브라우저 버전에 계속 적용 중인 부분도 있다. 흥미로운 점은 2022년을 기준으로 CSS 사용자의 3분의 1 이상이 스크롤 스냅 기능을 모르고 있다는 것이다.scroll-snap-* 속성 명령은 컨테이너에서 스크롤 위치의 작동 방식을 세밀하게 조정할 수 있는 여러 방법을 제공한다. 개발자는 더 높은 정확도를 얻고 최종 사용자는 더 부드럽고 정제된 사용자 경험을 얻는다. <예시 4>는 div에서 스크롤 스냅을 제어하는 부분이다(이 라이브 예제도 참조).
<예시 4> 간단한 스크롤 스냅 예제
.scroll-container,
.scroll-area {
max-width: 850px;
height: 300px;
font-size: 60px;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 500px;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area {
margin: 0 auto;
}
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(1) { background: IndianRed; }
.scroll-area:nth-of-type(2) { background: Moccasin; }
.scroll-area:nth-of-type(3) { background: thistle; }
.scroll-area:nth-of-type(4) { background: seagreen; }
</style>
<div class="scroll-container">
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
</div>
스크롤 이동을 어디서 해제하든 <예시 4>의 y 스크롤 위치는 자동으로 자식 요소로 이동한다. 스크롤 컨테이너에서 scroll-snap-type 속성이 y mandatory로 설정돼 있고 자식 요소에 scroll-snap-align: start 선언이 있기 때문이다. 이 동작을 수정할 수도 있다. 예를 들어 scroll-snap-type 속성을 proximity로 설정할 수 있다. 짐작할 수 있겠지만 이렇게 하면 스크롤이 요소에 가까이 접근했을 때만 스냅이 일어난다. 참고로, 이와 관련된 overscroll-behavior 속성을 사용하면 중첩된 스크롤 컨테이너의 동작을 정의할 수 있다.
CSS 논리적 속성(inline 및 block)
상하 또는 좌우에 컨테이너 테두리를 설정하려고 했던 적이 있다면 border-left와 border-right 또는 border-top과 border-bottom을 작성해야 하는 번거로움을 경험했을 것이다. 문제는 바로가기 속성을 활용하려면 손대고 싶지 않은 테두리에도 영향을 미칠 수밖에 없다는 것이다. 이 불편함은 패딩, 여백과 같은 요소에도 적용된다.CSS 논리적 속성(CSS Logical Properties) 모듈을 사용하면 inline과 block 키워드를 사용해서 추상적으로 요소를 참조할 수 있다. 좌우에는 inline을 사용하고, 상하에는 block을 사용한다. 예를 들어 div의 좌우에 테두리를 설정하려면 <예시 5>의 코드를 사용하면 된다(여기서 라이브 예제도 참조).
<예시 5> 논리적 인라인을 사용한 좌우 패딩
border-inline: 10px dashed seagreen;
}
테두리를 위한 유용한 바로가기지만, 다른 많은 속성에도 inline 및 block 논리적 키워드가 사용된다. 대부분의 개발자는 텍스트 방향 및 쓰기 모드와 관련해서 이와 같은 바로가기를 사용한다. 이 경우 padding-inline-end와 같은 속성을 사용하면 활성 텍스트 방향과 관계없이 후행 패딩을 지정할 수 있다. 기본적으로 inline 및 block으로의 추상화는 다양한 설정에 적용되는 일반화된 스타일을 작성할 수 있게 해준다. 더 자세한 내용은 CSS 논리적 속성과 값을 참조하라.
컨테이너 쿼리
컨테이너 쿼리(Container queries)는 이제 CSS에서 안정화됐고 모든 주요 브라우저에서 구현된다. 컨테이너 쿼리는 반응형 디자인에 대한 사고방식에 큰 영향을 미친다. 기본 개념은 뷰포트와 미디어뿐만 아니라 부모 컨테이너의 크기에 따라서도 중단점을 설정할 수 있다는 것이다. 구문이 완전히 정의되지는 않았지만 대체로 <예시 6>과 비슷하다.<예시 6> @컨테이너
이렇게 하면 UI의 중첩된 레이어 전반에 나타나는 다양한 컨테이너의 크기를 기반으로 레이아웃을 세밀하게 조정할 수 있다.
@when과 @else
새로운 @container 쿼리와 관련해서, 앞으로 조건부 @when 및 @else 쿼리가 지원될 예정이다. 주요 브라우저에서는 아직 지원되지 않지만 조만간 지원될 것이다. @when 및 @else 쿼리는 미디어 및 지원 퀴리를 다룰 때 조건부 if/then 스타일의 논리 흐름을 가능하게 해준다. 앞으로 많은 복잡한 CSS 상황과 레이아웃에서 작업이 한결 편해질 것으로 예상된다.3가지 새로운 컬러 팔레트
오래 전부터 CSS 실무자는 디바이스 디스플레이를 보기 좋게 꾸미고 생동감을 불어넣기 위해 RGB, HEX 및 명명된 색상을 사용해왔다. 근래에는 HSL 스타일의 색상 선언이 도입됐고, 이제 색상을 나타내는 새로운 방법인 hwb, lch, lab이 CSS 사양에 추가된다.HWB는 Hue(색조), Whiteness(백도), Blackness(흑도)를 의미한다. 가독성 측면에서 주목할 만한 기능으로, 색을 선택한 다음 흰색과 검은색을 추가하는 방식이다. 크롬, 파이어폭스, 사파리의 최근 버전에서 지원된다. 이유는 알 수 없지만 마이크로소프트 엣지는 이 부분에 대해 소식이 없다. HWB에 대한 더 자세한 내용은 hwb() – 인간을 위한 색 표기법인가에서 볼 수 있다. RGB 및 HWL과 마찬가지로 투명성 알파 채널을 지원한다.
LCH는 Lightness(밝기), Chroma(채도), Hue(색조)를 나타내며 사용할 수 있는 색의 범위를 늘려준다. CSS의 LCH 색상: 무엇이고 왜, 어떻게 사용하는가에서 CSS의 색 이론에 대한 도움이 되는 설명과 개요를 볼 수 있다.
LAB는 CIE LAB 색 이론에서 파생됐으며 새로운 색 공간에 대한 가장 파격적인 이론이다. LAB 색 설명자는 사람이 인식할 수 있는 색 범위 전체를 포괄한다는, 상당히 과감한 주장을 펼친다. CSS의 LAB에 대한 자세한 내용은 모질라 CSS 문서에서 볼 수 있다. LAB, LCH 모두 파이어폭스를 제외한 모든 주요 브라우저에서 지원된다. 파이어폭스의 경우 layout.css.more_color_4.enabled 스위치를 true로 설정해야 한다.
editor@itworld.co.kr
Sponsored
Intel
인텔이 12가지 가속기로 데이터센터에 확장성과 유연성을 추가하는 방법
ⓒ Getty Images Bank 사파이어 래피즈(Sapphire Rapids)라는 코드명으로 알려진 인텔의 4세대 제온 스케일러블 프로세서가 최근 출시됐다. 이 칩은 12가지 가속기로 주목받고 있지만 기능적인 흥미를 넘어 인텔이 급격하게 변화하는 데이터센터, 서버, 클라우드 시장에 대응하는 방법이 반영되어 있다는 점에 주목할 필요가 있다. 프로세서의 근본적인 역할은 연산에 있다. 프로세서는 여전히 연산을 빠르게 많이 할 수 있으면 좋다. 하지만 처리해야 하는 데이터의 종류와 특성이 다양해지면서 데이터를 다루는 방법도 진화했다. 그리고 이는 실질적인 성능의 향상으로 이어진다. 나승주 인텔 데이터센터 담당 상무는 4세대 제온 스케일러블 프로세서가 새로운 데이터센터 환경을 반영한다고 설명한다. ⓒ Intel “단순히 작동속도와 코어의 개수를 늘리는 것만이 최고의 가치를 주는 것은 아닙니다. 폭발적으로 증가하는 데이터센터 수요와 복잡한 데이터 처리에 대한 필요성을 풀어내기 위한 방법은 단순히 트랜지스터 수에만 의존할 일이 아니라 완전히 새로운 방법을 찾을 필요가 있습니다.” 인텔코리아 나승주 데이터센터 담당 상무는 데이터센터 환경이 달라지는 만큼 프로세서 구조도 새로 그려져야 한다고 설명한다. 그 관점에서 4세대 제온 스케일러블 프로세서는 이전과 다른 두 가지 전환점을 갖는다. 한 가지는 연산의 양적 증가, 다른 하나는 데이터 처리의 효율성이다. “모놀리식 아키텍처로는 소켓당 절대적 성능을 높이는 데에 한계가 있습니다. 이를 극복하기 위한 노력이 여전히 이어지고 있지만 단위 칩을 더 작게 만들고 효과적으로 연결하는 방법으로 성능 손실을 최소화하고 단일 칩에 준하는 처리 능력을 제공할 수 있습니다.” 최대 4개의 칩릿을 묶는 구조로 같은 공간 안에 더 많은 코어를 넣을 수 있다. ⓒ Intel 인텔은 사파이어 래피즈를 통해 ‘칩릿(Chiplet)’ 구조를 녹였다. 한정된 공간 안에 더 많은 코어를 넣는 것은 반도체 업계의 숙제였다. 제온 스케일러블 프로세서는 4개의 칩릿을 이어 붙여 최대 60개 코어를 쓴다. 칩릿 구조는 생산이 훨씬 쉬워지고 필요에 따라서 단일 칩부터 2개, 4개 등 필요한 만큼 이어 붙여 다양한 설계의 자유도를 제공하기도 한다. 핵심 기술은 칩과 칩 사이를 손실없이 연결하는 데에 있다. “중요한 것은 인터페이스와 패키징 기술입니다. 사실 이 칩릿 구조는 인텔만의 고민은 아닙니다. 반도체 업계, 그리고 더 나아가 산업 전체의 숙제이기 때문에 이를 공론화해서 업계가 함께 답을 찾아가는 중입니다.” 나승주 상무는 기술 개방과 표준에 해결책이 있다고 말했다. UCIe(Universal Chiplet Interconnect Express) 컨소시엄을 통해 전 세계 반도체 관련 기업들이 경쟁을 내려놓고 답을 찾아가고 있다. UCIe는 단순히 코어와 코어를 연결하는 수준이 아니라 단일 패키지 안에서 GPU도, 컨트롤러도, 또 가속기도 성능 손실을 최소화하면서 이어붙일 수 있다. 성능의 확장 뿐 아니라 단순화된 칩들을 자유롭게 맞붙이는 설계의 자유도 얻게 된다. ⓒ Intel 이 모듈형 칩릿 구조를 적극적으로 활용하는 또 하나의 방법이 바로 12가지 가속기다. 데이터의 특성에 맞는 처리 방법은 점점 중요해지고 있다. 인텔은 오래 전부터 MMX(Multi Media eXtension)와 SSE(Streaming SIMD eXtensions)를 비롯해 AVX(Advanced Vector Extensions)와 최근에는 AMX (Advanced Matrix Extensions) 까지 데이터를 효과적으로 처리하는 기술을 발전시켜 왔다. 사파이어 래피즈의 가속기는 프로세서를 현대 데이터센터의 필요에 맞춰 최적화할 수 있는 방법이라는 것이 나승주 상무의 설명이다. “클라우드는 가상머신과 네트워크는 물론이고, 암호화와 인공지능 처리까지 더욱 복잡해지기 때문에 기업은 설계의 고민이 많습니다. 클라우드에서 GPU의 활용도가 높아지고 있는 것은 사실이지만 머신러닝의 학습과 추론 작업의 80%가 CPU에서 이뤄지고 있습니다. 프로세서가 이를 받아들일 필요가 있습니다.” AMX(Advanced Matrix Extensions)가 더해진 이유도 막대한 실시간 학습 데이터가 필요하지 않은 상황에서 범용적인 인공지능 학습이 CPU만으로 충분히 빠르게 이뤄질 수 있도록 하기 위해서다. AMX는 텐서플로와 파이토치 등 범용적인 머신러닝 프레임워크에 최적화되어 기존 환경을 그대로 가속한다. 12가지 가속기를 통해 데이터센터의 특성에 맞는 서버를 구성할 수 있다. ⓒ Intel 마찬가지로 데이터센터에서 큰 리소스를 차지하는 암호화 효율을 높여주는 QAT(QuickAssist Technology), 로드밸런싱을 맡는 DLB(Dynamic Load Balancer), 인메모리 분석 처리를 가속하는 IAA(In-Memory Analytics Accelerator), 데이터 스트리밍을 가속하는 DSA(Data Streaming Accelerator) 등 별도의 전용 가속 코어를 두고, 필요에 따라서 가속기를 선택할 수 있도록 했다. 그리고 이는 데이터센터의 자원 관리에 직접적으로 영향을 끼치게 된다. “가속기가 실제 현장에서 주는 가치는 특정 리소스를 빠르게 처리하는 것도 있지만 특정 처리에 대한 부담을 덜어 CPU가 본래 해야 할 연산에 집중하는 것입니다. 데이터센터에서 70개 코어를 할당해서 쓰던 암호화가 사파이어 래피즈의 QAT 가속기를 이용하면 11개 코어로 충분합니다. 나머지는 실제로 데이터센터가 처리해야 하는 인스턴스에 할당되면서 자원의 효율이 크게 높아집니다.” ⓒ Intel 4세대 제온 스케일러블 프로세서는 구조의 변화와 가속기를 통해서 ‘스케일러블(Scalable)’이라는 이름이 어울리는 확장성을 갖게 됐다. 이는 곧 데이터센터의 최적화, 그리고 유연성과도 연결된다. 반도체는 시대의 흐름을 읽어야 하고, 인텔은 사파이어 래피즈를 통해 기술로 그 답을 제시하고 있다.
Intel
데이터센터 성능을 재정의하는 게임 체인저 ‘4세대 인텔® 제온® 스케일러블 프로세서’
ⓒ Getty Images Bank AI, HPC, 첨단 분석 등 새로운 유형의 워크로드가 급부상하면서 데이터센터의 성능에 대한 재정의가 필요한 시대가 되었다. 이런 시대적 요구에 부응하기 위해 인텔은 4세대 제온 스케일러블 프로세서(코드명 사파이어 래피즈)라는 답을 내놓았다. 인텔은 이전 세대에 비해 성능, 확장성 및 효율성을 크게 개선한 4세대 제온 스케일러블 프로세서로 차세대 데이터센터에 대한 인텔의 전략을 구체화하고 있다. 성능 최적화의 새로운 관점 ‘워크로드 최적화’ 4세대 제온 스케일러블 프로세서는 ‘다양한 워크로드 각각의 요구에 맞는 최대 성능을 끌어 낸다’라는 한 줄로 핵심을 짚을 수 있다. 이 프로세서의 설계 사상은 AI, HPC, 첨단 분석 등 다양한 워크로드의 요구사항을 충족하기 위해 CPU 및 관련 기술을 설계하고 최적화하는 것이다. 최근 기업들이 주목하는 주요 워크로드는 각각 성능에 대한 요구와 기준이 다르다. 예들 들어 AI 워크로드는 매트릭스 연산과 병렬 처리에 크게 의존한다. 더불어 대용량 데이터 세트를 처리해야 하는 경우가 많아 CPU와 메모리 간의 효율적인 데이터 전송을 위해 높은 메모리 대역폭이 필요하다. AI 워크로드에 맞는 최고의 성능을 제공하기 위해 인텔은 4세대 제온 스케일러블 프로세서에 고급 매트릭스 확장(AMX)과 같은 특수 명령어 세트와 통합 가속기를 내장하였다. 이는 꽤 주목할 개선이다. AMX의 내재화는 CPU도 AI 처리가 준비됐다는 것을 뜻한다. 이는 AI 인프라에서 CPU의 역할을 크게 확장할 전망이다. 최근 ChatGPT의 등장과 함께 모든 기업의 관심사가 된 초거대 언어 모델 기반 생성형 AI 전략 수립에 있어 AMX에 관심을 두는 곳이 늘고 있는 것도 같은 맥락에서 이해할 수 있다. HPC 워크로드는 복잡한 수학적 계산이 포함되며 높은 부동소수점 성능을 보장해야 한다. HPC 워크로드에는 병렬 처리가 수반되는 경우가 많다. 멀티코어 CPU는 이러한 워크로드를 가속하는 데 있어 핵심이라 할 수 있다. 또한, 대규모 HPC 시뮬레이션은 효율적인 데이터 처리를 위해 높은 메모리 용량과 대역폭도 요구한다. 이런 특수성도 4세대 제온 스케일러블 프로세서는 유연하게 수용한다. 4세대 제온 스케일러블 프로세서는 최대 8채널 DDR5 메모리 구성 및 인텔 옵테인 퍼시스턴트 메모리(Optane Persistent Memory)를 지원하여 HPC 시뮬레이션을 위한 높은 메모리 용량과 대역폭을 제공한다. 또한, PCIe 5.0을 지원하여 PCIe 4.0의 두 배에 달하는 대역폭을 제공하여 CPU와 가속기 및 스토리지와 같은 기타 장치 간의 통신 속도가 빠르다. QAT를 통해 암호화 및 압축 워크로드를 가속화하여 네트워킹 및 스토리지와 같은 애플리케이션의 성능과 효율성도 크게 높인다. 열거한 특징들은 HPC뿐 아니라 AI 워크로드의 성능 요구에도 부합한다. 다음으로 첨단 분석의 경우 적시에 통찰력을 제공하고 빠른 의사결정을 지원하려면 지연 시간을 최소화하면서 데이터를 빠르게 처리할 수 있는 CPU가 필요하다. 인텔은 단일 스레드 성능 및 멀티 스레딩 기능을 향상시켜 실시간 분석을 위한 저지연 처리를 가능하게 한다. 그리고 인텔 프로세서는 최적화된 캐시 계층 구조를 갖추고 있어 메모리 액세스 시간을 최소화하여 실시간 분석 워크로드의 지연 시간을 줄이고 성능을 개선할 수 있다. 여기에 4세대 제온 스케일러블 프로세서는 넓은 메모리 대역폭으로 데이터베이스 성능을 향상하고 인텔 인-메모리 분석 가속기(IAA), 데이터 이동 속도를 높이는 인텔 데이터 스트리밍 가속기(DSA)까지 통합하여 실시간 데이터 처리 성능을 높였다. 요약하자면 워크로드마다 특화된 CPU 기능, 아키텍처 또는 가속기가 필요한 요구사항이 다르다. AI 워크로드는 가속 기술과 넓은 메모리 대역폭의 이점을 누리고, HPC 워크로드는 높은 부동소수점 성능과 병렬 처리가 필요하며, 실시간 분석 워크로드는 지연 시간이 짧은 처리와 효율적인 I/O 및 스토리지가 필요하다. 4세대 제온 스케일러블 프로세서는 다양한 워크로드의 성능 요구를 수용하여 각각 최대의 성능을 끌어 낸다. 워크로드 최적화 성능 추구가 가능한 이유 CPU의 발전사를 보면 무어의 법칙의 시대를 지나 멀티 코어의 시기가 이어지고 있다. 멀티 코어는 현재 진화를 거듭 중인데 최근 동향은 더 나은 성능과 에너지 효율성을 보장하는 가운데 워크로드별 최적화를 지원하는 것이다. 이를 실현하기 위해 인텔은 코어 수를 늘리는 가운데 다양한 가속기를 CPU에 통합하는 방식을 택하였다. 이런 노력의 결과물이 4세대 제온 스케일러블 프로세서다. 멀티코어 아키텍처는 병렬 처리를 가능하게 하여 성능과 에너지 효율을 높인다. 예를 들어 인텔의 제온 스케일러블 프로세서는 최대 60개의 코어를 가지고 있어 AI, HPC, 실시간 분석 등 다양한 워크로드 처리에 이상적이다. 여기에 다양한 가속기를 통합하여 워크로드마다 차이를 보이는 최적의 성능 목표 달성에 한걸음 더 가까이 다가서고 있다. 또한, 4세대 제온 스케일러블 프로세서는 CPU와 가속기 간의 고속 통신을 위해 설계된 개방형 산업 표준 인터커넥트인 컴퓨트 익스프레스 링크(CXL)를 지원한다. 이 밖에도 인텔은 상호 연결 및 효율적인 전력 공급을 위해 4개의 실리콘 다이를 EMIB(Embedded Multi-Die Interconnect Bridge)라는 고급 패키징 기술로 연결했다. 인텔의 EMIB 기술은 CPU 설계 및 패키징의 패러다임 전환을 잘 보여준다. 인텔은 프로세서를 타일이라고 하는 더 작은 모듈식 구성 요소로 분할하고 EMIB라는 작은 실리콘으로 연결하여 하나의 Monolithic 구조와 같은 성능, 에너지 효율성 및 설계 유연성을 높였고 그 결과물이 4세대 제온 스케일러블 프로세서다. 인텔은 고급 패키징 기술을 통해 다양한 가속기를 통합하면서도 높은 전력 효율을 달성했다. 가령 4세대 인텔 제온 스케일러블 프로세서가 내장된 가속기를 사용하면 이전 세대 대비 워크로드 처리에 있어 평균 2.9배 높은 와트당 성능 목표 달성이 가능하다. 더 자세히 알아보면 범용 컴퓨팅에서 53% 평균 성능 향상을 기대할 수 있고, AI는 최대 10배 높은 추론과 학습 성능, 네트워킹과 스토리지 분야에서는 95% 적은 코어로 더 높은 데이터 압축 성능을 보여 최대 2배 성능을 높일 수 있고, 데이터 분석의 경우 최대 3배 성능 개선이 가능하다. 달라진 게임의 법칙 4세대 제온 스케일러블 프로세서의 등장으로 차세대 데이터센터 시장을 놓고 벌이는 다양한 프로세서 간 새로운 경쟁이 본격화될 전망이다. 4세대 제온 스케일러블 프로세서는 단순한 신제품이 아니다. 다양한 워크로드의 급변하는 요구 사항을 해결하고 성능, 확장성 및 효율성에 중점을 둔 차세대 데이터센터 구축에 대한 인텔의 전략을 상징한다. 4세대 제온 스케일러블 프로세서는 반도체 시장의 게임의 법칙은 시대의 흐름에 따라 바뀐다는 것을 보여주는 산증인이다.