본문으로 건너뛰기
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

개인 웹사이트에 JSON-LD 넣는 법, 검색엔진과 크롤러가 내 사이트를 제대로 읽게 만들기

개인 웹사이트에 JSON-LD 구조화 데이터를 추가해 검색엔진과 크롤러가 사이트, 사람, 글, 프로젝트를 더 정확히 이해하게 만드는 실전 가이드야. WebSite, Person, ProfilePage, BlogPosting 같은 노드를 어떻게 연결하고 어느 페이지에 넣어야 하는지 예시 중심으로 설명해.

frontend

Deno, 웹 프로젝트를 데스크톱 앱으로 묶는 `deno desktop` 공개

Deno가 TypeScript 파일 하나부터 Next.js 앱까지 데스크톱 앱으로 패키징하는 `deno desktop`을 공개했다. 아직 안정 릴리스는 아니고 Deno v2.9.0 canary에서만 쓸 수 있지만, 운영체제 WebView 기반의 작은 바이너리, 프레임워크 자동 감지, 내장 자동 업데이트까지 한 번에 노린다.

frontend

파비콘 안에 웹사이트를 숨겨 넣은 개발자, 진짜 됨

한 개발자가 웹사이트의 파비콘 이미지를 작은 저장소처럼 사용해 HTML을 픽셀 RGB 값 안에 넣고, 브라우저에서 다시 읽어 렌더링하는 실험을 했다. 208바이트짜리 HTML payload에 4바이트 길이 헤더를 붙여 총 212바이트를 만들었고, 이를 9x9 픽셀 PNG 안에 87% 사용률로 저장했다.

frontend

스크린이 절대 못 보여주는 색은 어디에 있을까

이 글은 우리가 화면에서 보는 색이 인간이 볼 수 있는 색 전체가 아니라, sRGB와 Display-P3 같은 색역 안에 갇힌 일부라는 점을 파고든다. 특히 숲, 바닷속, 새와 나비의 구조색, 생물발광, 교통신호 LED 같은 실제 세계에는 모니터와 카메라가 제대로 담지 못하는 청록색과 녹색 계열이 꽤 많다는 얘기다. 디스플레이, 카메라, 조명, 렌더링을 다루는 개발자라면 “색상값 하나”가 생각보다 물리와 표준의 타협이라는 걸 체감하게 된다.

frontend

크롬, 매니페스트 버전 2 우회로까지 닫는다

구글 크롬이 매니페스트 버전 2 확장 지원을 사실상 최종 종료 단계로 밀어넣고 있다. 기존에는 플래그나 레지스트리 설정으로 유블록 오리진 같은 확장을 살리는 우회가 있었지만, 크로미움 150과 151을 거치며 그 우회 코드까지 제거되는 흐름이다.