전체 화면 로그인 및 계정 만들기

피드백을 드립니다! :smile:

전체적으로 잘 보입니다. 다만 시각적 아이덴티티가 다소 부족해 보입니다. :thinking:. (수정: 페나르와 동일한 느낌을 확실히 받습니다.)

모바일

세로 모드에서는 잘 보입니다.

스크린샷

가로 모드에서 몇 가지 문제가 있습니다:

  • 헤더가 잘립니다. 위로 스크롤할 수는 없지만, 아래로 스크롤할 수는 있습니다.
스크린샷

세로 모드에서도 발생합니다.
로그인 페이지에서 키보드가 내용을 위로 밀어 올립니다. 가입 페이지에서는 발생하지 않습니다.

가로 모드에 대해 말씀드리자면, 대부분의 사용자는 이를 사용하지 않을 것입니다. 하지만 발생할 수 있으며, 사용자 경험(UX)이 좋지 않습니다. 환영 메시지의 주위에 블록들이 떠 있도록 몇 가지 CSS를 조정할 수 있다고 생각합니다. 이상적이지는 않지만 괜찮은 방법입니다:

예시 1

그러나 제게 가장 시각적으로 매력적인 것은 자격 증명(로그인 정보)과 소셜 버튼을 반으로 나누는 것입니다:

예시 2

  • 직접적인 관련은 없습니다. 모바일에서는 첫 번째 입력 필드가 포커스되고 키보드가 바로 열립니다. (모든 기기에서 동일한 동작인지 모르겠습니다)
    다음 두 가지 이유로 사용자 경험이 악화될 수 있다고 생각합니다:
    1. 처음에 전체 페이지를 볼 수 없으며, 환영하는 느낌이 들지 않습니다.
    2. 모든 로그인 옵션을 볼 수 없습니다. (특히 소셜 로그인을 사용하는 사용자에게는 매번 키보드를 닫아야 합니다)
로그인 클릭 후 제가 보는 화면

데스크톱

전체적으로 잘 보입니다. 몇 가지 문제가 있습니다.

  • 중간 화면 크기에서는 잘 보입니다:
스크린샷

  • 큰 화면에서는 확신이 서지 않습니다. 잘 보이지만, 모든 소셜 버튼을 한 줄에 배치하는 것이 편리해 보일 수 있는 반면, 비정상적으로 보입니다(작은 콘텐츠가 중앙에 있고, 그 아래에 큰 콘텐츠가 있는 형태). 틀린 것은 아니며 괜찮아 보입니다 – 주의가 중앙의 한곳에 집중되기 때문에 이전 스타일에 대한 습관일 수도 있습니다.
스크린샷

이전에 하신 방식은 실제로 꽤 우아했습니다. 페나르가 제안했듯이, max-width를 설정하면 잘 보일 것입니다. 큰 화면에서 두 열을 보고 싶습니다. 그러면 한도를 초과하면 자동으로 아래로 줄바꿈되므로 괜찮을 것입니다.

max-width 조정과 함께 이전과 유사한 로그인 화면

  • 반응형 측면에서 – 최소 높이를 밑돌면 왼쪽 패널에 스크롤바가 나타납니다. 실제 기기에서 발생하는지 테스트할 수 없습니다. 내부 컴포넌트 대신 페이지를 스크롤하는 것이 사용자에게 더 자연스러울 것이라고 생각합니다.
스크린샷

공통

  • 로그인 모달이 열릴 때 포럼의 스크롤바가 눈에 띄며, 이를 조작할 수 있습니다. 사용자가 아무것도 없는 것처럼 보일 수 있어 혼란을 줄 수 있습니다. 모달의 스크롤바도 동시에 나타나는 경우 어지러울 수 있습니다.
예시

4개의 좋아요