Angular ViewEncapsulation(뷰 캡슐화) 완벽 정리 – Emulated, ShadowDom, None 차이와 실무 팁

반응형

 

Angular(앵귤러)는 컴포넌트 단위로 화면을 구성합니다. 각 컴포넌트는 HTML, CSS, TypeScript로 분리되어 유지보수에 용이하지만, CSS는 본질적으로 전역 범위로 작동하기 때문에 스타일 충돌이 쉽게 발생할 수 있습니다.

이 문제를 해결하기 위해 Angular에서는 ViewEncapsulation(뷰 캡슐화) 기능을 제공합니다. 이 글에서는 Angular의 뷰 캡슐화가 무엇인지, 어떤 방식이 있는지, 각각 어떤 상황에 적합한지 실무 관점에서 자세히 설명합니다.

---

 

ViewEncapsulation이란?

ViewEncapsulation은 컴포넌트에서 작성한 CSS가 외부로 새어나가지 않도록, 스타일의 적용 범위를 제한하는 방법입니다. 즉, 컴포넌트 단위로 스타일을 캡슐화하여 유지보수성과 예측 가능성을 높이는 기능입니다.

Angular는 @Component 데코레이터의 encapsulation 속성으로 뷰 캡슐화 방식을 설정할 수 있으며, 다음 세 가지 방식 중 하나를 선택할 수 있습니다.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  encapsulation: ViewEncapsulation.Emulated // 기본값
})
export class ExampleComponent {}

 

---

ViewEncapsulation 종류 및 설명

1. ViewEncapsulation.Emulated (기본값)

Angular의 기본 설정입니다. Shadow DOM을 사용하지 않고, Angular가 자체적으로 CSS 셀렉터를 변형하여 해당 컴포넌트에만 스타일이 적용되도록 합니다. 예를 들어, 클래스나 태그에 자동으로 _ngcontent-xxx 속성이 붙습니다.

특징

• 실제 Shadow DOM을 사용하지 않음
• 브라우저 호환성이 뛰어남
• 컴포넌트 간 스타일 간섭 방지 가능

실무 팁

• 대부분의 프로젝트에서 기본값으로 충분히 안정적이고 예측 가능한 스타일 관리 가능

 

---

2. ViewEncapsulation.ShadowDom

브라우저의 실제 Shadow DOM API를 사용합니다. 스타일은 해당 컴포넌트 내부에서만 완전히 적용되며 외부에서는 절대 영향을 미치지 않습니다.

 

특징

• 진짜 DOM 캡슐화
• 스타일 상속 불가
• 브라우저에서 ShadowRoot로 렌더링됨

주의 사항

• IE 등 구형 브라우저에서는 지원되지 않음
• 디버깅이나 테스트 시 HTML 구조 확인이 어려울 수 있음

사용 예시

• Web Components처럼 독립성이 중요한 UI 요소에 적합

 

---

3. ViewEncapsulation.None

스타일을 전혀 캡슐화하지 않습니다. 해당 컴포넌트의 스타일은 전역 CSS처럼 전체 애플리케이션에 영향을 미칩니다.

 

특징

• CSS가 앱 전체에 적용됨
• 캡슐화 없이 편리하게 스타일 관리 가능

주의 사항

• 전역 스타일 오염 가능성이 매우 높음
• 다른 컴포넌트와의 충돌 가능성 존재

사용 예시

• 전역 테마 적용이나 공통 스타일을 관리할 때 한정적으로 사용

 

---

실무에서의 선택 기준

캡슐화 방식 장점 단점 권장 사용 시점

Emulated (기본값)	브라우저 호환성 좋음, 안전한 캡슐화	내부 속성 붙기 때문에 디버깅이 다소 번거로움	대부분의 일반 컴포넌트
ShadowDom	진짜 캡슐화, 외부 영향 완전 차단	브라우저 제한, 구조 파악 어려움	WebComponent 방식이 필요한 경우
None	전역 스타일 관리에 유리	스타일 충돌, 유지보수 어려움	전역 테마, 공통 스타일 한정 사용

---

사용 시 주의할 점

1. None을 무분별하게 사용할 경우, 의도치 않은 전역 스타일 적용으로 문제를 일으킬 수 있습니다.
2. ShadowDom을 사용할 경우, 스타일 상속이나 글로벌 스타일의 적용이 불가능합니다.
3. :host, :host-context, ::ng-deep 등의 CSS 선택자를 함께 이해하고 사용하면 더욱 유연한 스타일링이 가능합니다.

 

---

마무리

Angular의 ViewEncapsulation은 단순히 스타일 범위를 조절하는 옵션 같지만, 실무에서는 예상치 못한 스타일 충돌을 막고 유지보수성을 높이는 핵심 도구입니다.

특별한 이유가 없다면 기본값인 Emulated를 사용하는 것을 추천하며, 필요에 따라 적절한 방식으로 전략적으로 선택하는 것이 좋습니다.