빠른 시작 (Quick Start)

Test Solution SDK 연동의 첫 단계를 시작해 보세요. 이 가이드를 따라 하면 5분 안에 여러분의 앱에서 성격 유형 검사를 실행할 수 있습니다.

여기서는 필수 파라미터만을 사용하여 가장 기본적인 연동을 진행합니다. 테마 변경, 콜백 처리 등 더 많은 기능은 핵심 가이드에서 확인할 수 있습니다.

---

사전 준비

이 가이드를 시작하기 전, 아래 준비가 완료되었는지 확인해 주세요.

1. SDK 설치 완료: 설치 가이드에 따라 Host 앱에 Test Solution SDK 모듈 연동을 완료해야 합니다.
2. 필수 값 확인: SDK 연동에 필요한 아래의 필수 값들을 미리 준비해 주세요.
   • goodsId (String): 각 테스트 상품에 부여된 고유 ID
   • suid (String): 검사를 진행하는 사용자를 식별하기 위한 고유 ID
   • language (String): 테스트를 진행할 언어 (kr)

---

Android 연동 (Kotlin)

버튼 클릭과 같은 특정 이벤트가 발생했을 때 channel.invokeMethod("startTest", arguments)를 호출하여 검사를 시작할 수 있습니다.

1. AndroidManifest.xml에 권한 및 FlutterActivity추가

• SDK는 API 서버와 통신하기 위해 인터넷 권한이 필요합니다.
• Flutter 는 안드로이드 앱 내에서 플러터 화면을 표시하기 위해 FlutterActivity 를 제공합니다. 다른 모든 Activity와 마찬가지로 FlutterActivity 도 AndroidManifest.xml 에 반드시 등록해야 합니다.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    // ...

    <activity
        android:name="io.flutter.embedding.android.FlutterActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize" />

    <activity
        android:name=".TestActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|uiMode"
        android:hardwareAccelerated="true"
        android:launchMode="singleTop"
        android:windowSoftInputMode="adjustResize" />

    // ...

2. 실행 코드 작성

TestActivity.kt 파일에 테스트를 시작하는 코드를 추가합니다.

TestActivity.kt

package com.example.myhostapp

import android.util.Log
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class TestActivity : FlutterActivity() {
    private val CHANNEL = "com.mscbrain.sdk.test_solution_sdk/channel"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        val channel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)

        val goodsId = intent.getStringExtra("goodsId")
        val suid = intent.getStringExtra("suid")
        val language = intent.getStringExtra("language")

        val startData = mapOf(
            "suid" to suid,
            "goodsId" to goodsId,
            "language" to language,
        )
        channel.invokeMethod("startTest", startData)

    }
}

MainActivity.kt 파일에 TestActivity.kt 를 호출하는 로직을 추가합니다.

MainActivity.kt

// ...

fun onStartTestClick() {
    val intent = Intent(this, TestActivity::class.java)

    intent.putExtra("goodsId", [GOODS_ID])    // 발급받은 상품 ID를 입력하세요.
    intent.putExtra("suid", [SUID])           // 발급받은 사용자 식별 고유 ID를 입력하세요.
    intent.putExtra("language", [LANGUAGE])   // 지원 언어 코드를 입력하세요.

    startActivity(intent)
}

---

iOS 연동 (Swift)

Android와 마찬가지로, channel.invokeMethod("startTest", arguments:)를 호출하여 검사를 시작합니다.

1. 실행 코드 작성

UIKit (Storyboard)

ViewController.swift 파일에 테스트를 시작하는 버튼과 관련 코드를 추가합니다.

ViewController.swift

import UIKit
import Flutter

class ViewController: UIViewController {
    
    private let CHANNEL: String = "com.mscbrain.sdk.test_solution_sdk/channel"

    @IBAction func showFlutterButtonTapped(_ sender: UIButton) {
        let flutterEngine = FlutterEngine(name: "MSCFlutterEngine")
        
        flutterEngine.run()
        
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
        flutterViewController.modalPresentationStyle = .fullScreen
        
        let channel = FlutterMethodChannel(name: CHANNEL, binaryMessenger: flutterViewController.binaryMessenger)
        
        let startData: [String: Any] = [
            "goodsId": "[GOODS_ID]",       // 발급받은 상품 ID를 입력하세요.
            "suid": "[SUID]",              // 발급받은 사용자 식별 고유 ID를 입력하세요.
            "language": "[LANGUAGE]"       // 지원 언어 코드를 입력하세요.
        ]
        
        channel.invokeMethod("startTest", arguments: startData)
        
        present(flutterViewController, animated: true, completion: nil)
    }
}

SwiftUI

먼저 UIViewControllerRepresentable 프로토콜을 사용하여 FlutterViewController를 SwiftUI에서 사용할 수 있도록 만들어줍니다.

FlutterView.swift

import SwiftUI
import Flutter

struct FlutterView: UIViewControllerRepresentable {

    private let CHANNEL: String = "com.mscbrain.sdk.test_solution_sdk/channel"
    
    func makeUIViewController(context: Context) -> some UIViewController {
        let flutterEngine = FlutterEngine(name: "MSCFlutterEngine")
        
        flutterEngine.run()
        
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)

        let channel = FlutterMethodChannel(name: CHANNEL, binaryMessenger: flutterViewController.binaryMessenger)
        
        let startData: [String: Any] = [
            "goodsId": "[GOODS_ID]",       // 발급받은 상품 ID를 입력하세요.
            "suid": "[SUID]",              // 발급받은 사용자 식별 고유 ID를 입력하세요.
            "language": "[LANGUAGE]"       // 지원 언어 코드를 입력하세요.
        ]
        
        channel.invokeMethod("startTest", arguments: startData)
        
        return flutterViewController
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
    }
}

이제 위에서 만든 FlutterView를 실제 화면의 버튼과 연결하여 띄워봅니다.

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var isShowingFlutter = false

    var body: some View {
        VStack {
            Button("테스트 시작") {
                self.isShowingFlutter = true
            }
            .padding()
            .background(Color.orange)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .fullScreenCover(isPresented: $isShowingFlutter) {
            FlutterView()
                .ignoresSafeArea()
        }
    }
}

---

실행 및 확인

1. 위 코드의 Placeholder(GOODS_ID, SUID, LANGUAGE)를 실제 값으로 교체합니다.
2. 앱을 빌드하고 실행합니다.
3. 테스트 시작 버튼을 탭합니다.
4. 성공! 아래와 같이 Test Solution의 채팅형 검사 화면이 나타나면 정상적으로 연동된 것입니다.

노트

개발 모드가 활성화 된 상태의 화면입니다. 개발 모드 활성화는 isDevelopment 파라미터를 true로 설정하여 가능하며, 활성화시 좌측 상단에 'DEVELOPMENT' 배너가 표시됩니다.

---

다음 단계

축하합니다! 성공적으로 Test Solution SDK를 앱에 연동했습니다.

이제 SDK가 제공하는 다양한 기능들을 확인해볼 차례입니다.

• 테마, 타이틀 등 커스터마이징 하기
• 검사 완료 후 결과 값 수신하기
• 모든 파라미터 상세 정보 보기