본문으로 건너뛰기
J
피드

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

frontend 약 4분
tags
#ux#forms#html#autocomplete#address
vote
0
댓글
북마크
원문 보기

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

  • 1

    ZIP 먼저 받으면 3개 필드 자동완성 + 주소 검색 범위 1.6억 → 수천 개로 축소

  • 2

    Amazon, Target, Walmart 전부 ZIP을 맨 아래에 놓고 있음

  • 3

    inputmode='numeric' + autocomplete 속성만 제대로 써도 UX가 극적으로 개선됨

  • 주소 입력 폼에서 우편번호를 맨 먼저 받으면 도시, 주, 국가 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로 미리 채워서) 받고 그다음 우편번호. 핵심은 "이미 알고 있는 걸 다시 입력시키지 말라"는 거임

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

prev

이전 기사 (P)

댓글

댓글

댓글을 불러오는 중...

관련 기사

frontend

미래적인 텍스트를 만드는 6가지 영화 로고 꼼수

2016년에 나온 타이포그래피 글이지만, SF 영화 로고가 왜 비슷하게 ‘미래적’으로 보이는지 꽤 웃기고 정확하게 해부한다. 기울임, 각진 곡선, V자 형태, 글자 결합, 일부 획 제거, 금속 질감과 별 배경까지 더하면 대충 2092년 느낌이 난다는 식이다.

frontend

브라우저에서 진짜 하늘과 행성 대기를 렌더링하는 법

이 글은 파란 하늘, 노을, 행성 대기를 셰이더로 렌더링하는 과정을 단계별로 파고든다. Rayleigh 산란, Mie 산란, 오존 흡수, 깊이 버퍼, 행성 스케일 처리, LUT 기반 최적화까지 다뤄서 WebGL·React Three Fiber 쪽 개발자에게 꽤 실전적인 자료다.

frontend

블로그 글이 현재 시간을 알려준다? CDN 헤더로 만든 서버리스 시계 실험

이 글은 Cloudflare CDN의 응답 헤더와 브라우저 PerformanceResourceTiming API를 이용해 웹페이지 안에서 현재 시간을 추정하는 실험을 다룬다. NTP처럼 전용 시간 서버를 운영하지 않고도 CDN이 사실상 시간 기준점처럼 동작할 수 있다는 아이디어다. 실제 테스트에서는 웹 시계 오차 범위가 약 60ms로, ntpdig의 약 6ms보다 한 자릿수 정도 덜 정밀했다.

frontend

쿼리 스트링 차단 선언한 개인 웹사이트 운영자의 빡침

한 개인 웹사이트 운영자가 자기 사이트 URL에 임의의 쿼리 스트링을 붙이는 관행을 아예 막겠다고 선언했다. 특히 ref, UTM 같은 추적 파라미터를 남의 URL에 붙이는 건 사용자와 사이트 운영자 모두에게 무례한 일이라는 주장이다.

frontend

번은 좋은데, 이제 앤트로픽 품에 있어서 불안하다는 얘기

글쓴이는 번이 빠르고 실용적인 자바스크립트 런타임이라는 점은 인정하지만, 앤트로픽 인수 이후 장기적인 방향을 신뢰하기 어려워졌다고 말한다. 특히 클로드 코드의 품질 저하, 과금 혼란, 서드파티 하네스 제한 사례를 보며 번도 같은 제품 운영 방식에 휘말릴 수 있다고 우려한다.