# 컴퓨터 과학 최대의 난제: 요소 중앙 정렬(centering things)

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=14386](https://news.hada.io/topic?id=14386)
- GeekNews Markdown: [https://news.hada.io/topic/14386.md](https://news.hada.io/topic/14386.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-04-18T15:34:30+09:00
- Updated: 2024-04-18T15:34:30+09:00
- Original source: [tonsky.me](https://tonsky.me/blog/centering/)
- Points: 17
- Comments: 3

## Topic Body

- 많은 회사들의 애플리케이션에서 텍스트, 아이콘 등 UI 요소들이 제대로 가운데 정렬되어 있지 않음  
- CSS의 의 flex 와 grid 를 사용하면 쉽게 가운데 정렬을 할 수 있음에도 불구하고   
```css  
display: flex  
justify-content: center /* 수평 센터링 */  
align-items: center /* 수직 센터링 */  
```  
또는   
```css  
display: grid  
justify-items: center /* 수평 센터링 */  
align-items: center /* 수직 센터링 */  
```  
  
### 가운데 정렬을 어렵게 만드는 요인들  
- 폰트의 메트릭스가 중요한 역할을 함. 인기있는 폰트들 대부분이 바운딩 박스가 딱 맞지 않고 여백이 있어서 가운데 정렬이 어려움  
- 줄 높이(line-height) 설정의 영향으로 서로 다른 컨테이너에 있는 두 개의 요소를 정렬하는 것이 거의 불가능함   
- 아이콘을 텍스트 옆에 정렬하는 것도 매우 어려운 작업임. CSS의 `vertical-align` 속성으로는 아이콘을 의미있게 정렬할 수 없음  
- 아이콘을 폰트 파일에 넣어 사용하는 아이콘 폰트는 크기와 패딩 조절이 안되어 정렬이 더 힘들어짐  
- 디자이너들도 아이콘의 모양을 고려하지 않고 기계적으로 가운데 정렬하는 실수를 범함  
- 수평 정렬도 세심한 주의를 기울이지 않으면 잘못될 수 있음  
  
### 해결 방안   
#### 디자이너  
- 폰트의 바운딩 박스를 텍스트에 딱 맞게 조정하면 가운데 정렬이 훨씬 쉬워짐  
- Figma에서는 이 기능을 지원함 (기본값은 아님)   
  - Vertical Trim : Cap Height to baseline   
  
#### 폰트 디자이너  
- ascender와 descender 사이의 공간이 cap-height의 2배가 되도록 폰트 메트릭을 설정하면 개발자들이 쉽게 가운데 정렬을 할 수 있음  
- 실제 ascender/descender를 경계까지 연장할 필요는 없고, 숫자만 맞추면 됨  
  
#### 웹 개발자  
- 사용할 폰트를 미리 알고 있어야 함 (폰트 대체 시에는 작동하지 않음)  
- 폰트 메트릭을 이용해 계산한 `padding-bottom` 값을 추가하여 수직 가운데 정렬을 맞출 수 있음  
- 아이콘 역시 `vertical-align: baseline`을 설정하고 폰트 메트릭과 아이콘 크기를 이용해 계산한 값만큼 아래로 이동시키면 정렬할 수 있음  
  
#### 아이콘 폰트  
- 아이콘 폰트 사용을 **제발** 그만두고 일반 이미지 포맷을 사용할 것   
- 너비와 높이가 있는 사각형 두 개를 정렬하는 것보다 쉬운 것은 없음  
  
#### 시각적 보정  
- 개발자는 수학적으로 완벽한 사각형만 정렬할 수 있음. 수동 보정이 필요한 것은 아이콘을 시각적으로 균형 잡히게 사각형 안에 배치할 것  
  
### GN⁺의 의견  
- 작은 디테일에 대한 관심으로 UI 품질을 크게 향상시킬 수 있음을 보여줌. 아주 사소한 것으로 여겨질 수 있는 가운데 정렬 하나만으로도 전반적인 느낌이 달라짐  
- 단순히 "디자이너는 디자인만, 개발자는 구현만 신경쓰면 된다" 라는 사고가 아니라, 서로의 영역에 대해 이해하고 협력해야 좋은 결과가 나옴을 시사함  
- 애초에 브라우저별 랜더링 차이가 나지 않고, 디자이너의 의도대로 구현하기 쉽도록 디자이너 단계에서부터 폰트 메트릭을 맞추고 시안을 작업하는 것이 좋을 듯 함  
- 애플, MS, 구글 등 쟁쟁한 회사들의 제품에서도 이런 문제가 발견되는데, 대부분의 사람들은 무심코 지나칠 정도로 관심이 없는 듯 함. 그만큼 꼼꼼한 디테일에 집착하며 만드는 것이 중요함  
- 특히 최근 UI 테스트 자동화 도구 등을 사용하면서 사람의 눈으로 일일이 확인해보는 과정이 생략되면서 이런 문제는 더 빈번해질 수 있으므로 주의가 필요해 보임

## Comments



### Comment 24537

- Author: dormis
- Created: 2024-04-19T15:10:43+09:00
- Points: 1

기계적인 중앙정렬이 정말 좋은건가도 생각해볼 일이네요. 마우스가 좌우대칭보다 약간 좌우가 다르게 어고노믹하게 생긴게 편한것처럼, 전체적인 사용성을 보고 결정할 요소인거 같기도 합니다.

### Comment 24619

- Author: jokuhus
- Created: 2024-04-23T11:40:54+09:00
- Points: 1
- Parent comment: 24537
- Depth: 1

의도와 다른 결과가 나올 수 있다는게 핵심같아요. 예를 들어 마우스 클릭이 화면상에 화살촉 부분이 아닌 꼬리 부분에서 된다거나 하는 상황같은 거요.

### Comment 24520

- Author: neo
- Created: 2024-04-18T15:34:30+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=40069599) 
요약 내용:

- CSS 레이아웃은 문제가 많으며, CAD 프로그램, 게임 엔진, 애니메이션 프로그램 등의 2D/3D 도구들이 더 나은 레이아웃 엔진과 제약 조건 시스템을 가지고 있음
- 정렬에 대한 단일한 정답은 없으며, 디자이너들은 항상 불평할 거리를 찾을 수 있음
  - 정밀한 마진 측정값을 사용해도 시각적으로 비대칭으로 보일 수 있음
  - 글자 모양에 맞춰 조정해도 베이스라인이나 x-높이 등에 맞지 않는다고 불평할 수 있음
- 글꼴 렌더링은 운영체제와 브라우저에 따라 다르기 때문에 한 환경에서 완벽하게 정렬된 것이 다른 환경에서는 어긋날 수 있음
- 비 서구권 글꼴의 경우 더욱 까다로움
- 현실 세계에서도 정렬은 어려운 문제임 (NCAA 농구 코트 그림 예시)
- 정렬의 기준은 보는 사람에 따라 다름
- CSS의 `justify`와 `align`을 대화형으로 시연해 볼 수 있는 데모 사이트 소개
- 텍스트 옆 아이콘 배치 시, 글꼴뿐 아니라 텍스트 자체의 "활자 중심"에 맞추라는 디자이너의 조언이 있었으나 실제로는 타협이 필요했음
- CSS가 테이블의 기능을 따라잡았다는 주장이 10년 넘게 있었지만 여전히 완전하지 않음