디자인 기본사항

첫 번째 섹션에서는 기본 양식을 만드는 방법을 알아봤습니다. 이 섹션에서는 모든 권장사항에 대해 설명합니다. 이 모듈에서는 사용자 환경 (UX) 및 잘 구현된 사용자 인터페이스 (UI)가 큰 차이를 만들 수 있는 이유를 알아봅니다.

사용자 친화적인 인터페이스 만들기

양식 작성은 시간이 오래 걸리고 불편할 수 있습니다. 꼭 그렇지는 않습니다. 뛰어난 UX를 보장하려면 직관적 UI를 사용해야 합니다. 최적의 양식 구조와 그래픽 디자인 (레이아웃, 간격, 글꼴 크기 및 색상), 논리적 UI (예: 라벨 문구 및 적절한 입력 유형)를 제공해야 합니다. 양식을 개선하고 사용하기 쉽게 만드는 방법을 살펴보겠습니다.

라벨

<label> 요소의 용도를 기억하시나요? 라벨은 양식 컨트롤을 설명합니다. 눈에 잘 띄고 잘 작성된 라벨은 사용자가 양식 컨트롤의 목적을 이해하는 데 도움이 됩니다.

모든 양식 컨트롤에 라벨 사용

양식에 새 양식 컨트롤을 추가하시겠습니까? 먼저 새 필드에 라벨을 추가합니다. 이렇게 하면 카드를 추가하는 것을 잊지 마세요.

먼저 라벨을 추가하면 양식의 목표에 집중할 수도 있습니다. 이때 어떤 데이터가 필요한가요? 이를 확실히 알면 사용자가 데이터를 입력하고 양식을 작성하도록 돕는 데 집중할 수 있습니다.

라벨 문구

이메일 필드를 설명하려 한다고 가정해 보겠습니다. 방법은 다음과 같습니다.

<label for="email">Enter your email address</label>

또는 다음과 같이 설명할 수 있습니다.

<label for="email">Email address</label>

어떤 설명을 선택해야 할까요?

이 예시에서는 '이메일 주소'라는 단어가 좋습니다. 짧은 라벨은 스캔이 더 쉬우며, 시각적인 혼란을 줄이며, 사용자가 어떤 데이터가 필요한지 더 빠르게 이해하는 데 도움을 주기 때문입니다.

라벨 위치

CSS를 사용하면 양식 컨트롤의 상단, 하단, 왼쪽, 오른쪽에 라벨을 배치할 수 있습니다. 어디에 배치하나요?

연구에 따르면 사용자가 양식을 빠르게 스캔하여 어떤 라벨이 어떤 양식 컨트롤에 속하는지 확인할 수 있도록 라벨을 양식 컨트롤 위에 배치하는 것이 좋습니다.

양식 디자인

양식을 잘 설계하면 양식 이탈률을 크게 줄일 수 있습니다. 사용자가 적절한 요소와 입력 유형을 사용하여 데이터를 입력할 수 있도록 합니다. 다양한 양식 요소와 입력 유형 중에서 선택할 수 있습니다. 최상의 UX를 제공하려면 사용 사례에 가장 적합한 요소와 입력 유형을 사용하세요. 사용자가 여러 줄의 텍스트를 입력해야 하는 경우 <textarea> 요소를 사용합니다. 사이트 이용약관에 동의해야 하는 경우에는 <input type="checkbox">를 사용하세요.

또한 여러 유형의 양식 컨트롤을 시각적으로 구별해야 합니다. 버튼은 버튼처럼 보여야 합니다. 입력과 같은 입력입니다. 사용자가 양식 컨트롤의 목적을 쉽게 인식할 수 있도록 합니다. 예를 들어 링크처럼 생긴 링크를 클릭하면 양식이 제출되는 것이 아니라 새 페이지가 열려야 합니다.

사용자가 양식을 탐색할 수 있도록 지원

사치스러운 레이아웃은 재미있을 수 있지만 양식을 작성하는 데 방해가 될 수 있습니다.

특히 연구 결과에 따르면 단일 열만 사용하는 것이 가장 좋습니다. 사용자는 다음 양식 컨트롤이 있는 위치를 검색하는 데 시간을 소비하고 싶어 하지 않습니다. 하나의 열을 사용하면 따라야 할 방향이 하나만 있습니다.

사용자가 양식과 상호작용할 수 있도록 지원

실수로 탭 및 클릭하는 것을 방지하고 사용자가 양식과 쉽게 상호작용할 수 있도록 하려면 버튼을 충분히 크게 만드세요. 버튼의 권장 탭 타겟 크기는 48픽셀 이상입니다. 또한 margin CSS 속성을 사용하여 양식 컨트롤 사이에 충분한 간격을 추가하여 우발적인 상호작용을 방지해야 합니다.

양식 컨트롤의 기본 크기가 너무 작아서 실제로 사용하기 어렵습니다. padding를 사용하고 기본 font-size를 변경하여 크기를 늘려야 합니다.

pointer CSS 미디어 기능을 사용하여 다양한 포인터(예: 마우스)에 다른 크기를 정의할 수 있습니다.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

pointer CSS 미디어 기능에 대해 자세히 알아보세요.

발생한 위치에 오류 표시

사용자가 주의가 필요한 양식 컨트롤을 쉽게 찾을 수 있도록 참조하는 양식 컨트롤 옆에 오류 메시지를 표시합니다. 양식 제출 시 오류를 표시할 때는 첫 번째 잘못된 양식 컨트롤로 이동해야 합니다.

입력할 데이터를 사용자에게 명확하게 알리기

사용자가 유효한 데이터를 입력하는 방법을 이해할 수 있도록 합니다. 비밀번호를 8자 이상 입력해야 하나요? 사용자에게 알리세요.

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

필수 입력란을 사용자에게 명시

<label for="name">Name (required)</label>
<input name="name" id="name" required>

필수 필드인 경우 명확하게 표시하세요. 액세스 가능한 양식 분석에서는 필수 필드를 표시하기 위한 대안을 설명합니다. 양식의 대부분의 필드가 필수 항목인 경우 선택 입력란을 표시하는 것이 더 나을 수 있습니다.

오류 메시지를 양식 컨트롤에 연결하여 스크린 리더가 액세스할 수 있도록 하려면 어떻게 해야 하나요? 자세한 내용은 다음 모듈에서 알아보세요.

학습 내용 확인하기

양식 디자인에 관한 지식 테스트

자료

• 멋진 양식 만들기
• 모바일 양식 디자인 권장사항
• Baymard Institute: 전자상거래 UX 연구
• 그동안 생각하지 말 것