본문으로 건너뛰기
J
0
r/jeffnews • HN • • 약 4분

우편번호를 맨 먼저 받으세요 — 주소 폼 UX에 대한 통렬한 비판

frontend

요약

ZIP 코드 5자리로 도시, 주, 국가를 자동완성할 수 있는데 왜 아직도 맨 아래에 넣느냐는 주장. API 5줄, inputmode 속성 하나면 되는 해결된 문제라는 거임.

기사 전체 정리

  • 주소 입력 폼에서 우편번호를 맨 먼저 받으면 도시, 주, 국가 3개 필드를 자동완성할 수 있다는 주장. 미국 ZIP 코드 5자리면 충분한데, 거의 모든 사이트가 주소 → 도시 → 주 드롭다운(50개 중에서 Illinois 찾기) → ZIP → 국가 드롭다운(200개 중에서 "T"로 분류된 "The United States" 찾기) 순서로 시키고 있다는 거임

  • API 코드가 진짜 5줄임:

    const res = await fetch(`https://api.zippopotam.us/us/${zip}`)
const data = await res.json()
city.value = data.places[0]["place name"]
state.value = data.places[0]["state"]
country.value = "United States"

  • 보너스: ZIP을 먼저 알면 주소 자동완성이 1.6억 개 주소 대신 수천 개만 검색하면 됨. 더 빠르고, 더 정확하고, 타이핑 줄고, 데이터도 깨끗해짐

  • 치욕의 전당 분류가 웃김:

    • Tier 1: ZIP을 맨 아래에 놓는 곳. Amazon, Target, Walmart 전부 여기. 3개 필드 자동완성할 데이터를 갖고 있으면서 마지막에 놓음
    • Tier 2: ZIP을 수집해놓고 아무것도 안 하는 곳. 소화기를 유리 상자 안에 넣어두고 "깨지 마시오"라고 써놓은 거랑 같음
    • Tier 3: 검색도, type-ahead도 없는 240개국 스크롤 드롭다운. US가 "T" 아래에 있으면 보너스 점수
    • Tier 4: 뒤로가기 누르면 14개 필드 전부 리셋되는 폼. "이걸 만든 개발자는 매일 밤 8시간 숙면한다. 그게 가장 소름 끼치는 부분임"

💡팁

> inputmode="numeric" 하나면 모바일에서 ZIP 입력할 때 숫자 키패드가 뜸. autocomplete 속성에 postal-code, address-line1, country를 제대로 쓰면 브라우저 자동완성이 45초를 아껴줌. 브라우저가 도와주려는 걸 폼이 방해하면 폼이 잘못된 거임

  • 반론에 대한 대응도 있음: "우편번호가 글로벌하게 유니크하지 않다"는 건 맞음. 그러면 국가를 먼저(IP로 미리 채워서) 받고 그다음 우편번호. 핵심은 "이미 알고 있는 걸 다시 입력시키지 말라"는 거임

핵심 포인트

  • ZIP 먼저 받으면 3개 필드 자동완성 + 주소 검색 범위 1.6억 → 수천 개로 축소
  • Amazon, Target, Walmart 전부 ZIP을 맨 아래에 놓고 있음
  • inputmode='numeric' + autocomplete 속성만 제대로 써도 UX가 극적으로 개선됨

인사이트

기술적으로 새로운 건 없지만, 2009년 폼 템플릿을 아무 의심 없이 복사하는 관성에 대한 통렬한 비판. 프론트엔드 개발자가 한번쯤 읽어볼 만함.

#ux#forms#html#autocomplete#address
원문 보기
댓글 뒤로가기
이전 기사 (p)

댓글

댓글

댓글을 불러오는 중...

관련 기사

frontend

내 사이트에 먼저 올리고 SNS는 그냥 배포 채널로 써라 - POSSE 전략

POSSE(Publish on your Own Site, Syndicate Elsewhere)는 콘텐츠를 내 사이트에 먼저 올리고, 트위터/인스타/페북 같은 SNS에는 복사본만 뿌리는 방식임. 데이터 소유권도 챙기고 SNS 팔로워도 놓치지 않는 ㄹㅇ 실용적인 전략. IndieWeb 운동의 핵심 철학이기도 함.

frontend

윈도우 네이티브 앱 개발이 이렇게 개판인 줄 몰랐음 (현직 개발자 회고)

윈도우 개발 추억 있는 개발자가 소소한 유틸리티 앱 하나 만들려다 현실에 박살난 썰. Win32부터 WinUI 3까지 수십 년간 쌓인 레거시와 미완성 API들 때문에 결국 '그냥 Electron 쓰는 게 맞다'는 결론에 도달함. 마이크로소프트가 자기 플랫폼을 방치하는 수준이 ㄹㅇ 심각함.

frontend

JS 번들 뚱뚱해지는 진짜 이유 3가지 - npm 의존성 다이어트 해야 할 때

npm 패키지 트리가 왜 이렇게 무거워졌는지 분석한 글. 레거시 엔진 지원, 원자적 패키지 설계, 오래된 ponyfill 세 가지가 주범임. e18e 커뮤니티가 이 문제를 해결하려고 열심히 삽질 중ㅋㅋ

frontend

Svelte 5 드디어 출시 — 'Runes'로 리액티비티 완전히 갈아엎음

Svelte 5가 공식 출시되면서 기존 반응형 선언 방식을 싹 날리고 'Runes'라는 새로운 API를 도입했음. $state(), $derived(), $effect() 같은 함수 기반 문법으로 바뀌었고, 성능도 Svelte 4 대비 2배 빨라졌다고 함. Apple, Spotify 같은 대기업들도 이미 마이그레이션 시작했다니 ㄹㅇ 레전드급 업데이트.

frontend

1999년 UI 명예의 전당 — 27년 지나도 유효한 UX 원칙들

1999년에 작성된 UI 명예의 전당 페이지. Caps Lock 경고, MRU 파일/디렉토리 목록, 시작 다이얼로그 설계, 인라인 리스트 그래픽 등 지금도 현역인 UX 패턴들이 정리되어 있음.