쇼핑몰 결제 금액이 덜덜 떨린다면? '숫자 폭 고정' 타이포그래피 꿀팁
쇼핑몰에서 상품 갯수를 올리거나 내릴 때 하단의 '총 결제 금액' 텍스트가 좌우로 덜덜 떨리며 밀리는 현상을 본 적 있으신가요?
또는 이벤트 마감 시간을 알려주는 카운트다운 타이머(00:59:12...)의 초침이 줄어들 때마다 전체 박스가 덜컹거려서 불안해 보였던 경험이 있으실 겁니다.
💡 왜 숫자만 유독 덜컹거릴까요?
우리가 쓰는 대부분의 폰트(Pretendard, Noto Sans 등)는 글자 모양에 따라 너비가 다릅니다. 숫자의 경우 날씬한 '1'과 뚱뚱한 '8'의 가로 너비가 서로 다르기 때문에, 실시간으로 숫자가 바뀔 때마다 전체 글씨의 폭이 늘어났다 줄어들었다를 반복하며 떨림 현상이 발생하는 것입니다.
1. 투박한 굴림체로 바꿔야 하나요? 절대 아닙니다!
이 떨림을 막기 위해 모든 글자 너비가 똑같은 옛날 방식의 고정폭 폰트(Courier, 굴림체 등)로 바꾼다면 디자인이 엉망이 될 것입니다.
모던 CSS에서는 현재의 예쁜 폰트 디자인은 그대로 유지하면서, 오직 '숫자(Numeric)'의 폭만 표(Table)처럼 일정한 간격으로 고정시켜 주는 마법의 타이포그래피 속성을 제공합니다.
/* 실시간으로 변하는 가격, 타이머 등에 딱 한 줄만 추가하세요! */
.live-price-text, .countdown-timer {
/* 숫자의 너비(폭)를 동일하게 고정시켜 덜컹거림 원천 차단 */
font-variant-numeric: tabular-nums;
}2. 쇼핑몰 신뢰도를 높이는 1픽셀의 기적
이 속성을 적용하면 숫자가 1에서 8로 바뀌더라도 텍스트의 전체 길이가 절대 변하지 않습니다.
주식 차트의 호가창, 가상화폐 거래소의 실시간 가격, 쇼핑몰의 결제 금액, 대시보드의 통계 수치 등 숫자가 변하는 모든 곳에 이 속성을 적용해 보세요. 눈의 피로도가 획기적으로 낮아지고 사이트의 신뢰도(Trust)가 급격히 상승합니다.
"진정한 명품은 눈에 띄지 않는 기초 마감에서 결정됩니다."
나눔웹은 화려한 그래픽에 가려지기 쉬운 타이포그래피의 1px 떨림까지 계산하여,
고객에게 가장 안정적이고 신뢰감 있는 하이엔드 UI를 제공합니다.
