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

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

관련 자료

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

• 텍스트 대소문자 변환 도구 바로가기

다른 텍스트 도구들

• 텍스트 분석기 - 글자 수, 단어 수 세기
• 코드 포매터 - 코드 정렬 및 포맷팅

코딩에 도움되는 도구

• 코드 압축기
• 정규표현식 테스터

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

• 첫 프로젝트를 성공시키는 방법
• AI 도구 200% 활용하기