Unity UI 스타일링 및 USS 베스트 프랙티스
이 문서에서는 Unity에서 UI를 스타일링할 때 사용하는 USS(운영자 스타일 시트)에 대한 베스트 프랙티스와 성능 개선 방법을 소개합니다. Unity의 UI 툴킷을 활용하여 효율적이고 깔끔한 스타일링을 구현하는 데 도움을 줄 것입니다.
기본 원칙
1. 인라인 스타일 피하기
- 메모리 사용 효율: 가능하면 인라인 스타일 대신 USS 파일을 사용하세요. 인라인 스타일은 모든 요소별로 적용되므로 메모리 오버헤드가 발생할 수 있습니다.
2. 선택자 아키텍처 고려
- 런타임 성능: 모든 USS 선택자는 런타임에 적용되므로 아키텍처가 초기화 성능에 영향을 줍니다.
3. 성능 영향
- 선택자가 많더라도 일반적으로 각 USS 파일은 룩업 테이블로 변환되지만, 클래스를 추가할수록 성능은 선형적으로 감소합니다.
복잡한 선택자 가이드라인
1. 복잡 선택자 피하기
- 단순 선택자 우선: 복잡한 선택자는 단순한 선택자보다 성능에 더 큰 영향을 미칩니다. 가능한 자식 선택자를 사용합니다.
2. BEM 사용하기
- BEM 소개: BEM(Block Element Modifier) 방법론을 통해 선택자의 복잡성을 줄이고 유지보수성을 높입니다.
BEM 스타일링 방식
BEM 구성 요소
| 구성 요소 | 예제 |
|---|---|
| 블록 이름 | menu, button |
| 요소 이름 | menu__item, button__icon |
| 수정자 | menu--disabled, button--small |
UXML 예제
<VisualElement class="menu">
<Label class="menu__item" text="Banana" />
<Label class="menu__item" text="Apple" />
<Label class="menu__item menu__item--disabled" text="Orange" />
</VisualElement>
스타일링 예시
.menu {
}
.menu__item {
}
.menu__item--disabled {
}
복잡 선택자의 사용 예
.button {
}
.button__icon {
}
.button--small {
}
.button--small .button__icon {
}
스타일 적용 방법
1. 클래스 리스트 추가
- AddToClassList() 메서드 사용: 요소 인스턴스에 관련 USS 클래스를 추가합니다.
2. 상태에 따른 클래스 관리
- 상태 변화에 따른 클래스 추가/제거: 요소의 상태나 변형에 따라 관련 클래스를 변화시킵니다.
3. 다른 프로젝트와의 충돌 방지
- 접두사 사용: 다른 사용자 클래스명과의 충돌을 피하기 위해 접두사를 붙여 관리합니다.
추가 리소스
- USS 소개
- C# 스크립트에서 스타일 적용
- TSS(테마 스타일시트)
Unity UI 스타일링을 위한 이 가이드는 기본 원칙과 베스트 프랙티스를 제공합니다. 이 문서를 통해 효율적이고 유지보수하기 쉬운 UI를 구축하시기 바랍니다.