주소창 뜯어보기

https://우리가게.com/menu/coffee?size=large#review 같은 주소는 한 덩어리가 아니라 다섯 토막이에요. 물음표 뒤에 붙는 값과 슬래시로 나뉜 경로가 무슨 뜻인지 알면 손님에게 링크를 잘못 보내는 실수가 줄어요.

쉽게 말하면

배달 주문서 한 장이라고 생각하세요. 주소창 한 줄에 사실은 칸이 다섯 개 있어요. 맨 앞 https는 봉투에 붙은 봉인 스티커(뜯긴 흔적이 없다는 표시), 우리가게.com은 어느 가게인지 적는 상호 칸, /menu/coffee는 가게 안 어느 코너의 어떤 상품인지, 물음표 뒤 size=large는 주문서의 옵션 칸, 샵(#) 뒤 review는 "받으면 리뷰 칸부터 봐 주세요" 같은 메모예요. 다섯 칸 중 하나라도 잘못 적히면 주문이 엉뚱한 데로 가요.

주소를 통째로 외울 필요는 없어요. 어디서 어디까지가 한 토막인지만 보이면 돼요. 그게 보이면 손님이 "링크 눌렀는데 이상한 화면이 떠요"라고 할 때 어느 토막이 잘못됐는지 바로 짚을 수 있어요.

토막예시무슨 뜻인가여기가 틀리면
자물쇠https://안전한 방식으로 연결한다는 표시예요브라우저가 "안전하지 않음" 경고를 띄워요
간판우리가게.com어느 가게(사이트)인지예요. 도메인이 여기예요아예 남의 가게로 가요
경로/menu/coffee가게 안 어느 코너, 어떤 상품 화면인지예요없는 페이지 화면이 떠요
물음표 뒤?size=large&ice=yes그 화면에 넘겨 주는 옵션이에요. 검색어·페이지 번호·필터가 여기 들어가요화면은 뜨는데 내용이 달라요
샵 뒤#review같은 화면 안에서 어느 위치로 내려갈지예요화면은 뜨는데 맨 위에서 시작해요

경로: 가게 안 어느 코너인지

간판 바로 뒤, 슬래시(/)로 시작하는 부분이 경로예요. 슬래시가 나올 때마다 한 단계씩 안으로 들어간다고 보면 돼요. /menu 는 메뉴 코너, /menu/coffee 는 메뉴 코너 안의 커피 화면이에요. 어떤 경로가 어떤 화면을 여는지 정하는 규칙은 주소와 화면 연결하기에서 따로 다뤄요.

경로는 한 글자만 달라도 다른 곳이에요. 사람 눈에는 Menu 와 menu 가 같아 보여도, 사이트에 따라 컴퓨터는 다른 화면으로 취급할 수 있어요. 손으로 타이핑해서 링크를 만들지 말고, 열린 화면의 주소창에서 그대로 복사하는 습관이 사고를 거의 다 막아요.

손으로 적은 링크
우리가게.com/Menu/Coffee. (대문자, 끝에 마침표)

카톡 문장 끝에 주소를 쓰고 마침표를 찍으면 마침표까지 주소로 붙어요. 손님은 없는 페이지 화면을 봐요.

주소창에서 복사한 링크
https://우리가게.com/menu/coffee (복사한 그대로, 한 줄 따로)

주소는 문장 안에 섞지 말고 한 줄에 따로 두세요. 마침표도 공백도 안 붙어요.

끝에 붙는 슬래시

/menu 와 /menu/ 는 사이트에 따라 같은 화면으로 갈 수도, 다르게 취급될 수도 있어요. 어느 쪽인지 외울 필요는 없어요. 주소창에 뜬 그대로 복사하면 이 문제 자체가 안 생겨요.

물음표 뒤: 주문서의 옵션 칸

물음표(?) 뒤는 이름=값 짝이 붙는 자리예요. 짝이 여러 개면 앤드(&)로 이어요. ?size=large&ice=yes 는 "크기는 큰 것, 얼음은 넣기"라는 옵션 두 개예요. 화면 자체는 같은 커피 화면이고, 옵션만 달라지는 거예요.

이 자리를 쓰는 곳은 생각보다 많아요. 검색어, 목록의 몇 번째 페이지인지, 가격순 정렬, 쿠폰 코드, 그리고 어느 광고를 보고 왔는지 적는 출처 꼬리표까지 전부 물음표 뒤에 들어가요. 그래서 링크를 보낼 때 물음표 뒤를 잘라 버리면 손님이 엉뚱한 페이지나 빈 검색 결과를 보게 돼요.

주소에 이렇게 보이면손님 화면에서 일어나는 일
/search?q=아메리카노검색창에 아메리카노를 친 결과가 바로 떠요
/menu?page=2메뉴 목록의 두 번째 장이 떠요. 첫 장 손님이 못 보는 상품이 여기 있어요
/menu?sort=price가격순으로 정렬된 상태로 떠요
/event?code=SUMMER10쿠폰 코드가 미리 채워진 이벤트 화면이 떠요
/menu?utm_source=instagram화면은 그대로인데, 통계에 "인스타그램에서 옴"이 기록돼요

물음표 뒤는 전부 보이는 자리예요

물음표 뒤 값은 받는 사람 화면, 카톡 미리보기, 브라우저 방문 기록에 그대로 남아요. 손님 이름이나 전화번호를 여기에 넣어서 링크를 만들면 안 돼요. 단체방에 그 링크가 한 번 올라가면 번호가 그대로 퍼져요. 사람을 구분해야 하면 알아볼 수 없는 긴 코드를 쓰고, 개인정보 자체는 개인정보 규칙대로 화면 뒤에서만 다뤄요.

샵 뒤와 자물쇠, 그리고 이상한 글자

샵(#) 뒤는 같은 화면 안의 위치예요. /menu#review 는 메뉴 화면을 연 다음 리뷰 칸까지 자동으로 내려가 달라는 뜻이에요. 이 토막은 손님의 브라우저만 보고 사이트 쪽으로는 전달되지 않아요. 그래서 여기 뭘 적어도 화면 내용은 안 바뀌고 보는 위치만 바뀌어요.

맨 앞 https 는 연결이 잠겨 있다는 표시예요. http 로 시작하는 링크를 보내면 손님 브라우저가 "안전하지 않음"이라고 띄우고, 손님은 그 자리에서 나가요. 자물쇠가 왜 붙고 어떻게 다는지는 HTTPS와 자물쇠에 있어요.

  1. 1한글이 %EC%95%84 처럼 보여도 깨진 게 아니에요. 주소에는 영문과 몇 가지 기호만 쓸 수 있어서, 한글과 공백은 퍼센트가 붙은 코드로 바뀌어 실려요. 손님이 누르면 원래대로 풀려요.
  2. 2공백은 %20 이나 + 로 바뀌어요. 상품 이름에 띄어쓰기가 있으면 주소에서 이렇게 보여요. 정상이에요.
  3. 3가끔 간판 뒤에 :3000 같은 숫자가 붙어요. 내 컴퓨터에서 시험 중일 때 붙는 문 번호예요. 이 주소를 손님에게 보내면 손님 컴퓨터에는 그 문이 없어서 안 열려요. 게시한 진짜 주소를 보내야 해요.

링크를 잘못 보내는 흔한 장면

장면 1 · 손님에게 이벤트 링크를 보냈는데 로그인 화면이 뜬다

제 화면에서는 이벤트 페이지가 잘 보여서 그 주소를 그대로 복사해 보냈어요. 손님은 로그인하라는 화면만 뜬대요.

사장님만 들어갈 수 있는 경로를 보낸 거예요. 관리 화면이나 미리보기 화면은 경로가 따로 있고, 로그인한 사장님 브라우저에서는 열리지만 손님에게는 잠겨 있어요. 보내기 전에 브라우저의 시크릿 창(로그인이 안 된 새 창)에서 그 링크를 열어 보면 손님이 볼 화면이 그대로 나와요. 이 확인 한 번이 제일 싼 안전장치예요.

장면 2 · 전단지에 적은 주소로 들어가면 없는 페이지가 뜬다

전단지 3천 장에 우리가게.com/event/summer 를 인쇄했어요. 그런데 지금 그 주소로 들어가면 없는 페이지래요.

인쇄 뒤에 경로를 바꾼 거예요. 화면 이름을 /event/summer-sale 로 고치는 순간 옛 경로는 없는 페이지가 돼요. 종이에 찍힌 주소는 고칠 수 없으니, 사이트 쪽에서 옛 주소로 들어온 손님을 새 주소로 보내 주는 장치를 달아야 해요. 이 장치가 주소 옮기기예요. 인쇄물에 적을 경로는 처음부터 짧고 바뀔 일 없는 것으로 고르는 게 먼저고요.

  1. 1주소창에서 그대로 복사해요. 손으로 치지 않아요. 대소문자·슬래시·마침표 사고가 여기서 다 없어져요.
  2. 2물음표 뒤를 읽어 봐요. 이름·전화번호·이메일이 보이면 그 링크는 보내면 안 돼요. 출처 꼬리표나 쿠폰 코드면 그대로 둬요.
  3. 3시크릿 창이나 다른 기기에서 열어 봐요. 로그인 안 된 상태에서 열리는지, 화면 맨 위가 아니라 원하는 위치에서 시작하는지 봐요.
  4. 4보냈을 때 어떻게 보이는지 확인해요. 카톡에 붙여 넣으면 뜨는 사진과 제목 카드는 링크 보낼 때 보이는 모습에서 챙겨요.

바이브캠퍼스에서 직접 보기

지금 보고 있는 이 문서의 주소도 같은 구조예요. 주소창을 보면 간판 뒤에 /wiki/url-anatomy 가 있어요. wiki 가 코너, url-anatomy 가 이 문서의 이름이에요. 위키의 다른 문서를 열면 뒤쪽 토막만 그 문서 이름으로 바뀌고 앞은 그대로예요.

직접 해보기

문서 두 개를 열고 주소창만 비교해 보세요

위키 목록에서 아무 문서나 둘 열고, 주소창에서 어디까지 같고 어디부터 다른지 눈으로 짚어 보세요. 슬래시 뒤 마지막 토막만 바뀌는 게 보이면 경로를 읽을 줄 아는 거예요.

위키 목록 열기

만든 화면의 주소도 마찬가지예요

스튜디오에서 만든 화면을 게시하면 주소가 생겨요. 그 주소도 간판, 경로, 물음표 뒤의 같은 구조예요. 손님에게 보낼 때는 그 게시된 주소를 주소창에서 복사해서 쓰세요. 만드는 중에 보이는 주소는 손님용이 아니에요.

자주 묻는 것

Q. www 가 있는 주소와 없는 주소, 어느 쪽을 보내야 하나요?
대부분의 사이트는 둘 다 같은 화면으로 가게 설정해 둬요. 다만 확인은 해 보세요. 두 주소를 각각 열어 보고 둘 다 뜨면 짧은 쪽을 쓰면 돼요. 한쪽만 뜨면 도메인 연결 설정을 손봐야 해요.
Q. 주소가 너무 길어요. 줄일 수 있나요?
짧은 주소로 바꿔 주는 서비스가 있어요. 대신 단점이 있어요. 받는 사람 눈에 어느 가게로 가는지 안 보여서 낚시 링크로 의심받기 쉬워요. 인쇄물이나 문자처럼 글자 수가 빠듯할 때만 쓰고, 카톡이나 홈페이지에는 원래 주소를 그대로 쓰는 편이 신뢰가 높아요.
Q. 대소문자를 구분하나요?
간판(도메인)은 구분하지 않아요. 우리가게.com 과 우리GAGE.com 은 같아요. 경로는 사이트에 따라 구분할 수도 있어요. 그래서 경로만큼은 주소창에서 복사한 그대로 쓰는 게 안전해요.
Q. 물음표 뒤 값을 손님이 마음대로 바꾸면 어떻게 되나요?
바꿀 수 있어요. 주소창은 누구나 고칠 수 있는 자리예요. 그래서 할인율이나 가격 같은 값을 주소에만 실어 두고 그대로 믿으면 사고가 나요. 손님이 ?discount=10 을 ?discount=90 으로 고칠 수 있으니까요. 돈이 걸린 값은 화면 뒤쪽에서 다시 확인하도록 만들어야 해요. AI에게 "주소에 담긴 값은 믿지 말고 서버에서 다시 검사해 달라"고 말하면 돼요.
Q. 링크를 보냈는데 물음표 뒤가 사라졌어요
몇몇 메신저나 문서 도구가 주소 끝을 잘라 붙이는 경우가 있어요. 특히 앤드(&) 뒤가 잘 사라져요. 보낸 뒤 직접 눌러 보고, 잘리면 주소를 한 줄에 따로 두거나 짧은 주소로 바꿔 보내세요.
Q. 주소에 한글이 들어가면 손님에게 깨져 보이나요?
눌렀을 때는 정상으로 열려요. 다만 복사해서 붙여 넣으면 %EC 같은 코드로 길게 보여서 낯설어요. 손님에게 자주 보낼 화면은 경로를 영문으로 짓는 게 깔끔해요.

확인해 보세요

단골 손님에게 보내려는 링크가 우리가게.com/event?phone=01012345678 이에요. 뭐가 문제일까요?

하나 더

카톡에 "메뉴는 여기서 보세요 우리가게.com/menu." 라고 보냈더니 손님이 없는 페이지가 뜬대요. 원인은?

더 깊이 (안 읽어도 괜찮아요)

비유가 어디서부터 다른가 · 배달 주문서의 옵션 칸은 가게가 받아서 확인하지만, 물음표 뒤 값은 손님이 주소창에서 얼마든지 고칠 수 있어요. 그래서 이 값은 "손님이 이렇게 요청했다"는 힌트일 뿐이고, 가격이나 권한처럼 중요한 판단은 사이트 뒤쪽에서 다시 해야 해요. 주문서 비유는 읽는 법까지만 맞고, 믿어도 되는 정도에서는 달라요.

값 안에 앤드나 물음표가 들어가면 · 앤드(&)는 짝을 나누는 기호라서, 상품 이름에 & 가 들어가면 그대로 쓸 수 없어요. 그럴 때는 %26 처럼 코드로 바꿔 실어요. 한글이 %EC 로 보이는 것과 같은 원리예요. 사장님이 직접 바꿀 일은 거의 없고, 화면이 링크를 만들 때 자동으로 처리해요. 다만 손으로 주소를 조립하다가 이 기호가 섞이면 값이 중간에서 끊겨요.

샵 뒤가 사이트에 전달되지 않는 이유 · 샵 뒤는 처음부터 "이 화면 안에서 어디를 볼지"를 위한 자리라, 브라우저가 사이트에 요청을 보낼 때 이 부분은 떼고 보내요. 그래서 방문 기록 통계에도 잡히지 않고, 사이트 쪽 기록에도 남지 않아요. 어느 광고에서 왔는지 세고 싶으면 샵 뒤가 아니라 물음표 뒤에 적어야 하는 이유가 이거예요.

주소 끝 숫자(문 번호)의 정체 · 간판 뒤에 :3000 처럼 붙는 숫자는 한 컴퓨터 안에서 여러 프로그램이 각자 문을 하나씩 열어 두는 번호예요. 내 컴퓨터에서 시험할 때는 이 문으로 들어가요. 게시된 사이트는 표준 문(https 는 443)을 쓰기 때문에 번호를 안 적어도 돼요. 손님에게 보낸 주소에 이 숫자가 보이면 시험용 주소를 잘못 보낸 거예요.

이것만 기억하세요

  • ·주소는 자물쇠, 간판, 경로, 물음표 뒤, 샵 뒤의 다섯 토막이에요
  • ·경로는 한 글자만 달라도 다른 곳이라 손으로 치지 말고 주소창에서 복사해요
  • ·물음표 뒤는 화면에 넘기는 옵션이고, 누구나 볼 수 있으니 개인정보를 싣지 않아요
  • ·샵 뒤는 같은 화면 안의 위치라 사이트 쪽에는 전달되지 않아요
  • ·보내기 전에 시크릿 창에서 한 번 열어 보면 대부분의 사고가 막혀요
VibeCampus新建作品