자동 접두사 URL — 몇 분을 절약해주는 사소한 기능

링크 단축기 폼에 allegro.pl을 입력합니다. 대부분의 링크 단축기는 이것이 올바른 URL이 아니라고 알려주며, 앞에 https://를 붙여 다시 입력하라고 합니다. 하지만 cutty.dev는 자동으로 https://를 추가하고 계속 진행합니다.

이것은 언급할 가치도 거의 없는 기능처럼 들립니다. 실제로 이는 다음과 같은 차이입니다:

• "붙여넣기, 짧은 링크가 생기고 창을 닫음" (2초)
• "붙여넣기, 오류 발생, 메시지 읽기, https 추가, 다시 시도, 링크 획득" (15~20초)

URL을 붙여넣는 월별 횟수에 곱하고, 오류 메시지를 읽으며 느끼는 좌절감을 더하며, “아, 그렇구나 프로토콜이군” 하는 순간도 추가하세요. 이는 개인당 월 단위로 분 단위로 측정되는 사소한 요소입니다.

cutty.dev가 정확히 무엇을 하는지

양식에 텍스트를 붙여넣었습니다. 서버로 전송하기 전에 JavaScript는 해당 텍스트가 특정 프로토콜(http://, https://, ftp://, mailto: 등)로 시작하는지 확인합니다. 만약 아니라면 시스템은 이를 프로토콜이 없는 도메인으로 간주하고 앞에 https://를 추가합니다.

즉:

• allegro.pl → https://allegro.pl
• github.com/twoj-profil/projekt → https://github.com/twoj-profil/projekt
• www.gazeta.pl → https://www.gazeta.pl

무언가 이미 프로토콜을 가지고 있는 경우(부적절하더라도), 시스템은 그대로 유지하고 계속 확인합니다:

• http://example.com → http://example.com로 유지 (허용됨)
• ftp://example.com → 거부됨 (http/https만 가능)
• javascript:alert(1) → 거부됨 (XSS 보호)

왜 나는 이걸 가지고 있는데 다른 사람들은 안 가지

대부분의 URL 단축기에서는 new URL(string)을 통해 표준 URL 유효성 검사를 수행합니다. 브라우저/자바스크립트의 URL 생성자는 **엄격(strict)**합니다 — 프로토콜이 없으면 오류를 발생시킵니다. new URL("allegro.pl")의 기본 출력은 TypeError입니다.

대부분의 애플리케이션에서 이는 올바른 동작입니다. 하지만 사용자가 주소 표시줄이나 다른 애플리케이션에서 URL을 복사하여 붙여넣는 링크 단축 폼에서는 이 엄격함이 도움이 아닌 장애물이 됩니다.

해결책은 5줄의 자바스크립트로 구성됩니다:

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalsza walidacja przez new URL(normalized)
}

코드 5줄로 사용자 하루당 불필요한 스트레스를 몇 초라도 줄일 수 있습니다. 왜 대부분의 시장이 이를 하지 않는지 모르겠습니다. 아마도 “표준”이라는 것이 “URL 생성자가 그렇게 동작한다”는 뜻이기 때문일까요.

UX의 사소한 요소들은 불균형적으로 중요합니다

cutty.dev에는 여러 가지 기능이 있는데, 이는 어떤 기능 목록에도 명시되어 있지 않습니다. 각각의 항목이 개별적으로는 사소해 보이기 때문입니다.

• 공백 제거 — 유효성 검사 전 붙여넣은 URL의 끝 공백으로 인해 오류가 발생하지 않음
• 해시 보존 — https://example.com/page#section은 축약 후에도 #section을 유지함
• 쿼리 문자열 보존 — ?utm_source=test는 잘리지 않고 전달됨
• 자동 프로토콜 업그레이드 — 소스 URL이 TLS를 지원할 때 http://가 https://로 변경됨 (계획 중, 아직 LIVE 아님)
• IDN 도메인 — źdźbło.pl은 자동으로 punycode로 변환됨
• 슬러그 내 폴란드어 문자 — 사용자 지정 끝부분 생성 시 ASCII로 자동 변환됨 (różowy-link → rozowy-link)
• 위험한 프로토콜 감지 — javascript:, data:, file:, mailto:는 구체적인 메시지와 함께 거부됨

이러한 세부 사항들 각각은 누군가에게 5~30초의 시간과 짜증나는 순간을 절약해 줍니다. 합치면 “이 앱이 마음에 들어”와 “일단 작동해” 사이의 차이가 생깁니다.

UX 디테일 이후의 방향은?

미래에 하고 싶은 일 목록:

• 스마트 붙여넣기 — 사용자가 다른 단어 사이에 URL을 포함하는 텍스트를 붙여넣을 때 감지하고 URL만 추출합니다.
• 일괄 붙여넣기 — 줄별로 나열된 URL 목록을 붙여넣으면 여러 개의 짧은 링크를 동시에 생성합니다.
• 추천 슬러그 — 대상 페이지의 제목을 기반으로 선택할 수 있는 3가지 브랜드형 끝부분을 제안합니다.
• 자동 OG 미리보기 — URL을 붙여넣은 후 클릭하기 전에 Open Graph 카드 미리보기를 즉시 표시합니다.

이 각각도 “아무것도 아닌 것처럼 보이는 5줄짜리 함수”입니다. 전체적으로 보면, ‘괜찮은’ 도구와 ‘매일 사용하고 싶은’ 도구 사이에는 차이가 있습니다.

직접 해보기

무언가를 붙여넣으세요 — allegro.pl 또는 github.com 또는 news.ycombinator.com. 시스템이 자동으로 프로토콜을 추가하고 계속 진행합니다. 기다림 없이, 오류 없이, "다시 시도하세요" 메시지 없이.

이 UX 세부 사항에 관심이 있으시다면, 앞으로 어떤 방향으로 나아가야 할지 알려주세요. hello@cutty.dev