슬러그란
슬러그는 웹 주소에서 한 페이지를 단어로 식별하는 부분입니다. example.com/blog/creme-brulee-recipe에서 슬러그는 creme-brulee-recipe입니다. WordPress, Shopify, 그리고 대부분의 정적 사이트 생성기 같은 콘텐츠 시스템은 페이지 제목으로 슬러그를 만듭니다. Shopify에서는 이를 핸들(handle)이라고 부릅니다.
좋은 슬러그는 읽기 쉽고, 입력하기 쉽고, 어떤 브라우저에서도 안전합니다. 즉 소문자, 숫자, 그리고 단어 사이의 구분자 하나로만 이루어집니다. 공백과 문장부호가 없고, 링크를 복사하면 %C3%A9 같은 긴 코드로 바뀌는 악센트 문자도 없습니다.
이 URL 슬러그 생성기는 이런 변환을 목록 전체에 한 번에, 한 줄에 슬러그 하나씩 해 줍니다.
슬러그 생성기 사용 방법
- 제목 (한 줄에 하나씩) 입력란에 제목을 붙여넣습니다. 줄마다 슬러그가 하나씩 만들어지고, 빈 줄은 빈 줄로 남아 결과가 입력 목록과 줄이 맞습니다.
- 슬러그에서 결과를 확인하고 복사를 누릅니다.
- 아래쪽 옵션을 사이트에 맞게 바꿉니다.
- 구분자: 하이픈, 언더바, 점, 없음
- 최대 길이 (0은 제한 없음): 원하는 슬러그의 최대 길이입니다. 긴 슬러그는 들어가는 마지막 완전한 단어에서 자릅니다.
- 소문자: 기본으로 켜져 있습니다. 대문자를 유지하려면 끄세요.
- 악센트 변환 (é → e): 악센트가 붙은 문자와 특수 라틴 문자를 일반 문자로 바꿉니다.
- 불용어 제거: the, a, to, and, of, for 같은 짧은 영어 기능어를 뺍니다.
도구 아래 줄에는 만든 슬러그 개수와 가장 긴 슬러그의 길이가 표시됩니다.
예시
아래 슬러그는 각 제목을 생성기에 실제로 넣어 얻은 결과입니다.
| 제목 | 옵션 | 슬러그 |
|---|---|---|
| 10 Tips & Tricks for Café Owners | 기본값 | 10-tips-and-tricks-for-cafe-owners |
| 10 Tips & Tricks for Café Owners | 불용어 제거 | 10-tips-tricks-cafe-owners |
| Why Your Sourdough Isn’t Rising (and How to Fix It) | 기본값 | why-your-sourdough-isnt-rising-and-how-to-fix-it |
| Why Your Sourdough Isn’t Rising (and How to Fix It) | 최대 길이 20 | why-your-sourdough |
| Straße, Łódź und Ørsted: A Guide | 기본값 | strasse-lodz-und-orsted-a-guide |
| Straße, Łódź und Ørsted: A Guide | 악센트 유지 | straße-łódź-und-ørsted-a-guide |
| The Best Way to Learn a Language | 불용어 제거 | best-way-learn-language |
| Crème Brûlée Recipe | 언더바 | creme_brulee_recipe |
| Hello World | 소문자 끔 | Hello-World |
| Hello World | 구분자 없음 | helloworld |
한글 제목으로 슬러그 만들기
이 도구는 한글을 로마자로 바꾸지 않습니다. 악센트 변환 (é → e) 옵션이 켜진 기본 상태에서는 한글이 모두 빠지고 라틴 문자와 숫자만 남습니다. 한글 슬러그를 원한다면 이 옵션을 끄세요. 아래는 실제 실행 결과입니다.
| 제목 | 옵션 | 슬러그 |
|---|---|---|
| 카페 사장님을 위한 10가지 팁 | 기본값 | 10 |
| 카페 사장님을 위한 10가지 팁 | 악센트 변환 끔 | 카페-사장님을-위한-10가지-팁 |
| 카페 사장님을 위한 10가지 팁 | 악센트 변환 끔, 최대 길이 10 | 카페-사장님을-위한 |
| 대소문자 변환기 사용법 | 기본값 | (빈 줄) |
| 대소문자 변환기 사용법 | 악센트 변환 끔 | 대소문자-변환기-사용법 |
| React 훅 입문: useState 가이드 | 기본값 | react-usestate |
| React 훅 입문: useState 가이드 | 악센트 변환 끔 | react-훅-입문-usestate-가이드 |
한글만 있는 줄이 빈 결과가 되면 상태 줄에 라틴 문자나 숫자가 없는 줄이 있다고 알려 줍니다.
한글 슬러그를 쓸지는 신중하게 정하세요. 주소창에서는 한글로 보이지만, 링크를 복사해 메신저나 문서에 붙여넣으면 퍼센트 인코딩되어 한 글자가 9자로 늘어납니다. 카페-사장님을-위한-10가지-팁은 복사하면 %EC%B9%B4%ED%8E%98-%EC%82%AC%EC%9E%A5%EB%8B%98%EC%9D%84-%EC%9C%84%ED%95%9C-10%EA%B0%80%EC%A7%80-%ED%8C%81이 됩니다. 최대 길이는 인코딩 전 글자 수로 계산하므로 한글 한 글자도 1자로 셉니다. 짧고 공유하기 좋은 주소가 중요하다면 cafe-owner-tips처럼 영어 단어로 직접 쓰는 방법이 많이 쓰입니다.
작동 원리
각 줄은 같은 단계를 거칩니다.
- 앰퍼샌드(&)는 단어 “and”가 되고 아포스트로피는 지워집니다. 그래서 “Isn’t”는 “isn-t”가 아니라 “isnt”가 됩니다.
- 악센트 변환이 켜져 있으면 ß, æ, ø, ł 같은 글자를 풀어서 쓰고, 유니코드 정규화로 é 같은 글자를 e와 악센트 기호로 나눈 다음 기호를 버립니다. 이때 한글 음절은 자모로 나뉘지만 라틴 문자가 아니므로 결과에서 빠집니다.
- 소문자 옵션이 켜져 있으면 소문자로 바꿉니다.
- 이어진 문자와 숫자가 각각 하나의 단어가 됩니다. 문장부호, 여러 개의 공백 등 나머지는 모두 단어 사이의 경계가 됩니다.
- 요청한 경우 불용어를 뺍니다. 제목이 불용어로만 되어 있으면 슬러그가 비지 않도록 그대로 둡니다.
- 단어를 고른 구분자로 이어 붙이고, 최대 길이에 맞춰 단어 경계에서 자릅니다.
모든 처리는 브라우저에서 이루어집니다.
좋은 슬러그를 위한 팁
- 짧게 유지하세요. 의미 있는 단어 3개에서 6개면 대개 충분합니다. 긴 제목은 최대 길이나 불용어 제거로 줄이세요.
- 날짜는 넣지 마세요. 날짜 자체가 페이지의 핵심이 아니라면 말입니다. 연도가 없는 슬러그는 나중에 리디렉션 없이 내용을 갱신할 수 있습니다.
- 한 가지 스타일을 정해 지키세요. 사이트 안에서 하이픈과 언더바를 섞으면 지저분해 보이고 링크를 짐작하기도 어려워집니다.
- 슬러그는 신중하게 바꾸세요. 페이지가 공개되어 링크가 걸린 뒤에 슬러그를 바꾸면, 이전 주소에서 리디렉션을 설정하지 않는 한 기존 링크가 깨집니다.
- 중복을 확인하세요. 제목이 같은 글 두 개는 같은 슬러그를 받습니다. 대부분의 시스템이 끝에
-2를 붙이지만, 제목을 다르게 하는 편이 낫습니다.
슬러그를 만드는 다른 방법
자바스크립트에서 영어 텍스트용으로 간단히 만들면 다음과 같습니다.
'Hello World'.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')결과는 hello-world입니다. 악센트는 처리하지 않으므로 Café는 마지막 글자를 잃고, 한글은 전부 사라집니다. Python에는 python-slugify 패키지가 있고, 대부분의 프레임워크에도 Laravel의 Str::slug, Django의 slugify 같은 슬러그 함수가 들어 있습니다.
스프레드시트에서는 LOWER와 SUBSTITUTE를 이어서 쓸 수 있지만, 악센트와 문장부호마다 SUBSTITUTE가 하나씩 필요하므로 목록을 여기에 붙여넣는 편이 빠릅니다.
관련 도구
웹 주소가 아니라 변수 이름이 필요하다면 케밥 케이스 변환기를 쓰세요. 입력한 그대로 링크 안에 넣어야 하는 텍스트를 인코딩하려면 URL 인코더를, 완성된 링크에 캠페인 추적을 붙이려면 UTM 생성기를 쓰세요.