이 주제는 meta를 통해 제공된 전체 화면 로그인/계정 생성 스타일링에 대한 피드백을 추적하기 위한 것입니다: Discourse Design team experimentation topic
7개의 좋아요
미리 로드되나요?
정말 좋습니다. 작은 크기의 모달은 이미 오래전부터 일반적인 인터넷 사용자 앱에서 구식이라고 여겨지고 있습니다.
6개의 좋아요
정말 좋네요! 아주 좋습니다. 
몇 가지 피드백을 드리고 싶습니다:
- 데스크톱 — 대형 화면에서 소셜 버튼의 너비가 너무 넓어 부담스럽게 느껴질 수 있습니다. 하지만 버튼을 축소하면 좌/우 패널 간의 시각적 균형을 맞추는 데 더 많은 노력이 필요할 수 있습니다.
- 데스크톱 — 접근성을 위해 닫기 아이콘의 색상에 더 많은 대비가 필요할 수 있습니다.
스크린샷
- 모바일 — 아주 사소한 부분입니다
. 줄 간격이 조금 높은 것 같습니다.
- 모바일 — 이 부분은 확실하지 않습니다. 화면 대비에 따라 달라질 수 있습니다. 소셜 버튼의 테두리 색이 거의 보이지 않는 것 같습니다(모바일에서 제가 가장 먼저 눈치챈 부분이지만, 제 두 번째 화면에서는 괜찮아 보입니다). 너무 과할 수 있으니 이해합니다. 분명히 눈이 피로할 것입니다.
primary-300을 사용하면 조금 도움이 될 수 있습니다.
6개의 좋아요
이렇게 자세한 피드백을 주셔서 감사합니다!
2개의 좋아요
현재는 메타에서 실험하고 피드백을 받기 위해 설치되어 있습니다. 반응이 좋다면 최종적으로 핵심 제품에서 기본값으로 설정할 예정입니다.
4개의 좋아요
상단에 여백이 너무 많이 있는 것 같습니다. 로그인 버튼이 보이도록 스크롤을 해야 하는 이유는 무엇인가요? 영상에서 보시듯이, 결국 전체 텍스트가 화면에 완벽하게 맞습니다.
2개의 좋아요
iOS의 Safari에서 “Welcome” 텍스트가 잘립니다.
위로 또는 아래로 스와이프해도 문제가 해결되지 않습니다. 또한 모달의 x 기호가 이모지 위에 위치해 있다는 점도 주목할 만합니다.
여기서 최선의 선택은 모달의 전체 페이지 처리(full page treatment)에 최대 너비 제한을 두는 것일지 궁금합니다. 특정 너비를 넘어서면 여전히 전체 뷰포트를 사용하는 것은 의미가 없을 가능성이 큽니다.
2개의 좋아요
아, 인증 로그인 옵션이 존재했을 때 모달에서 사용했던 left|right 레이아웃을 그대로 유지하고 있기 때문인 것 같습니다.
대안 로그인 옵션을 메인 로그인 영역 아래로 가져오는 방안을 검토해 보겠습니다.
2개의 좋아요
이 피드백의 대부분을 반영하여 일부 조정을 했습니다. 확인해 보고 의견을 알려주세요
@pmusaraj 이분도 확인해 주세요. 2열 레이아웃에서 벗어나 전체 화면 중앙에 단일 뷰로 통합했습니다. 구글과 많은 다른 사이트의 로그인 페이지와 유사한 방식입니다.
3개의 좋아요
흥미로운 아이디어이긴 하지만, 솔직히 말하면 완전히 동의하진 않습니다. 아마도 제게 근육 기억이 있는 것 같기도 한데, 확실히 이런 화면에서 흰색/파란색(다크 테마의 경우 검은색/파란색)의 분할 디자인에 익숙해져 있습니다. 하지만 제게는 그것이 Discourse의 정체성의 일부가 되기도 했습니다. 이를 제거하는 것은 큰 변화처럼 느껴집니다.
몇 가지 나란히 놓은 스크린샷을 올려보겠습니다. 맥락을 이해하는 데 도움이 될 것입니다. (서로 다른 인스턴스에서 캡처한 것이지만, 변경 사항의 개념을 보여주기 위한 것입니다.)
또한, 가입 모달에서 “계정 만들기” CTA(행동 유도 버튼)가 스크롤 아래에 있어 바로 보이지 않습니다.
마지막으로, 한 가지 더 고려해볼 점은 모든 전체 화면 로그인 화면에서 사이트 로고가 없다는 것입니다. 사용자는 보통 자신이 어디에 있는지 알고 있지만, 로고는 이메일이나 비밀번호와 같은 민감한 데이터를 올바른 사이트에 입력하고 있다는 것을 확인시켜 주는 중요한 추가 검증 수단입니다. 이전 화면에서는 모달 프레임 덕분에 로고가 어느 정도 표시되고 있었습니다.
8개의 좋아요
피드백을 드립니다!
전체적으로 잘 보입니다. 다만 시각적 아이덴티티가 다소 부족해 보입니다. 
. (수정: 페나르와 동일한 느낌을 확실히 받습니다.)
모바일
세로 모드에서는 잘 보입니다.
가로 모드에서 몇 가지 문제가 있습니다:
- 헤더가 잘립니다. 위로 스크롤할 수는 없지만, 아래로 스크롤할 수는 있습니다.
가로 모드에 대해 말씀드리자면, 대부분의 사용자는 이를 사용하지 않을 것입니다. 하지만 발생할 수 있으며, 사용자 경험(UX)이 좋지 않습니다. 환영 메시지의 주위에 블록들이 떠 있도록 몇 가지 CSS를 조정할 수 있다고 생각합니다. 이상적이지는 않지만 괜찮은 방법입니다:
그러나 제게 가장 시각적으로 매력적인 것은 자격 증명(로그인 정보)과 소셜 버튼을 반으로 나누는 것입니다:
- 직접적인 관련은 없습니다. 모바일에서는 첫 번째 입력 필드가 포커스되고 키보드가 바로 열립니다. (모든 기기에서 동일한 동작인지 모르겠습니다)
다음 두 가지 이유로 사용자 경험이 악화될 수 있다고 생각합니다:- 처음에 전체 페이지를 볼 수 없으며, 환영하는 느낌이 들지 않습니다.
- 모든 로그인 옵션을 볼 수 없습니다. (특히 소셜 로그인을 사용하는 사용자에게는 매번 키보드를 닫아야 합니다)
데스크톱
전체적으로 잘 보입니다. 몇 가지 문제가 있습니다.
- 중간 화면 크기에서는 잘 보입니다:
- 큰 화면에서는 확신이 서지 않습니다. 잘 보이지만, 모든 소셜 버튼을 한 줄에 배치하는 것이 편리해 보일 수 있는 반면, 비정상적으로 보입니다(작은 콘텐츠가 중앙에 있고, 그 아래에 큰 콘텐츠가 있는 형태). 틀린 것은 아니며 괜찮아 보입니다 – 주의가 중앙의 한곳에 집중되기 때문에 이전 스타일에 대한 습관일 수도 있습니다.
이전에 하신 방식은 실제로 꽤 우아했습니다. 페나르가 제안했듯이, max-width를 설정하면 잘 보일 것입니다. 큰 화면에서 두 열을 보고 싶습니다. 그러면 한도를 초과하면 자동으로 아래로 줄바꿈되므로 괜찮을 것입니다.
- 반응형 측면에서 – 최소 높이를 밑돌면 왼쪽 패널에 스크롤바가 나타납니다. 실제 기기에서 발생하는지 테스트할 수 없습니다. 내부 컴포넌트 대신 페이지를 스크롤하는 것이 사용자에게 더 자연스러울 것이라고 생각합니다.
공통
- 로그인 모달이 열릴 때 포럼의 스크롤바가 눈에 띄며, 이를 조작할 수 있습니다. 사용자가 아무것도 없는 것처럼 보일 수 있어 혼란을 줄 수 있습니다. 모달의 스크롤바도 동시에 나타나는 경우 어지러울 수 있습니다.
예시
4개의 좋아요
오늘도 또 다른 라운드의 세부 조정 및 수정 사항이 추가되었습니다
4개의 좋아요
기존:
신규:
현재 좁은 화면에서 소셜 계정으로 가입하는 부분이 매우 부각되지 않고 있습니다. 시각적으로는 더 좋아 보이지만, 이제 이 액션들이 눈에 잘 띄지 않습니다.
사이드바… 가입 시 텍스트를 "Google로 가입"으로 변경하는 것이 좋을 것 같습니다. 또한 일부는 'sign in’이고 다른 일부는 'log in’인 점이 혼란스럽습니다.
4개의 좋아요
이것은 또한 소셜 로그인 가이드라인에 저촉됩니다. 과거에 몇몇 사이트가 규정 미준수 페이스북 버튼으로 인해 통지를 받은 적이 있습니다(소셜 로그인 요구사항이 일부가 “로그인” 대신 "가입"을 사용하는 이유일 수도 있지만, 그 부분은 100% 확신할 수 없습니다)
4개의 좋아요
푸터에 공유/팔로우 아이콘이 하나 더 추가된 것처럼 보입니다. 전혀 좋지 않으며, 대부분의 사용자가 실제로 로그인용으로 사용되는 아이콘인지 인지하지 못하고 있을 것이라고 확신합니다.
1개의 좋아요
자, 시작합니다.
모바일
- 세로 모드에서는 잘 보입니다!
개선할 수 있는 부분:- 제 휴대폰(Android, FDH+, 2220x1080)에서는 소셜 버튼이 꽤 작게 보입니다. 비교를 위해 말씀드리면, 제 손가락 너비는 약 1.5cm인데, 제 휴대폰 화면에서 버튼 너비는 0.5cm입니다. 이는 접근성 문제일 수 있습니다. 버튼(그리고 간격도)을 조금 더 크게 만드는 것을 시도해 볼 것을 권합니다.
- 제 휴대폰(Android, FDH+, 2220x1080)에서는 소셜 버튼이 꽤 작게 보입니다. 비교를 위해 말씀드리면, 제 손가락 너비는 약 1.5cm인데, 제 휴대폰 화면에서 버튼 너비는 0.5cm입니다. 이는 접근성 문제일 수 있습니다. 버튼(그리고 간격도)을 조금 더 크게 만드는 것을 시도해 볼 것을 권합니다.
-
키보드가 표시될 때 모달이 위로 이동합니다. 이는 최근 변경 사항 FIX: Modals on Android when keyboard is visible - Pull Request #24442 - discourse/discourse - GitHub 와 관련이 있다고 생각합니다. – 그러나 전체 화면 로그인 모달에는 이 변경 사항이 적용되어서는 안 된다고 생각합니다. 레이아웃 시프트가 발생하는 것은 좋은 경험이 아닙니다.
-
가로 모드에서는 변경되지 않은 것으로 추정됩니다. 이 영역에 대한 세심한 조치가 필요합니다.
데스크톱
전체적으로 잘 보입니다!
저는 이 디자인에 확실히 찬성합니다. 되살려 주셔서 감사합니다!
큰 화면
두 가지 우려 사항이 있습니다:
- 두 패널 사이의 간격이 여전히 조금 넓습니다.
- 소셜 버튼이 조금 너무 큽니다.
2번에 대해 – 더 많은 브레이크포인트를 도입할 수 있습니다.
@media screen and (min-width: 1536px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 70%;
}
}
@media screen and (min-width: 1920px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 60%;
}
}
@media screen and (min-width: 2560px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 50%;
}
}
2K 해상도에서는 다음과 같이 보입니다:
1번에 대해 – 확신이 서지 않습니다. 가능한 대안입니다. 이 방식의 장점은 시각적 아이덴티티를 유지하면서 사용자의 시선이 항상 중앙에 위치한다는 것입니다. 파란색 패널의 너비를 조정할 수 있습니다. 정확한 느낌은 아니지만 꽤 가깝습니다.
참고: 버튼 너비가 줄어든 현재 디자인에는 꽤 만족합니다. 혹시 영감이 떠오르실 경우를 대비해 이 제안을 공유합니다. 개인적으로 꽤 마음에 듭니다.
코드를 살펴보며 몇 가지 CSS를 발견했습니다:
- 왼쪽 패널에는
padding-top이3rem입니다 – 이는 유용해 보이지 않으며, 오른쪽 패널과 비교했을 때 패널이 중앙 정렬되지 않게 만듭니다.
.login-left-side {
padding: 0 3rem 0 3rem
}
- 가입 양식이 세로 방향으로 중앙 정렬되어 있지 않습니다. 이 CSS를 사용하고 있습니다. 특별한 이유가 있을까요?
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
중앙 정렬이 제 생각에는 좋습니다.
- 접근성 문제를 해결하기 위해 닫기 버튼의 색상 대비를 조정해야 할 수 있습니다. 대신
--primary-very-high를 사용하는 것을 권합니다.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
제 의견은 여기까지입니다!
3개의 좋아요
이것이 그 이유입니다. 작은 화면에서 사회적 로그인의 최후의 선택지는 로고만 표시하는 것이라고 생각하지만, 이 부분은 사실 확인을 해봐야 할 것 같습니다.
2개의 좋아요
그렇게 지적해 주셔서 감사합니다! 이제 그렇게 보이게 되어 다른 걸로 생각할 수가 없네요!
음…
버튼에 대해 찾을 수 있는 스타일 가이드는 Facebook과 Google 것뿐인 것 같습니다.
Facebook은 오직 "Facebook으로 로그인"이라는 텍스트가 있는 사각형 버튼만 허용합니다. 또한 Facebook 외의 다른 서비스로 인증하는 옵션을 많이 두는 것도 원치 않습니다.
Google은 필요 시 로고만 사용하여 로그인 버튼으로 사용하는 것을 허용합니다.
메타에서 잠깐 둘러봤는데 꽤 멋있어 보이네요. 다만 제가 주로 이용하는 포럼은 SSO만 지원해서 저한테는 큰 영향이 없을 것 같아요.
1개의 좋아요