[UXUI] 구글의 새로운
로그인 화면 디자인
로그인 페이지를 더 현대적인 디자인으로 개선하였습니다.
며칠 전부터 구글에서 로그인 시 현대적인 디자인으로 개선할 것이라는 안내를 했다. 현재 순차적으로 새로운 디자인이 배포되고 있는데, 새로운 로그인 화면의 디자인 변화는 다음과 같다.
반응형 디자인
하나의 통일된 화면 디자인에서 화면 비율에 따라 반응형으로 나뉜다. 3가지의 디자인으로 나뉘는데, 이는 각 디바이스의 화면비를 고려하여 나뉜 것으로 보인다.
기존 로그인 페이지
변경된 로그인 페이지1번: PC 모니터
2번: 태블릿
3번: 휴대폰
동글동글한 디자인
기존에는 얕은 라인으로 배경과 구분을 한 반면, 개선된 디자인에선 배경 색상을 이용하여 구분을 주었다. PC상에서 볼 수 있는 화면은 BG색상과 분리하여 집중도를 높였고, 모바일 기준 화면에서는 작은 화면이다 보니 별도의 BG구분이 없다. 또한 전체적으로 모서리 radius 값을 키워 동글동글한 디자인이 되었다.
라인으로 배경과 구분 -> 색상으로 배경과 구분
(좌) 기존 디자인 / (우) 변경 디자인 버튼
(위) 기존 디자인 / (아래) 변경 디자인 버튼모서리 radius 값의 차이
(좌) 기존 디자인 / (우) 변경 디자인 버튼버튼 radius 값의 차이
(좌) 기존 디자인 / (우) 변경 디자인 버튼아이콘(ᐯ -> ▼) 및 외곽선 차이
(좌) 기존 디자인 / (우) 변경 디자인 버튼타이틀이 강조된 디자인
기존의 디자인은 텍스트의 레벨이 비슷하여 중요도의 차이가 크게 나지 않았다. 변경된 디자인에서는 타이틀의 사이즈를 키워 더 잘 보일 수 있도록 했는데, 현재 페이지의 상태를 사용자에게 알려주는 것이 중요하다 생생각하여 강조한 것으로 보인다. (시작하기, 로그인, 본인 인증, 간편한 로그인, 2단계 인증 등)
타이틀이 강조된 화면 디자인또한 타이틀과 입력창이 한 번에 볼 수 있는 구조에서 입력창과의 여백의 차이를 크게 주어 시선을 분리시켰다. 텍스트의 크기뿐만 아니라 이러한 레이아웃은 타이틀을 한번 더 인지할 수 있게 도와준다.
(좌) 기존 디자인의 여백 / (우) 변경된 디자인의 여백
여백의 차이로 한 묶음에서 두 묶음으로 분할되어 보이게 되었다.구독과 라이킷은 글 작성에 많은 힘이 됩니다.
