# Sanding UI

> Clean Markdown view of GeekNews topic #16879. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16879](https://news.hada.io/topic?id=16879)
- GeekNews Markdown: [https://news.hada.io/topic/16879.md](https://news.hada.io/topic/16879.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-09-22T10:33:01+09:00
- Updated: 2024-09-22T10:33:01+09:00
- Original source: [blog.jim-nielsen.com](https://blog.jim-nielsen.com/2024/sanding-ui/)
- Points: 2
- Comments: 0

## Topic Body

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

## Comments



_No public comments on this page._