버튼을 만들기 위한 고민 – padding, height, width
8:47 pm
버튼을 만드는 가장 단순한 방법은 개발환경에서 제공하는 버튼을 그대로 사용하는 겁니다.
<Button
onPress={onPressButton}
title="버튼"
color="#841584"
accessibilityLabel="Press button"
/>이렇게 작성하는 코드의 단점은 이 버튼이 어떤 색상을 가지고 있을지, 어떤 간격을 가지고 있을지, 어떤 이벤트를 가지고 있을지 알 수 없습니다. 문서를 보고 학습을 해야 합니다.
그렇다면 눌렀을 때, 투명해지는 기능만 있는 조금 더 원시작인 요소를 사용하면 어떨까요?
<TouchableOpacity
style={{ backgroundColor: '검정색' }}
onPress={onPressButton}
accessibilityLabel="Press button"
>
<Text style={{ color: '흰색' }}>버튼</Text>
</TouchableOpacity>버튼 배경색을 검정색으로, 버튼 글자 색상을 흰색으로 직접 입력할 수 있습니다.
뿐만아니라, 크기도 자유롭게 조절이 가능합니다.
이처럼 버튼을 만드는 방법은 매우 다양합니다. 조금 더 나아가서는 react-native-gesture-handler를 사용하여 가장 기본이되는 요소인 View를 사용해서도 버튼을 만들 수 있습니다.
이렇게 버튼을 만들면 거의 모든 요소들을 다 제어할 수 있습니다. 드래그해서 당기는 버튼이라던지, 누르면 날라가는 버튼이라던지, 정말 다양한 버튼을 그려볼 수 있습니다.
어떤 방법으로 버튼을 그리느냐에 따라서 코드가 짧아지기도 하고, 길어지기도 합니다.
그런데 이번 포스팅에서는 이 코드의 길이보다는 버튼의 용도에 따라 디자인을 다르게 만들어야 한다는 이야기를 하려고 합니다.
우선 애니메이션 요소를 넣지 않는 평범한 버튼인 경우에는 간격을 padding, margin을 사용해서 주는 것이 보편적입니다.
<TouchableOpacity style={{ padding: 10 }}>
<Text>버튼</Text>
</TouchableOpacity>하지만 이렇게 하면, 이 버튼의 사이즈를 알 수 없습니다.
뭐 몰라도 예쁘게 나오면 되는거 아닌가요? -> 맞습니다!
하지만, 이 버튼의 주변에 밝게 빛나는 별을 넣고싶다면 어떻게 해야할까요?
버튼의 위치와 그 너비 및 높이를 다 알고있어야만 할 겁니다. 아니면 버튼 한가운데에 별이 와서 글자를 가려버릴 수도 있습니다.
이처럼 아무 생각 없이 padding을 쓰고 있다면 다시한번 생각해 볼 필요가 있습니다. 내가 진행하는 프로젝트가 스크롤 이동에 대한 이벤트가 많다면, height를 고정으로 사용하면서 가로만 padding을 주는 것이 좋고, 드래그나 전반적으로 화려한 애니메이션이 많다면, 고정 너비와 높이를 사용하는 것이 좋습니다.
당연하게 padding으로 버튼을 디자인 하지 말고, 내가 왜 padding으로 버튼을 디자인 하는지, 왜 height, width로 버튼을 디자인 하는지 이유를 명확히 하고나서 UI 코드를 작성하면, 단순한 간격마저도 이유가 있는 코드로 만들 수 있습니다.