본문으로 건너뛰기

iOS 26에서 툴바 항목의 Liquid Glass 배경을 나누는 방법

When toolbar items share a glass background in iOS 26

sarunw.com

핵심 요약

  1. iOS 26에서는 같은 가장자리에서 이웃한 툴바 항목이 기본적으로 하나의 Liquid Glass 캡슐을 공유하며, ToolbarItem의 분리 여부나 버튼·텍스트·사용자 지정 뷰의 종류는 병합을 막지 않는다.
  2. 다른 영역에 놓인 항목, prominent 스타일 또는 role: .confirm을 사용하는 항목, sharedBackgroundVisibility(.hidden)으로 배경을 끈 항목은 이웃과 별도의 캡슐로 표시된다.
  3. 항목 사이에 ToolbarSpacer를 두면 캡슐을 명시적으로 분리할 수 있다. .fixed는 작은 간격을 만들고, .flexible은 하단 바에서 항목을 양쪽으로 밀어 배치한다.

도입

iOS 26의 툴바 항목은 평평한 바 위에 각각 놓이는 대신 Liquid Glass 배경에 표시된다. 같은 가장자리에서 이웃한 항목은 기본적으로 하나의 캡슐로 합쳐진다. 이 동작은 별도의 설정 없이 적용되며, 어떤 항목이 합쳐지고 언제 분리되는지는 실제 배치 영역과 버튼의 스타일, 배경 표시 설정에 따라 달라진다.

상세 요약

기본 병합 규칙

iOS 26에서는 같은 가장자리에서 이웃한 툴바 항목이 하나의 Liquid Glass 캡슐을 공유한다. 별도의 설정이 없어도 적용된다.

  • 각 항목을 별도의 ToolbarItem으로 선언해도 하나로 합쳐진다. ToolbarItemGroup을 쓰거나 여러 그룹으로 나눠도 결과는 같다.
  • 텍스트 버튼과 아이콘 버튼은 함께 합쳐질 수 있다. 버튼이 아닌 사용자 지정 뷰나 Text도 같은 캡슐에 들어간다.
  • placement의 이름보다 항목이 실제로 배치되는 위치가 기준이다. iPhone에서 .primaryAction은 trailing edge에 놓이므로 .topBarTrailing 항목과 합쳐질 수 있다.

자세한 툴바 항목 제어 방법은 SwiftUI 툴바 항목의 표시와 동작 제어하기에서 확인할 수 있다.

항목이 별도 캡슐을 만드는 경우

다음 조건에서는 이웃 항목과 배경을 공유하지 않는다.

  • 배치 영역이 다를 때: leading edge, 제목 영역, trailing edge는 각각 별도 영역이다. 영역이 다르면 한 캡슐로 합쳐지지 않는다.
  • prominent 버튼일 때: .buttonStyle(.glassProminent)을 적용한 버튼은 독립된 캡슐을 갖는다. role: .confirm인 툴바 버튼도 prominent로 표시된다.
  • 확인 역할과 배치를 구분할 때: .confirmationAction은 버튼을 굵게 표시하지만, 그 자체로 prominent 상태를 만들지는 않는다. 시트의 Done 버튼을 강조하려면 role: .confirm을 지정한다.
  • 배경을 숨겼을 때: sharedBackgroundVisibility(.hidden)은 해당 항목의 유리 배경을 제거한다. 프로필 이미지처럼 자체 형태가 있는 항목에 쓸 수 있다. 이 modifier는 항목 내부 뷰가 아니라 ToolbarItem에 적용한다.

ToolbarSpacer로 캡슐 나누기

같은 가장자리의 항목을 두 캡슐로 나누려면 사이에 ToolbarSpacer를 둔다. spacer 앞의 항목끼리 하나의 캡슐을 만들고, 뒤의 항목은 다음 캡슐을 만든다. 예를 들어 노트에 대한 Share와 Favorite을 묶고, 나머지 동작을 여는 More를 분리할 수 있다.

  • .fixed는 작고 고정된 간격을 만든다.
  • .flexible은 가능한 공간을 차지한다.

내비게이션 바의 trailing 항목은 제목 영역을 차지할 수 없다. 따라서 이 영역에서 .flexible은 .fixed와 마찬가지로 작은 간격으로 표시된다.

하단 바와 검색 항목

하단 바에서는 spacer 종류에 따른 차이가 드러난다. spacer가 없으면 여러 하단 바 항목이 가운데의 단일 캡슐로 합쳐진다. .flexible spacer를 넣으면 캡슐이 나뉘고 양쪽으로 밀린다.

searchable의 검색 필드를 DefaultToolbarItem(kind: .search, placement: .bottomBar)로 하단 바에 놓으면 다른 툴바 항목처럼 이웃 항목과 합쳐진다. 검색 필드만 독립 캡슐로 만들려면 앞뒤에 .fixed spacer를 각각 둔다.

결론

기본 병합을 바꾸려면 항목의 실제 배치 영역과 역할을 확인하고, 필요하면 ToolbarSpacer를 삽입한다. 특히 confirmationAction 배치만으로는 버튼이 prominent 상태가 되지 않으므로 role: .confirm을 함께 지정해야 한다. 하단 바에서는 .flexible spacer가 항목을 가장자리로 밀지만, 내비게이션 바에서는 .fixed와 같은 작은 간격으로 보인다.