유저카드 리디자인 실험

오늘 메타 포럼에 새로운 버전의 사용자 카드를 설치했습니다. 이를 통해 여러분의 피드백을 수집하고 어떤 부분이 잘 작동하며 어떤 부분이 그렇지 않은지 확인하고자 합니다.

새로운 버전

업데이트 사항

  • 사용자 헤더 배경
    • 사용자 배경을 카드의 배경 이미지가 아닌 헤더 이미지로 변경했습니다.
    • 사용자가 배경 이미지를 설정하지 않은 경우, 아바타의 색상을 사용하여 헤더 이미지를 생성합니다.
    • 배지를 새 사용자 카드의 상단 “배너 이미지” 영역으로 이동했습니다.
    • 사용자 위치 정보도 “배너 이미지” 영역으로 이동했습니다.
  • 사용자 통계 스타일 재설정
  • 사용자 상태를 전체 텍스트 설명 대신 아바타 아이콘으로 변경했습니다.
  • 작업 버튼을 카드 하단으로 이동했습니다.
  • 위치 정보가 Google Maps 또는 Open Street Maps로 링크되도록 허용했습니다.

참고용 구버전


어떤 실험이든 마찬가지겠지만, 이 새로운 사용자 카드와 관련하여 몇 가지 문제가 발생할 수 있다고 예상합니다.

이 토픽을 통해 시각적/기능적 버그를 보고하고, 카드 자체에 대한 의견도 남겨주시기 바랍니다.

참고로, 버그가 수정되면 정리를 위해 해당 버그를 보고한 게시글을 삭제할 예정입니다 :smile:

내 포럼에서 사용하기

위에서 언급했듯이, 이것은 여전히 실험 단계입니다. 장기적인 목표가 코어에 새로운 사용자 카드로 통합하는 것이므로, 이를 테마 구성 요소로 장기적으로 지원할 계획은 없습니다. 그렇더라도, 지금 바로 포럼에서 사용하시려면 → GitHub - discourse/experimental-usercard · GitHub 를 통해 설치할 수 있습니다.

55개의 좋아요

순수하게 궁금한 점이 있어서요…

about me가 불필요하다면, 왜 포인트, 읽는 시간, 그리고 가장 기이한 것인 ;), 케이크데이(cakeday)는 표시할 가치가 있는 건가요?

수정: 여기서는 about me가 보이지만, 제 포럼에서는 보이지 않네요. 더 기이합니다.

6개의 좋아요

케이크데이(cakeday)라는 개념이 다소 이상하다는 데 동의합니다. 저는 "가입일"이라는 표현을 더 선호했습니다.

하지만 그 모든 정보는 상대에 대한 판단을 내리는 데 유용합니다.

8개의 좋아요

와, 정말 멋져요! :slight_smile:

Locations 플러그인에 대해 아주 사소한 부분 몇 가지가 있어요:

  • 위치가 핀 아래 한 줄 아래에 표시됩니다.
  • 또한 레이아웃이 다른 두 개의 웹사이트 URL을 볼 수 있습니다. 몇 주 전까지는 이랬다가 @merefield 님에 의해 수정되었는데, 이전 사용자 카드에는 웹사이트가 두 개 있고 위치는 없었습니다.
7개의 좋아요

카테고리 등에서 제공하듯이, 사용자가 다크 모드용 이미지를 별도로 업로드할 수 있는 옵션을 제공하는 것도 좋은 아이디어일 수 있습니다.

4개의 좋아요

아바타 이미지 요소의 배경색을 제거해 볼 수 있을까요? 배경에 투명한 PNG를 사용하려고 고심한 사용자의 아바타가 오히려 더 나빠 보이는 것 같습니다.

사용자 카드의 배경/헤더 이미지는 이전보다 높이가 절반도 되지 않는데, 조금 더 늘릴 수 있지 않을까요 :thinking:

전체적으로 훌륭한 작업이었고, 매우 세련된 모습입니다.

9개의 좋아요

폰트가 있는 테마에서, Minima와 같은 경우처럼 사용자 카드 실험에 사용자 카드의 폰트가 적용되지 않습니다.
예시:

8개의 좋아요

리디자인이 올다니 정말 기대되네요! :star2:

다르게 보고 싶은 부분이 하나 있어요. 바로 헤더입니다. 솔직히 말하면, 지금 헤더는 좀 쓸쓸해 보인다고 느낍니다:

image

배경 이미지를 넣는 방식은 좀 평범해 보이고 커뮤니티 특성을 잘 살리지 못하는 것 같습니다. 위치 태그는 마치 파일에 붙은 라벨처럼 느껴지고, 배지는 구석에 작게 배치되어 있어요.

저는 배지를 정말 좋아하고, 제 경험상 많은 커뮤니티 매니저들도 배지를 활용해서 창의적인 표현을 즐깁니다. 새로운 카드에서 배지가 작게 축소되는 것이 아니라, 더 돋보이고 축하받는 느낌을 주었으면 좋겠어요. 이런 느낌이었으면 좋겠네요:

18개의 좋아요

이런 건 설정으로 처리하는 편이 나을 것 같습니다. 저는 개인적으로 3개만 표시하는 걸 선호합니다.

3개의 좋아요

이 문제를 해결하기 위해 사이트에 사용자 지정 CSS를 추가하는 것이 좋을 수 있습니다. 이것이 공식 discourse 플러그인이 아니므로, 결국 코어에 통합될 가능성이 있기 때문에 이를 지원하기 위해 CSS를 추가할지는 확신할 수 없습니다.

1개의 좋아요

부정적인 의견을 내서 죄송합니다. 특히 개선점에 대한 제안이 많지 않은 상황에서 더욱 그렇습니다. 하지만 솔직히 첫인상은 "으악, 진짜 싫다, 이건 버그인가?"라고 할 정도였습니다. 제가 틀렸을 수도 있고, 다른 사람들에게는 개선된 것일 수도 있지만, 저에게는 이전 사용자 카드가 정말 좋았고 단순해서 건드리고 싶지 않았습니다.

시간이 지나면 좋아질까요?

주요 포인트:

  1. 배지는 자격 증명에 매우 유용하므로 사용자 카드에 있어야 합니다. "이것이 내가 어떤 사람이다…"라고 말하는 것보다 "지금까지 이런 기여를 했습니다"라고 보여주는 것이 더 잘 전달됩니다. 지금은 오른쪽 상단에 있는 것 같지만, 여러 사용자 카드를 살펴본 후에야 그 사실을 알게 되었습니다.
  2. “게시”, “칭찬”, “해결” 등 태그 스타일의 박스가 시선을 너무 강하게 사로잡습니다. 굵은 글씨체 때문일 수도 있습니다. 이전 사용자 카드에서 이 정보가 얼마나 은은하게 표시되었는지 좋았습니다. 왜냐하면 저는 사실 그 정보에 크게 관심이 없기 때문입니다.
  3. 케이크데이(Cakeday) 역시 “관심 없음” 범주에 속합니다. 재미있고 좋지만, 사용자를 더 자세히 알고 싶을 때, 그 사람에 대해 알고 싶은 네 가지 중 가장 중요한 것 중 하나일까요? 아마도 아닐 것입니다.

케이크데이는 오른쪽 상단으로 옮기고, 배지는 다시 한 줄 또는 두 줄 전체로 배치하되, 특징적인 배지의 완전한 확장된 이름을 표시하는 것이 좋겠습니다. 대부분의 사용자는 아이콘의 의미를 모르고 텍스트 설명이 필요합니다. 이렇게 하면 이용 가능한 배지를 더 많이 홍보할 수 있으며, 다른 사람의 사용자 카드에서 본 특정 배지를 얻고 싶다면 더 많이 기여하고 싶어 하는 일부 사용자의 호기심을 자극할 수 있습니다.

6개의 좋아요

제가 보고 있는 문제들이 Locations 플러그인으로 인해 발생한다는 것을 알고 있습니다. 이 문제를 여기서 언급한 이유는 이 플러그인이 매우 널리 사용되고 있기 때문입니다. 또한 CSS나 코드 조정은 Discourse 코어가 아니라 플러그인에서 이루어져야 한다고 생각합니다. 적어도 주로 그렇습니다. 그리고 Locations 플러그인을 관리하는 분들이 이 문제를 살펴봐 주시길 바랍니다. 솔직히 말해서, 새로운 사용자 카드가 코어가 된다면, 그들은 거의 필수적으로 이 문제를 해결해야 합니다. :wink:

여기서 제가 겪고 있는 문제들을 모든 분들을 위해 언급하고 싶었습니다.

3개의 좋아요

이번에는 시머(shimmer) 애니메이션 관련해서 몇 가지 더 이상한 점을 발견했어요.
첫째로, 모든 애니메이션이 서로 다른 주기로 작동하고 있어요. 와이파이를 끊은 뒤 카드를 클릭하면 가장 잘 보여요:

그리고 애니메이션이 너무 일찍 멈추기도 해요:

이미지가 아직 로드되지 않았는데도 애니메이션이 멈춰버린 상태예요.

2개의 좋아요

이제 마우스를 올렸을 때 배지 이름이 보입니다!

사이드바처럼 가입 정보, 마지막 접속 시간 등을 사용자가 설정할 수 있으면 좋겠습니다.

2개의 좋아요

더 미니멀한 접근 방식을 선호하는데, 아직 직접적인 답이 없는 핵심 질문이 하나 있습니다.

유저 카드 개념은 단순히 장식적인 요소일 뿐, 실질적인 목적이 없는 것일까요? 대부분의 유저가 유저 카드를 단순히 PM을 보내거나 채팅 채널을 여는 용도로만 사용한다고 생각합니다. 그렇다면… 빠르게 눈에 띄는 요소를 늘리는 것보다, 오히려 더 깔끔하게 정리하는 게 낫지 않을까요?

관리자/모더레이터의 요구 사항은 완전히 다른 영역입니다.

6개의 좋아요

카드 곳곳에 흩어져 있는 사용자 기본 정보를 한 곳에 모아 보여주는 것도 좋을 것 같습니다:

이 부분이 전면 개편된다면, 배지(badge)에서 신뢰 수준(trust level) 정보를 제거할 좋은 기회라고 생각합니다. 배지는 배지가 아니라 그룹 소속을 나타내며, 포럼에서의 권한과 접근 권한을 보여주기 때문입니다.

5개의 좋아요

무슨 일이 일어나고 있는지 정확히 모르겠지만, 제 사이트에서 정말 보기 흉하게 보입니다. 많은 정보가 누락되어 있네요. 다른 CSS 없이 이것만 적용해 봤는데, 결과가 이렇습니다. 플러그인 충돌이거나 다른 문제가 있는 걸까요?

신규:

기존:

6개의 좋아요

뭔가 이상한 것 같은데, 안전 모드로 시도해 볼 수 있을까요? 테마가 변경 사항을 겹쳐서 적용하고 있는 건 아닌지 확인해 보세요.

5개의 좋아요

공식 플러그인 중 하나가 문제를 일으키는 것 같은데, 정확히 어느 것인지 확실하지 않습니다. 먼저 비공식 플러그인을 비활성화해 봤는데도 같은 증상이 나타났고, 모든 플러그인을 비활성화해야 정상 작동했습니다. 콘솔에 표시되는 오류는 다음과 같습니다:

수정: 제 공식 플러그인 목록

          - git clone https://github.com/discourse/discourse-chat.git
          - git clone https://github.com/discourse/discourse-user-notes.git
          - git clone https://github.com/discourse/discourse-reactions.git
          - git clone https://github.com/discourse/discourse-calendar.git
          - git clone https://github.com/discourse/discourse-adplugin.git
          - git clone https://github.com/discourse/discourse-whos-online.git
          - git clone https://github.com/discourse/discourse-canned-replies.git
          - git clone https://github.com/discourse/discourse-follow.git
          - git clone https://github.com/discourse/discourse-push-notifications.git
          - git clone https://github.com/discourse/discourse-gamification.git
          - git clone https://github.com/discourse/discourse-templates.git
          - git clone https://github.com/discourse/discourse-automation.git
          - git clone https://github.com/discourse/discourse-fontawesome-pro.git --branch fa5
          - git clone https://github.com/discourse/discourse-spoiler-alert.git
          - git clone https://github.com/discourse/discourse-data-explorer.git
6개의 좋아요