SUIT 리뷰: 좁은 UI에서 정보 밀도를 높일 수 있을까

좁은 칸에 라벨과 숫자를 함께 넣는 UI라면 SUIT를 후보 앞쪽에 둘 만하다. 획획클럽 미리보기 자산의 한글 폭은 본고딕보다 좁고, 고정폭 숫자 기능 태그도 확인된다. 라틴 소문자는 상대적으로 낮고 확장 라틴 지원도 제한적이다. 한영 혼용 화면은 따로 점검해야 한다.

오늘 방문자 1,284명 · 전환율 3.7% · 평균 체류 시간 2분 41초

실제 문장으로 보는 인상

한글 ‘한’의 진행폭은 0.874em이고, 공백 없는 한글 표본 11자의 폭은 9.614em이다. 같은 표본은 본고딕 10.12em, 나눔스퀘어 Neo 10.428em이다. 같은 카드 너비에서 SUIT가 더 많은 한글을 한 줄에 담을 가능성이 있다는 뜻이다. 실제 줄바꿈은 문구와 자간 설정까지 넣어 봐야 한다.

라틴 소문자 x의 높이는 0.461em이고 대문자 높이는 0.722em이다. 이 다섯 글의 고딕 후보 가운데 프리텐다드 0.5303em, 본고딕 0.543em보다 낮다. 이 값은 라틴에만 해당한다. 작은 영문 보조 라벨이 한글보다 약해 보일 수 있으므로 12~14px 구간에서 크기와 굵기를 함께 시험하는 편이 좋다.

기본 줄 높이 지표는 1.248em이다. 브라우저의 normal 값이 언제나 정확히 1.248이 된다는 뜻은 아니다. 표, 버튼, 입력창은 컴포넌트 높이 안에서 잘림을 확인하고, 긴 문단은 제품의 줄 높이 토큰을 명시하자.

주간 리포트 · 활성 사용자 42,910명 · 전주 대비 8.4% 증가

잘 맞는 곳

관리자 대시보드, 설정 화면, 필터, 표, 모바일 카드처럼 짧은 문구와 숫자가 반복되는 곳에서 장점이 잘 드러난다. 자산에는 고정폭 숫자와 비례 숫자 관련 기능 태그가 모두 확인된다. 숫자 열을 맞출 때는 해당 기능을 CSS로 켠 결과를 실제 브라우저에서 확인해야 한다.

피하는 편이 나은 곳

걸리는 대목은 문자 범위다. 미리보기 자산의 라틴 기본은 94자지만 라틴-1 보충은 96자 중 14자다. 유럽어 인명이나 상품명이 들어오는 화면은 폴백 글꼴과 함께 테스트해야 한다. 한글도 상용 2,350자 밖의 희귀 음절이 필요하면 본고딕처럼 전체 현대 한글을 담은 후보와 비교하는 편이 안전하다.

좁은 칸에서는 글자 폭 몇 퍼센트가 버튼의 줄바꿈과 표의 열 너비를 바꿉니다. 실제 데이터로 먼저 확인해 보세요.

실무에서 확인할 것

측정값은 획획클럽이 실제 미리보기에 쓰는 굵기 400 정적 WOFF2 자산 한 개의 값이다. 파일 크기는 134.9KiB이고, 매핑된 코드포인트는 2,540개다. KS X 1001 상용 한글 2,350자를 모두 포함하지만 현대 한글 전체를 담은 파일은 아니다.

카탈로그의 배포 패밀리는 현대 한글 2,668자를 지원하고 100부터 900까지 아홉 굵기와 가변 폰트로 기록돼 있다. 미리보기 자산은 그중 상용 한글 중심의 Regular 파일이다. 회원 이름이나 댓글처럼 입력 범위를 통제할 수 없는 곳에서는 필요한 음절이 실제 배포 패밀리와 미리보기 자산에 모두 있는지 확인해야 한다.

비슷한 폰트와 비교하기

같은 대시보드 문구에 프리텐다드와 본고딕을 번갈아 적용해 보자. 한글 폭과 작은 영문 라벨의 크기, 숫자 열의 정렬, 폴백 발생 여부를 한 화면에서 보면 고를 근거가 생긴다.

마지막 판단은 작업 중인 문구와 배경 위에서 내리는 편이 정확하다. SUIT 상세에서 후보를 추가한 뒤 폰트 시뮬레이터에서 교체해 보자. 작은 영문 라벨의 크기, 숫자 정렬, 폴백 발생 여부 세 항목만 나란히 기록해도 차이가 선명해진다.