URL 퍼센트 인코딩: %20, +, %2F는 실제로 무슨 뜻일까

퍼센트 인코딩은 URL이 안전하게 담지 못하는 문자를 퍼센트 기호(%)와 16진수 바이트 값으로 표기하는 방식이에요. 공백은 %20, 앰퍼샌드는 %26, 슬래시는 %2F가 됩니다. 이 인코딩은 링크의 구조를 지켜 줘요. &나 = 같은 문자가 쿼리 문자열의 각 부분을 나누기 때문이에요.

URL 인코딩·디코딩URL에 %20 같은 코드가 가득해요무료로 사용하기

인코딩하지 않아도 되는 문자

URL의 바탕이 되는 URI 표준(RFC 3986)은 몇몇 문자를 그대로 둡니다. A부터 Z, a부터 z까지의 영문자, 숫자, 그리고 - _ . ~ 네 기호예요. 이 문자들은 인코딩할 필요가 없어요. 그 밖의 문자들은 URL에서 맡은 역할이 있습니다. 콜론(:)은 스킴과 나머지를 나누고, 슬래시는 경로를 나누고, 물음표는 쿼리의 시작, 샵(#)은 프래그먼트의 시작을 표시하며, &와 =는 쿼리를 이름과 값으로 나눕니다. 역할을 가진 문자를 구조가 아니라 데이터로 쓰려면 반드시 인코딩해야 해요.

그래서 같은 문자라도 자리에 따라 인코딩이 필요할 수도, 아닐 수도 있어요. 쿼리 값 안의 앰퍼샌드는 %26이어야 합니다. 그렇지 않으면 링크가 엉뚱한 곳에서 끊어져요. 링크 경로에 있는 앰퍼샌드는 그냥 문자일 뿐이에요.

영문 이외의 문자

기본 영문을 벗어난 문자는 UTF-8 바이트로 바꾼 뒤, 각 바이트를 퍼센트 코드로 씁니다. café의 é는 바이트 C3과 A9이므로 %C3%A9가 되고, 단어 전체는 caf%C3%A9가 돼요.

간단한 예로 규칙을 확인해 볼게요. 텍스트 a b&c=d/é를 컴포넌트 방식으로 인코딩하면 a%20b%26c%3Dd%2F%C3%A9가 됩니다. 안전한 문자, 숫자, 기호가 아닌 모든 문자가 인코딩돼요. 공백, 앰퍼샌드, 등호, 슬래시, 그리고 액센트 문자가 모두 여기에 해당합니다.

컴포넌트 또는 전체 URL

인코딩에는 두 가지 방식이 있고, 각각 이유가 있어요. 컴포넌트 인코딩은 예약 문자를 모두 데이터로 취급합니다. 검색어나 링크 안의 파일 이름처럼 값 하나를 다룰 때 씁니다. "rock & roll"을 검색어로 인코딩하면 rock%20%26%20roll이 되어, 앰퍼샌드가 값 안에 그대로 머물러요.

전체 URL 인코딩은 구조를 유지합니다. https://example.com/a b를 인코딩하면 https://example.com/a%20b가 되며, 슬래시와 콜론은 건드리지 않아요. 완전한 주소를 올바른 형태로 만들 때 쓰고, 링크 안에 들어갈 값에는 쓰지 마세요.

URL 도구에는 이 때문에 컴포넌트와 전체 URL 설정이 있습니다. 전체 URL 디코딩은 %26, %3D처럼 이스케이프된 구조 문자를 그대로 남겨 두므로, 디코딩한 뒤에도 링크가 제대로 작동해요.

더하기 기호와 폼 데이터

웹 폼은 다른 관례를 씁니다. 폼 데이터로 전송할 때는 공백을 %20 대신 +로 씁니다. 실제 더하기 기호는 %2B로 쓰고요. 그래서 C++ tips라는 문구는 폼 데이터에서 C%2B%2B+tips, 일반 컴포넌트 인코딩에서는 C%2B%2B%20tips가 됩니다.

디코딩도 같은 차이가 있어요. 쿼리 문자열에서 +는 보통 공백을 뜻합니다. 링크 경로에서는 +가 그냥 더하기 기호예요. 도구는 +를 공백으로 사용(폼 데이터)를 켰을 때만 +를 공백으로 읽으니, 경로나 더하기 기호가 실제 값인 경우에는 끄고 쓰세요.

긴 쿼리 문자열 읽기

링크는 물음표 뒤에 설정값을 담는 경우가 많아요. 다음 예를 보세요:

https://shop.example/search?q=red%20shirt&size=M&tag=summer%2Bsale

디코딩하면 검색어는 red shirt, 사이즈는 M, 태그는 summer+sale이라는 뜻이에요. %2B는 인코딩된 값이므로 더하기 기호로 남습니다. 링크를 URL 도구에 붙여 넣으면 디코딩 후 각 이름과 값을 목록으로 보여 주어서 긴 링크도 쉽게 읽을 수 있어요. 추적 설정 없이 더 짧은 주소만 원한다면 먼저 추적 태그 제거를 써 보세요.

이중 인코딩

가장 흔한 실수는 값을 두 번 인코딩하는 것입니다. %20을 다시 인코딩하면 %2520이 되는데, 퍼센트 기호 자체가 %25로 인코딩되기 때문이에요. 그러면 페이지는 값 안에서 문자 그대로의 %20을 찾고, 검색이나 페이지가 일치하지 않게 됩니다. 링크는 한 번 디코딩해서 결과를 확인하고, 필요할 때만 값을 인코딩하세요.

잘못된 이스케이프

퍼센트 기호 뒤에는 16진수 두 자리가 와야 하고, 액센트 문자의 숫자는 올바른 UTF-8을 이뤄야 합니다. 중간에 잘린 링크나 텍스트에 잘못 입력한 퍼센트 기호는 %E0%A4%A처럼 깨진 이스케이프를 남길 수 있어요. 도구는 해석할 수 있는 부분만 디코딩하고, 깨진 바이트는 적힌 그대로 두며, 해석하지 못한 개수를 알려 줍니다. 첫 오류에서 멈추지 않아요.

예외 상황

• 직접 입력한 링크의 공백. 브라우저 주소창은 공백을 자동으로 인코딩해 주지만, 문서에 복사한 링크에는 여전히 날 공백이 들어 있을 수 있어요. 다음으로 넘기기 전에 인코딩하세요.
• 영문이 아닌 도메인 이름. 이 경우 punycode라는 별도 체계를 사용하며, 경로나 쿼리를 인코딩해도 호스트 이름은 바뀌지 않아요.
• 이모지의 절반. 복사 과정에서 서로게이트 절반만 남으면 인코딩할 수 없어요. 도구는 이를 대체 문자로 바꾸고 그 사실을 알려 줍니다.
• 링크 속 Base64. 링크의 Base64 값은 고유한 규칙을 따르며, + 와 / 대신 - 와 _ 를 씁니다. Base64 알아보기를 참고하세요.

fixmint로 하는 방법

1. 텍스트 또는 URL 칸에 텍스트나 링크를 붙여 넣으세요.
2. 인코딩 또는 디코딩을 고른 다음, 값 하나라면 컴포넌트, 전체 주소라면 전체 URL을 선택하세요.
3. 웹 폼에서 복사한 링크라면 +를 공백으로 사용(폼 데이터)를 체크하세요.
4. 링크라면 디코딩된 쿼리 매개변수에서 각 이름과 값을 확인하세요.
5. 결과를 복사하세요.

빠른 답변

%20은 무슨 뜻인가요?

공백입니다. 바이트 값이 16진수로 20이에요.

링크에 %20 대신 +가 있는 이유는 무엇인가요?

링크가 폼에서 왔을 가능성이 높아요. 폼에서는 +가 공백을 뜻합니다. "+를 공백으로 사용(폼 데이터)" 옵션으로 디코딩할 수 있어요.

링크에 %2520이 보이는 이유는 무엇인가요?

값이 두 번 인코딩된 것입니다. %20의 퍼센트 기호가 다시 %25로 인코딩됐어요. 한 번 디코딩하면 %20이 되고, 한 번 더 디코딩하면 공백이 나옵니다.