텍스트 필드 디자인 시스템 구현하기

A/B 프로젝트에서 사용되는 공통 텍스트 필드 아래와 같이 3가지 상태를 가진다. 

 

아래 목표들을 최대한으로 충족시킬 수 있는 디자인 시스템을 구현하고자 했다. 

1. 상태에 따라 변화하는 UI를 실수 발생이 최소화될 수 있으며, 유지 보수성이 높은 코드 설계
2. 다른 디자인의 텍스트 필드가 등장하더라도, UI 속성 값 전달만으로 UI를 완성

평소 프로젝트에서 UIButton.Configuration와 UITableViewDelegate를 사용하면서 얻게 된 아이디어를 바탕으로 구현해 보았다. 

 

1. 상태에 따라 변화하는/변화할 수 있는 속성 추출하기

---

 

상태 정의는 아래와 같이 3 가지로 구분하였다. 

editing 상태의 경우, 굳이 나눌 필요가 없을 수도 있지만, 혹시 모를 경우에 대비해서 분리하였다.

 

 

2. 상태 변화에 상관없는 공통 속성 추출하기

---

상태가 변화하더라도 변하지 않는 속성들을 정의했다.

 

상태에 따라 변화하는 속성과 변화하지 않는 속성을 구분한 이유는, 속성 프로퍼티가 굉장히 많은데 변화하지 않는 속성도 함께 정의하게 될 경우, 같은 데이터를 상태 개수만큼 반복 선언해야 하기 때문이다. 실수가 발생할 위험이 있고 번거로운 작업이라고 생각해 구분하게 되었다. 

 

3. Delegate 생성하기

---

A. configuration(_:)

공통 속성값을 정의한 구조체를 넘겨주는 메서드

 

B. configuration(_: of:)

상태에 따라 변화하는 속성들을 정의한 구조체를 넘겨주는 메서드

 

extension을 통해 초기 구현하여 앞서 정의한 기본 텍스트 필드의 configuration 구조체를 넘겨주도록 하였다. 

 

 

4. Delegate 적용하기

---

delegate를 ABTextFieldView 본인으로 설정하여, 초기 구현된 configuration 메서드를 통해 기본 텍스트 필드가 사용되는 것을 우선으로 하였다. 

 

만약 새로운 delegate가 할당된다면, 상태별 UI가 업데이트 될 때, 위임자가 전달하는 configuration으로 UI가 설정될 것이다. 

 

5. 상태 변화가 발생할 경우, UI 업데이트

---

상태 변화가 발생할 경우, UI 업데이트는 비동기로 수행되도록 구현하였다. 

 

 

 

6. 글자 수 카운팅 기능

---

텍스트 필드에서 글자 수 카운팅을 요구하는 케이스가 있고, 아닌 케이스가 있다.

필요한 경우에만 옵저버를 통해 기능을 제공하기 위해 옵셔널 타입으로 선언하고, didSet을 활용하였다. 

 

 

7. 기타 기능

---

A. error(message:)

입력값이 유효성을 충족하지 않은 경우, 메시지를 전달해 주는 메서드이다. 

 

B. update(text: )

사용자가 입력값을 키보드를 통해 직접 입력하는 것이 아니라, 수동으로 텍스트 필드에 입력값을 넣어주어야 하는 경우가 발생할 수 있다. 

이 경우에 입력값을 전달받으면 text도 업데이트하고, 상태에 맞게 UI도 변경될 수 있도록 해주는 메서드이다. 

 

직접 헬퍼 메서드를 호출에 UI를 업데이트하는 것이 아닌, Observable로 ABTextFieldView에서 사용자의 입력에 맞게 상태가 변화되고 있기 때문에 이벤트가 발생함을 수동으로 전달하는 식으로 구현했다. 

 

 

8. 적용

---

A. View에서 닉네임 텍스트 필드를 선언 및 초기화

 

B. 글자 수 카운팅이 필요한 경우, View Controller에서 limit count를 지정

 

마무리

---

이전에 케이스/상태에 딸 UI를 변경시켜야 하는 경우, selected() deselected()와 같이 상태별 메서드를 선언하고, 분기 처리를 통해 적절한 메서드를 실행시켰었다. 각 상태 메서드마다 변경이 필요한 프로퍼티들을 선언하다 보니 실수가 굉장히 많이 발생했고, 번거로움 그리고 유지보수에서의 어려움 또한 겪었었다. 

 

이번에 처음으로 프로토콜로 변경될 수 있는 부분들을 정의(리스트업)해 상태별로 데이터만 관리할 수 있게 하고, 상태 또한 enum으로 관리해보았는데 이전보다 실수할 확률도 훨씬 줄어들고, 유지 보수성도 이전보다 좋아졌다는 것을 느낄 수 있었다.