SwiftUI - 유저 친화적인 TextField 구현하기(feat. @FocuseState)

안녕하세요. Diana 입니다.

회사에서 SwiftUI를 사용하게 되었는데 익숙하지 않은 기술이고 하니 생각보다 어렵더라구요.

그래서 한동안은 부지런히 SwiftUI 공부를 하지 않을까 싶네요.

 

아무튼 오늘은 SwiftUI에서 TextField 구현에 대해 이야기해보려고 합니다.

바로 시작할게요~

 

---

 

✅ TextField 란?

공식문서에 따르면 TextField는 수정 가능한 텍스트 인터페이스를 디스플레이 하는 방법입니다.

내부를 살펴보면 TextField는 아래와 같이 초기화 할 수 있네요.

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
public init<F>(_ titleKey: LocalizedStringKey,
		value: Binding<F.FormatInput?>,
                 format: F, prompt: Text? = nil) where F : ParseableFormatStyle, F.FormatOutput == String

 

여기서 각각의 파라미터 들을 알아보면 TitleKey는 TextField의 Title을 나타내며 해당 TextField가 어떤 목적으로 사용되는지를 알려줍니다. 

Value는 TextField에 들어가는 값을 의미합니다. 주로 변경되는 값이기 때문에 옵저버를 설정하여 변경사항을 Tracking 해주죠.

Format은 입력된 값을 Format에 지정된 값으로 변경해주는 역할을 합니다.

마지막으로 Prompt는 유저에게 해당 TextField에 어떤 값을 입력해야하는지 가이드라인을 제공해주는 역할을 합니다.

 

솔직히 Prompt가 뭔지는 잘 모르겠습니다.

Prompt는 Optional이기 때문에 생략이 가능하고 생략했을 때는 TitleKey가 PlaceHolder로, Prompt를 사용하는 경우는 Prompt 값이 PlaceHolder로 들어가더라구요.

이 부분은 혹시 알고계신분이 있다면 알려주시면 감사하겠습니다.

 

이제 이 TextField를 사용해보도록 하겠습니다.

 

    @State var input: String = ""
    @State private var myMoney: Double? = 300.0
    
    var body: some View {
        VStack {
            TextField(
                "Currency (USD)",
                value: $myMoney,
                format: .currency(code: "USD")
            )
            .onChange(of: myMoney) { newValue in
                print ("myMoney: \(type(of: newValue))")
            }
            .background(.orange)
        }
        .padding()
	}

 

시각적으로 쉽게 확인하기 위해 배경색으로 오렌지를 설정하였는데 그러면 아래와 같이 나타나게 됩니다.

여기서 onChange는 프로퍼티 값의 변경을 계속 감지하고 있다가 변경될 때마다 호출되는 메서드 입니다.

저희는 Format으로 .currency(통화) 속성을 넣어주었기 때문에 myMoney의 데이터 포멧은 Double이 되죠.

뭐 이렇게 TextField의 이론적인 부분을 살펴보았습니다.

하지만 이번 글의 제목이 뭐죠?

바로 유저 친화적인 TextField 구현하기죠!

 

유저 친화적인?

TextField가 유저 친화적이 되기 위해서는 어떤 부분을 고려해야할까요?

 

✅ 유저 친화적인 TextField 구현하기

UIKit에서 TextField의 구현은 굉장히 쉽습니다.

Height와 Width를 적용해주면 순순히 적용이 되거든요.

 

하지만 안타깝게도 SwiftUI에서의 TextField는 그렇지 않습니다.

 

우선 이론적인 방법이 아닌 자주 사용되는 방법으로 TextField를 구현해보겠습니다.

 

TextField("PlaceHolder", text: $input) {
     ...  
}
.padding()
.overlay {
    RoundedRectangle(cornerRadius: 10)
        .stroke(.gray, lineWidth: 2)
}

굉장히 흔히 보는 형식의 TextField 죠?

이런 형식의 TextField는 검색창, 로그인, 회원가입 등등 의 다양한 화면에서 확인할 수 있습니다.

 

하지만 위와 같이 구현하는 경우 문제가 있습니다.

바로 유저의 터치 가능 Space가 굉장히 좁다는 겁니다.

흔히 유저는 TextField를 눌렀을 때 키보드가 나오기를 기대합니다.

하지만 위와 같이 구현하게 되면 주황부분을 제외한 다른 부분은 터치를 해도 키보드가 나오지 않습니다.

아주 심혈을 기울여서 눌러야하는 것이죠.

 

Apple의 Human Interface Guide에 따르면 개발자는 유저가 사용하는데 편리하도록 터치 필드를 적어도 44x44pt 이상을 확보할 것을 요구하기 때문에 이 부분은 명확히 수정이 필요합니다.

 

하지만 안타깝게도 .frame()을 통한 TextField의 사이즈 조정은 SwiftUI에서 작동하지 않습니다.(ㅋㅋㅋ 어쩌란거..)

여기서 우리는 @FocuseState 를 사용해줄 수 있습니다.

 

@FocuseState는 Scene 내부에서 포커스 이동을 변경할 수 있도록 값을 읽고 쓸 수 있도록 해주는 프로퍼티 래퍼입니다.

우리는 @FocuseState로 설정된 값을 변경함으로써 TextField의 포커스 상태를 커스텀할 수 있죠.

 

이제 FocuseState를 활용하여 TextField를 수정해보겠습니다.

 

@State var input: String = ""
@FocusState private var isFocused: Bool
    
var body: some View {
    TextField("PlaceHolder", text: $input) {
            
    }
    .focused($isFocused)
    .padding()
    .overlay {
        RoundedRectangle(cornerRadius: 10)
            .stroke(.gray, lineWidth: 2)
    }
    .onTapGesture {
        isFocused = true
    }
}

 

위와 같이 구현하게 되면 이제 주황 부분이 아닌 바깥의 TextField의 Padding 부분을 터치하더라도 자연스럽게 키보드가 올라오게 됩니다.

이전보다 좀더 유저 친화적인 TextField가 되었네요!

 

이렇게 유저 친화적인 TextField 구현을 마치겠습니다.