간단한 회원가입 페이지

1. 개요

주어진 과제는 간단한 회원가입 페이지를 디자인하는 것이다. 주어진 항목으로는 아이디(username), 비밀번호(password), 비밀번호 확인(password-retype), 회원가입 버튼이 있다. 그리고 이번 과제 구현을 위해 깃헙의 signup 페이지를 참고하기로 하였다.

2. 와이어프레임

위의 사진을 크게 5부분으로 나누었다. 위에서부터 순서대로 인사말이 적혀져있는 부분, 아이디를 입력하는 부분, 비밀번호를 입력하는 부분, 비밀번호를 다시 한 번 확인하는 부분, 마지막으로 회원가입 버튼이 있는 부분과 같이 나누었다. 그리고 제일 위의 인사말 두 줄은 h2를 두 개 이용해 표현하였으며 각 input이 있는 부분은 title 부분과 input 부분으로 또 다시 나누었다. 마지막으로 join 버튼이 있는 부분은 title과 버튼을 같은 위치에 두기로 하였다.

3. html, css

우선 전체적인 틀은 div#wrapper를 이용해 하나로 합쳤다. 그리고 div#wrapper의 position은 relative로 주었는데, 이는 후술할 에러 메세지의 위치 때문이다. 각각의 영역은 'flex: 1 0 0;'을 통해 모두 같은 높이를 갖게 하였다. 또한, 적절한 padding 값을 통해 각 영역 속의 요소들이 지나치게 borderd에 붙어 표시되는 것을 방지하였다. 주어진 과제에서 아이디의 글자가 4글자 미만이거나 비밀번호 확인이 틀릴 경우 에러 메세지가 표시되는데 이 에러 메세지 또한 html 코드로 작성하였다. 그리고 이 떄의 에러 메세지는 어느 상황에서든 div#wrapper의 상단에 표시되기를 원했으며 이를 'position: absolute;'을 통해 구현하였다. 그리고 최상단의 인사말은 한 글자씩 표시되게 하기 위해 stackoverflow의 글을 참고해, type이라는 keyframe과 white-space, overflow, width 값을 이용해 구현하였다.(https://stackoverflow.com/questions/33486228/how-to-reveal-one-letter-at-a-time) 그리고 각 input 영역은 천천히 등장하게 하기 위해 @keyframe showField와 animation을 이용하였다.

4. JS

자바스크립트 코드는 document.querySelector를 이용해 각각 필요한 것들을 불러온 후, 각각의 버튼이 클릭될 때마다 그 상황에 맞는 함수를 실행시킨다. 그리고 각각의 버튼에 해당하는 함수들의 내용은 거의 비슷하다. 예를 들어, username 버튼을 클릭하였을 경우, username이 특정한 조건을 충족하는지 체크한다. 이번 코드에서는 단순히 username의 길이가 4 이상인지만 검사한다. 그래서 만약 이 조건을 충족한다면 아이디 입력 영역의 아이콘과 버튼 텍스트를 변경하고, input을 변경 불가능하게 바꾼 후 비밀번호 입력 영역을 표시한다. 만약 조건을 충족하지 못한다면 이에 해당하는 에러 메세지를 띄운다.

5. 결과