- 많은 회사들의 애플리케이션에서 텍스트, 아이콘 등 UI 요소들이 제대로 가운데 정렬되어 있지 않음
- CSS의 의 flex 와 grid 를 사용하면 쉽게 가운데 정렬을 할 수 있음에도 불구하고
display: flex
justify-content: center /* 수평 센터링 */
align-items: center /* 수직 센터링 */
또는
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 테스트 자동화 도구 등을 사용하면서 사람의 눈으로 일일이 확인해보는 과정이 생략되면서 이런 문제는 더 빈번해질 수 있으므로 주의가 필요해 보임