[WWDC24] Translation API_소개

Translation API는 iOS, iPadOS, MacOS에 지원되는 번역 API입니다.

이미 Apple 제품 사파리에서 텍스트 드래그 후 번역 기능을 이용해 보신 분들은 쉽게 어떤 기능인지 이해할 수 있을 거 같습니다.

이러한 번역기능을 개인 앱에서 이용할 수 있게 도와주는 API라 이해하시면 될거 같습니다.

 

2024 WWDC Machine Translation 팀 엔지니어가 한 말이 있습니다. "Apple은 언어의 장벽을 없애려고 노력한다."  

이 말에 맞게 Translation API를 통해 개인 앱에 적용함으로써 언어의 장벽없이 앱을 사용할 수 있는 시도를 할 수 있을 거 같은 발판이 되는 API라 생각합니다.

 

본론으로 들어가기전 총 3편(소개 -> 심화 -> 팁 순서)에 나누어서 글이 작성됩니다.

 

※ 공식 레퍼런스를 보면 Xcode 16.0, iOS18.0 버전을 타깃으로 베타 버전이 나와 있습니다.

https://developer.apple.com/documentation/Translation/translating-text-within-your-app

Translating text within your app | Apple Developer Documentation

 

 

.translationPresentation() 

1. 심플예제 

translation API가 적용된 popOver형식 뷰를 제공하는 Modifer입니다. (SwiftUI기반입니다.)

 

Apple Document 참조

메서드 시그니처를 보면 필수 타입은 isPresented, text parameter가 있습니다. isPresneted는 @State, @Binding

사용 예시를 보면 다음과 같이 간편합니다.

 

struct ViewTranslationView: View {
    // Define the condition to display the translation UI.
    @State private var showTranslation = false

    // Define the text you want to translate.
    var originalText = "Hallo, WWDC!"

    var body: some View {
        VStack {
            Text(verbatim: originalText)
            Button("Translate") {
                showTranslation.toggle()
            }
        }
        // Offer a system UI translation.
        .translationPresentation(isPresented: $showTranslation,
                                 text: originalText)
        .navigationTitle("Translate")
    }
}

(공식문서 예제 소스입니다.)

 

2. 번역 대체

import SwiftUI
import Translation

struct ReplaceTranslationView: View {
    @State private var showTranslation = false
    
    // Define the text you want to translate.
    @State private var originalText = "Me gustaría pedir la ensalada pequeña."

    var body: some View {
        VStack(spacing: 20) {
            TextField("Text to translate", text: $originalText, axis: .vertical)
                .textFieldStyle(.roundedBorder)
            Button("Translate") {
                showTranslation.toggle()
            }
        }
        // Setting the `replacementAction` closure returns the translated text.
        .translationPresentation(isPresented: $showTranslation, text: originalText) { translatedText in
            originalText = translatedText
        }
        .padding()
        .navigationTitle("Replace")
    }
}

. translationPresentation 메서드의 completion handler로 번역 대치 액션시 실행할 코드 블록을 설정할 수 있습니다.

 

간단하게만 알아 봤습니다. 다음 글에선 이 API를 활용한 커스텀 번역 및 앱에서 어떻게 활용할 수 있는지 WWDC에 소개된 영상 기반으로 분석하고 공유하겠습니다.