모바일에서 '가입' 찾기 쉽게 만들기

[dfabulich (Dan Fabulich)]

Discourse의 모바일 버전에서는 “회원가입” 버튼이 표시되지 않고, “로그인” 버튼만 표시됩니다. 사용자가 “로그인” 버튼을 누를 정도로 기억력이 좋다면, 화면 맨 아래에 "회원가입"으로 가는 링크가 있지만, 꽤 찾아야 합니다. (수년 전부터 이랬는데, 제가 이제야 알아챈 겁니다.)

오늘 한 사용자가 우리에게 이메일을 보내서, “회원가입” 버튼이 아예 없다고 불평했습니다. 찾지 못해서였죠.

그리고, 헤더 공간이 많이 없으니 이해는 합니다. 하지만 저에게는 기능 요청 사항이 세 가지 있습니다.

1. 모바일에서 “회원가입” 버튼이 햄버거 메뉴 맨 위에 표시되어야 합니다. 사이트 헤더에 표시될 만큼 중요하다고 생각한다면, 메뉴에서도 최소한 눈에 띄는 위치에 배치되어야 한다고 생각합니다.

2. “회원가입” 버튼이 기본(primary)으로 설정되고, “로그인” 버튼이 메뉴에 표시되도록 하는 사이트 설정이 있어야 한다고 생각합니다.

3. 모바일에서 "로그인"에서 "회원가입"으로, "회원가입"에서 "로그인"으로 전환하는 요소가 더 위에 표시되어야 합니다. “로그인” 헤더에는 "다시 오신 것을 환영합니다"라고 적혀 있고, “회원가입” 버튼을 찾으려면 화면 전체를 훑어봐야 합니다. “로그인” 버튼은 “회원가입” 화면에서 접힌선(below the fold) 아래에 위치하는데, 만약 우리가 사이트에서 "회원가입"을 기본 버튼으로 만든다면 너무 멀리 내려가게 됩니다.

[Lilly (Lillian)]

아마 이 정보가 도움이 될 수 있습니다: Combined Auth Button

[Moin]

Lilly님이 텍스트를 수정할 수 있고 사용자가 로그인 또는 가입을 선택할 수 있는 컴포넌트를 https://meta.discourse.org/t/discourse-combined-auth-button/401215에서 공유했습니다.

@Lilly

컴포넌트 기본 설정으로 표시되는 모바일 버튼 및 모달:

[dfabulich (Dan Fabulich)]

제 Discourse에서는 작은 스마트폰 화면에 "가입"과 “로그인” 버튼을 모두 표시할 공간이 부족합니다. (두 버튼이 모두 들어갈 수 있다면 애초에 이런 문제가 생기지 않았을 텐데요!)

[Lilly (Lillian)]

텍스트를 변경하고 아이콘을 숨겨서 크기를 작게 만들 수 있는 옵션이 있습니다.

@Lilly

hide_mobile_ combined_button_icon 활성화 시

[dfabulich (Dan Fabulich)]

여기서 정말 영웅적인 일을 하고 계시지만, 저는 공간이 정말 부족합니다. (Dev Tools에 들어가서 직접 수정해 봤는데, 모바일 사이트 로고가 충분히 넓어서 버튼에 "Sign Up / Log In"이 표시될 때 아이콘을 제거해도 읽을 수 없을 정도로 작아져 버립니다.)

[Moin]

텍스트를 더 짧은 것으로 변경할 수 있습니다.
예를 들어, 원문에서 제안하신 대로 "Sign up"을 사용할 수 있습니다.

@dfabulich

“Sign Up” 버튼이 기본 버튼이고, “Log In” 버튼이 메뉴에 표시되도록 하는 사이트 설정이 있어야 한다고 생각합니다.

또는 "Get in"도 좋습니다. 이는 기본 버튼보다 크지 않아야 합니다.

[Lilly (Lillian)]

여기서 모바일 로고가 유독 크게 느껴져서 스크린샷을 보여줄 수 있을까요? 데스크톱과 동일한 로고를 사용 중인가요?

[dfabulich (Dan Fabulich)]

FEATURE: Add "Sign Up" link to mobile hamburger menu (#40388)

[Moin]

커뮤니티 섹션을 커스터마이징할 수 있는 모달에 다른 모든 링크처럼 해당 링크도 표시되어 쉽게 삭제할 수 있을까요?

[awesomerobot (Kris)]

우리는 특별히 이례적인 일을 하고 있는 것 같지 않습니다…

대부분의 인기 있는 사이트는 로그인으로 시작하고, 일부는 둘 다 제시하지만 대체로 콘텐츠 대신 스플래시 페이지가 있는 경우에만 그러합니다… 그리고 반대 극단으로, 계정 버튼을 아예 라벨링하지 않고 두 옵션을 드롭다운 메뉴에 넣는 곳도 있습니다.

제 개인적인 선호는 아예 구분하지 않고 이메일을 입력받은 뒤, 계정 존재 여부에 따라 분기하는 방식입니다… 하지만 이 방식에는 몇 가지 단점이 있습니다.

기본적으로 메뉴에 추가하기 전에, 로그인 페이지에서 더 눈에 띄게 만드는 것을 고려해볼 수 있습니다. 링크 대신 전체 버튼으로? 긴 페이지에서 이것이 묻히지 않도록 하단에 고정되는 스티키 요소로?

[Lilly (Lillian)]

상당히 간단한 사이드바 솔루션은 링크를 추가한 후, 모바일 비로그인 사용자를 제외한 모든 사용자에게 해당 링크를 숨기는 것입니다. 이를 위해 간단한 CSS를 사용하면 됩니다:

@use "lib/viewport";

.sidebar-section-link-wrapper[data-list-item-name="Sign up"] {
  display: none;

  .anon & {
    @include viewport.until(md) {
      display: block;
    }
  }
}

[Jagster (Jakke Flemming)]

문제는 단 하나, 바로 사이드바 자체입니다. 모바일 사용자는 다음 두 가지를 사전에 알아야 합니다:

• 원하는 링크가 햄버거 메뉴 안에 있다는 것
• 햄버거 메뉴를 여는 방법

[jack222 (name)]

대부분의 인기 있는 웹사이트에서는 이미 가입된 사용자의 관점을 더 많이 고려하는 것 같습니다. 대부분의 방문자에게는 회원가입보다 로그인이 더 필요할 수 있으며, 로그인 버튼만 제공하는 것은 기존 사용자가 단 하나의 단계만으로 로그인할 수 있도록 편의를 제공하기 위함입니다.

하지만 신규 사용자 유입이 더 중요한 웹사이트에서는 회원가입을 원하는 사용자의 비율이 더 클 수 있습니다.

이것은 제 추측일 뿐이지만, 더 많은 사용자를 보유한 인기 있는 웹사이트와 일반 웹사이트는 고려하는 관점이 조금씩 다를 수 있습니다.

[Lilly (Lillian)]

네, 개인적으로 그 솔루션은 별로 마음에 안 들어요. 그냥 OP의 PR과 같은 결과를 낼 수 있어서 제안한 거예요.