글을 kebab-case로 변환 dash-case 무료 온라인 안전

텍스트를 kebab-case로 변환하는 이유

잘 관리된 거의 모든 웹사이트의 주소창을 보면 하이픈으로 이어진 단어들이 보입니다. how-to-repot-a-fern, annual-report-2026, contact-us 같은 것들입니다. 스타일시트 안을 보면 클래스 이름도 마찬가지입니다. main-menu, card-title, button-primary 같은 식입니다. 명령줄 도구의 플래그를 보면 --dry-run과 --no-cache가 있습니다. 이것이 kebab-case이며, 꼬치에 꿴 고기처럼 소문자 단어들이 하이픈에 줄줄이 꿰인 형태로, 웹이 사람이 눈으로 보는 이름에 채택한 형태입니다. 텍스트를 kebab-case로 변환한다는 것은 말하는 그대로의 구절을 주소, 클래스, 브랜치, 파일에서 쓸 수 있는 이름으로 바꾸는 일입니다.

한 줄을 붙여 넣고 kebab-case로 읽어 보십시오. 변환은 브라우저 안에서 이루어지고, 입력하는 내용은 어디로도 전송되지 않으며, 규칙은 영어가 아니라 이 페이지의 언어를 따릅니다. 줄을 단어로 자르고, 소문자로 바꾸고, 하이픈으로 이어 붙입니다. 이미 camelCase로 쓰인 줄도 그 지점에서 잘리므로 fooBar는 foo-bar가 됩니다. 아래에서는 이 페이지가 정확히 무엇을 하고 무엇을 하지 않는지, 여러 언어의 까다로운 글자를 어떻게 다루는지, 웹이 밑줄보다 하이픈을 선호하는 이유, kebab-case가 관례인 곳, 그리고 서둘러 텍스트를 kebab-case로 변환하는 사람들이 걸려드는 함정을 설명합니다.

변환이 하는 일

자르고, 소문자로, 이어 붙이기

페이지는 먼저 줄을 단어로 자르고, 각각을 소문자로 바꾸고, 하이픈으로 이어 붙입니다. Crème brûlée for 2 — straße 17, fooBar라는 줄은 crème-brûlée-for-2-straße-17-foo-bar로 돌아옵니다. 악센트는 유지되고, 숫자는 독립된 단어로 남으며, 대시와 쉼표는 사라지고, fooBar는 대문자에서 둘로 잘립니다.

자르는 위치

단어의 경계는 공백, 문장 부호, 대시, 기호, 또는 단어 안에서 소문자에서 대문자로 넘어가는 지점입니다. 그래서 Main Menu, mainMenu, main_menu, main--menu는 모두 main-menu가 됩니다. 변환은 거의 모든 출발점을 받아들여 언제나 같은 형태에 도착하며, 이름이 스타일시트나 주소에 들어가기 전의 안전한 마지막 단계가 되는 까닭이 여기에 있습니다.

남는 하이픈 없음

반복된 구분자는 하나로 줄어들고, 맨 앞이나 맨 끝에는 하이픈이 남지 않습니다. ...Hello, World!! 같은 지저분한 구절은 hello-world로 나오며 양 끝에 아무것도 매달리지 않습니다.

변환이 하지 않는 일

문장 부호는 유지하지 않습니다

쉼표, 마침표, 대시는 옮겨 갈 문자가 아니라 단어 사이의 경계입니다. CSS 클래스나 파일 이름에는 원하는 바이지만 산문에는 그렇지 않습니다. 문장을 이 페이지에 통과시키면 이름이 되어 돌아오며, 원래의 문장 부호는 사라집니다.

악센트를 제거하지 않습니다

줄은 악센트가 붙은 글자를 그대로 유지합니다. crème-brûlée처럼 말입니다. 최신 브라우저와 서버는 이름과 주소에서 악센트를 받아들이지만 오래된 도구는 그렇지 않을 수 있으며, 악센트가 있는 주소는 복사할 때 퍼센트 코드로 이스케이프됩니다. 일반 글자가 필요하다면 URL 슬러그 페이지가 라틴 글자의 표시도 제거해 줍니다.

이름이 비어 있는지 확인하지 않습니다

서로 다른 두 구절이 같은 이름을 만들 수 있으며, 페이지는 그 이름이 여러분의 사이트나 프로젝트에서 이미 쓰이고 있는지 알지 못합니다. 공개하기 전에 충돌이 없는지 확인하십시오.

언어가 중요합니다

공백 없이 쓰는 문자

단어로 자르려면 경계가 필요합니다. 중국어와 일본어는 공백 없이 쓰므로, 이런 문자로 된 줄은 하나의 단어로 돌아옵니다. 페이지는 짐작한 곳에서 자르느니 그렇다고 말하는 편을 택합니다.

튀르키예어와 점이 있는 i

소문자 변환은 페이지 언어의 규칙을 따릅니다. 튀르키예어에서 I의 소문자는 점이 없는 ı이고 İ의 소문자는 i입니다. 영어 규칙을 적용하는 변환기는 단어를 바꿔 놓습니다. 이 페이지는 쓰인 언어를 따릅니다.

독일어와 날카로운 s

독일어 ß는 이미 소문자이므로 straße-17처럼 그대로 남습니다. 대문자 STRASSE는 strasse로 돌아오는데, 대문자 형태는 그것이 ß에서 왔는지 두 글자에서 왔는지 기억하지 못하기 때문입니다.

오른쪽에서 왼쪽으로 쓰는 문자와 인도 계열 문자

아랍어, 히브리어, 인도 계열 문자는 단어 사이에 공백이 있고 대소문자가 없습니다. 페이지는 그 단어들을 하이픈으로 이어 붙이고 글자는 건드리지 않습니다.

웹이 하이픈을 선호하는 이유

검색 엔진은 하이픈을 공백으로 읽습니다

검색 엔진은 주소 안의 하이픈을 단어 사이의 구분자로 취급하므로 how-to-repot-a-fern은 다섯 단어로 이해됩니다. 반면 밑줄은 대체로 이어 주는 글자로 읽혀서 how_to_repot_a_fern은 긴 단어 하나로 읽힐 수 있습니다. 사람들이 검색하는 주소에는 하이픈이 더 나은 선택이며, 그 습관이 웹 전체로 퍼졌습니다.

가독성

링크에 밑줄을 그으면 밑줄 글자가 사라질 수 있는데, 선이 정확히 밑줄이 있는 자리에 놓이기 때문입니다. 하이픈은 계속 보입니다. 사소한 점이지만 이 형태가 주소에서 자리 잡은 까닭을 설명해 줍니다.

대소문자 구분 없음

주소는 소문자일 때 가장 안전한데, 일부 서버에서는 주소의 일부가 대소문자를 구분할 수 있기 때문입니다. kebab-case는 정의상 소문자이므로 한 종류의 실수를 없애 줍니다.

kebab-case가 관례인 곳

웹 주소

페이지 주소의 마지막 부분인 슬러그는 거의 언제나 kebab-case입니다. 악센트도 없어야 하는 주소에는 URL 슬러그 페이지를 쓰십시오.

CSS와 HTML

CSS 속성은 kebab-case이며(background-color, font-size), 대부분의 클래스 이름과 사용자 지정 속성(--brand-color)도 그렇습니다. data-user-id 같은 HTML 속성도 같은 스타일을 따릅니다. 컴포넌트의 클래스 이름을 새로 지을 때, 스타일시트를 읽는 사람이 기대하는 것은 kebab-case입니다. 컴포넌트를 크기와 함께 그린다면 길이 계산에는 px를 rem으로 변환이 도움이 됩니다.

파일과 폴더 이름

하이픈으로 이은 소문자 단어는 모든 시스템에서 안전한 파일 이름이며, 그래서 정적 사이트 생성기와 많은 프레임워크가 페이지와 자산에 이를 씁니다.

명령줄 옵션과 패키지 이름

--dry-run 같은 플래그, npm 같은 레지스트리의 패키지 이름, feature/login-form 같은 Git 브랜치는 모두 kebab-case를 따릅니다. 이 형태로 바꾼 구절은 여러분이 쓰는 도구가 받아들일 가능성이 높습니다.

Lisp와 그 사촌들

이 형태는 Lisp에서 왔는데, 이 언어에서는 빼기 기호 앞뒤에 공백 없이 쓰는 일이 없으므로 이름에 하이픈이 허용됩니다. kebab-case라는 이름은 꼬치에 빗댄 농담이었는데 그대로 굳었습니다.

관례가 아닌 곳

Python, Ruby, 데이터베이스

이들은 하이픈이 빼기로 읽히기 때문에 밑줄을 선호합니다. 이 경우에는 snake_case를 쓰십시오.

JavaScript 변수와 Java

변수 이름 속의 하이픈은 빼기입니다. 이런 언어들은 camelCase를 씁니다. 그래도 kebab-case는 문자열 값, 파일 이름, CSS에는 나타날 수 있습니다.

산문과 제목

kebab-case는 이름을 위한 것입니다. 제목과 문장은 공백과 대문자를 유지해야 합니다. 제목에는 Title Case를 고려하십시오.

여기서 텍스트를 kebab-case로 변환하는 방법

텍스트를 붙여 넣거나 입력

첫 번째 칸에 구절을 입력하십시오. 결과가 두 번째 칸에 바로 나타나므로, 입력하는 동안 바뀌는 모습을 지켜볼 수 있습니다.

이름 확인

자연스럽게 읽히고 너무 길지 않은지 확인하십시오. 약 예순 글자가 넘는 주소는 검색 결과에서 잘립니다. 좋은 슬러그는 짧고 페이지가 무엇인지 말해 줍니다.

복사

복사 버튼을 누르고 필요한 곳에 결과를 붙여 넣으십시오. 같은 줄의 다른 형태는 아래를 보십시오.

같은 줄의 일곱 가지 표기

형태 표

변환기 아래의 표는 예시 줄을 사이트가 제공하는 일곱 가지 형태로 모두 보여 줍니다. 대문자, 소문자, Title Case, snake_case, kebab-case, camelCase, URL 슬러그입니다. 같은 단어가 각 형태에서 어떻게 보이는지 빠르게 확인하는 방법입니다.

이 형태들은 어디서 왔을까

두 가지 알파벳

대문자와 소문자는 한때 서로 다른 두 알파벳이었습니다. 대문자는 로마의 것으로 끌로 돌에 새겼고, 소문자는 카롤링거 소문자에서 내려온 것으로 양피지 위를 빠르게 움직이는 펜이 빚어냈습니다. 인쇄공들은 이 둘을 별개의 상자, 곧 위 칸(upper case)과 아래 칸(lower case)에 보관했고, 상자가 사라진 뒤에도 이름은 오래 남았습니다.

공백 없는 이름

프로그래밍 형태들은 훨씬 젊으며 하나의 문제를 풀기 위해 발명되었습니다. 이름에는 공백이 들어갈 수 없다는 것입니다. snake_case는 초기 C에서, camelCase는 Smalltalk에서, kebab-case는 Lisp에서 나왔고, URL 슬러그는 공백과 악센트가 허용되지 않는 주소에 사람의 제목을 넣어야 할 필요에서 나왔습니다.

실제로 잘 통하는 이름

짧고 설명적으로

좋은 kebab-case 이름은 가능한 한 적은 단어로 그것이 무엇인지 말해 줍니다. contact-us가 please-get-in-touch-with-our-team보다 낫습니다. 텍스트를 kebab-case로 변환할 때는 먼저 구절을 줄이십시오.

시간이 지나도 변하지 않게

주소의 이름은 약속입니다. 다른 사이트들이 거기에 링크를 겁니다. 개편 이후에도 여전히 맞을 이름을 고르고, 날짜와 버전 번호는 그것이 핵심이 아닌 한 피하십시오.

프로젝트 전체에서 일관되게

모든 페이지 주소, 클래스 이름, 파일 이름이 같은 규칙을 따른다면 새로 온 사람도 이름을 올바르게 짐작할 수 있습니다. 새 페이지를 위해 텍스트를 kebab-case로 변환할 때는 이웃 페이지에서 패턴을 확인하십시오.

원한다면 불용어 없이

어떤 사람들은 주소를 짧게 하려고 the, a, of 같은 단어를 뺍니다. 취향의 문제입니다. 짧은 주소는 더 말끔하고, 온전한 주소는 소리 내어 읽기에 더 좋습니다.

실제 프로젝트에서의 kebab-case

CSS 클래스 이름 짓기

스타일시트의 컴포넌트 이름은 하이픈으로 이은 짧은 구절이 가장 잘 읽힙니다. card, card-title, card-footer 같은 식입니다. BEM 같은 방법론은 변형을 위해 이중 하이픈과 밑줄을 더하지만, 모든 클래스의 바탕은 여전히 하이픈으로 이은 소문자 이름입니다. 클래스를 위해 텍스트를 kebab-case로 변환하면 다음 개발자에게 짐작할 수 있는 이름을 주는 것입니다.

사이트의 파일과 폴더 이름 짓기

사이트의 구조는 흔히 주소를 그대로 따르며, what-to-plant-in-april.html이라는 파일이나 garden-guides라는 폴더가 있습니다. 일관된 하이픈 이름은 구조를 둘러보기 쉽고, 링크하기 쉽고, 시스템 사이를 옮기기 쉽게 해 줍니다. 페이지에 데이터 파일이 필요하다면 CSV를 JSON으로 변환과 사이트의 다른 변환기들이 준비해 줄 수 있으며, 결과물에도 같은 이름 규칙이 적용됩니다.

버전 관리의 브랜치와 태그 이름 짓기

작업마다 브랜치를 쓰는 팀은 fix-login-redirect나 add-search-filter 같은 이름을 붙입니다. 브랜치 이름은 목록, 풀 리퀘스트, 채팅에서 읽히므로 하이픈으로 이은 짧은 구절이 훑어보기 쉽습니다. 많은 팀이 유형과 슬래시를 앞에 붙입니다. feature/add-search-filter처럼 말입니다. 슬래시 뒤 부분을 만들려면 작업의 제목으로 텍스트를 kebab-case로 변환하십시오.

속성과 사용자 지정 속성 이름 짓기

--space-large나 --brand-primary 같은 CSS 사용자 지정 속성은 관례상 kebab-case이며 HTML 데이터 속성도 그렇습니다. 색도 다룬다면 그런 이름 뒤에 있는 값에는 HEX를 RGB로 변환 표기가 필요할 수 있습니다.

옛 이름과 새 이름의 기록 남기기

파일이나 클래스를 한꺼번에 이름 바꿀 때는 옛 이름과 새 이름을 두 열로 적은 목록을 남기십시오. 찾아 바꾸기, 리디렉션, 동료에게 무슨 일이 있었는지 설명하는 데 도움이 됩니다. 변환기는 새 이름을 일관되게 만들고, 목록은 변경을 감사할 수 있게 만듭니다.

오래가는 주소 만들기

독자를 먼저 생각하세요

주소는 기계보다 먼저 사람이 읽습니다. 짧고 분명한 주소는 방문자에게 링크가 어디로 데려갈지 알려 주고 클릭하도록 북돋웁니다. 슬러그를 위해 텍스트를 kebab-case로 변환할 때는 다른 설명 없이 메시지에 붙여 넣은 모습을 상상하고, 그것이 말이 되는지 물어보십시오.

섹션을 반복하지 마세요

주소에 이미 recipes라는 폴더가 있다면 페이지를 best-recipes-for-summer라고 부를 필요가 없습니다. summer-salads 같은 이름이면 충분하고, 주소는 메아리 없이 recipes/summer-salads로 읽힙니다.

텍스트를 kebab-case로 변환할 때의 함정

하이픈이 빼기를 뜻하는 곳에서 쓰기

대부분의 프로그래밍 언어에서 이름 속의 하이픈은 빼기입니다. 그런 언어의 변수에는 kebab-case를 쓰지 마십시오.

이름이 이미 있을 수 있음을 잊기

슬러그가 같은 두 페이지는 충돌합니다. 공개하기 전에 사이트나 프로젝트를 확인하십시오.

공개된 주소 바꾸기

주소가 공개되면 바꾸는 순간 링크가 깨집니다. 꼭 바꿔야 한다면 옛 주소에서 리디렉션을 설정하십시오.

매우 긴 이름

긴 주소는 공유하기 불편하고 검색 결과에서 줄여져 표시됩니다. 변환하기 전에 구절을 다듬으십시오.

변환 전에 사람들이 묻는 질문

문장 부호는 어떻게 되나요?

단어 사이의 경계로 취급되며 옮겨지지 않습니다.

숫자는 유지되나요?

네, 독립된 단어로서 하이픈으로 구분됩니다.

camelCase 입력도 처리하나요?

네. 단어 안의 대문자가 자르는 지점을 표시하므로 fooBar는 foo-bar가 됩니다.

다른 언어에도 쓸 수 있나요?

네, 페이지 언어의 규칙으로 처리됩니다. 중국어와 일본어처럼 공백 없이 쓰는 문자는 하나의 단어로 돌아옵니다.

제 텍스트가 업로드되나요?

아니요. 여기에 입력한 내용은 어디로도 전송되지 않으므로, 초안, 비밀번호, 고객의 이름도 텍스트 편집기에서만큼 안전합니다.

밑줄로 바꾸려면 어떻게 하나요?

텍스트를 snake_case로 변환을 쓰십시오.

실제 사용 예

웹사이트에 새 섹션을 추가하는데 편집자가 Spring Garden: What To Plant In April (and Why)라는 제목을 주었다고 해 봅시다. 붙여 넣으면 spring-garden-what-to-plant-in-april-and-why가 읽힙니다. 길어서 제목을 What to Plant in April로 줄여 다시 변환하면 what-to-plant-in-april이 됩니다. 이것을 파일 이름과 주소로 쓰고, 같은 단어를 같은 형태로 스타일시트의 제목 클래스로도 씁니다. 세 곳, 이름 하나, 한 번만 쓰면 됩니다.

간단한 점검표

변환 전

이름이 말해야 하는 것으로 구절을 줄이십시오. 기존 이름과 겹치는 것이 없는지 확인하십시오.

변환 중

구절을 붙여 넣고, 결과를 읽고, 자연스럽고 적당히 짧은지 확인하십시오.

변환 후

필요한 모든 곳에서 같은 이름을 쓰고, 공개된 주소를 바꾸게 되면 리디렉션을 설정하십시오.

흔한 실수

변수 이름에 kebab-case 쓰기

대부분의 언어에서 하이픈은 빼기를 뜻합니다.

이름을 너무 길게 짓기

짧은 이름이 공유하고 기억하기 쉽습니다.

공개된 주소 바꾸기

링크가 깨집니다. 꼭 필요하면 리디렉션하십시오.

텍스트는 기기에 머뭅니다

변환은 로컬에서 이루어집니다. 텍스트는 여러분의 브라우저가 처리하며 아무것도 어디로도 전송되지 않습니다. 나중에 지울 것도, 만들어야 할 계정도 없습니다. 이것이 텍스트를 kebab-case로 변환하는 소박한 방법입니다.

요약

여기서 텍스트를 kebab-case로 변환하려면 한 줄을 붙여 넣고, 단어로 잘리고, 소문자로 바뀌고, 하이픈으로 이어진 결과를 읽으면 됩니다. 이미 camelCase로 쓰인 줄도 그 지점에서 잘리므로 fooBar는 foo-bar가 됩니다. 페이지는 문장 부호를 유지하지 않습니다. 쉼표, 마침표, 대시는 옮겨 갈 문자가 아니라 단어 사이의 경계이며, CSS 클래스나 파일 이름에는 원하는 바이지만 산문에는 그렇지 않습니다. 단어로 자르려면 경계가 필요하므로, 공백 없이 쓰는 중국어와 일본어는 하나의 단어로 돌아옵니다. 소문자 변환은 페이지의 언어를 따릅니다. 웹은 검색 엔진이 하이픈을 공백으로 읽기 때문에 하이픈을 선호합니다. 아무것도 업로드되지 않습니다.