[Unity] Advanced Inputfield 사용기

예전에 텍스트 채팅 서비스를 만들면서 생긴 일을 글로 쓴 적이 있는데(텍스트 채팅을 구현하며 생긴 일), 그 당시에는 TMPro에 내장된 Inputfield를 사용했었다. 그 이후 얼마 안돼서 기능이 추가되면서, 더 이상 기존 Inputfield를 사용할 수 없다는 판단을 했다.

 

일단 사용은 해야되니 방법은 세 가지가 있다:

1. 그냥 TMPro Inputfield를 쓴다.
   • 유니티로 앱을 만드는게 흔한 일은 아니지만, 소셜 서비스를 만들면 Inputfield의 중요성이 높다. 그런 의미에서 깔끔하면서 좋은 UX를 만들기 위해선 TMPro는 논외이다.
2. 안드로이드 / iOS 각각 네이티브 개발부터 하나하나 만든다.
   • 내가 원하는대로 네이티브 개발을 하면 가장 베스트이지만, 시간도 오래걸리고, 각 플랫폼 별 언어 / 플러그인 제작에 대한 러닝 커브가 높다.
3. 외부 라이브러리를 쓴다.
   
   • 사실 유니티는 UI 관련 쓸만한 외부 라이브러리가 많지 않다. 그래도 그 중에서 쓸만한 놈을 골라서 사용해야 하기 때문에 Advanced Inputfield를 사용하게 됐다.

---

개발 환경

• Unity
• Advanced Inputfield 2

---

Advanced Inputfield 2를 선택한 이유

오픈 소스

일단 가장 큰 이유는 오픈소스였기 때문이다. 유니티 C# 코드부터 안드로이드/iOS 네이티브 코드까지 모두 공개되어 있어 수정이 가능하다. 다만, 마지막 커밋이 2년 전인걸 보면 이제는 활발하게 업데이트되는 리포지토리는 아니다. 아마 유니티에서 이 정도의 기능을 요구하는 앱을 잘 만들지 않기 때문이 아닐까..?

GitHub - development-fennecx/AdvancedInputField: This plugin provides a more Advanced Input Field that has a lot more features a

 

키보드 같은 것들은 네이티브 처리가 필수적으로 들어가야 하는데, 코드가 비공개 돼있으면 이슈가 생겼을 때 해결할 수가 없다. 내가 직접 다 개발하거나, 그냥 최선이다 생각해야한다. 고맙게도 모든 코드가 오픈되어 있기 때문에 필요한 기능은 추가/수정해서 만들면 된다.

텍스트 커서

기존 유니티 Input field는 텍스트 커서 기능이 없다.

Advanced Inputfield는 네이티브 커서는 아니지만 자체적으로 구현한 커서가 있긴하다. 조금 트윅은 해야하지만, 어느정도 포용할만한 수준이다.

---

간략한 동작 방식

기본적으로 네이티브 플러그인(안드로이드 / iOS)과 유니티에서 각각 polling 방식으로이벤트를 처리한다. 코드를 뜯어보면 ThreadSafeQueue클래스의 lock이 걸린 queue에 아래 정의된 이벤트를 서로 받아서 처리한다.

Advanced Inputfield 2의 키보드 이벤트

 

예를 들어 인풋필드를 선택해서 글자를 입력한다고 하면, 아래 과정을 거친다.

1. Selection_Change 이벤트 전달 (Unity -> Native)
2. 네이티브에서 이벤트 처리 (키보드 생성)
3. 결과 반환 (Native -> Unity)
4. 텍스트 입력. Text_Edit_Update 이벤트 전달 (Unity -> Native)
5. 네이티브 키보드에 텍스트 처리 및 결과값 반환
6. TMPro 인풋필드에 텍스트 렌더링

---

최적화

복사 / 붙여넣기

Advanced Inputfield 컴포넌트를 만들면 항상 TMPro Inputfield가 두 개가 따라온다. 결국 입력을 받아서 렌더링하는 역할은 TMPro Inputfield가 한다.

 

Advanced Inputfield가 만들 당시, 아마 TMPro에서 컬러 이모지를 지원하지 않았을 거다. 그래서 자체적으로 구현해놓은 기능이 있는데, 성능이 매우 매우 안 좋다. 입력한 글자 하나하나 훑으면서 태그(<, >, /, 등)을 파싱한다. 글자를 한자 씩 쓸때는 상관없는데, 붙여넣었을 때 문제가 생긴다.

 

몇 만자를 복사해서 붙여보면 실제로 렌더링 쓰레드가 글자 수에 비례해서 멈췄다 풀린다.

---

후기

실제로 사용해보면, 이것 저것 수정해야할 버그가 있긴하다. 그래도 나름 직접 다 개발할 공수를 생각하면, 나쁘진 않은 것 같다.

 

거의 몇날 며칠을 스크립트(C# + 네이티브)를 들여다 보면서 많이 공부한 것 같다. 네이티브 플러그인에 대한 지식도 어느정도 쌓인 것 같고, 각 안드로이드 / iOS에 대한 공부도 많이 한 것 같다. 이걸 계기로 사실 다른 네이티브 플러그인도 제작했는데, 이번 경험이 정말 소중했던 것 같다.

 

개인적으로 당연히 있어야 하는 기능이라고 생각하는데, 유니티에서 UGUI를 더 이상 개발하지 않는다 (공식). UI Toolkit로 전환하려고 하는 것 같은데, 기능들 보면 도저히 손댈 수 없는 수준이다. 그래도 Advanced Inputfield라도 있어서 너무 너무 다행이다.

 

사용성      ★★★☆☆
성능         ★★★☆☆
유지보수  ★★☆☆☆
기능         ★★★★☆
자기개발  ★★★★★

종합 : 3.4 / 5

 

그래도 이만한 대체재가 없으니 쓸만한 것 같다.

Reference

GitHub - development-fennecx/AdvancedInputField: This plugin provides a more Advanced Input Field that has a lot more features a

 

TextInput · React Native