구글 번역 후 메뉴 대소문자가 뒤죽박죽? CSS capitalize로 해결하기

기성·2026년 3월 18일

TIL

목록 보기

94/97

구글 번역 후 메뉴 대소문자가 뒤죽박죽? CSS capitalize로 해결하기

문제 상황

공식 홈페이지 디자인 리뉴얼 작업 중이었습니다. 개발을 마치고 구글 번역으로 영문 페이지를 확인했는데, 네비게이션 메뉴가 뭔가 어색해 보였습니다.

회사 소개  →  About us
사업 분야  →  Business area
오시는 길  →  Directions
채용 안내  →  recruitment information

보이시나요? 어떤 항목은 About us처럼 첫 글자가 대문자로 시작하고, 어떤 항목은 recruitment information처럼 소문자로 시작합니다.

한국어 원문에는 대소문자 구분이 없으니 문제가 없었는데, 구글 번역이 번역 결과를 일관성 없이 뱉어내면서 메뉴 전체의 통일성이 깨져 버렸습니다.

그렇다고 번역 결과를 직접 제어할 수는 없는 노릇이었습니다.

해결 방법: text-transform: capitalize

CSS의 text-transform 속성에는 capitalize라는 값이 있습니다.

.nav-menu li {
  text-transform: capitalize;
}

이 한 줄이면 번역된 텍스트가 무엇이든 각 단어의 첫 글자를 자동으로 대문자로 만들어줍니다.

recruitment information  →  Recruitment Information
about us                 →  About Us
business area            →  Business Area

구글 번역이 소문자로 내려줬든 대문자로 내려줬든 상관없이, 렌더링 시점에 CSS가 첫 글자를 통일해주기 때문에 메뉴 전체가 깔끔하게 정렬됩니다.

text-transform 값 비교

capitalize 외에도 text-transform에는 여러 값이 있습니다. 헷갈리기 쉬우니 같이 정리해 보겠습니다.

값	설명	예시
`none`	기본값, 변환 없음	`hello world`
`capitalize`	각 단어의 첫 글자만 대문자	`Hello World`
`uppercase`	모든 글자를 대문자	`HELLO WORLD`
`lowercase`	모든 글자를 소문자	`hello world`

메뉴처럼 Title Case 형태를 원할 때는 capitalize, 버튼 텍스트처럼 전체 대문자를 원할 때는 uppercase를 씁니다.

주의할 점

capitalize는 공백을 기준으로 단어를 구분합니다. 즉, 하이픈(-)으로 연결된 단어는 하나의 단어로 취급합니다.

e-mail  →  E-mail  (하이픈 뒤는 대문자로 변환되지 않음)
e mail  →  E Mail  (공백으로 구분되면 각각 대문자)

또한 capitalize는 화면에 보이는 방식만 바꾸는 것이지, 실제 DOM의 텍스트 값을 변경하지는 않습니다. innerText나 textContent로 값을 읽으면 원본 텍스트가 그대로 반환됩니다. JavaScript로 텍스트를 가공해야 한다면 이 점을 염두에 두어야 합니다.