기본: 모바일 양식 디자인

온라인 쇼핑객은 모바일 기기를 사용해 새로운 스토어를 찾고, 제품을 둘러보고, 구매하는 경우가 점점 더 많아지고 있어요. 미국에서만 온라인 구매의 35% 이상이 모바일 기기를 사용했으며, 이 수치는 매년 계속 증가하고 있어요.

이러한 고객을 구독자로 전환하려면 가입 양식이 데스크톱에서만큼 모바일에서도 보기 좋게 표시되는 것이 중요해요.

이메일과 SMS 동의를 동시에 수집하는 등 3개 이상의 필드가 필요하다면 다단계 양식을 고려해 보세요.

다단계 양식을 사용하면 잠재 구독자에게 부담을 주지 않으면서 더 많은 정보를 수집할 수 있어요. 또한 하나의 양식에서 여러 유형의 동의를 수집할 때, SMS에 별도의 단계를 두는 것은 규정 준수 모범 사례 예요.

또는 고객 여정의 후반부에서 다시 타겟팅해 구독자에 대해 더 알아볼 수도 있어요. 예를 들어 30일 후에 다른 양식을 보여 생일을 물어보거나, 환영 이메일 시리즈의 일부로 물어볼 수도 있어요.

양식의 모든 필드가 필수 입력이더라도, 이름보다 생일을 먼저 묻는 건 여전히 어색해요.

일반적으로 가장 덜 개인적인 정보부터 가장 개인적인 정보 순으로 요청해 주세요. 예를 들면:

1. 이름
2. 이메일 또는 전화번호
3. 생일

단일 열은 양식에서 모든 입력란, 필드, 버튼이 한 줄로 이어지는 것을 의미해요. 다중 열 형식은 데스크톱에서는 사용해도 괜찮지만, 모바일에서는 양식이 복잡하거나 빽빽해 보일 수 있어요. 단일 열 양식은 모바일에서 훑어보기도 더 쉬워요.

단일 열 양식	다중 열 양식

CTA 버튼은 사용자가 스캔하는 흐름의 끝에 있어야 하므로, 마지막으로 보게 되는 요소가 되어야 해요. 양식을 완료하려고 위로 스크롤해야 하거나, 버튼을 찾느라 헤매지 않도록 해야 해요.

일반적으로 CTA 버튼은 가운데 또는 왼쪽에 배치돼요.

닫기 버튼이 오른쪽 상단에 있어야 하는 이유는, 사용자가 그 위치에서 버튼을 볼 것으로 기대하기 때문이에요.

왼쪽 상단이나 하단 근처처럼 다른 위치에 배치하면 사용자가 양식을 닫는 방법을 찾느라 시간을 보내면서 불만을 느낄 수 있어요. 그 결과 브랜드에 대한 부정적인 인상을 남겨 이후에 사이트를 다시 방문하거나 고객이 될 가능성이 낮아질 수 있어요.

양식의 각 필드 바로 위에 라벨을 배치해, 어떤 정보를 입력해야 하는지 명확하게 설명해 주세요.

또한 어떤 필드를 설명하는 라벨인지 명확하도록, 라벨을 해당 필드 가까이에 배치해 주세요.

어떤 모바일 기기에서 보더라도 각 라벨은 한 줄을 넘지 않아야 하므로, 간결하게 작성하는 것이 중요해요.

사용자가 텍스트 또는 숫자를 입력해야 하는 모든 필드에 자리 표시자를 포함해 입력 형식이 어떻게 되어야 하는지(예: 이메일 예시, 이름, 날짜 형식 등) 보여 주세요.

이렇게 하면 누군가가 실수할 수 있는 오류 수를 줄이는 데 도움이 돼요. 레이블과 플레이스홀더를 함께 사용하면 사용자가 양식에서 쉽게 이동할 수 있어요.

프로 팁: 버튼에도 라벨이 있어야 해요. 버튼 텍스트를 더 구체적으로 작성하면 사용자에게도 도움이 돼요.

예를 들어 단순한 “제출” 행동 촉구 대신 “뉴스레터 구독하기” 또는 “SMS 신청하기”라고 표시하면 버튼이 무엇을 하는지 더 명확하게 알 수 있어요. 또한 이는 더 작은 양식에서 소중한 공간을 절약하는 데 도움이 될 수 있어요.

고객에게 어떤 필드를 작성해야 하고 어떤 필드는 작성하지 않아도 되는지 알려주면 사용자 경험이 더 간소화돼요. 일부 양식 요소는 필수로, 다른 요소는 선택 사항으로 설정할 수 있어요.

사용자가 성공적으로 제출했는지 알 수 있도록 양식 제출 후 성공 메시지를 포함하세요.

글꼴 크기를 16픽셀 이상으로 사용하면 텍스트를 읽기 쉽게 만드는 데 도움이 돼요. 이렇게 하면 사용자가 읽기 위해 확대할 필요가 없어요.

레이블, 플레이스홀더, 버튼 텍스트를 포함해 모바일 양식의 모든 텍스트에는 16픽셀이 권장되는 최소 글꼴 크기예요.

사용자가 원하는 필드를 클릭하기 어렵지 않도록 양식의 개별 작업 사이에 충분한 간격을 두세요. 그렇지 않으면 계속 시도하는 대신 그만두기로 결정할 수도 있어요.

양식을 만들 때 사용자가 실수하기가 최대한 어렵도록 만들어 보세요. 다양한 유형의 기기에서 사용자 경험을 테스트해 보세요.

입력란이나 버튼과 같은 모든 “터치 대상”은 크고 클릭하기 쉬워야 해요.

평균적인 성인의 손가락은 11중견 기업 또는 대기업 고객사이며, 이는 약 41.6픽셀입니다. 이를 고려해, 터치 대상은 최소 48픽셀로 만드는 것이 모범 사례예요.

모바일 방문자가 탐색하는 동안 원하는 대로 양식을 열고 닫을 수 있고, 양식이 사이트 콘텐츠를 가리지 않도록 양식 티저를 사용하세요.
Google은 방해가 되는 전면 팝업이 있는 사이트에 페널티를 부과한다는 점에 유의하세요. 티저는 이 페널티를 피하는 데 도움이 되지만, 양식에 긴 시간 지연도 사용해야 합니다.

색상 대비는 전경의 텍스트 또는 개체와 배경 간의 밝기 차이를 의미해요. 좋은 색상 대비는 양식의 가독성을 높여 주며, 접근성의 핵심 요소예요. 색상 대비 검사기를 사용해 색상 대비를 확인하세요.

가장 낮은 대비는 1:1이며, 읽을 수 없어요(예: 흰색 배경에 흰색 텍스트). 사용할 수 있는 가장 높은 대비는 21:1이며, 흰색 배경에 검은색 텍스트예요. 즉, 비율이 클수록 대비가 더 좋아요.

웹 콘텐츠 접근성 지침(WCAG)에 따르면 최소 색상 대비는 작은 텍스트, 이미지 및 이미지 내 텍스트의 경우 4.5:1이고 큰 텍스트 또는 중요한 요소의 경우 3:1이에요.

이상적으로는 대비가 더 크게 나야 해요. WCAG에 따르면 더 나은 최소값은 다음과 같아요:

• 더 작은 텍스트, 이미지 또는 텍스트가 포함된 이미지의 경우 7:1
• 큰 텍스트, 핵심 시각 요소 등의 경우 4.5:1

모두가 열심히 만든 콘텐츠를 즐길 수 있도록 하는 것이 중요해요. 특정 색상 조합을 사용하면 일부 그룹이 양식을 읽기 어렵거나 아예 읽을 수 없게 될 수 있어요.

색맹 친화적인 조합
파란색과 주황색		파란색과 노란색
파란색과 빨간색		주황색과 노란색
파란색과 갈색

사용하지 않아야 할 항목과 관련해서는, 색맹 유형이 매우 다양하다는 점을 기억해 주세요(빨강과 초록만 있는 게 아니에요).

피해야 할 색상 조합
녹색과 빨간색		파란색과 보라색
빨간색과 주황색		파란색과 회색
녹색 및 주황색		보라색과 빨간색
빨간색과 갈색		블루-그린과 핑크
초록색과 갈색		청록색과 회색
녹색과 파란색		노란색과 분홍색
연두색 및 노란색		핑크 및 회색
녹색 및 회색		회색과 갈색
녹색 및 검정색		주황색과 갈색
빨간색과 검은색