📐 세로쓰기 글자가 너무 길쭉할 때? transform: scaleX()로 가로를 늘려보자

웹에서 writing-mode: vertical-rl 또는 vertical-lr을 사용해 세로쓰기 타이포그래피를 구성할 때, 종종 한 가지 시각적 문제가 발생합니다.
바로, 글자가 너무 세로로 길쭉해 보이는 현상입니다. 특히 고정폭 또는 얇은 폰트를 사용했을 때 이 문제가 더 도드라지죠.

이런 현상은 시각적인 피로감을 줄 수 있고, 디자인적으로도 어색함을 만들어냅니다.
이럴 때 가장 간단하면서도 강력한 해결책이 바로 CSS의 transform: scaleX() 입니다.

---

💡 왜 세로쓰기에서 글자가 길어보일까?

세로쓰기에서는 각 글자가 아래로 쌓이는 구조이기 때문에, 가로 비율이 좁은 글자일수록 상대적으로 더 길쭉하고 왜소하게 보입니다.
이는 특히 한글, 일본어 같이 복잡한 형태를 가진 문자의 경우 시각 중심이 위아래로 쏠리는 효과를 유발합니다.

예를 들어 아래처럼 텍스트가 설정된 경우를 봅시다:

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 1.2rem;
}

이 상태에서 글자를 보면 균형이 맞지 않아 보일 수 있습니다.

---

🛠 해결책: transform: scaleX()로 가로폭 늘리기

이 문제를 해결하기 위해 transform: scaleX() 속성을 사용해 가로 비율을 확대할 수 있습니다.

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: scaleX(1.2); /* 가로 20% 확장 */
}

✔ 주요 포인트

• scaleX(1.0)은 기본 상태
• scaleX(1.2) → 가로폭을 20% 늘려 시각적으로 균형을 맞춤
• 1.1 ~ 1.5 범위에서 실험해 보며 폰트와 레이아웃에 맞는 값을 찾는 것이 좋습니다

---

🔬 시각적 균형 실험

scaleX 값 시각적 인상

1.0	세로로 길어 보이고 시선이 위아래로 분산됨
1.2	가장 안정적. 글자 형태 유지되며 넓게 읽힘
1.5	다소 과장됨. 인포그래픽이나 강조용에 적합

※ 예시: 왼쪽은 기본값, 오른쪽은 scaleX(1.2) 적용

---

🧠 왜 scaleX가 효과적인가?

CSS의 transform: scaleX(n)은 글자의 가로 너비만 확장시키고, 세로 비율은 그대로 유지합니다.
즉, 글자 모양이 일그러지지 않으면서 비율 감각만 보정할 수 있습니다.
이는 일종의 시각적 리듬 조정으로, 실제 텍스트 정보는 그대로 유지되면서도 사용자에게 더 편안한 가독성을 제공합니다.

---

✨ 실용 예시

<div class="vertical-text">안녕하세요</div>

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: scaleX(1.2);
  font-size: 1.5rem;
  font-family: 'Pretendard', sans-serif;
  letter-spacing: 0.3em;
}

• font-family: 시각 중심이 고르게 분포된 폰트를 추천합니다
• letter-spacing: 세로쓰기에서 글자 간격을 넓혀주는 것도 시각 균형에 도움

✅ 결론

transform: scaleX()는 단순한 CSS 속성이지만, 세로쓰기 타이포그래피에서 시각적 완성도와 가독성을 높이는 데 매우 효과적인 도구입니다.
디자인에 있어 텍스트의 비율 감각은 작은 차이로도 큰 인상을 줄 수 있습니다.