게시일: 2026년 6월 10일
양식은 웹에서 자주 사용되는 상호작용 지점이지만 사용자에게 상당한 불편을 야기합니다. 브라우저는 이러한 불편함을 줄이기 위해 오랫동안 자동 완성 기능을 제공해 왔으며, 이를 통해 사용자는 신용카드 번호, 주소, 로그인 사용자 인증 정보를 입력하는 것과 같은 반복적인 작업을 하지 않아도 됩니다.
개발자에게는 양식 자동 완성 처리가 어려운 문제입니다. 개발자는 <form> 요소에서 input 또는 change 이벤트를 수신 대기할 수 있지만 이러한 이벤트는 데이터가 필드에 도착한 방식을 알려주지 않습니다. 이러한 명확성 부족으로 인해 양식이 자동 완성되는 정확한 순간에 레이아웃 조정과 같은 특정 로직을 트리거하기가 어렵습니다. 새로운 autofill
이벤트: 현재 Chrome 오리진 트라이얼로 제공됨
Chrome 147부터 브라우저가 자동 완성으로 사용자를 지원할 때 개발자에게 유용한 신호를 제공합니다.
autofill: input 및 change에서 해결하지 못한 문제 해결
input 및 change 이벤트는 사용자가 수동으로 양식 필드를 작성하는 경우와 자동 완성 기능을 사용하는 경우를 구분하지 않는 일반적인 신호입니다.
양식 자동 완성 전용 이벤트가 없으면 개발자가 양식을 작성할 때 유용한 UI 업데이트를 안정적으로 실행하기가 더 어려워집니다. 예를 들어 사용자가 거주 국가를 지정하면 국가에 따라 다른 주 또는 지역을 지정하는 인접한 필드가 표시됩니다. 자동 완성 요청에 응답하여 이 업데이트를 트리거하는 것이 개발자에게는 더 예측 가능하고 사용자에게는 유용합니다. autofill 이벤트는 이 문제를 해결합니다.
autofill 이벤트는 브라우저가 양식을 자동 완성하기 직전에 실행됩니다. 이벤트 리스너는 채워야 할 autofillValues 배열과 refill 함수를 수신합니다. 리스너는 예를 들어 리스너가 콘텐츠를 변경한 경우 refill 함수를 호출하여 브라우저가 양식을 다시 채우도록 요청할 수 있습니다. 다음 예시 양식 마크업을 살펴보세요.
<form>
<div>
<label for="country">Country</label>
<select id="country" name="country" autocomplete="country">
<!-- ... -->
</select>
</div>
<div>
<label for="address-line-1">Address Line 1</label>
<input type="text" name="address-line-1" id="address-line-1" autocomplete="address-line1">
</div>
<div>
<label for="city">City</label>
<input type="text" name="city" id="city" autocomplete="address-level2">
</div>
<div>
<div class="state">
<!-- This section gets populated based on the
value provided in the country field -->
</div>
</div>
<div>
<input type="submit" value="Calculate">
</div>
</form>
이 JavaScript는 document에서 autofill 이벤트를 바인딩합니다.
document.addEventListener('autofill', async event => {
// A null check here is a good idea, as
// refills are not available in a WebView.
if (event.refill == null) {
/* Apply legacy logic */
return;
}
// Walk the fields
for (const {field, value} of event.autofillValues) {
if (field.name === 'country') {
if (value === 'Germany') {
document.querySelector('.state').innerHTML = `
<label for="state">State:</label>
<select name="state" id="state" autocomplete="address-level1">
<option selected="selected"></option>
<option value="BW">Baden-Württemberg</option>
<option value="BY">Bavaria</option>
<!-- Other states omitted -->
</select>
`;
} else {
/* Logic for other countries */
}
}
}
await event.refill();
});
이 예는 일반적인 주소 양식입니다. 사용자는 양식 필드를 클릭하거나 탭하여 자동 완성 도움말을 트리거할 수 있습니다. 자동 완성 주소를 선택하면 다음과 같은 결과가 발생합니다.
autofill이벤트 핸들러는 양식 필드가 자동 완성되기 직전에 실행됩니다.event.autofillValues는 다음 두 속성이 있는 객체에 제안된 자동 완성 데이터를 제공합니다.field: 자동 완성할 DOM 요소에 대한 참조입니다.value: 필드에 제안된 자동 완성 값입니다.
- 국가 필드 이름이 감지되면 논리에서 국가(이 예에서는 독일)를 감지하고 국가에 맞는 선택사항으로 주 드롭다운을 채웁니다.
event.refill()는 브라우저에 양식을 다시 채우도록 지시하기 위해 호출되며, 이는 변경된 양식에서 자동 완성 작업을 반복합니다.
더 복잡한 autofill 사용 사례에 관심이 있다면 Shopify의 Yoav Weiss가 두 가지 데모를 만들었습니다.
- 이 게시물의 예와 유사하지만
autofill이벤트의 기본 데모를 넘어선 개인 정보 양식 autofill이벤트를 사용하여 카드 발급기관을 감지하고 풍부한 시각적 요소로 DOM을 실질적으로 업데이트하는 신용카드 자동 완성 데모
신용카드 자동 완성 데모는 autofill 이벤트의 기능을 보여줍니다. 이러한 유형의 환경은 autofill 이벤트 이전에도 가능했지만, 양식 자동 완성 전용 이벤트가 있으면 개발자 환경이 개선됩니다.
autofill 이벤트 및 :autofill CSS 가상 클래스
:autofill CSS 의사 클래스는 자동 완성된 양식 요소와 일치하며 autofill 이벤트는 이를 보완할 수 있습니다.
예를 들어 :autofill를 사용하여 자동 완성된 필드와 autofill 이벤트 중에 수정된 필드를 구분할 수 있습니다. 이는 필드가 미리 채워졌다는 유용한 신호가 될 수 있지만, 수정 가능한 양식 컨트롤에 데이터가 있으면 사용자가 필요한 경우 이를 변경할 수 있음을 알 수 있습니다.
document.addEventListener('autofill', async event => {
if (event.refill !== null) {
// Walk the fields to be autofilled:
for (const {field, value} of event.autofillValues) {
let cardIssuer;
// If this field is the credit card number,
// use its value to get the card issuer.
if (field.name === 'card-number') {
cardIssuer = getCardIssuerFromNumber(value);
}
// Populate the card issuer field with
// the data we got from the card number
if (field.name === 'card-issuer') {
field.value = cardIssuer;
field.classList.add('modified-by-event');
}
}
}
});
이전 코드 블록에서는 신용카드 번호 필드가 발견될 때까지 자동 완성된 필드를 탐색합니다. 필드의 데이터는 카드 발급자를 가져오는 데 사용되며, 발급자는 필드에 입력되고 .modified-by-event 클래스가 지정됩니다. 그런 다음 이 필드의 자동 완성 스타일을 조정하여 autofill 이벤트로 수정되지 않은 다른 자동 완성 필드와 구분할 수 있습니다.
/* Standard autofill style: */
input:autofill {
border: 0.25rem solid #cc0;
}
/* Autofill style for `autofill` event-modified data: */
input.modified-by-event-autofill:autofill {
border-color: #0cc;
}
이를 통해 자동 완성된 양식 필드의 스타일 지정 시맨틱을 유지하고, :autofill 스타일을 상속하며, 양식 필드가 명확한 방식으로 자동 완성되었음을 사용자에게 의미 있는 방식으로 표시할 수 있습니다.
autofill 이벤트 및 field-sizing CSS 속성
field-sizing CSS 속성의 값이 content인 경우 <textarea> 요소와 같은 필드의 크기가 콘텐츠에 맞게 자동으로 조정됩니다. 이렇게 하면 작은 필드에서 어색한 스크롤바가 필요하지 않습니다.
textarea {
/* The field grows to fit the content automatically: */
field-sizing: content;
min-height: 3lh;
transition: min-height 0.2s ease-out;
}
이는 좋은 사용자 환경을 위한 고려사항이지만 레이아웃 변경을 유발할 수 있습니다. 사용자가 입력할 때 입력란이 점진적으로 확장됩니다. 하지만 브라우저가 여러 줄 주소를 <textarea> 요소에 자동 완성하면 필드가 순간적으로 크게 확장될 수 있습니다. autofill 이벤트를 사용하면 컨테이너를 애니메이션으로 처리하거나 스크롤 위치를 조정하여 사용자가 컨텍스트를 잃지 않도록 하는 등 이러한 전환을 더 효과적으로 관리할 수 있습니다.
document.addEventListener('autofill', event => {
// Assumes a single field for the purpose of a quick
// demonstration, such as a multiline address field:
const [addressDetails] = event.autofillValues;
// Since field-sizing: content causes an immediate jump,
// we can use the event to ensure the UI remains stable:
requestAnimationFrame(() => {
addressDetails.scrollIntoView({behavior: 'smooth', block: 'nearest'});
});
if (event.refill !== null) {
await event.refill();
}
});
모든 애플리케이션의 요구사항은 다르므로 이 패턴을 사용할 가치가 있는지 파악해야 합니다. 하지만 이는 CSS와 autofill 이벤트를 조합하여 달성할 수 있는 것을 보여줍니다.
양식 자동 완성 감지 및 측정
양식 자동 완성의 분석 데이터는 비즈니스에 유용하지만 기존 웹 기능으로는 양식의 자동 완성을 측정하기가 어렵습니다. 예를 들어 Baseline이 아닌 CSS :autofill 의사 클래스를 사용하는 것이 관행입니다.
autofill 이벤트는 양식 자동 완성을 감지하는 도구입니다. 이벤트는 실제 자동 완성 시도에서만 발생하고 입력에서는 발생하지 않으며 event.autofillValues 속성에는 자동 완성된 필드만 포함되므로 자동 완성된 데이터를 추적할 수 있습니다.
document.addEventListener('autofill', event => {
// Get autofilled data
const autofillData = {
// Assumes the form has an ID for simplicity:
form: event.target.id,
autofilled: true
};
// Send to analytics endpoint
const body = JSON.stringify(autofillData);
navigator.sendBeacon('/analytics', body);
});
이 예는 단순화되었지만 이 정보를 캡처하는 것이 얼마나 간단한지 보여줍니다. 구현하기 어렵고 신뢰할 수 없는 해결 방법 없이도 원하는 방식으로 자동 완성 분석 데이터를 구조화하고 수집할 수 있습니다.
오리진 트라이얼 등록
autofill 이벤트는 Chrome 오리진 트라이얼에 있으며, 참여하면 Chrome을 개선하는 데 도움이 됩니다. 오리진 트라이얼을 사용하면 실험용 기능을 실제 사용자와 함께 테스트하고 API가 웹 플랫폼의 일부가 되기 전에 Chrome팀에 의견을 제공할 수 있습니다.
사이트에서 autofill 이벤트를 사용하려면 여기에서 오리진 트라이얼을 등록하세요. Chrome에서는 사용자가 이 기능을 어떻게 사용하는지, 그리고 이를 통해 개선 기회를 어떻게 찾을 수 있는지 기대하고 있습니다.