renderType="Bare" 로 바꾸자 라벨이 가운데로 몰렸다

TL;DR

• renderType="Bare"로 바꿨더니 라벨만 가운데로 몰렸다. text-align을 줘도 안 먹는다.
• Bare는 감싸는 div를 생략한다. 글자 요소가 곧 flex 항목이 되면서 자고 있던 .sapMText { align-self: center }가 깨어났다.
• align-self: stretch로 상자를 늘린 뒤에야 text-align이 의미를 갖는다.

환경

항목	값
SAPUI5	1.108.7
테마	sap_belize
컨트롤	sap.m.VBox, sap.m.FlexBox, sap.m.Text
상황	기존 프로젝트에서 이식해 온 공통 CSS가 깔려 있음

---

🚨 문제 상황

라벨과 값이 세로로 쌓인 입력 블록이 열 개쯤 있다.

불필요한 div를 줄이려고 renderType="Bare"로 바꿨다. DOM이 가벼워지는 것 말곤 달라질 게 없다고 생각했다.

<!-- Before -->
<VBox>
  <Text text="기간(개월)" class="fieldLabel"/>
  <Input value="{/term}"/>
</VBox>

<!-- After -->
<VBox renderType="Bare">
  <Text text="기간(개월)" class="fieldLabel"/>
  <Input value="{/term}"/>
</VBox>

그런데 라벨 글자가 전부 가운데로 몰렸다. 열 개 블록이 다 그렇다. 입력칸은 그대로인데 그 위 라벨만 가운데다.

 

라벨 상자가 글자 크기만큼만 차지해 가운데에 놓인다

---

원인 추적

처음 의심한 것

가운데 정렬이니 text-align을 먼저 줬다.

시도	결과	이유
text-align: left	안 먹음	요소가 글자 폭만큼만 차지해 정렬할 여백이 없음
text-align: left !important	안 먹음	특이도 문제가 아님
부모에 alignItems="Start"	먹는데 다른 게 깨짐	그 상자 안 입력칸 폭까지 줄어듦
width: 100%	먹음	되긴 하는데 왜 되는지 모름

세 번째와 네 번째가 단서였다. 정렬이 아니라 「요소의 폭」 문제였다.

글자가 가운데 있는 게 아니라 글자 상자 자체가 가운데에 놓여 있었다.

진짜 원인

UI5의 FlexBox 계열은 자식마다 div를 하나 씌워서 그걸 flex 항목으로 쓴다.

renderType="Bare"는 그 div를 생략한다. 자식 컨트롤의 루트 요소가 곧 flex 항목이 된다.

그래서 이식해 온 공통 CSS의 이 한 줄이 비로소 효과를 냈다.

/* 공통 CSS 어딘가에 있던 줄 */
.sapMText { align-self: center; }

flex 항목에 align-self: center가 걸리면 세로 상자에선 교차축이 가로라서 가로 가운데로 간다.

그리고 align-self가 stretch가 아니게 되는 순간 항목은 내용 폭만큼만 차지한다. text-align이 아무 소용 없던 이유다.

DOM 한 겹이 사라지면 flex 항목이 바뀐다

이 CSS는 몇 년 동안 효과 없이 깔려 있던 규칙이었다. Div 모드에선 flex 항목이 UI5가 씌운 div이고 글자 요소는 그 자식이라, align-self를 줘도 아무 일도 일어나지 않는다.

이런 규칙은 CSS 파일을 검색해도 눈에 안 들어온다. 지금 안 깨져 있으니 아무도 안 지웠고, 왜 넣었는지 아는 사람도 없다.

「동작에 영향 없는 CSS」는 없다. 아직 조건이 안 맞은 CSS가 있을 뿐이다.

---

해결

align-self를 먼저 되돌려 상자를 늘린 다음, 그 안에서 왼쪽 정렬을 준다.

/* Bare 모드에서 라벨이 곧 flex 항목이 되어 공통 규칙
   .sapMText{align-self:center} 가 깨어난다. 그 자리만 되돌린다. */
.myApp .sapMVBox > .fieldLabel {
  align-self: stretch;
  text-align: left;
}

두 줄이 한 쌍이다.

• stretch만 주면 상자는 늘어나는데 글자 위치는 테마가 정한다
• text-align만 주면 상자가 글자 크기라 효과가 없다

align-self를 되돌려 상자를 늘린 뒤에야 정렬이 의미를 갖는다

실제로 재 보면 상자 폭이 이렇게 바뀐다.

증상 → 해결
  align-self   center → stretch
  라벨 상자 폭  28px   → 220px     ← 글자 폭만큼만 차지하고 있었다

---

선택자를 좁게 쓴 이유

처음엔 이렇게 썼다.

/* ❌ 가로 상자 안의 라벨까지 늘어나 값을 밀어낸다 */
.myApp .fieldLabel { align-self: stretch; text-align: left; }

「라벨 — 값」이 한 줄에 나란히 놓인 자리에서는 라벨이 stretch되면 안 된다.

/* ✅ 세로 상자의 직계 자식만 */
.myApp .sapMVBox > .fieldLabel { ... }
/*          ^^^^^^^^^   ^ */

자손 선택자(공백)가 아니라 직계 자식 선택자(>)인 게 중요하다. 세로 상자 안에 가로 상자가 들어 있는 구조가 흔한데, 자손 선택자를 쓰면 그 안쪽 라벨까지 집는다.

---

확인

1. 세로 상자 라벨 — 왼쪽 정렬로 돌아왔는지
2. 가로 상자 라벨 — 「라벨 — 값」이 한 줄에 놓인 자리가 안 깨졌는지 (이게 더 중요하다)
3. Computed 탭의 align-self — stretch인지
4. 라벨이 두 줄로 길어질 때 — 줄바꿈이 제대로 되는지

---

💡 배운 것

가운데 정렬이니 정렬 속성 문제라고 생각했다. 그런데 가운데에 있는 건 글자가 아니라 글자를 담은 상자였다.

개발자도구에서 요소를 집어 차지하는 영역만 봤어도 바로 알았을 것이다. 속성을 바꿔 보기 전에 지금 상태를 보는 순서였다.

renderType처럼 「구조만 바꾸는」 속성이 제일 위험하다. 보이는 게 안 바뀔 거라 생각하니 검증이 느슨해진다. 그런데 DOM 한 겹이 사라지면 그 겹에 기대던 CSS 전부의 적용 대상이 바뀐다.

효과 없이 깔려 있던 규칙은 언제든 깨어날 수 있다. 「지금 영향 없는 CSS」는 아직 조건이 안 맞은 CSS일 뿐이다.

---

이어지는 글

• SAPUI5 버튼 아이콘 색이 아무리 해도 검게 나올 때
• belize 테마에서 Select와 ComboBox 드롭다운 폭이 다른 이유