10년 전, 저는 초병이었습니다. 부대의 관문인 위병소에서 출입하는 인원 및 차량을 통제했습니다. 매일 반복되는 지겨운 업무였지만, 가장 중요하게 생각했던 것이 있습니다. 바로 '멋'입니다. 언제나 A급 전투복과 광이 나는 전투화를 신고 나섰습니다. 그리고 올곧은 자세로 업무에 임했습니다. 제 모습은 우리 부대의 첫인상이기 때문입니다.
뭐든 처음이 중요합니다. 인간은 0.3초 만에 사람을 호감/비호감으로 구분하고, 3초가 지나면 그 사람에 대한 첫인상이 결정됩니다. 회원가입 화면은 어플리케이션의 첫인상입니다. 아이디, 비밀번호, 비밀번호 확인, 이름을 입력하는 30초 정도의 시간이 사용자로 하여금 사용하고 싶은 어플리케이션인지 사용하고 싶지 않은 어플리케이션인지 결정할 겁니다.
완성된 화면
jsp 코드
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>iraefolio - sign In</title>
<!-- Icon -->
<link rel="icon" href="../../resources/images/logo.png">
<!-- Library -->
<%@include file="common/library.jsp"%>
<!-- CSS -->
<link rel="stylesheet" href="../../resources/css/signIn.css">
<!-- JS -->
<script type="text/javascript" src="../../resources/js/signIn.js"></script>
</head>
<body>
<!-- Header -->
<%@include file="common/header.jsp"%>
<section class="main">
<div class="inner">
<div class="text-box">
<span>반가워요! 🤗😍</span>
</div>
</div>
<div class="boxWrapper">
<div class="input-box">
<form action="/signIn" id="signInForm" method="post">
<input type="text" name="username" id="username" placeholder=" 아이디를 입력해주세요."/>
<input type="password" name="password" id="password" placeholder="비밀번호를 입력해주세요." style="display: none"/>
<img src="../../resources/images/common/return.png" alt="return icon" id="returnIcon" class="icon" style="display: none"/>
<input type="password" name="password" id="secondPassword" placeholder="비밀번호를 입력해주세요." style="display: none"/>
<input type="text" name="name" id="name" placeholder="이름을 입력해주세요." style="display: none"/>
<p>아이디를 입력하고 엔터를 쳐보세요!</p>
</form>
</div>
</div>
</section>
<!-- Footer -->
<%@include file="common/footer.jsp"%>
</body>
</html>js 코드
const englishOnly = /^[a-zA-Z]*$/;
$(function() {
signIn.init();
});
let signIn = {
init: function () {
let _this = this;
$("#username").focus();
$("#username").on('keydown', function (e) {
$("#username").on('input', function (e) {
let inputID = $(this).val().length;
if (inputID > 0) {
$("#returnIcon").attr('style', 'show');
} else {
$('#returnIcon').css('display', 'none');
}
});
if (e.keyCode == 13 && $("#username").val().length == 0) {
$('.boxWrapper .input-box p').text('아이디를 입력해주세요.');
return false;
}
if (e.keyCode == 13 && $("#username").val().length != 0) {
let USER_NAME = $("#username").val();
let result;
if (!englishOnly.test(USER_NAME)) {
$('.boxWrapper .input-box p').text('아이디는 영어 소문자만 사용할 수 있어요.');
return false;
}
if (USER_NAME.length < 4) {
$('.boxWrapper .input-box p').text('아이디는 최소 4글자 이상이여야 해요.');
return false;
}
result = _this.accountCheck(USER_NAME);
if (result) {
$('.boxWrapper .input-box p').text('이미 사용 중인 아이디입니다.');
return false;
} else {
$("#username").hide();
$('.boxWrapper .input-box p').text('비밀번호를 입력하고 엔터를 쳐보세요!');
$("#password").show();
$("#password").focus();
$('#returnIcon').css('display', 'none');
}
}
});
$("#password").on('keydown', function (e) {
$("#password").on('input', function (e) {
let inputPW = $(this).val().length;
if (inputPW > 0) {
$("#returnIcon").attr('style', 'show');
} else {
$('#returnIcon').css('display', 'none');
}
});
if (e.keyCode == 13 && $("#password").val().length == 0) {
$('.boxWrapper .input-box p').text('비밀번호를 입력해주세요.');
return false;
}
if (e.keyCode == 13 && $("#password").val().length != 0) {
let userPW = $("#password").val();
if (userPW.length < 4) {
$('.boxWrapper .input-box p').text('비밀번호는 최소 4글자 이상이여야 해요.');
return false;
}
$("#password").hide();
$("#secondPassword").show();
$("#secondPassword").focus();
$('.boxWrapper .input-box p').text('비밀번호를 한 번 더 입력해주세요.');
}
})
$("#secondPassword").on('keydown', function (e) {
$("#secondPassword").on('input', function (e) {
let inputSecondPW = $(this).val().length;
if (inputSecondPW > 0) {
$("#returnIcon").attr('style', 'show');
} else {
$('#returnIcon').css('display', 'none');
}
});
if (e.keyCode == 13 && $("#secondPassword").val().length == 0) {
$('.boxWrapper .input-box p').text('비밀번호 한 번 더 입력해주세요.');
return false;
}
if (e.keyCode == 13 && $("#secondPassword").val().length != 0) {
userPW = $("#password").val();
userSecondPW = $("#secondPassword").val();
result = _this.passwordCheck(userPW, userSecondPW);
if (!result) {
$('.boxWrapper .input-box p').text('비밀번호가 일치하지 않아요.');
return false;
} else {
$("#secondPassword").hide();
$('.boxWrapper .input-box p').text('');
$('#returnIcon').css('display', 'none');
$("#name").show();
$("#name").focus();
$('.boxWrapper .input-box p').text('이제 마지막이에요 :)');
}
}
})
$("#name").on('keydown', function (e) {
$("#name").on('input', function (e) {
let inputUserName = $(this).val();
if (inputUserName.length > 0) {
$("#returnIcon").attr('style', 'show');
} else {
$('#returnIcon').css('display', 'none');
}
})
if (e.keyCode == 13 && $("#name").val().length == 0) {
$('.boxWrapper .input-box p').text('이름을 입력해주세요.');
return false;
}
if (e.keyCode == 13 && $("#name").val().length != 0) {
$.ajax({
type: "POST",
url: "/create",
data: JSON.stringify({
username: $("#username").val(),
password: $("#password").val(),
name: $("#name").val(),
}),
contentType: "application/json",
dataType: "json",
success: function (data) {
window.location.href = "/";
},
error: function (response) {
window.location.href = "/";
}
});
}
})
},
accountCheck: function (USER_NAME) {
let result;
$.ajax({
type:"POST",
url:"/accountCheck",
async: false,
contentType:"application/json; charset=utf-8",
data: JSON.stringify({
username: USER_NAME
}),
success: function(response){
result = response;
},
error: function(response) {
}
});
return result;
},
passwordCheck: function (password, secondPassword) {
let result;
if (password == secondPassword) {
result = 1;
} else {
result = 0;
}
return result;
}
}
혜화동 사는 Architect