Button 컴포넌트 사용에 대한 실수(완성도 높이기)

SwiftUI를 사용하면서 기능 구현, 보여지는 시각적 디자인에만 신경쓰다보면

놓치는 부분이 한두가지 있기 마련이다.

 

하지만 많은 예제를 만들면서 나는 그동안 무심코 지나쳤던 내용이 있었고 그에 관한 글을 작성해보려고 한다.

내가 무심코 지나쳤던 부분은,,

바로 Button 컴포넌트이다.

 

 

다음 계산기 프로그램을 확인해보면,

계산기 프로그램

 

빨간 테두리가 9번에 대한 버튼이다.

'버튼'은 버튼으로 보이는 것을 눌렀을 때 작동해야하지만,  문제는 텍스트 '9'를 눌렀을 때만 버튼이 동작한다.

즉, 텍스트 '9' 외 다른 버튼 배경을 누르면 버튼의 동작을 수행하지않는다.

이에 대한 코드는 다음과 같다.

 

Button{
            if(flag == true){
                
                totalNumber = "0"
                flag = false
            }
            
            if totalNumber == "0"{
                totalNumber = numberString
            } else{
                totalNumber += numberString
            }
        } label: {
            Text(numberString)
        }
        .modifier(ButtonModifierView(color: "NumberButtonColor"))

action 부분 클로저는 중요하지 않고 내가 집고 싶은 부분은, label에 대한 클로저 부분이다.

'Text(numberString)'

참고로 numberString은 버튼에 해당하는 문자열이 담긴 변수이다.

그래서 9번 버튼에 '9' 텍스트가 출력되고 버튼의 기능을 하게 된다.

엄청 평범해보이는 코드이지만 문제는

이 코드만으로는 내가 원하는 완벽한 버튼으로서의 기능을 못한다는 것이다.

 

전체적인 로직이나 계산기의 임무를 수행하는데 지장은 없다.

하지만, 앱을 개발하는 개발자로서 이런 하나하나의 세심한 부분을 신경쓰지않으면 안된다.

 

내가 실수했던 것은 단지 이를 보완하지 않아서가 아니라,

사실 프리뷰를 통해서 클릭이 잘 안된다는 것을 인지했으면서도, 그 원인을 찾으려고 하지 않고

단순히 Xcode의 입력이 지연되었을 거라고 지례짐작하고 넘어갔던 것이다.

 

이 부분이 단순 Xcode의 오류나 SwiftUI의 완성도가 미흡해서 나타난 현상이 아니란 것을 알게 된 것은

앱 스쿨의 코드리뷰를 통해서 인지했으며 이를 수정 보완하기 위해서 다음과 같은 코드를 작성했다.

 

Button{
            if(flag == true){
                
                totalNumber = "0"
                flag = false
            }
            
            if totalNumber == "0"{
                totalNumber = numberString
            } else{
                totalNumber += numberString
            }
        } label: {
            ZStack{
                Rectangle()
                    .frame(width:80, height:80)
                    .foregroundColor(.clear)
                Text(numberString)

            }
        }
        .modifier(ButtonModifierView(color: "NumberButtonColor"))
    }

 

 

label 클로저 내에 ZStack으로 버튼의 선택영역을 텍스트로만 한정짓지 않고

버튼의 전체 사이즈와 같은 Rectangle을 삽입해서 버튼 UI 전체가 선택영역이 되도록 설정해줬다.

 

사용자가 봤을 때 버튼으로 보이는 UI 모두가 선택될 수 있도록 완성도를 높였다.

 

별것 아니지만, 작은 미흡한 점을 '작은'부분이라고,

쓰는데 문제없다고 생각하고 넘겼던 나의 실수를 코드리뷰를 통해 알게되었고

이를 수정보완했다.

 

나는 별 것 아니라고 생각하는 문제를 다른 사람들이 봤을 때는 '별 것' 그 이상으로 바라볼 수 있다는 것을 깨달았고

개발 단계에서 처음부터 모든 세세한 것을 염두해두고 설계할 수는 없을지라도

문제를 인지한 이상, 뒤로 미룰지라도 기록하고 꼭 해결해야한다는 교훈을 얻었다.