# 유저카드 리디자인 실험

**URL:** https://meta.discourse.org/t/usercard-redesign-experiment/254353
**Category:** Feature
**Tags:** completed, user-card
**Created:** [2월 7, 2023, 4:08오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353 "2023-02-07T16:08:54Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 10, 2023, 2:18오전 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/51 "2023-02-10T02:18:17Z")

</div>

> [@davidkingham](#):
>
> `discourse-user-notes.git`

오류 내용을 보면… 아마 이 것일 수도 있겠다…

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2월 10, 2023, 3:50오전 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/52 "2023-02-10T03:50:03Z")

</div>

맞아요, 샘 고맙습니다.

왜 이제 내 배지 라벨이 표시되는지 모르겠네요.

 ![CleanShot 2023-02-09 at 19.15.23@2x](https://global.discourse-cdn.com/meta/original/4X/f/1/d/f1da4c051787cff36007e3c7cbc4684a3570e3fe.jpeg)

개인적으로는 이미지가 잘려나가고 사용자가 사진의 상단 일부만 볼 수 있는 상황에서 제어할 방법이 없으므로, `.d-user-card__main-content`의 투명도를 90% 정도로 설정하는 것이 좋다고 생각합니다.

그 외에도 여전히 사용자의 전체 프로필을 볼 수 있는 버튼이나 링크가 필요하다고 생각합니다. 사용자가 아바타를 두 번 클릭해야 한다는 것을 계속 설명해 줘야 하는데, 전혀 직관적이지 않거든요.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2월 10, 2023, 1:46오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/53 "2023-02-10T13:46:16Z")

</div>

> [@davidkingham](#):
>
> 사용자들에게 아바타를 두 번 클릭해야 한다는 것을 계속 설명해야 합니다. 전혀 직관적이지 않거든요.

정말 좋은 지적입니다!

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [2월 12, 2023, 11:44오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/61 "2023-02-12T23:44:40Z")

</div>

죄송합니다, 아직 지원되지 않는 Android 9 Kiwi 브라우저를 사용 중입니다.

화면 상단 바깥에 위치하는 문제를 잊어버렸는데, 지금은 다음과 같습니다:

 ![Screenshot_2023-02-13-00-40-06-581_com.kiwibrowser.browser](https://global.discourse-cdn.com/meta/original/4X/a/7/f/a7f558fbd2c92a32a5f4cff062475e454469a463.jpeg)

- 항상 **화면 밖** 에 위치하며, 사용자가 클릭한 아이콘 위치와 무관하게 화면보다 너무 위에 배치됩니다.
- **opacity** 문제: 어둡게 보입니다.
- **z-index** 문제: 여러 요소(모든 사용자 아이콘 포함) 뒤에 위치하여 그 위의 어떤 요소도 클릭할 수 없습니다.

이번에는 Kiwi 브라우저에서 새 사용자 카드의 모든 스타일시트 문제를 언급한 것 같습니다.  
이전 사용자 카드에는 문제가 없었습니다.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 13, 2023, 11:31오전 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/62 "2023-02-13T11:31:33Z")

</div>

hey @jesus2099, 저는 기위 브라우저에서 문제를 재현해 보려고 방금 설치해서 확인해 봤어요. 문제를 일으키는 원인을 찾은 것 같아요. `화려한 광고 숨기기` 옵션을 활성화하면 저에게도 동일한 현상이 발생해요 🔽

 ![Screenshot_20230213_121948](https://global.discourse-cdn.com/meta/original/4X/7/b/2/7b2462c50103025d9c920de705994658e83598e3.jpeg)  
 ![Screenshot_20230213_122018_com.kiwibrowser.browser](https://global.discourse-cdn.com/meta/original/4X/5/c/8/5c83d65cecddd7db30de3910f3ff2898cfe4d65a.jpeg)  
 ![Screenshot_20230213_122050_com.kiwibrowser.browser](https://global.discourse-cdn.com/meta/original/4X/6/8/3/683d18b8a2645e8f503fe312674665850ef1854f.jpeg)

* * *

이 옵션을 끄면 사용자 카드가 정상적으로 작동해요.

 ![Screenshot_20230213_122338_com.kiwibrowser.browser](https://global.discourse-cdn.com/meta/original/4X/b/e/3/be384bd7f540c27efa4a12d329ab9abf45e51706.jpeg)  
 ![Screenshot_20230213_122344_com.kiwibrowser.browser](https://global.discourse-cdn.com/meta/original/4X/5/5/1/5519e9353caac2dbebe1dc6b8903212ccf0e59ca.jpeg)

혹시 이 옵션이 활성화되어 있나요? 그렇다면 비활성화 후 어떻게 작동하는지 확인해 볼 수 있을까요? 🙂

* * *

사실 이 옵션이 테마 컴포넌트의 JavaScript 등을 로드하는 것을 차단하고 있는 것 같아요. 기존 사용자 카드가 로드되는 것을 보니, 새로운 사용자 카드 컴포넌트와 차단되지 않은 CSS 등이 혼재되어 문제를 일으키는 것 같습니다.

새로운 테마 컴포넌트의 첫 줄들이 활성화되어 기존 사용자 카드에 영향을 미치고 있어요.

> <https://github.com/discourse/experimental-usercard/blob/3c67ac308a3468c477b1e166f0ba09661c223071/scss/user-card.scss#L1-L22>

이는 새로운 사용자 카드가 테마 컴포넌트 상태이고 코어에 병합되지 않은 동안 기존 사용자 카드 스타일을 초기화하기 위한 것입니다. 따라서 코어에 병합되면 문제가 되지 않을 것이라고 생각해요. 🙂

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [2월 13, 2023, 1:11오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/63 "2023-02-13T13:11:16Z")

</div>

오 @Don, 맞으시네요!

이 광고 차단 기능이 `cloudfront.net`의 모든 JavaScript를 차단하고 있습니다!

새로운 사용자 카드가 공식으로 채택되면, 현재 기존 사용자 카드가 차단되지 않는 것처럼 더 이상 차단되지 않을 것이라고 생각하시나요?

참고: 이 광고 차단 기능은 기본적으로 모든 사이트에서 활성화되어 있으며, 사이트별로 비활성화할 수 있습니다.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2월 13, 2023, 1:36오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/64 "2023-02-13T13:36:09Z")

</div>

> [@jesus2099](#):
>
> 새로운 사용자 카드가 공식적으로 사용될 때, 현재 구형 사용자 카드가 차단되지 않는 것처럼 더 이상 차단되지 않을 것이라고 생각하시나요?

이것은 컴포넌트 내부의 코어 외부가 아니라 코어에서 로드되기 때문에 정확합니다.

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2월 13, 2023, 2:35오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/65 "2023-02-13T14:35:58Z")

</div>

업데이트된 것 같습니다. 지금은 박스형 통계가 훨씬 마음에 드네요:

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/9/5/795d85de84f721abdd83cbe4dd087d21cddca4ad.jpeg)  
참고로 이전 모습(제가 더 좋아했던 스타일)은 이렇습니다.  
 ![image](https://global.discourse-cdn.com/meta/original/4X/c/f/1/cf1dd95e8677ad69e80fe1e09e14acd4ee68197d.jpeg)

또한, 로딩 애니메이션에도 여전히 몇 가지 문제가 있는 것 같습니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/3/c/63c30f29d3906bbd67541a03e9f465b7c9fa2590.jpeg)

* * *

한 가지 더, 새로운 변경 사항으로 인해 제 테마와 호환성 문제가 생긴 것 같습니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/3/6/f366250cae13b3805c49bfe52503a48363079c3c.jpeg)

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2월 13, 2023, 4:03오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/66 "2023-02-13T16:03:31Z")

</div>

그리고, 자기소개는 어디로 갔나요?

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/0/0/500fdcd1d0d38ecf2d2ac049dcf05b0e7f1a9362.jpeg)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2월 13, 2023, 4:29오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/67 "2023-02-13T16:29:14Z")

</div>

보이는 것 같아…

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/8/c/e8c33b8919311d1a15a5ec8d3bf8c306da57f00f.jpeg)

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2월 13, 2023, 4:30오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/68 "2023-02-13T16:30:11Z")

</div>

모바일 뷰로 시도해 보세요?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 13, 2023, 4:37오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/69 "2023-02-13T16:37:19Z")

</div>

데스크톱과 모바일 양쪽 모두에서 바이오를 볼 수 있습니다. 🙂

> [@darkpixlz](#):
>
> 한 가지 더, 새로운 변경 사항으로 인해 제 테마와 호환되지 않는 문제가 생긴 것 같아요.

그러면 사용자 쪽에서 수정하는 편이 더 빠를 것 같네요, 맞죠?

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2월 13, 2023, 4:38오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/70 "2023-02-13T16:38:41Z")

</div>

Android 또는 iPhone, 그리고 Web 또는 DiscourseHub인가요?  
iOS용 DiscourseHub에는 이 기능이 없습니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/5/2157dd98fffdb424d4c5d698f79141c6f8c851a3.jpeg)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 13, 2023, 4:43오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/71 "2023-02-13T16:43:22Z")

</div>

아, 네, 제 iPad에는 프로필이 정말로 표시되지 않네요! 👍

가장 신경 쓰이는 부분은 어떤 기기를 사용하든 제 ✨ 멋진 ✨ 고양이가 항상 온전히 보일 수 없다는 거예요 😸

---

<div class="post-metadata">

### Author: ![AquaL1te](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aqual1te/32/201966_2.png) [@AquaL1te](https://meta.discourse.org/u/AquaL1te)
#### Post date: [2월 14, 2023, 7:42오전 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/72 "2023-02-14T07:42:16Z")

</div>

이 컴포넌트는 다른 테마 컴포넌트와 잘 호환되지 않습니다: [GitHub - discourse/discourse-user-card-directory: Theme component which replaces the user directory with a grid of user cards · GitHub](https://github.com/discourse/discourse-user-card-directory.git)

사용자 카드에 배경이 표시되지 않습니다.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2월 16, 2023, 10:54오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/73 "2023-02-16T22:54:41Z")

</div>

스크린샷에는 @Canapin의 프로필이 여기에 포함되어 있습니다. 해당 프로필의 소개 문구에는 로켓만 있습니다.

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [2월 16, 2023, 11:16오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/74 "2023-02-16T23:16:14Z")

</div>

좋아 보여요! 우리가 이전에 알아차렸던 여러 가지 문제를 해결하고 있네요:

1. 더 큰 실명 표시 — 여전히 _긴_ 이름도 _여유 있게_ 들어갈 수 있는 공간을 확보했습니다.
2. 피처드 배지가 더 눈에 잘 띕니다 — 이 부분은 Fedora의 사용자 지정 배지와 잘 어울릴 것 같습니다.

하나 확실하지 않은 점이 있습니다: "사용자 상태를 설명 텍스트 대신 아바타 아이콘으로 이동"이라는 부분인데요. 이건 오른쪽 아래에 있는 💭 아이콘을 말하는 건가요? 그룹의 "아바타 flair"를 대체하는 건가요?

어딘가에 상태 텍스트를 확장해서 볼 수 있는 옵션이 있으면 좋을 것 같아요. 아이콘은 좀 더 직관적이지 않은 것 같습니다.

그 외 생각:

- "cakeday"는 개인 식별 정보를 노출하기 때문에 컴플라이언스 팀이 복잡한 조치를 요구해서 비활성화해 두었습니다. 제가 "그냥 안 하면 안 될까?"라고 말하기 전까지는 말이죠. 사실 그 공간을 상태 표시에 전부 사용하는 편이 낫다고 생각합니다. 웹사이트 URL을 빼는 것도 고려해 볼 만합니다.
- 마찬가지로, Cheers나 Solved를 사용하지 않는다면 _그_ 공간에는 무엇이 들어가나요? 모두 채워져 있으면 보기 좋지만, 상자 절반만 채워져 있으면 좀 어색해 보일 수 있습니다.
- 사실 이전 카드에서 아바타가 상자 경계를 벗어나는 스타일을 꽤 마음에 듭니다.
- 사용자 지정 필드(custom user fields)는 어디에 배치되나요? 우리는 성별 대명사 옵션을 제공하고 있으며, 이것이 쉽게 발견되기를 원합니다.
- "피처드 토픽"은 어떻게 되나요? 아이디어 자체는 좋지만, 현재 카드에서는 텍스트가 뒤섞여 보기 지저분해질 수 있습니다.

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [2월 16, 2023, 11:48오후 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/75 "2023-02-16T23:48:37Z")

</div>

오오, 내 사용자 카드에 기반한 몇 가지 생각이 더 떠올랐어:

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/3/9/3392b8514e6a4b6342c8b4743b6dabe029f1ca54.png)

* * *

- 내 아바타에서 생성된 배경은… 좀 투박하지 않나?
- 아, 네모난 틀을 깨는 아바타가 그립다 🙂
  - 실제로 더 큰 이미지가 나을 수도 있겠다? 얼굴만 넣지 않고 넣은 건 내 탓일 수도 있겠지. 🙂

- 오오, 내 위치 정보를 업데이트해야겠다.
- _Fedora_ 배지([Fedora Badges](https://badges.fedoraproject.org/user/mattdm) 참고)가 여기서 꽤 잘 어울릴 것 같아. 하지만 기본 모양은 좀 밋밋한 것 같아.
- 이건 아마 전에 있었을 텐데 내가 한 번도 눈여겨보지 않았던 것 같은데, 생일 케이크 아이콘과 날짜 — 아마도 내 사이트 가입일인 것 같은데? — 이 나이에 대해 잘못된 추측을 하게 만들 수 있겠다. 만약 생일을 나타내는 것이 아니라면 다른 아이콘을 사용하는 게 좋을까? 아니면 _무엇인지_ 명시하는 게 나을까?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 17, 2023, 12:30오전 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/76 "2023-02-17T00:30:28Z")

</div>

아, 어째서인지 아이패드로 @darkpixlz를 열었을 때 프로필을 못 봤던 것 같은데, 아마 내 착각이었을 거야.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 17, 2023, 12:35오전 UTC](https://meta.discourse.org/t/usercard-redesign-experiment/254353/77 "2023-02-17T00:35:05Z")

</div>

간단한 버그 리포트입니다.

배지에 클릭하여 이동하면 전환 중에 카드가 계속 표시됩니다. 전환 초기에 카드를 숨겨야 합니다. (Firefox Linux)

[이전 페이지](https://meta.discourse.org/t/usercard-redesign-experiment/254353.md?page=1)

[다음 페이지](https://meta.discourse.org/t/usercard-redesign-experiment/254353.md?page=3)
