SwiftUI List Separator 제거 방법 (iOS)

SwiftUI List Separator 제거 방법 (iOS)

SwiftUI에서 List를 사용할 때 기본적으로 각 행(Row) 사이에 구분선(separator)이 표시된다. 하지만 디자인에 따라 이 구분선을 제거하고 싶을 때가 있다.

특히 카드형 UI나 커스텀 셀 디자인을 사용하는 경우에는 기본 separator가 오히려 디자인을 방해할 수 있다.

이 글에서는 SwiftUI에서 List의 separator를 제거하는 방법을 정리한다.

SwiftUI List 기본 구분선

기본 SwiftUI List는 각 셀 사이에 separator가 표시된다.

List {
    Text("Apple")
    Text("Banana")
    Text("Orange")
}

위 코드를 실행하면 각 Text 사이에 구분선이 자동으로 표시된다.

iOS 15 이상에서 Separator 제거

iOS 15 이상에서는 listRowSeparator modifier를 사용해 구분선을 제거할 수 있다.

List {
    Text("Apple")
        .listRowSeparator(.hidden)

    Text("Banana")
        .listRowSeparator(.hidden)

    Text("Orange")
        .listRowSeparator(.hidden)
}

이렇게 설정하면 해당 Row의 separator가 숨겨진다.

List 전체 Separator 제거

모든 Row에 적용하려면 ForEach 내부에 modifier를 적용하면 된다.

List {
    ForEach(0..<10) { index in
        Text("Row \(index)")
            .listRowSeparator(.hidden)
    }
}

이 방식이 가장 일반적으로 사용된다.

SwiftUI List 스타일과 함께 사용

List 스타일을 함께 사용하면 더 자연스러운 UI를 만들 수 있다.

List {
    ForEach(0..<10) { index in
        Text("Row \(index)")
            .listRowSeparator(.hidden)
    }
}
.listStyle(.plain)

plain 스타일을 사용하면 separator가 없는 깔끔한 리스트를 만들 수 있다.

Section 사용 시 Separator 제거

Section을 사용하는 경우에도 동일하게 적용할 수 있다.

List {
    Section {
        Text("Apple")
            .listRowSeparator(.hidden)

        Text("Banana")
            .listRowSeparator(.hidden)
    }
}

iOS 14 이하에서 Separator 제거

iOS 14 이하에서는 listRowSeparator modifier가 존재하지 않는다. 이 경우 UIKit appearance를 이용해야 한다.

init() {
    UITableView.appearance().separatorStyle = .none
}

하지만 이 방식은 앱 전체 List에 영향을 줄 수 있으므로 가능하면 iOS 15 이상의 방법을 사용하는 것이 좋다.

실제 프로젝트에서 사용하는 패턴

실제 SwiftUI 프로젝트에서는 다음과 같은 경우 separator를 제거하는 경우가 많다.

• 카드형 리스트 UI
• 커스텀 셀 디자인
• 설정 화면
• 아이템 간 간격이 큰 리스트

정리

• iOS 15 이상에서는 listRowSeparator(.hidden) 사용
• Row 단위로 separator 제거 가능
• ForEach 내부에서 적용하면 전체 리스트에 적용 가능
• iOS 14 이하에서는 UITableView appearance 사용

SwiftUI 관련 글

• SwiftUI NavigationStack 사용 방법 정리 (iOS 16+)
• SwiftUI List Separator 제거 방법 (iOS)
• SwiftUI Toggle 사이즈 조절 방법 (iOS)
• SwiftUI NavigationTitle 왼쪽 정렬 구현 방법 (iOS)
• SwiftUI TabView 커스텀 탭바 만들기 (iOS)