그림 이모티콘 표시

모든 유형의 앱에서 그림 이모티콘 사용이 급속도로 증가함에 따라 표준 그림 이모티콘 세트는 매년 유니코드로 갱신됩니다.

앱이 인터넷 콘텐츠를 표시하거나 텍스트 입력을 제공하는 경우 최신 그림 이모티콘 글꼴을 지원하는 것이 좋습니다. 그러지 않으면 나중에 그림 이모티콘이 두부 (☐)라는 작은 정사각형 상자 또는 잘못 렌더링된 다른 그림 이모티콘 시퀀스로 표시될 수 있습니다.

Android 버전 11 (API 수준 30) 이하에서는 그림 이모티콘 글꼴을 업데이트할 수 없으므로 이러한 버전에서 그림 이모티콘을 표시하는 앱은 수동으로 업데이트해야 합니다.

다음은 최신 그림 이모티콘의 예입니다.

버전
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (2021년 9월)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (2020년 9월)
🥲 🥷🏿 🐻‍❄️ 13.0 (2020년 3월)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (2019년 10월)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (2019년 2월)

2023년 3월 BOM (Compose UI 1.4)에서는 이전 Android 버전과 API 21까지의 하위 호환성을 포함하여 최신 그림 이모티콘 버전을 지원합니다.

이 지원을 위해 앱을 변경할 필요가 없습니다. TextTextField (Material 2 또는 Material 3) 또는 BasicTextBasicTextField를 사용하는 경우 최신 그림 이모티콘 지원을 즉시 사용할 수 있습니다.

앱에서 최신 그림 이모티콘을 테스트하는 가장 좋은 방법은 API 30 이하에서 실제 기기를 사용하는 것입니다.

맞춤 그림 이모티콘 솔루션을 사용하거나 다른 이유로 Compose에서 기본 그림 이모티콘 확인을 사용 중지해야 하는 경우 PlatformTextStyle(emojiSupportMatch)를 사용하면 됩니다.

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)

상호 운용성

앱이 동일한 Activity에서 뷰와 Compose를 모두 사용하는 경우 적절한 API를 사용하여 그림 이모티콘을 올바르게 구성해야 합니다. 다음 섹션에서는 각 API를 언제 사용해야 하는지 설명합니다.

ComponentActivity에서 확장

ActivityAppCompatActivity 대신 Compose ComponentActivity에서 확장되는 경우 AppCompat 없이 그림 이모티콘 지원 안내를 따르세요.

AppCompatActivity를 확장하지 않으므로 Emoji2 라이브러리를 종속 항목에 추가하고 다음 스니펫과 같이 뷰에서 TextView 위젯 대신 EmojiTextView를 사용합니다.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: EmojiTextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}

그런 다음 XML 파일에서 다음을 수행합니다.

<androidx.emoji2.widget.EmojiTextView
    android:id="@+id/emoji_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

AppCompatActivity에서 확장

ActivityAppCompatActivity에서 확장되는 경우 ComposeView를 사용하여 구성 가능한 함수를 호출할 수 있습니다. Text 컴포저블을 사용하면 여러 Android 버전에서 그림 이모티콘이 올바르게 렌더링됩니다.

AppCompatActivity에서 확장하는 경우 XML에서 TextView를 확장하여 그림 이모티콘이 올바르게 렌더링되도록 합니다.

이는 XML을 확장하는 경우에 적용됩니다.

  • ComposeView 외부, Activity 다음 스니펫에서 AppCompatActivityTextView의 사용법을 확인하세요.

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: TextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidViewBinding(ExampleViewBinding::inflate) {
                            emojiTextView.text = EMOJI_TEXT
                        }
                    }
                }
            }
        )
    }
}

ComposeView 내에서 AndroidView로 텍스트를 확장하려면 AppCompatTextView를 사용하여 그림 이모티콘을 올바르게 렌더링합니다.

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidView(
                            factory = { context -> AppCompatTextView(context) },
                            update = { it.text = EMOJI_TEXT }
                        )
                    }
                }
            }
        )
    }
}

자세한 내용은 상호 운용성 API 문서를 참조하세요.

문제 해결

그림 이모티콘 대신 두부 (☐)가 표시되면 먼저 문제가 특정 테스트 기기에 있는지 확인하세요. 다음과 같은 몇 가지 주요 사항을 확인할 수 있습니다.