카멜케이스 스네이크케이스 변환 규칙 총정리
camelCase와 snake_case가 헷갈리는 이유는 표기법 이름이 낯설어서가 아니라, 텍스트가 정확히 어느 지점에서 단어로 잘리고 그 단어들이 무슨 기호로 다시 이어지는지 규칙을 모르기 때문입니다.
이 규칙만 알면 myVariableName이 my_variable_name으로 바뀌는 과정과, 숫자·특수문자가 섞인 텍스트가 예상과 다르게 잘리는 이유까지 전부 설명됩니다.
변수·파일 이름 표기법을 다루는 개발자나, 변환 결과를 눈으로 검증해야 하는 사람이 볼 내용입니다.
요약 ① 단어는 로마자 소문자·숫자 바로 뒤에 대문자가 오는 지점과, 문자·숫자·한글이 아닌 기호가 연속된 지점에서 잘립니다. ② camelCase·PascalCase는 잘린 단어를 기호 없이 이어 붙이고, snake_case·kebab-case·CONSTANT_CASE는 밑줄·하이픈으로 이어 붙입니다. ③ Title Case·문장형은 이 단어 분리 규칙을 쓰지 않아서, 공백 없는 camelCase 텍스트를 그대로 넣으면 단어별로 나뉘지 않습니다.
표기법 변환이 실제로 필요해지는 상황
API 문서나 디자인 스펙에는 "User Profile Image"처럼 사람이 읽기 좋은 이름이 적혀 있는 경우가 많습니다. 이 이름을 그대로 코드에 쓰기는 어렵습니다. 실제 코드에서는 이렇게 나뉩니다.
- JavaScript 변수명: camelCase (예: userProfileImage)
- 데이터베이스 컬럼명: snake_case (예: user_profile_image)
- CSS 커스텀 속성·URL 경로: kebab-case (예: user-profile-image)
- 환경변수: CONSTANT_CASE (예: USER_PROFILE_IMAGE)
문제는 이름에 숫자나 약어가 섞였을 때 생깁니다. getUserID, html5Video처럼 대문자·숫자·소문자가 뒤섞인 텍스트를 손으로 직접 나누다 보면, 어디서 끊어야 하는지 사람마다 다르게 판단하기 쉽습니다.
그 결과 같은 이름이 팀 안에서 getUserId, getUserID, get_user_id로 제각각 표기되는 일이 생깁니다. 표기법마다 단어를 나누고 합치는 규칙이 정확히 정해져 있다는 것을 알면, 이런 표기 흔들림을 규칙으로 검증할 수 있습니다.
도구 없이 직접 단어를 나누고 표기법을 적용하는 방법
표기법 변환은 두 단계로 이뤄집니다. 먼저 텍스트를 단어 단위로 자르고, 그다음 그 단어들을 표기법별 규칙으로 다시 붙입니다. 이 두 단계를 손으로 그대로 따라 하면 도구 없이도 같은 결과를 얻을 수 있습니다.
1단계: 단어 경계를 찾는다
camelCase·PascalCase·snake_case·kebab-case·CONSTANT_CASE 다섯 가지는 단어 경계를 두 가지 규칙으로 찾습니다.
- 규칙 1(대소문자 경계): 로마자 소문자 또는 숫자 바로 뒤에 대문자가 오면 그 사이를 자릅니다. myVariableName은 my / Variable / Name으로, html5Video는 html5 / Video로 나뉩니다.
- 규칙 2(기호 경계): 로마자·숫자·한글이 아닌 문자(공백, 밑줄, 하이픈, 마침표 등)가 한 개든 여러 개든 연속으로 나오면 그 구간 전체를 경계로 보고, 양옆 글자만 단어로 남깁니다. hello___world는 밑줄이 세 개 연달아 있어도 hello / world 두 단어로만 나뉩니다.
반면 Title Case와 문장형은 이 두 규칙 중 규칙 2에 해당하는 것과 비슷하게 공백·기호로 끊긴 덩어리만 하나의 단어로 봅니다. 규칙 1(대소문자 경계)은 적용하지 않습니다.
그래서 공백 없이 이어 쓴 camelCase 텍스트를 그대로 Title Case에 넣으면, getUserID 같은 텍스트가 단어별로 나뉘지 않고 첫 글자만 대문자로 바뀐 하나의 덩어리(Getuserid)가 됩니다.
같은 텍스트를 camelCase로 바꾸면 get / User / ID 세 단어로 정확히 나뉘어 getUserId가 됩니다.
2단계: 나뉜 단어를 표기법별 규칙으로 다시 합친다
| 표기법 | 단어를 다시 합치는 규칙 |
|---|---|
| 대문자 (UPPER) | 텍스트 전체를 대문자로 바꿉니다 (단어 분리 없음) |
| 소문자 (lower) | 텍스트 전체를 소문자로 바꿉니다 (단어 분리 없음) |
| Title Case | 공백·기호로 끊긴 덩어리마다 첫 글자만 대문자로 바꿉니다 |
| 문장형 (Sentence) | 전체를 소문자로 바꾼 뒤 문장 시작 글자만 대문자로 바꿉니다 |
| camelCase | 첫 단어는 소문자로, 이후 단어는 첫 글자만 대문자로 바꿔 기호 없이 붙입니다 |
| PascalCase | 모든 단어의 첫 글자를 대문자로 바꿔 기호 없이 붙입니다 |
| snake_case | 모든 단어를 소문자로 바꿔 밑줄(_)로 붙입니다 |
| kebab-case | 모든 단어를 소문자로 바꿔 하이픈(-)으로 붙입니다 |
| CONSTANT_CASE | 모든 단어를 대문자로 바꿔 밑줄(_)로 붙입니다 |
camelCase·PascalCase에서 "첫 글자만 대문자로 바꾼다"는 것은 나머지 글자를 전부 소문자로 강제 변환한다는 뜻입니다.
그래서 단어 안에 이미 대문자가 여러 개 있던 약어(ID, URL 등)는 첫 글자만 남고 나머지가 소문자로 바뀝니다. 이 점은 아래 확인 방법으로 이어집니다.
저희 도구로 확인하기.
텍스트를 대문자·소문자·Title·문장형·camelCase·PascalCase·snake_case·kebab-case·CONSTANT_CASE로 즉시 변환합니다. 설치·가입 없이 무료로 씁니다.
자주 헷갈리는 변환 결과
같은 입력을 여러 표기법에 넣어보면 규칙만으로는 예상하기 어려운 결과가 나오는 지점이 있습니다. 아래는 실제로 자주 걸리는 경우입니다.
| 헷갈리는 상황 | 실제 규칙 |
|---|---|
| getUserID를 camelCase로 바꾸면 getUserId가 되어 ID가 아니라 Id로 보임 | 단어를 이어 붙일 때 각 단어의 첫 글자만 대문자로 남기고 나머지는 전부 소문자로 바꾸기 때문입니다. CONSTANT_CASE(GET_USER_ID)처럼 단어 전체를 대문자로 바꾸는 표기법은 약어가 그대로 유지됩니다. |
| html5Video가 html5 Video로, 5 다음에서 끊김 | 소문자 또는 숫자 바로 뒤에 대문자가 오면 그 지점을 단어 경계로 보기 때문입니다. 숫자 앞뒤가 소문자로 이어지는 경우(예: user2name)는 경계로 보지 않습니다. |
| myVariableName을 Title Case에 넣어도 단어별로 안 나뉨 | Title Case·문장형은 공백·기호 경계만 인식합니다. 대소문자 경계로 나누는 규칙은 camelCase 계열 다섯 가지에만 적용됩니다. |
| 이름Name처럼 한글 뒤에 영문 대문자가 바로 붙어도 안 끊김 | 대소문자 경계 규칙은 로마자 소문자·숫자와 대문자 사이에서만 작동합니다. 한글은 이 규칙의 대상이 아닙니다. |
| hello___world처럼 구분 기호가 여러 개 연달아 있어도 빈 단어가 안 생김 | 연속된 기호를 하나의 경계로 묶어서 처리하기 때문입니다. |
정리
- 변환 방식은 크게 두 그룹으로 나뉩니다. 텍스트 전체를 통째로 다루는 그룹(대문자·소문자·Title Case·문장형)과, 단어로 나눈 뒤 다시 합치는 그룹(camelCase·PascalCase·snake_case·kebab-case·CONSTANT_CASE)입니다.
- 단어로 나누는 그룹은 로마자 소문자·숫자 바로 뒤에 대문자가 오는 지점과, 로마자·숫자·한글이 아닌 기호가 연속된 지점에서 잘립니다.
- camelCase·PascalCase는 각 단어의 첫 글자만 남기고 나머지를 소문자로 바꾸므로, 연속 대문자로 된 약어는 원래 형태를 잃습니다.
- Title Case·문장형은 대소문자 경계를 인식하지 않고 공백·기호만 경계로 삼으므로, 공백 없는 camelCase 텍스트를 넣으면 단어별로 나뉘지 않습니다.
- 한글은 대소문자 구분이 없는 문자라서 어떤 표기법을 선택해도 그대로 남습니다.
텍스트를 대문자·소문자·Title·문장형·camelCase·PascalCase·snake_case·kebab-case·CONSTANT_CASE로 즉시 변환합니다. 설치·가입 없이 무료로 씁니다.
자주 묻는 질문
Title Case로 바꿨는데 왜 카멜케이스 텍스트가 단어별로 안 나뉘나요?
Title Case와 문장형은 공백이나 기호로 끊긴 덩어리만 하나의 단어로 봅니다.
camelCase·PascalCase·snake_case·kebab-case·CONSTANT_CASE 다섯 가지에만 있는 "소문자 뒤 대문자" 경계 규칙이 Title Case와 문장형에는 적용되지 않습니다.
그래서 공백 없이 이어 쓴 camelCase 텍스트를 그대로 넣으면 단어별로 나뉘지 않고, 첫 글자만 대문자로 바뀐 하나의 덩어리가 됩니다.
camelCase로 바꿨더니 ID, URL 같은 약어가 Id, Url로 바뀌었어요. 왜죠?
단어를 이어 붙일 때 각 단어의 첫 글자만 대문자로 남기고 나머지 글자는 전부 소문자로 바꾸는 규칙이 적용되기 때문입니다. camelCase와 PascalCase 두 표기법에서 공통으로 나타납니다.
약어를 원래 형태(ID, URL)로 유지하고 싶다면 CONSTANT_CASE나 snake_case처럼 단어 전체를 일괄로 대문자·소문자 변환하는 표기법의 결과와 비교해 보면 차이가 드러납니다.
숫자가 포함된 텍스트는 어떻게 잘리나요?
숫자 바로 뒤에 로마자 대문자가 오면 그 지점이 단어 경계가 됩니다(예: html5Video → html5 / Video). 반대로 숫자 앞뒤가 소문자이거나 숫자만 이어지는 경우는 별도 경계로 보지 않아 같은 단어 안에 남습니다.
한글이 섞인 텍스트도 변환되나요?
한글은 대문자·소문자 구분이 없는 문자라서 어떤 표기법을 선택해도 글자 자체는 바뀌지 않고 그대로 남습니다. 다만 한글과 영문·숫자 사이에 공백이나 기호가 있으면 그 지점은 여전히 단어 경계로 인식되어 각 부분이 따로 나뉩니다.