Angular ViewEncapsulation 정리
Angular의
ViewEncapsulation은 컴포넌트의 스타일을 캡슐화하여 전역 스타일 충돌을 방지하고 유지보수를 쉽게 만드는 중요한 개념입니다.
이 글에서는ViewEncapsulation의 개념과 종류, 예제 코드, 실무 프로젝트에서의 활용 방안을 정리하겠습니다.
📌 1. ViewEncapsulation이란?
Angular는 기본적으로 컴포넌트 단위의 스타일 캡슐화를 지원합니다.
즉, 한 컴포넌트의 스타일이 다른 컴포넌트에 영향을 주지 않도록 보호하는 방식입니다.
이 캡슐화 방식을 설정하는 것이 ViewEncapsulation입니다.
📌 2. ViewEncapsulation의 종류 및 특징
| Encapsulation 종류 | 설명 | 전역 스타일 적용 여부 | 컴포넌트 스타일 적용 방식 |
|---|---|---|---|
None | 스타일 캡슐화를 사용하지 않음 | ✅ (전역 스타일 적용됨) | 컴포넌트 스타일이 전역 스타일처럼 동작 |
Emulated (기본값) | 스타일을 컴포넌트 내부에서만 적용 | ✅ (전역 스타일 적용됨) | 컴포넌트 스타일이 자동으로 캡슐화됨 (_ngcontent 속성 추가) |
ShadowDom | 웹 표준 Shadow DOM을 사용하여 독립적인 스타일 적용 | ❌ (전역 스타일 적용 안됨) | 컴포넌트 스타일이 완전히 독립적이며, 외부 CSS가 영향을 주지 않음 |
📌 3. 각 ViewEncapsulation의 예제
✅ 1) ViewEncapsulation.None (전역 스타일 적용)
스타일이 전역적으로 적용되어, 모든 컴포넌트에서 영향을 받을 수 있음.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-none',
template: `<p>None Encapsulation</p>`,
styles: [`p { color: red; }`],
encapsulation: ViewEncapsulation.None
})
export class NoneEncapsulationComponent {}🔹 렌더링 결과
<p class="text">None Encapsulation</p>
p {
color: red; /* 모든 p 태그에 전역적으로 적용됨 */
}❌ 주의점
전역 스타일이 적용되므로, 스타일 충돌이 발생할 가능성이 있음.
유지보수성이 떨어질 수 있음.
✅ 추천 사용 사례
프로젝트 전체에서 동일한 스타일을 적용할 때 (ex. 리셋 스타일, 기본 폰트 설정).
공통 UI 라이브러리를 개발할 때.
✅ 2) ViewEncapsulation.Emulated (기본값, 스타일 캡슐화)
각 컴포넌트의 스타일이 자동으로 격리되면서도, 전역 스타일도 함께 적용됨.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-emulated',
template: `<p>Emulated Encapsulation</p>`,
styles: [`p { color: blue; }`],
encapsulation: ViewEncapsulation.Emulated
})
export class EmulatedEncapsulationComponent {}🔹 렌더링 결과
<p _ngcontent-xyz>Emulated Encapsulation</p>
p[_ngcontent-xyz] {
color: blue;
}✅ 장점
컴포넌트 스타일이 자동으로 격리되므로, 스타일 충돌을 방지할 수 있음.
전역 스타일도 적용 가능하므로, 유지보수가 용이함.
🚀 추천 사용 사례
규모가 큰 웹 프로젝트에서 개별 컴포넌트의 스타일을 보호할 때.
SEO(검색 엔진 최적화) 및 SSR(서버 사이드 렌더링) 적용이 필요할 때.
✅ ** 3) ViewEncapsulation.ShadowDom (웹 표준 Shadow DOM 적용)
Shadow DOM을 사용하여 컴포넌트 스타일을 완전히 독립적으로 유지함.**
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-shadow',
template: `<p>Shadow DOM Encapsulation</p>`,
styles: [`p { color: green; }`],
encapsulation: ViewEncapsulation.ShadowDom
})
export class ShadowDomEncapsulationComponent {}🔹 렌더링 결과
<app-shadow>
#shadow-root (open)
<p>Shadow DOM Encapsulation</p>
</app-shadow>✅ 장점
전역 스타일의 영향을 전혀 받지 않음.
Web Components를 개발할 때 유용.
🚨 주의점
SEO 문제 → 검색 엔진이 Shadow DOM 내부의 콘텐츠를 크롤링할 수 없음.
전역 스타일을 적용하기 어려움 → Tailwind, Bootstrap 같은 CSS 프레임워크와 충돌할 가능성이 있음.
📌 4. 실무 프로젝트에서의 ViewEncapsulation 사용 전략
🚀 저는 현재 규모가 큰 Angular 웹 프로젝트에서 Emulated을 기본으로 사용하고, 일부 컴포넌트에서는 None을 사용하여 스타일을 관리하고 있습니다.
또한, 프로젝트 유지보수를 쉽게 하기 위해 Style Guide를 만들어 제3자가 쉽게 개발할 수 있도록 운영하고 있습니다.
✅ 적용 전략
1️⃣ 기본적으로 Emulated 사용
개별 컴포넌트의 스타일을 격리하여 스타일 충돌 방지.
SEO 및 SSR(서버사이드 렌더링) 적용 가능.
2️⃣ 일부 전역 스타일이 필요한 경우 None 사용
styles.scss에서 프로젝트 전체에 적용해야 하는 스타일이 있을 경우.
예: 공통 버튼, 폰트 스타일 등.
3️⃣ Web Components 제작 시 ShadowDom 활용
특정 UI 요소를 다른 프레임워크에서도 재사용해야 하는 경우.
📌 5. 프로젝트 Style Guide
🎯 저는 Style Guide 프로젝트에 기여하여 사내 프로젝트의 유지보수성과 개발 효율성을 높이기 위해 노력했는데요.
✔ 전역 스타일(styles.scss)과 개별 컴포넌트 스타일(Emulated)을 명확하게 분리
✔ 공통 UI 컴포넌트는 None을 적용하여 스타일 일관성을 유지
✔ Web Components가 필요한 경우 ShadowDom을 활용 ( 제 프로젝트에서는 사용을 하지 않았습니다.. )
이러한 스타일 가이드를 제공함으로써, 제3자가 프로젝트에 참여하더라도 빠르게 적응하고 개발할 수 있도록 체계적인 스타일 관리 환경을 제공하고 있습니다.
📌 6. 결론
✅ 일반적인 Angular 프로젝트에서는 Emulated이 가장 적합
✅ 전역 스타일을 강제해야 한다면 None을 활용
✅ Web Components 개발 시 ShadowDom을 고려
✅ 스타일 가이드를 운영하여 제3자가 쉽게 유지보수할 수 있도록 체계화
🔥 Angular ViewEncapsulation을 적절히 활용하면, 유지보수성이 뛰어나고 확장 가능한 웹 애플리케이션을 개발할 수 있습니다
참조글)
https://www.angular.kr/guide/view-encapsulation
https://hgko-dev.tistory.com/302
https://www.geeksforgeeks.org/view-encapsulation-in-angular/
