- 개발을 할 때, 무언가를 만들고, 여러 번 클릭하며, 수정하고, 다시 클릭하는 과정을 반복함
- 페이지 전환의 경우, 뒤로 가기 버튼을 여러 번 사용함
- 이는 일종의 QA 전술로, 클릭하며 문제를 찾고 수정하는 과정임
- 목공 작업과 비슷하게, 큰 문제를 먼저 해결한 후, 세부적인 부분을 다듬는 과정임
UI 테스트
- 소프트웨어에는 너무 많은 변수가 있어 모든 것을 테스트하고 다듬기 어려움
- UI를 여러 번 사용하며 문제를 찾고 수정하는 과정을 반복함
라디오 옵션 리스트 작업
-
과 를 같은 행에 배치하고, 중앙 정렬하며, 간격을 둠
- 예전에는 CSS의 float을 사용했지만, 이제는 flexbox를 사용해 쉽게 작업함
Foo
.container {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
문제 발견 및 해결
- UI에서 라디오와 라벨 사이에 클릭이 되지 않는 죽은 영역을 발견함
- flexbox의
gap 속성이 문제의 원인임을 확인함
-
gap을 제거하고 라벨에 패딩을 추가하여 문제를 해결함
- 패딩을 라벨에 추가함으로써 죽은 영역 없이 클릭 가능하게 만듦
결론
- 작은 문제들이 모여 큰 불편함을 초래할 수 있음
- 문제를 발견하고 수정하는 과정을 반복하여 최종적으로 매끄러운 결과를 얻음
GN⁺의 정리
- 이 글은 UI 개발 과정에서 발생할 수 있는 작은 문제들을 발견하고 해결하는 과정을 설명함
- flexbox를 사용하여 레이아웃을 쉽게 구성할 수 있지만, 예상치 못한 문제가 발생할 수 있음
- 문제를 해결하기 위해 다양한 방법을 시도하고, 최종적으로 패딩을 사용하여 문제를 해결함
- UI 개발자들에게 유용한 팁을 제공하며, 작은 문제들을 해결하는 과정의 중요성을 강조함