그림 이모티콘 표시

모든 유형의 앱에서 그림 이모티콘의 사용이 빠르게 증가함에 따라 표준 그림 이모티콘은 매년 유니코드로 업데이트됩니다.

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

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)에서는 API 21까지 이전 Android 버전과의 호환성을 포함하여 최신 그림 이모티콘 버전을 지원합니다.

이 지원에는 앱을 변경할 필요가 없습니다. Text 및 TextField (Material 2 또는 Material 3) 또는 BasicText와 BasicTextField를 사용하면 최신 그림 이모티콘이 즉시 지원됩니다.

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

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

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

상호 운용성

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

ComponentActivity에서 확장

Activity가 AppCompatActivity가 아닌 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
            }
        }
    }
}
EmojiSnippets.kt

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

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

AppCompatActivity에서 확장

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

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

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

  • ComposeView 외부의 Activity. 다음 스니펫에서 AppCompatActivity 및 TextView의 사용에 유의하세요.

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
            }
        }
    }
}
EmojiSnippets.kt

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
                        }
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

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 }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

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

문제 해결

그림 이모티콘 대신 두부 (☐)가 표시된다면 먼저 내 테스트 기기에서 문제가 발생하는지 확인하세요. 몇 가지 주요 사항을 확인할 수 있습니다.