회원가입(Sign Up)

1. 회원가입(Sign up)의 정의 2. 회원가입의 구성 옵션 3. 사용 안내 4. 배치

1. 회원가입(Sign up)의 정의

사용자가 처음 서비스를 사용하는 경우 회원가입을 할 수 있도록 제공합니다.
로그인에서 ‘회원가입하기’ 버튼 선택 시 회원가입 페이지로 이동하며, 회원가입은 약관 동의 > 정보입력 > 가입 완료의 순서로 제공합니다.

2. 회원가입의 구성 옵션

제목

회원가입 영역(패널)에 대한 제목을 제공합니다.
회원가입 스텝

스텝을 통해 진행 상태를 시각적으로 제공하며, 약관 동의 영역(패널)에 대한 타이틀을 제공합니다.
타이틀은 각 단계에 맞게 표시됩니다.
전체 약관 동의 체크박스

전체 약관 동의 체크박스는 약관 동의 항목들 상단에 제공합니다.
전체 약관 동의 체크박스는 기본적으로 채워지지 않은 상태로 제공합니다.
선택 시 약관 동의가 필요한 모든 항목이 선택됩니다.
전체 약관 동의를 선택하지 않은 상태에서 약관 동의가 필요한 모든 항목을 선택한 경우 전체 약관 동의는 자동으로 선택됩니다.
서비스 약관 동의 패널

서비스 약관 동의라는 레이블과 해당 내용을 설명하는 박스를 제공하고, 박스 하단에 서비스 약관 동의한다는 체크박스를 제공합니다.
체크박스는 선택되지 않은 상태를 기본값으로 제공합니다.
개인정보 수집 및 이용 동의 패널

‘개인정보 수집 및 이용 동의’라는 레이블과 해당 내용을 설명하는 박스를 제공하고, 박스 하단에 개인정보 수집 및 이용 동의한다는 체크박스를 제공합니다.
체크박스는 선택되지 않은 상태를 기본값으로 제공합니다.
취소 버튼

회원가입을 취소할 수 있는 버튼을 제공할 수 있습니다.
취소 버튼 선택 시 작성한 내용이 사라지며, 해당 서비스의 메인 화면으로 이동합니다.
다음 버튼

다음 단계로 이동할 수 있는 버튼을 제공할 수 있습니다.
필수 입력 사항을 입력하지 않은 경우 ‘다음’ 버튼을 비활성화 처리하며, 필수 입력 사항을 입력한 경우 활성화 상태로 변경됩니다.
다음 버튼 선택 시 다음 단계인 정보 입력 페이지로 전환됩니다.
아이디 인풋박스

아이디 입력은 필수 항목으로 반드시 제공해야 합니다.
인풋박스에 제공되는 가이드 텍스트는 입력할 내용에 대한 힌트 또는 예제를 제공합니다. 사용자가 인풋박스에 입력하기 시작하면 가이드 텍스트는 사라지도록 합니다.
아이디 중복확인 버튼

아무것도 입력하지 않았을 경우. ‘중복확인’ 버튼은 비활성화 처리되며, 아이디 인풋박스에 입력 시, ‘중복확인’ 버튼이 활성화 상태로 변경됩니다.

버튼 선택 시 아이디 중복 여부를 안내해 주는 가이드 텍스트가 아이디 인풋박스 하단에 노출됩니다.
비밀번호 인풋박스

인풋박스와 인풋박스에 대한 레이블을 제공합니다.
인풋박스에 제공되는 가이드 텍스트는 비밀번호로 입력해야 할 규칙을 제공합니다. 사용자가 인풋박스에 입력하기 시작하면 가이드 텍스트는 사라지도록 합니다.
입력값이 비밀번호로 설정 가능한 규칙에 맞지 않은 경우 오류 안내 텍스트를 인풋박스 하단에 제공합니다.
비밀번호 확인 인풋박스

비밀번호 설정에 대한 확인하는 비밀번호 확인 인풋박스를 제공합니다.
인풋박스에 제공되는 가이드 텍스트는 입력할 내용에 대한 힌트를 제공하며, 사용자가 인풋박스에 입력하기 시작하면 가이드 텍스트는 사라지도록 합니다.
입력값 입력 시 비밀번호 인풋박스에 입력한 값과 동일하거나 동일하지 않을 때를 검사하는 오류 안내 텍스트를 제공합니다.
이름 인풋박스

인풋박스와 인풋박스에 대한 레이블을 제공합니다.
인풋박스에 제공되는 가이드 텍스트는 입력할 내용에 대한 힌트를 제공합니다. 사용자가 인풋박스에 입력하기 시작하면 가이드 텍스트는 사라지도록 합니다.
이메일 인풋박스

이메일 입력 시 메일 아이디는 사용자가 직접 입력할 수 있게 인풋박스로 제공하고, 메일 도메인은 직접 입력할 수 있는 인풋박스와 자주 사용하는 메일 도메인을 선택할 수 있는 드롭다운을 동시에 제공합니다.
드롭다운을 통해 선택된 메일 도메인은 메일 도메인 인풋박스에 자동으로 적용됩니다.(드롭다운의 기본값은 ‘직접입력’으로 제공합니다.)
휴대폰 번호 인풋박스

이동통신사 번호를 선택하거나 입력할 수 있는 입력 필드 드롭다운과 번호를 직접 입력할 수 있는 인풋박스를 동시에 제공합니다.
(입력 필드 드롭다운의 기본값은 ‘010’으로 제공합니다.)
인증번호 전송 버튼

휴대폰 번호 인풋박스에 값이 입력된 경우 ‘인증번호 전송’ 버튼이 비활성화 상태에서 활성화 상태로 변경됩니다.
버튼 선택 시 입력한 휴대폰 번호로 인증번호가 전송됩니다.
전송 후 버튼명은 ‘인증번호 재전송’으로 변경되며, 아래로 인증번호 입력 영역이 늘어납니다.
인증번호 재전송 버튼

인증번호 재전송 버튼은 사용자에게 오류가 발생하거나 인증번호가 발송되지 않은 경우를 대비하여 제공하는 버튼으로, 버튼 선택 시 인증번호가 재전송됩니다.
인증번호 인풋박스

인증번호를 입력 가능한 인풋박스를 제공합니다.
인풋박스에 제공되는 가이드 텍스트는 입력할 내용에 대한 힌트 또는 예제를 제공합니다.
사용자가 인풋박스에 입력하기 시작하면 가이드 텍스트는 사라집니다.
인증번호 확인 버튼

인증번호 인풋박스에 값이 입력된 경우 ‘인증번호 확인’ 버튼이 비활성화 상태에서 활성화 상태로 변경됩니다.

확인 버튼 선택 시 인풋박스 하단에 인증 성공 여부를 제공합니다.
입력대기시간 카운터 및 도움말

입력대기시간 카운터는 인증번호 전송 시, 입력대기시간과 인증번호 관련 도움말을 하단에 노출하며, 입력대기시간 카운팅이 시작됩니다.
시간연장 버튼(선택 사항)

시간연장 버튼 선택 시 입력대기시간 카운팅이 초기화되며 처음에 제공한 입력대기시간으로 제공됩니다. 단, 이미 입력대기시간이 종료된 경우 또는 시간연장이 불가한 경우 버튼을 비활성화시킵니다.
주소 입력 필드 및 주소검색 버튼

주소검색 버튼 선택 시 주소 검색창을 제공합니다.
주소 검색창을 통해 우편번호를 검색하고, 해당 주소를 선택 시 선택한 주소의 우편번호와 기본 주소가 자동으로 입력되어 제공합니다.
뒤로 이동 버튼

뒤로 이동 버튼 선택 시 이전 스텝인 약관동의 화면으로 이동합니다.
약관 동의 화면 제공 시 사용자가 체크한 체크박스는 유지되어 제공됩니다.
가입완료 버튼

입력값이 없는 경우. ‘가입완료’ 버튼은 비활성화 처리되며, 전화번호 인증 완료를 포함하여 필수 항목들을 모두 입력한 경우 ‘가입완료’ 버튼이 활성화 상태로 변경됩니다.

가입완료 버튼 선택 시 회원가입이 완료되었다는 안내 화면으로 이동합니다.
회원가입 완료 안내 텍스트

회원가입이 완료되었다는 안내 문구를 제공합니다.
(예: ‘가입한 사용자명’님의 회원가입이 완료되었습니다.)
로그인 버튼

로그인 버튼 선택 시 로그인 화면으로 이동합니다.