🔧툴박스
홈계산기텍스트·개발변환·생성디자인For Fun궁합가이드
🔧툴박스

설치 없이 바로 사용하는
무료 온라인 도구 30가지

계산기

  • 연봉계산기
  • BMI 계산기
  • 날짜 계산기
  • 비율·퍼센트 계산기
  • 화면 비율 계산기
  • 양력 음력 변환기

텍스트·개발

  • 글자수 세기
  • JSON 포맷터
  • 유닉스 타임스탬프
  • 케이스 변환기
  • 문자열 인코딩
  • 특수문자 복사

변환·생성

  • 단위 변환기
  • 이미지 변환기
  • UUID 생성기
  • QR코드 생성기
  • 비밀번호 생성기
  • 색상 도구

함께 이용하면 더 좋아요

📅 쉬는날 — 공휴일·황금연휴👶 맘맵 — 임신·육아 정보
🌐kimgoon.kr더 많은 서비스 보기
서비스 소개·개인정보처리방침·이용약관

© 2026 툴박스 (tools.kimgoon.kr). All rights reserved.

본 사이트의 계산 결과는 참고용이며, 정확한 정보는 관련 기관에 문의해 주세요.

툴박스 가이드
텍스트·문서2026년 3월 3일4분 읽기

camelCase·snake_case·kebab-case - 케이스 컨벤션의 모든 것

코딩에서 자주 만나는 camelCase, snake_case, kebab-case는 단순한 표기 차이가 아니라 언어와 환경의 관습입니다. 각 표기법의 유래와 사용처, 환경별 권장안, 자주 만나는 실수를 정리했습니다.

케이스 컨벤션은 왜 있을까?

프로그래밍 세계의 식별자(변수·함수·파일명)는 대부분 공백을 허용하지 않습니다. 그래서 두 단어 이상의 이름을 만들 때 어떤 규칙으로 단어를 구분할지 정해야 했고, 그 결과 등장한 것이 camelCase·snake_case·kebab-case 같은 케이스 컨벤션이에요. 단순한 표기 차이처럼 보이지만 실제로는 언어와 환경의 강한 관습입니다. Python에서 camelCase 변수를 쓰면 동료 개발자에게 어색하고, JavaScript에서 snake_case로 쓰면 라이브러리와 톤이 안 맞아요. 컨벤션을 알면 코드 스타일이 자연스러워지고, 나중에 자동 변환·정렬·검색 같은 작업도 훨씬 편해집니다.

camelCase - JavaScript와 Java의 표준

camelCase는 첫 단어는 소문자로 시작하고 두 번째 단어부터 첫 글자를 대문자로 적는 방식입니다. 예를 들어 userName, getCurrentDate, isActive처럼이요. 낙타의 등처럼 중간에 대문자가 솟아 있다고 해서 붙은 이름인데, JavaScript·Java·Swift·Kotlin·TypeScript 등 C 계열 언어에서 변수와 함수의 표준 표기로 쓰입니다. 짧고 한 단어처럼 보이게 흐르기 때문에 함수 호출 같은 표현에서 자연스럽게 읽혀요. 단점은 단어가 많아지면 가독성이 떨어진다는 점입니다(예: getUserProfileNotificationSettings). 너무 길어지면 이름 자체를 줄이거나, 함수를 분리하라는 신호로 보면 됩니다.

snake_case - Python과 데이터의 언어

snake_case는 단어 사이를 언더스코어로 잇는 방식입니다. user_name, get_current_date, is_active처럼이요. Python·Ruby·Rust(라이브러리)·SQL 컬럼명·환경변수 등에서 표준이고, 데이터 저장소(DB·CSV·JSON 키)에서도 매우 자주 보입니다. 가장 큰 장점은 단어 경계가 명확해 가독성이 높다는 점이에요. 단어가 길어져도 user_profile_notification_settings처럼 또박또박 읽힙니다. 그래서 PostgreSQL 같은 DB는 컬럼명을 snake_case로 정의하는 것이 거의 표준이에요. 단점은 키 입력이 한 번 더 필요하고, JS 같은 언어에서는 어색해 보인다는 점입니다.

kebab-case - URL과 CSS의 친구

kebab-case는 단어 사이를 하이픈(-)으로 잇는 방식입니다. user-name, my-component, hello-world처럼이요. 중간에 꼬치(케밥)가 끼어 있는 모양이라고 해서 붙은 이름이에요. 변수명에는 거의 쓰이지 않습니다(JavaScript에서는 빼기 연산으로 해석되어 문법 에러). 대신 사람이 보는 위치에서 매우 자주 등장합니다. URL 슬러그(/blog/case-convention-guide), CSS 클래스/속성(background-color, text-align), HTML 사용자 정의 속성(data-user-id), 파일명(my-component.tsx)이 대표적이에요. 검색 엔진과 사람 모두에게 친화적이라 SEO·접근성 측면에서도 권장됩니다.

PascalCase·SCREAMING_SNAKE_CASE도 알아두자

camelCase의 변형으로 PascalCase가 있어요. UserProfile, MyComponent처럼 첫 글자도 대문자입니다. 클래스·React 컴포넌트·타입 이름의 표준이고, 파스칼이라는 컴퓨터 과학자가 만든 언어 이름에서 유래했어요. snake_case의 대문자 버전인 SCREAMING_SNAKE_CASE(또는 UPPER_SNAKE_CASE)는 상수·환경변수에 쓰입니다. MAX_RETRY_COUNT, API_BASE_URL처럼이요. 절대 변하지 않는 값이라는 신호로 작동해 코드 리뷰 때 한눈에 식별돼요.

환경별 권장 케이스 정리

환경 / 위치권장 케이스
JavaScript·TypeScript 변수·함수camelCase
클래스·컴포넌트·타입PascalCase
상수·환경변수SCREAMING_SNAKE_CASE
Python 변수·함수snake_case
Python 클래스PascalCase
SQL 테이블·컬럼snake_case
URL 슬러그kebab-case
CSS 클래스·속성kebab-case
파일명(웹)kebab-case 또는 PascalCase(컴포넌트)
HTML data-* 속성kebab-case

언어가 권장하는 케이스를 따르면 라이브러리와 코드 톤이 자연스럽게 맞아요. 한 프로젝트 안에서는 일관성이 가장 중요합니다.

도구로 일괄 변환하기

API 응답이 snake_case인데 프론트엔드에서는 camelCase로 써야 할 때, 또는 디자인 시스템 토큰을 환경별로 다른 케이스로 변환해야 할 때, 단어 단위로 손대기는 번거롭죠. 툴박스의 케이스 변환기는 한 번에 텍스트를 camelCase·snake_case·kebab-case·PascalCase·SCREAMING_SNAKE_CASE 등으로 즉시 변환합니다. 마이그레이션·이름 일괄 변경·블로그 슬러그 만들기 같은 작업에서 시간을 절약할 수 있어요. 케이스가 헷갈릴 때마다 도구를 거치는 습관을 들이면 변수 이름 짓기가 한결 가벼워집니다.

관련 가이드

kimgoon.kr

kimgoon 생활정보 가이드

tools.kimgoon.kr

텍스트·문서 가이드 더 보기

tools.kimgoon.kr

툴박스 도구 모음

태그

#camelCase#snake_case#kebab-case#코딩 컨벤션#변수명#PascalCase#네이밍
공유

관련 글 더 보기

글자수 세기 도구 활용법 — 자기소개서·블로그·SNS 분량 맞추기
텍스트·문서

글자수 세기 도구 활용법 — 자기소개서·블로그·SNS 분량 맞추기

6분 읽기

Lorem Ipsum의 역사와 더미 텍스트 활용법
텍스트·문서

Lorem Ipsum의 역사와 더미 텍스트 활용법

3분 읽기

공백·특수문자가 만드는 보이지 않는 버그 - 제로폭 문자·NBSP 디버깅 가이드
텍스트·문서

공백·특수문자가 만드는 보이지 않는 버그 - 제로폭 문자·NBSP 디버깅 가이드

4분 읽기

목록으로 돌아가기