AccessPage

Glossary

Terms	Details
Access	로그인, 회원가입, 비밀번호 찾기 기능
AccessBox	AccessPage 우측 box로 AccessPage의 실질적인 기능이 이뤄지는 부분이다.
position	학생, 학생회장, 관리자

AccessBox

AccessPage의 AccessBox Design

AccessBox Design

• NAVER

Access를 할 때 학생인가 학생회장인가에 따라 url 및 payload를 담는 정보가 달랐기 때문에 position을 구분해야만 했다. 이것을 어떻게 디자인적으로 녹여낼지에 대한 고민이 많았는데, NAVER의 로그인 박스 내의 nav 디자인에서 아이디어를 얻어 문제를 해결할 수 있었다. 그 덕분에 사용자가 position을 선택해야만한다는 정보전달이 명확하면서도, 깔끔한 디자인으로 AccessPage와 어우러지게 표현할 수 있었다.

또한 NAVER의 로그인 박스 하단의 페이지이동 링크 디자인도 참고해서 AccessBox를 구현하였다.

• Kakao

벤치마킹 할 때 타 사이트와 다르게 사용자가 Access 기능을 이용할 때 디자인이 일관성 있으면서도, 해당 기능의 전달이 명확했다는 점이 마음에 들었다. 따라서 Naver의 AccessBox 디자인과 Kakao의 Access 기능 연결을 합쳐서 PKSCL의 AccessPage 디자인을 결정했다.

ICone Design

• 사용자가 input에 백엔드와 규정해 놓은 info 규칙에 맞게 기입을 했을 시에는 좌측의 icone의 색을 다르게 해서 사용자가 회원가입 요청을 보내기 전에 입력 내용을 재확인할 수 있게끔 하였다.

AccessPage Design

타 사이트들은 검색과 같은 다른 기능들을 수행하고 Access를 필요로 할 때만 AccessPage로 접속을 하기 때문에 디자인이 심플했다. 하지만 본 프로젝트의 경우에는 Access를 해야지만 다른 기능을 수행할 수 있기 때문에 첫 페이지의 디자인이 중요했다. 따라서 카카오와 같이 우측에 Access 기능을 두고 좌측에는 사이트의 설명을 적고 심플하다는 느낌을 없애기 위해 에니메이션을 넣어 사이트가 동적으로 보이게 함으로서 AccessPage의 디자인을 완성시켰다.

최종 디자인

1) PC version

AccessPage PC Version (영상)

AccessPage PC Version (이미지)

AccessPage PC Version (이미지)

2) mobile version

mobile version은 타 사이트와 유사하게 AccessBox 가운데로 위치시키고 Box 상단에 로고를 배치하였다. 부가적으로는 시간에 따라 배경 color가 달라지게 디자인해서 PC 버전과 통일감을 주었다.