피닉스 라이브뷰(Phoenix LiveView) 1.2 버전이 공식 출시되었습니다. 이번 업데이트의 핵심은 HEEx 템플릿(HTML+Elixir) 내에서 CSS를 직접 정의하고 관리할 수 있는 '코로케이티드 CSS(Colocated CSS)' 기능입니다. 이는 기존에 도입된 코로케이티드 훅(Colocated Hooks) 및 자바스크립트(Colocated JavaScript)와 유사하게, 컴포넌트 단위로 스타일을 한곳에 모아 개발 효율성을 높이는 데 중점을 둡니다.
코로케이티드 CSS는 `<style :type={MyApp.ColocatedCSS}>` 태그를 사용하여 HEEx 템플릿 안에 CSS 코드를 작성할 수 있게 합니다. 컴파일 시 이 CSS는 별도의 빌드 폴더로 추출되어 테일윈드(Tailwind)나 ES빌드(Esbuild) 같은 번들러(bundler)를 통해 처리됩니다. 특히 주목할 점은 컴포넌트별 스타일 격리(scoping)를 위한 `@scope` 규칙 지원입니다. 라이브뷰는 템플릿의 루트 요소에 `phx-r` 및 `phx-css-*` 같은 고유 속성을 자동으로 추가하여, `@scope([phx-css-foo]) to ([phx-r])`와 같은 CSS 규칙을 통해 특정 컴포넌트 내의 요소에만 스타일이 적용되도록 합니다. 다만, `@scope` 규칙은 아직 모든 브라우저에서 완벽하게 지원되지 않아, 라이브뷰 1.2에서는 기본으로 제공하지 않고 개발자가 직접 구현할 수 있는 `@behaviour` 형태로 제공됩니다.
이번 업데이트는 코로케이티드 CSS 구현을 위해 HEEx 템플릿 컴파일 방식을 토큰화(tokenization) 및 파싱(parsing) 단계로 분리하는 등 내부적인 개선도 수반했습니다. 이를 통해 매크로 컴포넌트(macro components) 처리가 용이해지고 코드 재사용성이 높아졌습니다. 이 외에도 `<script>` 및 `<style>` 태그 포맷터(formatter) 동작 정의, `Phoenix.LiveView.JS` 구조체 자동 인코딩, HEEx 디버그 주석(annotations) 모듈별 설정, 테스트 경고(warnings) 카테고리별 설정 등 다양한 소규모 개선 사항이 포함되어 개발자 경험을 향상시켰습니다. 이러한 변화들은 라이브뷰를 사용하는 개발자들이 더욱 효율적이고 유연하게 웹 애플리케이션을 구축할 수 있도록 지원할 것입니다.