[Android] Jetpack Compose에서 Scaffold와 Surface의 차이점

Scaffold와 Surface는 UI 레이아웃을 구성할 때 자주 사용되는 두 가지 주요 구성 요소예요. 이들의 기능과 예시, 그리고 차이점에 대해 정리해볼게요.

---

1. Scaffold

Scaffold는 Material Design의 기본 레이아웃 구조를 구현하는 데 사용돼요. 전체 화면의 주요 UI 컴포넌트를 배치할 수 있는 프레임워크를 제공하여 앱의 구조를 쉽게 설정할 수 있어요.

주로 앱의 메인 레이아웃을 설정할 때 사용돼요. 예를 들어, 상단 앱바, 하단 네비게이션 바, 플로팅 액션 버튼을 포함한 화면을 구성할 때 유용해요.

특징

• 앱바: `topBar` 파라미터를 사용하여 화면 상단에 앱바를 배치할 수 있어요.
• 하단 바: `bottomBar` 파라미터를 통해 하단 네비게이션 바를 설정할 수 있어요.
• 플로팅 액션 버튼 (FAB): `floatingActionButton` 파라미터로 화면에 플로팅 액션 버튼을 배치할 수 있어요.
• 바디 콘텐츠: `content` 파라미터를 사용해 주 콘텐츠를 지정할 수 있으며, Scaffold가 제공하는 패딩 값을 적용할 수 있어요.
• 기타: `Snackbar`, `Drawer` 등의 Material Design 컴포넌트를 쉽게 추가할 수 있어요.

예시

Scaffold(
    topBar = { TopAppBar(title = { Text("My App") }) },
    bottomBar = { BottomAppBar { /* 하단 바 콘텐츠 */ } },
    floatingActionButton = {
        FloatingActionButton(onClick = { /* FAB 액션 */ }) {
            Icon(Icons.Filled.Add, contentDescription = null)
        }
    },
    content = { paddingValues ->
        Column(modifier = Modifier.padding(paddingValues)) {
            Text("Hello, World!")
        }
    }
)

---

2. Surface

Surface는 개별 UI 컴포넌트의 스타일과 배경을 설정하는 데 사용되는 기본 구성 요소예요. 주로 카드, 버튼, 박스 등의 컴포넌트에 배경색, 모서리 곡률, 그림자 등을 적용하는 데 사용돼요.

주로 UI 요소들의 스타일링을 담당해요. 예를 들어, 버튼이나 카드 컴포넌트의 배경을 설정하거나, UI 요소에 그림자 효과를 적용하는 등 시각적인 요소를 강화할 때 사용돼요.

특징

• 배경 색상: `color` 파라미터를 통해 배경 색상을 설정할 수 있어요.
• 모서리 곡률: `shape` 파라미터를 사용해 모서리의 곡률을 지정할 수 있어요.
• 그림자: `elevation` 파라미터로 그림자 효과를 설정할 수 있어요.
• 클릭 가능: `clickable` 속성을 사용해 클릭 이벤트를 처리할 수 있어요.

예시

Surface(
    modifier = Modifier.padding(8.dp),
    color = MaterialTheme.colors.background,
    shape = RoundedCornerShape(8.dp),
    elevation = 4.dp
) {
    Text("This is a Surface", modifier = Modifier.padding(16.dp))
}

---

요약

• Scaffold: 전체 화면의 레이아웃 구조를 정의하며, 앱바, 하단 네비게이션 바, 플로팅 액션 버튼 등 주요 UI 컴포넌트를 배치하는 데 사용돼요.
• Surface: 개별 UI 컴포넌트의 배경, 모서리 곡률, 그림자 등을 설정하는 데 사용되며, 스타일링에 중점을 둬요.

이 두 가지 구성 요소를 조합하면, 앱의 전체적인 레이아웃을 설정하고 개별 컴포넌트를 스타일링하여 복잡한 UI를 효율적으로 구성할 수 있어요. Scaffold로 화면의 기본 구조를 잡고, Surface로 개별 컴포넌트를 꾸미는 방식으로 사용해보세요.