양식에서 브라우저 자동 완성 측정

Maud Nalpas
Maud Nalpas

게시일: 2024년 11월 20일

전자상거래의 성공은 원활한 결제 프로세스에 달려 있습니다. 양식은 전환에 매우 중요합니다. 사용자 경험을 최적화하려면 사용자가 양식과 상호작용하는 방식을 이해하는 것이 중요합니다. 자동 완성은 이 과정에서 중요한 역할을 합니다.

Chrome의 자동 완성 데모
Chrome의 자동 완성

원활한 자동 완성 환경을 제공하면 전환수가 증가하고 양식 제출 속도가 빨라지며 양식 이탈률이 줄고 사용자 만족도가 높아질 수 있습니다.

하지만 사이트에서 자동 완성 사용 및 불편을 파악하고 있나요?

이 가이드에서는 사용자가 양식에서 자동 완성을 사용하는 방식에 관한 데이터를 수집하고 분석하는 방법을 설명합니다.

자동 완성 통계를 사용하는 방법은 다음과 같습니다.

  • 테스트 접근 방식을 실제 사용자 워크플로에 맞춥니다. 자동 완성 사용 통계에서 사용자가 자동 완성을 많이 사용한다는 신호를 보내면 자동 완성 테스트를 워크플로에 통합하는 것이 중요합니다.
  • 회귀를 식별합니다. 양식 UX에 영향을 미치는 배포 간에 개별 입력란의 자동 완성 사용 신호를 비교합니다. 차이가 크면 자동 완성 동작이 회귀했음을 의미할 수 있습니다.
  • 자동 완성 지원 구현이 예상대로 작동하는지 확인합니다. 자동 완성을 사용하도록 권장하는 필드를 사용자가 수동으로 채우는 경향을 감지합니다.

데모 및 코드

데모를 사용해 보고 GitHub의 코드를 살펴보세요.

자동 완성 관찰자 데모
데모 코드를 사용하여 각 양식 입력란에서 사용자 작업을 프로그래매틱 방식으로 관찰합니다 (비워 두거나, 수동으로 작성하거나, 자동 완성으로 작성하거나, 자동 완성으로 작성한 후 입력란을 수정). 사용해 보세요.

해결 방법:

  • 모든 입력란을 자동 완성합니다.
  • 입력란을 자동 완성한 후 수동으로 비웁니다.
  • 필드를 자동 완성한 후 수동으로 수정합니다.
  • 필드를 완전히 수동으로 입력합니다.
  • 필드를 비워 둡니다.

브라우저 지원

이 데모는 최신 기기와 브라우저 버전에서 작동합니다. 브라우저에서 잘 지원되는 :autofill CSS 가상 클래스를 감지하는 데 의존합니다.

1단계: 자동 완성 데이터 수집

자동 완성 상태 정의

먼저 관심 있는 자동 완성 필드 상태를 정의합니다.

  • EMPTY: 사용자가 입력란을 비워 둡니다.
  • AUTOFILLED: 사용자가 자동 완성만 사용하여 입력란을 채웁니다.
  • AUTOFILLED_THEN_MODIFIED: 사용자가 먼저 자동 완성을 사용하여 필드를 채운 다음 자동 완성된 값을 수동으로 수정합니다. 예를 들어 사용자가 주소와 연락처 세부정보를 자동 완성하지만 다른 전화번호를 수동으로 입력합니다.
  • ONLY_MANUAL: 사용자가 입력란을 완전히 수동으로 작성합니다.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

유틸리티 함수 구현

이제 이 코드의 핵심 기능인 입력란이 자동 완성되었는지 확인하는 기능을 구현할 차례입니다. 내부적으로 다음 두 함수를 사용합니다.

  • getAllAutofilledFields는 지정된 양식 내의 모든 <input><select> 요소를 살펴보고 :autofill CSS 가상 클래스의 존재를 확인합니다. 자동 완성된 요소의 목록을 출력합니다.
  • 그런 다음 checkIsAutofilled는 특정 요소가 이 목록에 포함되어 있는지 확인합니다.
// Get all elements that are autofilled, using the :autofill pseudo-class
function getAllAutofilledFields(formElement) {
  return formElement.querySelectorAll(':autofill');
}

// Check if the passed element is in the list of autofilled fields
function checkIsAutofilled(allAutofilledFields, fieldElement) {
  return Array.from(allAutofilledFields).includes(fieldElement);
}

// Usage
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);

또한 필드가 비어 있는지 확인하는 유틸리티 함수도 필요합니다.

// Check if the value of the element is empty
function checkIsEmpty(fieldElement) {
  const value = fieldElement.value.trim();
  // value is a string, even for a type = number field
  const isEmpty = value === '';
  return isEmpty;
}

자동 완성 상태 초기화

각 입력란의 자동 완성 상태를 저장할 전역 객체 autofillStatuses를 만듭니다.

양식에서 모든 필드 id를 수집하고 각 필드의 상태를 EMPTY로 초기화합니다.

// Global variable storing autofill statuses for each field
const autofillStatuses = {};
// Example: {
//     "name": "autofilled",
//     "street-address": "autofilled-then-modified",
//     "country": "only-manual"
// }

// Initialize autofill status for all fields
function initializeAutofillStatuses(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    autofillStatuses[fieldElement.id] = EMPTY;
  });
}

initializeAutofillStatuses(document.getElementById('form'));

관심 있는 모든 필드 요소를 수집하기 위해 initializeAutofillStatuses는 유틸리티 함수를 사용합니다.

// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
  return Array.from(formElement.querySelectorAll('input, select'));
}

변경사항 관찰

이제 자동 완성 동작을 관찰할 준비가 되었습니다.

각 양식 요소에 변경 이벤트 리스너를 연결합니다. 변경사항이 발생하면 checkIsAutofilled 유틸리티 함수를 사용하여 요소가 현재 자동 완성되고 있는지 확인합니다. 그런 다음 autofillStatuses 객체에서 현재 상태와 이전 상태를 기반으로 요소의 자동 완성 상태가 업데이트됩니다.

예를 들어 이전 상태가 AUTOFILLED이고 이제 필드가 자동 완성되지 않았다면 (즉, :autofill 클래스가 없음) 자동 완성 후 필드가 수동으로 업데이트되었음을 의미합니다. 따라서 상태가 AUTOFILLED_THEN_MODIFIED로 업데이트됩니다.

// Add event listener to all fields to update autofill status
function initializeChangeObserver(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    fieldElement.addEventListener('change', () => {
      updateAutofillStatus(formElement, fieldElement);
    });
  });
}

// Update autofill status
function updateAutofillStatus(formElement, fieldElement) {
  const isEmpty = checkIsEmpty(fieldElement);
  const allAutofilledFields = getAllAutofilledFields(formElement);
  const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
  const previousAutofillStatus = autofillStatuses[fieldElement.id];
  if (isEmpty) {
    autofillStatuses[fieldElement.id] = EMPTY;
    // NOTE: if (previousAutofillStatus === AUTOFILLED), the field has just been emptied manually. Autofill can't empty fields.
  } else {
    if (isAutofilled) {
      autofillStatuses[fieldElement.id] = AUTOFILLED;
    } else {
      if (
        previousAutofillStatus === ONLY_MANUAL ||
        previousAutofillStatus === EMPTY
      ) {
        // NOTE: ONLY_MANUAL is only used for fields where autofilled was *never* used. A field where autofilled was used will be AUTOFILLED_THEN_MODIFIED, even if the user has completely retyped the whole value
        autofillStatuses[fieldElement.id] = ONLY_MANUAL;
      } else if (
        previousAutofillStatus === AUTOFILLED ||
        previousAutofillStatus === AUTOFILLED_THEN_MODIFIED
      ) {
        autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;
      }
    }
  }
}

initializeChangeObserver(document.getElementById('form'));

결과를 서버로 전송

양식이 제출되면 autofillStatuses 객체를 서버로 전송합니다. 예를 들어 주소 양식의 경우 서버에서 다음 데이터를 수신합니다.

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
자동 완성 관찰자 데모: 다양한 자동 완성 상태의 표시 영역
다양한 입력란의 자동 완성 상태를 표시하는 영역입니다. 데모용으로만 제공됩니다.

2단계: 결과 분석

여러 사용자로부터 수신한 autofillStatuses 객체를 집계하고 데이터의 동향을 분석합니다.

먼저 전체 자동 완성 사용에 관한 통계를 살펴보세요. 브라우저 자동 완성을 사용하여 하나 이상의 입력란을 채우는 사용자의 비율은 얼마인가요?

그런 다음 개별 필드를 자세히 살펴볼 수 있습니다. 예를 들어 상당수의 사용자가 자동 완성과 호환되는 특정 입력란을 자동 완성하지 않는 것으로 확인됩니다. 이제 원인을 조사할 수 있습니다.

  • <label> 필드가 명확하지 않나요? 혼동을 야기할 수 있는 힌트나 자리표시자가 있나요?
  • autocomplete 값에 올바른 문법을 사용했나요? 일반적인 문제는 <input autocomplete="first-name">입니다. 적절한 값이 "given-name"이므로 브라우저가 이를 채우지 않습니다.

결론

자동 완성 동작을 이해하고 활용하면 웹사이트의 사용자 환경을 개선할 수 있습니다. 이 가이드에 설명된 기법을 구현하여 사용자가 양식과 상호작용하는 방식에 관한 유용한 정보를 얻고 개선이 필요한 영역을 파악하세요.

자동 완성은 사용자 여정을 간소화하는 강력한 도구입니다. 자동 완성을 위해 양식을 최적화하면 방문자에게 더 사용자 친화적인 환경을 제공할 수 있습니다.

모든 자동 완성 리소스를 검토하세요.