도구 활용 가이드#도구 가이드#텍스트

텍스트 대소문자 변환 도구 활용 팁

마지막 업데이트 · 2025-12-05·9분 읽기·1,746 단어

"user_name을 userName으로 바꾸려면 어떻게 하지?" "이 제목을 전부 대문자로 만들고 싶은데..." 이런 작은 고민들, 블루버튼 텍스트 변환 도구로 1초 만에 해결하세요!

왜 이 도구가 필요할까요?

텍스트 형식 변환은 생각보다 자주 필요한 작업이에요.

개발자라면

  • 변수명 컨벤션: camelCase, snake_case, PascalCase, kebab-case 사이를 왔다 갔다
  • API 연동: 백엔드는 snake_case인데 프론트는 camelCase
  • 데이터베이스: 테이블명은 snake_case, 모델명은 PascalCase
  • 상수 정의: UPPER_SNAKE_CASE로 변환 필요

디자이너/기획자라면

  • 디자인 시스템: 컴포넌트명을 PascalCase로 통일
  • 파일 정리: 파일명을 kebab-case로 일관성 있게
  • 문서 작성: 제목을 Title Case로 전문적으로

콘텐츠 크리에이터라면

  • 제목 강조: 전체 대문자로 임팩트 있게
  • 인용구: 첫 글자만 대문자로 깔끔하게
  • 태그 작성: 소문자로 통일

일일이 수작업하면 시간도 오래 걸리고 실수도 많아요. 도구로 한 번에 해결하세요!

주요 변환 형식 완벽 가이드

1. UPPERCASE (전체 대문자)

입력: hello world 출력: HELLO WORLD

언제 사용하나요?

  • 상수 이름: const API_BASE_URL = "..."
  • 환경 변수: .env 파일의 DATABASE_URL
  • 강조 제목: "BREAKING NEWS"
  • SQL 키워드: SELECT * FROM users

실전 예시

// JavaScript 상수
const MAX_RETRY_COUNT = 3;
const HTTP_STATUS_OK = 200;
const USER_ROLE_ADMIN = 'admin';

2. lowercase (전체 소문자)

입력: Hello World 출력: hello world

언제 사용하나요?

  • 이메일 주소: 대소문자 구분 없애기
  • URL slug: 소문자로 통일
  • 파일 확장자: .JPG → .jpg
  • 태그/키워드: 검색 최적화

실전 예시

// URL slug
"My Awesome Project" → "my awesome project" → "my-awesome-project"

// 이메일 정규화
"User@Example.COM" → "user@example.com"

3. Title Case (제목 케이스)

입력: hello world from earth 출력: Hello World From Earth

언제 사용하나요?

  • 문서 제목
  • 섹션 헤더
  • 제품명
  • 책/영화 제목

규칙

  • 각 단어의 첫 글자를 대문자로
  • 전치사(in, on, at)는 소문자 (옵션)
  • 첫 단어와 마지막 단어는 항상 대문자

실전 예시

블로그 제목:
"how to become a better developer"
→ "How To Become A Better Developer"

제품명:
"super fast image compressor"
→ "Super Fast Image Compressor"

4. Sentence case (문장 케이스)

입력: HELLO WORLD. HOW ARE YOU? 출력: Hello world. How are you?

언제 사용하나요?

  • 일반 문장
  • 설명 텍스트
  • UI 메시지
  • 버튼 레이블 (현대적 트렌드)

규칙

  • 문장의 첫 글자만 대문자
  • 마침표 후 다음 문장도 첫 글자 대문자
  • 나머지는 소문자

실전 예시

UI 버튼:
"SUBMIT FORM" → "Submit form"
"DELETE ACCOUNT" → "Delete account"

알림 메시지:
"USER NOT FOUND. PLEASE TRY AGAIN."
→ "User not found. Please try again."

5. camelCase (카멜 케이스)

입력: user name 출력: userName

입력: get user by id 출력: getUserById

언제 사용하나요?

  • JavaScript/TypeScript 변수명
  • Java 메서드명
  • JSON 키 (프론트엔드)

규칙

  • 첫 단어는 소문자로 시작
  • 이후 각 단어의 첫 글자는 대문자
  • 공백과 특수문자 제거

실전 예시

// React 컴포넌트 내부
const [userName, setUserName] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [userProfileImage, setUserProfileImage] = useState(null);

// 함수명
function getUserById(id) { }
function calculateTotalPrice(items) { }

6. PascalCase (파스칼 케이스)

입력: user profile component 출력: UserProfileComponent

입력: api service 출력: ApiService

언제 사용하나요?

  • React/Vue 컴포넌트명
  • TypeScript 인터페이스/타입
  • C## 클래스명
  • 데이터 모델명

규칙

  • 모든 단어의 첫 글자를 대문자로
  • camelCase와 유사하지만 첫 글자도 대문자

실전 예시

// React 컴포넌트
function UserProfileCard() { }
function NavigationBar() { }

// TypeScript 인터페이스
interface UserProfile { }
interface ApiResponse { }

// 클래스
class DatabaseConnection { }
class EmailService { }

7. snake_case (스네이크 케이스)

입력: user name 출력: user_name

입력: Get User By ID 출력: get_user_by_id

언제 사용하나요?

  • Python 변수/함수명
  • Ruby 변수/함수명
  • 데이터베이스 테이블/컬럼명
  • JSON 키 (백엔드 API)

규칙

  • 모두 소문자
  • 단어 사이를 언더스코어(_)로 연결

실전 예시

## Python
user_name = "John"
user_profile_image = "photo.jpg"

def get_user_by_id(user_id):
    pass

## Database
CREATE TABLE user_profiles (
    user_id INT,
    created_at TIMESTAMP,
    updated_at TIMESTAMP
);

8. UPPER_SNAKE_CASE (대문자 스네이크 케이스)

입력: api base url 출력: API_BASE_URL

입력: max retry count 출력: MAX_RETRY_COUNT

언제 사용하나요?

  • 상수 정의 (Python, Ruby)
  • 환경 변수
  • 설정 파일 키

실전 예시

### Python 상수
MAX_UPLOAD_SIZE = 10 * 1024 * 1024  # 10MB
API_TIMEOUT_SECONDS = 30
DEFAULT_PAGE_SIZE = 20

## .env 파일
DATABASE_URL=postgresql://localhost/mydb
JWT_SECRET_KEY=your-secret-key
MAX_CONNECTION_POOL=10

9. kebab-case (케밥 케이스)

입력: user name 출력: user-name

입력: My Project File 출력: my-project-file

언제 사용하나요?

  • URL slug
  • CSS 클래스명
  • HTML 속성명
  • 파일명

규칙

  • 모두 소문자
  • 단어 사이를 하이픈(-)으로 연결

실전 예시

<!-- CSS 클래스 -->
<div class="user-profile-card">
<button class="submit-button-primary">

<!-- URL -->
/blog/how-to-learn-javascript
/products/super-fast-image-compressor

<!-- 파일명 -->
user-profile-component.tsx
api-service-helper.ts

10. UPPER-KEBAB-CASE (대문자 케밥 케이스)

입력: http status ok 출력: HTTP-STATUS-OK

언제 사용하나요?

  • HTTP 헤더
  • 일부 설정 파일

실전 예시

Content-Type: application/json
Authorization: Bearer TOKEN
X-API-KEY: your-key

단계별 사용법

Step 1: 텍스트 입력

  • 변환하고 싶은 텍스트를 입력창에 붙여넣기
  • 한 줄이든 여러 줄이든 상관없어요
  • 특수문자, 숫자도 포함 가능

Step 2: 변환 형식 선택

  • 원하는 변환 형식 버튼 클릭
  • 여러 형식을 차례로 테스트 가능
  • 실시간으로 결과 확인

Step 3: 결과 복사

  • "복사" 버튼 클릭으로 한 번에 복사
  • 또는 결과 영역에서 드래그해서 복사
  • 바로 코드 에디터에 붙여넣기

실전 활용 사례

사례 1: API 응답 데이터 변환

백엔드 API는 snake_case, 프론트는 camelCase를 사용하는 경우

// 백엔드 응답 (snake_case)
{
  "user_id": 123,
  "user_name": "John",
  "profile_image_url": "...",
  "created_at": "2024-01-01"
}

// 프론트엔드에서 사용 (camelCase)
// 키 이름을 도구로 변환
{
  "userId": 123,
  "userName": "John",
  "profileImageUrl": "...",
  "createdAt": "2024-01-01"
}

💡 팁: JSON 키를 한 번에 추출해서 변환 도구에 넣고, 변환 후 다시 JSON에 적용하세요.

사례 2: 데이터베이스 스키마를 TypeScript 타입으로

-- Database (snake_case)
CREATE TABLE user_profiles (
    user_id INTEGER,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    email_address VARCHAR(100),
    created_at TIMESTAMP
);

필드명을 추출해서 camelCase로 변환:

// TypeScript Interface (camelCase)
interface UserProfile {
  userId: number;
  firstName: string;
  lastName: string;
  emailAddress: string;
  createdAt: Date;
}

사례 3: React 컴포넌트 파일명 정리

// 변환 전 (일관성 없음)
UserProfile.jsx
user-card.jsx
USER_LIST.jsx
navigationBar.jsx

// 텍스트 변환 도구 사용
// 모든 파일명을 kebab-case로 통일

// 변환 후
user-profile.jsx
user-card.jsx
user-list.jsx
navigation-bar.jsx

사례 4: 환경 변수 설정

// JavaScript 설정 객체 (camelCase)
const config = {
  apiBaseUrl: process.env.API_BASE_URL,
  databaseUrl: process.env.DATABASE_URL,
  jwtSecretKey: process.env.JWT_SECRET_KEY,
  maxUploadSize: process.env.MAX_UPLOAD_SIZE,
};

키 이름을 UPPER_SNAKE_CASE로 변환해서 환경 변수 파일 생성:

## 환경 변수 파일 (.env)
API_BASE_URL=https://api.example.com
DATABASE_URL=postgresql://localhost/mydb
JWT_SECRET_KEY=super-secret-key
MAX_UPLOAD_SIZE=10485760

사례 5: CSS 클래스를 JavaScript 변수로

/* CSS (kebab-case) */
.user-profile-card { }
.navigation-bar-item { }
.submit-button-primary { }

JavaScript에서 사용하려면 camelCase로:

// JavaScript (camelCase)
const userProfileCard = document.querySelector('.user-profile-card');
const navigationBarItem = document.querySelector('.navigation-bar-item');
const submitButtonPrimary = document.querySelector('.submit-button-primary');

프로 팁 모음

💡 팁 1: 일괄 변환 워크플로우

여러 변수명을 한 번에 변환하려면:

  1. 모든 변수명을 줄바꿈으로 나열
  2. 원하는 형식으로 변환
  3. 복사해서 Find & Replace 활용
변환 전:
user id
user name
created at

kebab-case 변환:
user-id
user-name
created-at

VS Code에서 Find: user id → Replace: user-id (반복)

💡 팁 2: 네이밍 컨벤션 통일

프로젝트 시작 시 컨벤션을 정하고, 도구로 검증하세요.

프론트엔드:
- 변수/함수: camelCase
- 컴포넌트: PascalCase
- 파일명: kebab-case
- CSS 클래스: kebab-case

백엔드:
- 변수/함수: snake_case
- 클래스: PascalCase
- 상수: UPPER_SNAKE_CASE
- DB 테이블/컬럼: snake_case

💡 팁 3: 복잡한 변환은 단계별로

"Get All Active Users By Role" 
→ lowercase: "get all active users by role"
→ snake_case: "get_all_active_users_by_role"
→ 필요하면 UPPER_SNAKE_CASE: "GET_ALL_ACTIVE_USERS_BY_ROLE"

💡 팁 4: 특수문자 처리

// 괄호, 하이픈 등 특수문자가 있는 경우
"User (Admin) - Profile"

// 먼저 특수문자 제거 후
"User Admin Profile"

// 변환
camelCase: "userAdminProfile"
snake_case: "user_admin_profile"

💡 팁 5: 약어는 일관성 있게

// API, URL, ID 같은 약어

// camelCase
apiUrl (O)  apiURL (X)
userId (O)  userID (X)

// PascalCase
ApiService (O)  APIService (X)
UserId (O)  UserID (X)

// snake_case
api_url (O)
user_id (O)

💡 예외: 상수는 전체 대문자 OK

API_BASE_URL (O)
USER_ID (O)

💡 팁 6: 숫자가 포함된 경우

// 숫자 처리

"User 2FA Code"
→ camelCase: "user2FaCode"
→ snake_case: "user_2fa_code"
→ kebab-case: "user-2fa-code"

"OAuth 2 Provider"
→ camelCase: "oAuth2Provider"
→ PascalCase: "OAuth2Provider"

언어/프레임워크별 권장 컨벤션

JavaScript / TypeScript

// 변수, 함수
const userName = "John";  // camelCase
function getUserData() { }

// 클래스, 인터페이스
class UserService { }  // PascalCase
interface UserProfile { }

// 상수
const API_BASE_URL = "...";  // UPPER_SNAKE_CASE

// 파일명
user-service.ts  // kebab-case
UserProfile.tsx  // PascalCase (컴포넌트)

Python

## 변수, 함수
user_name = "John"  # snake_case
def get_user_data():
    pass

## 클래스
class UserService:  # PascalCase
    pass

## 상수
API_BASE_URL = "..."  # UPPER_SNAKE_CASE

## 파일명
user_service.py  # snake_case

Java

// 변수, 메서드
String userName = "John";  // camelCase
public void getUserData() { }

// 클래스
class UserService { }  // PascalCase

// 상수
static final String API_BASE_URL = "...";  // UPPER_SNAKE_CASE

// 패키지
com.example.userservice  // lowercase

Ruby

## 변수, 메서드
user_name = "John"  # snake_case
def get_user_data
end

### 클래스, 모듈
class UserService  # PascalCase
end

## 상수
API_BASE_URL = "..."  # UPPER_SNAKE_CASE

## 파일명
user_service.rb  # snake_case

PHP

// 변수
$userName = "John";  // camelCase

// 함수
function getUserData() { }  // camelCase

// 클래스
class UserService { }  // PascalCase

// 상수
define('API_BASE_URL', '...');  // UPPER_SNAKE_CASE

자주 묻는 질문

Q. camelCase와 PascalCase의 차이는?

A. 첫 글자만 다릅니다! camelCase는 소문자로 시작(userName), PascalCase는 대문자로 시작(UserName)해요. 보통 변수는 camelCase, 클래스는 PascalCase를 써요.

Q. snake_case와 kebab-case는 언제 구분해서 쓰나요?

A. snake_case는 주로 백엔드 코드와 DB에서, kebab-case는 URL과 파일명에서 써요. 프로그래밍 언어가 하이픈(-)을 빼기 연산자로 인식하기 때문에 코드에서는 언더스코어(_)를 쓰는 거예요.

Q. 한글은 변환이 안 되나요?

A. 영문 기반 변환이라 한글은 제한적이에요. 한글을 영문으로 먼저 번역한 후 변환하는 걸 추천해요. 예: "사용자 이름" → "user name" → "userName"

Q. 특수문자는 어떻게 처리되나요?

A. 특수문자는 자동으로 제거되고, 단어 구분자로 인식돼요. 예: "user@name#123" → "userName123"

Q. 여러 줄도 한 번에 변환 가능한가요?

A. 네! 여러 줄을 입력하면 각 줄마다 변환이 적용돼요. 대량 변환 작업에 유용해요.

Q. 변환 결과를 파일로 저장할 수 있나요?

A. 복사 기능을 이용해서 텍스트 에디터에 붙여넣고 저장하면 돼요. 또는 브라우저의 "다른 이름으로 저장" 기능을 활용하세요.

관련 자료

도구를 바로 사용해보고 싶다면

다른 텍스트 도구들

코딩에 도움되는 도구

프로젝트 시작이 처음이라면

관련 콘텐츠

이 콘텐츠와 함께 보면 좋은 가이드와 팁이에요

도구 활용 가이드

견적서 작성 & 분석 도구 완벽 가이드

IT 프로젝트 견적서를 전문가처럼 작성하고 분석하는 방법을 단계별로 알려드려요

도구 활용 가이드

이미지 압축 & 편집 도구 가이드

이미지 파일 크기를 줄이고, 간단한 편집까지 한 번에 끝내는 방법

도구 활용 가이드

코드 포매터 & 압축기 활용법

지저분한 코드를 깔끔하게 정리하고, 파일 크기는 최소화하는 방법

AD
광고 로딩 중...