Sign Up / In

인풋필드 내의 안내 문구, 에러 문구 등은 상황에 맞고 명확하게 전달 되어야 합니다. placeholder 같은 경우 전체 서비스의 보이스 톤과 맞추어 사용자가 어떤 정보를 입력해야 할지 명확하게 표현되어져야 합니다.

[참고] 라벨 텍스트 표기법

라벨 텍스트는 분명하고 명확하게 표현되어야 합니다.

3. Text input

1. 로그인

사용자가 인풋 필더에 입력하기 전에는 버튼을 비활성화 시켜둡니다. 사용자의 액션이 추가 된 이후 버튼을 활성화시켜 다음 단계로의 액션을 알려주도록 합니다.

<입력전 비활성화>

<입력후 버튼 활성화>

HTML

<div class="flx-container v-center" id="container">
	<section class="frm-sect">
		<div class="login-box">
			<form action="" method="post">
				<fieldset>
					<legend>로그인 영역</legend>
					<div class="row"><!-- 에러 메시지 활성화 시 err 클래스, 성공 메시지 활성화 시 ok 클래스 추가 -->
						<label for="user-id" class="hide">사용자 아이디</label>
						<input type="email" id="user-id" class="inp-st" placeholder="이메일 주소를 입력해주세요.">
					</div>
					<div class="row"><!-- 에러 메시지 활성화 시 err 클래스, 성공 메시지 활성화 시 ok 클래스 추가 -->
						<label for="user-pw" class="hide">비밀번호</label>
						<input type="password" id="user-pw" class="inp-st" placeholder="비밀번호를 입력해주세요.">
					</div>
				</fieldset>
				<article class="status-msg-box"></article>
				<div class="frm-btn-module">
					<button type="submit">로그인</button>
				</div>
				<div class="frm-util-module">
					<div class="c-side">
						<button type="button" class="sim-txt-btn">+ 계정 생성</button>
					</div>
				</div>
			</form>
		</div>
	</section>
</div>

CSS

/* login box */
.frm-sect .point {display:inline-block;overflow:hidden;width:0.6rem;height:0.6rem;border-radius:0.6rem;text-indent:-999.9rem;vertical-align:top;background-color:#ff4b4b;}
.login-box {width:40rem;}
.login-box h1 {overflow:hidden;width:32.1rem;height:5.6rem;margin:0 auto 6rem auto;text-indent:-999.9rem;background:url('../images/bi_rb_admin.png') no-repeat;background-size:32.1rem 5.6rem;}
.login-box .row {position:relative;margin-top:2rem;}
.login-box .row .txt-del {position:absolute;right:1.1rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;margin-top:-1.2rem;border-radius:2.4rem;text-indent:-999.9rem;background:url('../images/ico_txt_del.png') no-repeat;background-size:2.4rem;}
.login-box .row:first-of-type {margin-top:0;}
.login-box .row.err .inp-st {border-color:#ff4b4b !important;}
.login-box .row.ok .inp-st {border-color:#511ef4;}
.login-box .frm-btn-module {}
.login-box .frm-btn-module button {display:block;width:100%;height:5rem;border-radius:0.2rem;font-size:1.4rem;line-height:5rem;color:#fff;background-color:#1769ff;}
.login-box .frm-btn-module button:hover {color:rgba(255,255,255,0.5);background-color:#0b347f;}
.login-box .frm-btn-module button:disabled, .login-box .frm-btn-module button:hover:disabled {cursor:default;opacity:0.5;border-color:#1769ff;color:#fff;background-color:#1769ff;}
.login-box .total-msg {display:none;position:relative;margin-top:1rem;padding-left:0.8rem;font-size:1.2rem;line-height:1.8rem;color:#ff4b4b;}
.login-box .total-msg:before {content:'*';position:absolute;left:0;top:0;}
.login-box .total-msg.active {display:block;}
.frm-util-module {position:relative;margin-top:3rem;}
.frm-util-module .c-side {text-align:center;}
.frm-util-module .l-side {padding-left:0.2rem;}
.frm-util-module .r-side {position:absolute;right:0;top:-0.1rem;}

<에러 발생 안내문구>

<비밀번호 변경시 안내 레이어 팝업 노출>

HTML

<div class="flx-container v-center" id="container">
	<section class="frm-sect">
		<div class="login-box">
			<h1>RB Insight Admin</h1>
			<form action="" method="post">
				<fieldset>
					<legend>로그인 영역</legend>
					<div class="row err"><!-- 에러 메시지 활성화 시 err 클래스, 성공 메시지 활성화 시 ok 클래스 추가 -->
						<label for="user-id" class="hide">사용자 아이디</label>
						<input type="email" id="user-id" class="inp-st" placeholder="이메일 주소를 입력해주세요.">
						<button type="button" class="txt-del">입력된 텍스트 한번에 삭제</button>
					</div>
					<div class="row"><!-- 에러 메시지 활성화 시 err 클래스, 성공 메시지 활성화 시 ok 클래스 추가 -->
						<label for="user-pw" class="hide">비밀번호</label>
						<input type="password" id="user-pw" class="inp-st" placeholder="비밀번호를 입력해주세요.">
					</div>
				</fieldset>
				<article class="status-msg-box"></article>
				<div class="frm-btn-module">
					<button type="submit">로그인</button>
				</div>
				<p class="total-msg active"><!-- 에러 메시지 활성화 시 active 클래스 추가 -->
					아이디 또는 비밀번호를 확인해주세요.<br>로그인 1회 실패시 비밀번호 초기화 설정이 필요합니다. (1/10)
				</p>
				<div class="frm-util-module">
					<div class="c-side">
						<button type="button" class="sim-txt-btn">+ 계정 생성</button>
					</div>
				</div>
			</form>
		</div>
	</section>
</div>

CSS

/* login box */
.frm-sect .point {display:inline-block;overflow:hidden;width:0.6rem;height:0.6rem;border-radius:0.6rem;text-indent:-999.9rem;vertical-align:top;background-color:#ff4b4b;}
.login-box {width:40rem;}
.login-box h1 {overflow:hidden;width:32.1rem;height:5.6rem;margin:0 auto 6rem auto;text-indent:-999.9rem;background:url('../images/bi_rb_admin.png') no-repeat;background-size:32.1rem 5.6rem;}
.login-box .row {position:relative;margin-top:2rem;}
.login-box .row .txt-del {position:absolute;right:1.1rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;margin-top:-1.2rem;border-radius:2.4rem;text-indent:-999.9rem;background:url('../images/ico_txt_del.png') no-repeat;background-size:2.4rem;}
.login-box .row:first-of-type {margin-top:0;}
.login-box .row.err .inp-st {border-color:#ff4b4b !important;}
.login-box .row.ok .inp-st {border-color:#511ef4;}
.login-box .frm-btn-module {}
.login-box .frm-btn-module button {display:block;width:100%;height:5rem;border-radius:0.2rem;font-size:1.4rem;line-height:5rem;color:#fff;background-color:#1769ff;}
.login-box .frm-btn-module button:hover {color:rgba(255,255,255,0.5);background-color:#0b347f;}
.login-box .frm-btn-module button:disabled, .login-box .frm-btn-module button:hover:disabled {cursor:default;opacity:0.5;border-color:#1769ff;color:#fff;background-color:#1769ff;}
.login-box .total-msg {display:none;position:relative;margin-top:1rem;padding-left:0.8rem;font-size:1.2rem;line-height:1.8rem;color:#ff4b4b;}
.login-box .total-msg:before {content:'*';position:absolute;left:0;top:0;}
.login-box .total-msg.active {display:block;}
.frm-util-module {position:relative;margin-top:3rem;}
.frm-util-module .c-side {text-align:center;}
.frm-util-module .l-side {padding-left:0.2rem;}
.frm-util-module .r-side {position:absolute;right:0;top:-0.1rem;}

2. 휴대폰 인증

인증번호가 발송된 후에 카운트가 되며 에러나 시간 초과가 되었을때 재발송 버튼이 활성화됩니다.

<인증번호 발송>

<인증번호 입력>

HTML

<div class="flx-container v-center" id="container">
			<section class="frm-sect">
				<div class="login-box">
					<div class="h-txt-box">
						<div class="sol-txt">
							<p>
								보안을 위해 2단계 인증을 진행하셔야 로그인이 가능합니다.<br>
								SMS으로 전송된 코드를 입력해주세요.
							</p>
						</div>
					</div>
					<form action="" method="post">
						<fieldset>
							<legend>2단계 인증 영역</legend>
							<div class="row col-row ok"><!-- 입력 오류 시 err 클래스 적용, 입력 완료 시 ok 클래스 적용 -->
								<span class="col-item">
									<label for="user-pw" class="hide">인증번호 4자리 입력</label>
									<input type="tel" id="user-pw" class="inp-st" maxlength="4" placeholder="인증번호 4자리">
									<span class="timer">0:00</span>
								</span>
								<span class="col-item">
									<button type="button" disabled="disabled" class="m-btn-type key-color">재발송</button>
								</span>
							</div>
						</fieldset>
						<article class="status-msg-box">
							<p class="ok"><!-- 입력 오류 시 err 클래스 적용, 입력 완료 시 ok 클래스 적용 -->
								* 등록된 휴대전화로 인증번호가 발송되었습니다.
							</p>
						</article>
						<div class="frm-btn-module">
							<button type="submit">휴대폰 인증</button>
						</div>
					</form>
				</div>
			</section>
		</div>

CSS

/* layout */
.flx-container {-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;}

/* login box */
.frm-sect .point {display:inline-block;overflow:hidden;width:0.6rem;height:0.6rem;border-radius:0.6rem;text-indent:-999.9rem;vertical-align:top;background-color:#ff4b4b;}
.login-box {width:40rem;}
.login-box h1 {overflow:hidden;width:32.1rem;height:5.6rem;margin:0 auto 6rem auto;text-indent:-999.9rem;background:url('../images/bi_rb_admin.png') no-repeat;background-size:32.1rem 5.6rem;}
.login-box .row {position:relative;margin-top:2rem;}
.login-box .row .txt-del {position:absolute;right:1.1rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;margin-top:-1.2rem;border-radius:2.4rem;text-indent:-999.9rem;background:url('../images/ico_txt_del.png') no-repeat;background-size:2.4rem;}
.login-box .row:first-of-type {margin-top:0;}
.login-box .row.err .inp-st {border-color:#ff4b4b !important;}
.login-box .row.ok .inp-st {border-color:#511ef4;}
.login-box .frm-btn-module {}
.login-box .frm-btn-module button {display:block;width:100%;height:5rem;border-radius:0.2rem;font-size:1.4rem;line-height:5rem;color:#fff;background-color:#1769ff;}
.login-box .frm-btn-module button:hover {color:rgba(255,255,255,0.5);background-color:#0b347f;}
.login-box .frm-btn-module button:disabled, .login-box .frm-btn-module button:hover:disabled {cursor:default;opacity:0.5;border-color:#1769ff;color:#fff;background-color:#1769ff;}
.login-box .total-msg {display:none;position:relative;margin-top:1rem;padding-left:0.8rem;font-size:1.2rem;line-height:1.8rem;color:#ff4b4b;}
.login-box .total-msg:before {content:'*';position:absolute;left:0;top:0;}
.login-box .total-msg.active {display:block;}
.frm-util-module {position:relative;margin-top:3rem;}
.frm-util-module .c-side {text-align:center;}
.frm-util-module .l-side {padding-left:0.2rem;}
.frm-util-module .r-side {position:absolute;right:0;top:-0.1rem;}
.pw-validation {display:none;position:absolute;right:2rem;top:50%;width:8rem;height:1rem;border-radius:1rem;margin-top:-0.5rem;background-color:#ddd;}
.pw-validation.active {display:block;}
.pw-validation .inner-field {display:block;overflow:hidden;width:0;height:1rem;border-radius:1rem;text-indent:-999.9rem;-webkit-transition:width 300ms;transition:width 300ms;}
.pw-validation .inner-field.step01 {width:25%;background-color:#ff4b4b;}
.pw-validation .inner-field.step02 {width:50%;background-color:#f6b30b;}
.pw-validation .inner-field.step03 {width:75%;background-color:#54c827;}
.pw-validation .inner-field.step04 {width:100%;background-color:#0fade9;}
.cf-validation {display:none;position:absolute;right:2rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;border-radius:2.4rem;margin-top:-1.2rem;text-indent:-999.9rem;background:url('../images/set_ico_validate.png') no-repeat;background-size:auto 2.4rem;}
.cf-validation.active {display:block;}
.cf-validation.ok {background-position:-3.4rem 0;}
/* column row */
.col-row, .col-box {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.col-row .col-item, .col-box .col-item {position:relative;}
.col-row .col-item:first-of-type, .col-box .col-item:first-of-type {-webkit-box-flex:1;-ms-flex:1;flex:1;}
.col-row .m-btn-type {display:block;height:5rem;line-height:4.8rem;margin-left:1.8rem;}
.col-box .m-btn-type {display:block;width:12rem;height:5rem;margin-left:1rem;padding:0;line-height:4.8rem;}
.col-box .m-btn-type.narrow {width:8rem;}
.col-row .col-item .timer, .col-box .col-item .timer {position:absolute;right:2.1rem;top:50%;font-size:1.4rem;line-height:2rem;margin-top:-1rem;color:#1769ff;}
.col-box .col-item .inp-st:disabled + .timer {color:#999;}
.col-box.equal .col-item {-webkit-box-flex:1;-ms-flex:1;flex:1;width:50%;margin-left:2rem;}
.col-box.equal .col-item:first-of-type {margin-left:0;}
/* help text box */
.login-box .h-txt-box {margin-bottom:4rem;border-radius:0.2rem;text-align:center;background-color:#f5f5f5;}
.login-box .h-txt-box h2 {margin-bottom:0.9rem;font-size:1.8rem;line-height:2.7rem;color:#1769ff;}
.login-box .h-txt-box p {font-size:1.4rem;line-height:2rem;}
.h-txt-box .sol-txt {padding:2.4rem 0 2.6rem 0;}
.h-txt-box .mul-txt {padding:2rem 0;}

<인증번호 에러>

HTML

<div class="flx-container v-center" id="container">
	<section class="frm-sect">
		<div class="login-box">
			<div class="h-txt-box">
				<div class="sol-txt">
					<article class="status-msg-box">
					<p class="err"><!-- 입력 오류 시 err 클래스 적용, 입력 완료 시 ok 클래스 적용 -->
						입력시간이 초과되었습니다.
					</p>
				</article>
				</div>
			</div>
			<form action="" method="post">
				<fieldset>
					<legend>2단계 인증 영역</legend>
					<div class="row col-row err"><!-- 입력 오류 시 err 클래스 적용, 입력 완료 시 ok 클래스 적용 -->
						<span class="col-item">
							<label for="user-pw" class="hide">인증번호 4자리 입력</label>
							<input type="tel" id="user-pw" class="inp-st" maxlength="4" placeholder="인증번호 4자리">
							<span class="timer">0:00</span>
						</span>
						<span class="col-item">
							<button type="button" class="m-btn-type key-color">재발송</button>
						</span>
					</div>
				</fieldset>
				<article class="status-msg-box">
					<p class="err"><!-- 입력 오류 시 err 클래스 적용, 입력 완료 시 ok 클래스 적용 -->
						* 인증번호를 정확히 입력해주세요. (3회 실패 시 인증번호 재발송)
					</p>
				</article>
				<div class="frm-btn-module">
					<button type="submit" disabled="disabled">휴대폰 인증</button>
				</div>
			</form>
		</div>
	</section>
</div>

3. 비밀번호 변경

<입력전 비활성화>

<입력후 버튼 활성화>

<입력 에러>

HTML

<div class="flx-container v-center" id="container">
	<section class="frm-sect">
		<div class="login-box">
			<div class="h-txt-box">
				<div class="mul-txt">
					<h2>비밀번호를 변경해 주세요.</h2>
					<p>6개월마다 비밀번호 교체는 필수사항입니다.</p>
				</div>
			</div>
			<form action="" method="post">
				<fieldset>
					<legend>비밀번호 변경 영역</legend>
					<div class="row err"><!-- 에러 메시지 활성화 시 err 클래스, 성공 메시지 활성화 시 ok 클래스 추가 -->
						<label for="crr-pw" class="hide">현재 비밀번호 입력</label>
						<input type="password" id="crr-pw" class="inp-st" maxlength="16" placeholder="현재 비밀번호 입력">
					</div>
					<article class="part-sect active"><!-- 활성화 시 active 클래스 적용 -->
						<p class="err">* 비밀번호가 일치하지 않습니다.</p><!-- 입력 오류 시 err 클래스 적용, 입력 완료 시 ok 클래스 적용 -->
					</article>
					<div class="row"><!-- 에러 메시지 활성화 시 err 클래스, 성공 메시지 활성화 시 ok 클래스 추가 -->
						<label for="chg-pw" class="hide">변경할 비밀번호 입력</label>
						<input type="password" id="chg-pw" class="inp-st" maxlength="16" placeholder="변경할 비밀번호 입력">
						<!-- <div class="pw-validation active">
							<span class="inner-field step01">비밀번호 안전 유효성 체크</span> step01, step02, step03, step04 단계별로 클래스 분기 
						</div> -->
					</div>
					<article class="msg-sect active"><!-- 활성화 시 active 클래스 적용 -->
						<p>* 영문, <em>숫자</em>, 특수문자 포함 8~16자로 입력해주세요.</p><!-- 영문, 숫자, 특수문자 중 미입력 오류 시에 강조 표현은 em 태그 추가 -->
					</article>
					<div class="row ok"><!-- 에러 메시지 활성화 시 err 클래스, 성공 메시지 활성화 시 ok 클래스 추가 -->
						<label for="cf-pw" class="hide">변경할 비밀번호 확인</label>
						<input type="password" id="cf-pw" class="inp-st" maxlength="16" placeholder="변경할 비밀번호 확인">
						<!-- <span class="cf-validation active ok">변경한 비밀번호 동일여부 체크</span> --><!-- 활성화 시에 active 클래스 적용 --><!-- 동일한 텍스트 입력 시 ok 클래스 적용 -->
					</div>
				</fieldset>
				<article class="status-msg-box">
					<p class="ok"><!-- 입력 오류 시 err 클래스 적용, 입력 완료 시 ok 클래스 적용 -->
						* 비밀번호가 일치합니다.
					</p>
				</article>
				<div class="frm-btn-module">
					<button type="submit">변경하기</button>
				</div>
			</form>
		</div>
	</section>
</div>