외국인 관광객을 위한 앱 만들기 : 카테고리 검색 화면 구현

 

 

Jetpack Compose로 DropDown과 카테고리 버튼 UI 만들기

카테고리 검색 버튼

 

이 글에서는 Jetpack Compose로 드롭다운 메뉴를 만들고, JSON 형태의 카테고리 데이터를 3x3 버튼 그리드 형태로 화면에 표시하는 방법을 정리합니다.

---

🟡 1. DropDown (Spinner 형태) 버튼 만들기

아래는 Compose의 DropdownMenu를 이용하여 간단한 드롭다운 UI를 구성하는 예시입니다.

@Composable
fun SimpleDropdownMenu(
    options: List<String>,
    onOptionSelected: (String) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }
    var selectedOption by remember { mutableStateOf(options.firstOrNull() ?: "") }

    Column(modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)) {

        OutlinedTextField(
            value = selectedOption,
            onValueChange = {},
            readOnly = true,
            label = { Text("Select Option") },
            modifier = Modifier
                .fillMaxWidth()
                .clickable { expanded = true },
            trailingIcon = {
                IconButton(onClick = { expanded = !expanded }) {
                    Icon(Icons.Default.ArrowDropDown, contentDescription = "Dropdown Icon")
                }
            }
        )

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            options.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = {
                        selectedOption = option
                        expanded = false
                        onOptionSelected(option)
                    }
                )
            }
        }
    }
}
  

💬 사용 예시

@Composable
fun MyScreen() {
    val items = listOf("Option 1", "Option 2", "Option 3")

    SimpleDropdownMenu(options = items) { selected ->
        println("Selected: $selected")
    }
}
  

---

🟢 2. 카테고리 JSON 데이터를 3x3 버튼 그리드로 변환

아래와 같은 카테고리 데이터가 있다고 가정합니다:

[
  { "code": "MT1", "name": { "ko": "대형마트", "en": "Large Mart", ... } },
  { "code": "CS2", "name": { "ko": "편의점", "en": "Convenience Store", ... } },
  ...
]
  

이를 기반으로 사용자의 시스템 언어에 따라 적절한 번역명을 표시하는 버튼 UI를 구성할 수 있습니다.

✅ 버튼 UI 구성 코드

@Composable
fun CategoryGridView(
    categories: List<PlaceCategory>,
    onCategorySelected: (PlaceCategory) -> Unit
) {
    val context = LocalContext.current
    val locale = context.resources.configuration.locales[0]
    val rows = categories.chunked(3)

    Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        rows.forEach { rowItems ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                rowItems.forEach { category ->
                    val dynamicFontSize = getFontSizeForLanguage(locale.language)
                    Button(
                        onClick = { onCategorySelected(category) },
                        modifier = Modifier
                            .weight(1f)
                            .aspectRatio(1f)
                    ) {
                        Text(
                            text = category.localizedName(locale),
                            fontSize = dynamicFontSize
                        )
                    }
                }

                if (rowItems.size < 3) {
                    repeat(3 - rowItems.size) {
                        Spacer(modifier = Modifier.weight(1f))
                    }
                }
            }
        }
    }
}
  

🔠 언어에 따라 글자 크기 다르게 설정

fun getFontSizeForLanguage(language: String): TextUnit {
    return when (language) {
        "ja", "zh", "zh-Hant", "zh-TW", "th" -> 11.sp
        "vi", "tl", "en" -> 13.sp
        "ko" -> 14.sp
        else -> 13.sp
    }
}
  

위 로직을 통해 다국어 환경에서도 버튼 내 텍스트가 UI를 깨뜨리지 않고 자연스럽게 표시되도록 조절할 수 있습니다.

---

📌 마무리

• Jetpack Compose에서는 드롭다운, 버튼 그리드 UI를 매우 유연하게 구현할 수 있습니다.
• JSON 기반 다국어 데이터를 이용하면 자동화된 로컬라이징 처리도 쉽게 적용할 수 있습니다.
• 언어별 글자폭을 고려한 폰트 사이즈 조정은 모바일 UI 품질을 높이는 중요한 요소입니다.

다국어 앱 개발 또는 지역 기반 카테고리 UI를 만들고 있다면 위 패턴을 적극 활용해보세요!