TextEditor, 이것도 안된다고? (1/3) - 커스텀 View 제작 배경

Taeyoung Won·2023년 3월 30일
0

SwiftUI

목록 보기
3/7
post-thumbnail

진행 중인 프로젝트의 채팅방 View에서 SwiftUI의 TextEditor를 사용하게 되었는데, 생각보다 필요한 기능을 너무 지원해주지 않는 인터페이스였다.

그래서 커스텀을 하게 된 배경, 그리고 커스텀 TextEditor를 제작한 과정을 남겨보려고 한다.



커스텀을 하게 된 배경

입력 인터페이스 스펙

이번에 추가하기로 한 입력 인터페이스는 채팅방에서 전송할 메세지를 입력할 때 사용하는 필드였다.

중요한 점은 입력된 메세지에 따라 높이가 동적으로 변해야한다는 점이었다.

아래는 카카오톡의 예시로, 줄바꿈이 있을 때마다 필드의 높이가 동적으로 변화한다.





SwiftUI의 TextField

SwiftUI에는 TextField라는 입력 인터페이스가 있다.

String 값을 바인딩 받아서 사용자의 입력을 받고 업데이트 해주는 인터페이스로, '입력 인터페이스' 하면 기본적으로 생각나는 기능을 갖추고 있다.




TextField의 사용

우선 TextField의 기본적인 사용법을 코드로 살펴보자.

@State private var text: String = ""
    
var body: some View {

	TextField("메세지를 입력해주세요", text: $text)
		.textFieldStyle(.roundedBorder)
		.border(.black)
		.padding(20)

}

이렇게 메세지를 입력받을 수 있는 인터페이스가 나타나게 되고, 여기에 사용자가 키보드를 통해 내용을 입력할 수 있다.

하지만 위의 이미지와 같이, 이 상태에서는 메세지를 입력하다가 필드의 끝에 도달하면 자동으로 줄바꿈이 되지 않고 기존 내용이 앞으로 밀리면서 뒤에 이어서 입력이 된다.

또, 줄바꿈을 위해 Submit 버튼을 눌러도 예상하는 것처럼 줄바꿈이 되지 않고 필드에서 포커스가 사라지게 된다.

즉, 이 인터페이스는 단일 라인으로만 사용할 수 있는 것이다.





TextField의 줄바꿈 - axis

TextField의 초기화 메서드 리스트를 보면 axis라는 파라미터를 포함한 초기화 메서드가 있다.

axis의 공식문서 설명으로, '사용 가능한 공간이 부족할 때, 어느 방향으로 텍스트를 스크롤할 지에 대한 축을 결정한다' 정도로 이해하면 될 것 같다.

실제로 축을 결정하는 것이기 때문에 전달인자로 수평, 수직을 할당할 수 있다.





TextField에 axis 적용

TextField("메세지를 입력해주세요", text: $text, axis: .vertical)

아까의 TextField에 axis 파라미터의 인자로 vertical을 전달하고 다시 확인해보면

위의 이미지처럼 텍스트가 끝에 도달했을 때, 자연스럽게 줄바꿈이 되고 필드의 높이도 텍스트 표시에 필요한만큼 변화한다.

또, Submit 버튼 입력 시에 필드에서 포커스가 벗어나는 것이 아니라, 개행문자가 추가되는 것을 확인할 수 있다.





프로젝트 적용

프로젝트 기획 단계에서 메세지 입력 필드 스펙을 동적 높이의 입력 인터페이스로 결정했을 때, 크게 고민하지 않았다.

이미 TextField와 axis를 통해서 원하는 스펙의 인터페이스가 구현되어있었기 때문이다.

하지만 실제로 적용하는 과정에서 문제가 발생했다.





최소 지원 버전



axis가 포함된 이니셜라이저는 iOS 16부터 사용이 가능했다.

사실 axis 뿐만 아니라, 이번 프로젝트의 개발 과정에서 iOS 16부터 지원하는 속성이 상당히 많다는 것을 알게되었다.

그래서 이 부분에 대해 팀원들과 논의를 진행하였는데, 결과적으로는 iOS 15를 최소 지원 버전으로 선택했다.




논의 과정에서 결정하는데 주요한 내용은 다음과 같다.

  1. 상용 앱의 지원 버전 기준점이 되는 카카오톡이 iOS 14+
  2. 조사를 통해서 iOS 15 사용 비율이 약 13% 존재하는 점 체크 -> 15+ 사용 유저가 전체의 95%
  3. Apple에서 구형 기기에 대한 OS 업데이트 중단으로 사용자들의 평균 OS 버전이 지속적으로 올라오고 있음 -> 15 미만까지 보수적으로 고려할 필요는 없을 것으로 판단
  4. 실무와 유사한 환경에서의 경험을 목표로 한 프로젝트 -> 실무에서 16+로 개발하는 프로덕트는 많지 않을 것으로 예상




나는 특히 4번의 이유가 크다고 생각했다.

실무에서도 보수적인 지원 버전으로 인해 프레임워크에서 제공하는 기능을 사용하지 못하고, 직접 구현해야하는 일이 자주 발생할 것 같았기 때문이다.

실무와 유사한 환경에서 작업하는 경험을 목표로 하는만큼, 필요한 기능을 커스텀으로 직접 구현해보기로 했다.



TextEditor 컴포넌트에 대한 간단한 설명과 문제점, 커스텀 과정은 다음 글로 이어집니다!

profile
iOS Developer

0개의 댓글