PC version
Last updated
Last updated
로그인 화면과 로그인화면에서 status 바 클릭시 나타나는 pkselecter 소개 화면이다. status 바를 누르고 닫기 버튼을 누를때 animation효과를 추가해 동적인 화면을 구현했다. 메인 색상과 폰트를 선택할 때 많은 시간을 들인만큼 전체적으로 차분하고 깔끔한 이미지를 연출할 수 있었다. 또한 소개화면에는 pkselect의 간략한 설명과 함께 개발구성원명과 github, gitbook의 링크를 걸어두었다.
사용자가 입력한 아이디와 비밀번호가 lms 로그인 정보와 맞지 않아 서버에서 status 값으로 400을 응답받았을 때 사용자에게 뜨는 창이다. 확인 버튼을 누르면 다시 mainpage가 리로드된다.
서버에러가 발생해 status 값으로 500을 응답받았을 때 사용자에게 뜨는 창이다. 확인 버튼을 누르면 다시 mainpage가 리로드된다.
로그인 버튼을 눌렀을 때 lms에서 필요한 정보를 가져 오는데에 걸리는 시간 동안 사용자에게 보이는 로딩화면이다.
좌측에는 날짜별로 미제출 항목을 확인할 수 있는 달력과 우측에는 강의, 과제, 시험 별로 미제출된 항목을 확인할 수 있는 테이블을 배치했다. 달력과 테이블을 비교하여 확인할 수 있도록 두 요소를 한 화면에 양옆으로 배치했다.
UI를 고려하여 웹 사이트의 가로길이에 따라 달력과 테이블을 재정렬하여 모바일에서 처럼 달력을 위에, 테이블을 아래에 배치하였다.
