이것은 병합되었습니다 → UX: Notification panel update - Pull Request #33795 - discourse/discourse - GitHub
업데이트:
이제는 모든 사용자에게 meta에서 활성화되었습니다
요약
헤더 드롭다운 메뉴와 알림 항목 스타일에 대한 새로운 룩 & 스타일을 위한 실험입니다.
헤더의 드롭다운에서 “활성” 테두리 스타일을 제거합니다. 이 테두리는 테마 생성 시 스타일링에 복잡성을 더합니다.
우리는 알림 메뉴의 간격을 추가하고 “활성” 아이콘 스타일을 변경합니다.
스크린샷
16개의 좋아요
keegan
(Keegan George)
6월 10, 2025, 5:27오후
2
좋아, 이 실험이 기대된다! 조던, 새로운 디자인 정말 마음에 들어
초기 피드백을 몇 가지 남길게요: 간격이 조금 좁게 느껴지는데, 조금 더 넓게 설정해 볼 수 있을까요? ⌄ ✓ Dismiss 버튼의 패딩이 꽤 크기 때문인 것 같아요. 이들을 동일한 패딩(0.75rem ?)으로 정렬하면 좋을 것 같습니다.
이런 느낌이면 어떨까요?:
9개의 좋아요
Moin
6월 10, 2025, 5:28오후
3
저는 definitely 토픽 제목이 있는 것을 그리워합니다. 짧은 이름의 사용자가 좋아요를 하나 또는 두 개 눌렀을 때는 충분한 정보가 제공됩니다. 하지만 제목의 한두 단어만으로는 저에게는 부족합니다.
10개의 좋아요
둘 다 피드백을 줘서 고마워요. 두 의견 모두 정말 정확해요 더 많은 피드백이 쌓인 후에 처리할 예정이지만, 이 내용들을 목록에 추가할 거니 안심하세요.
7개의 좋아요
Falco
(Falco)
6월 10, 2025, 5:38오후
6
기존 알림(이미 처리했을 가능성이 있는)에 더 많은 공간을 할당하는 대신, 더 새로운 알림(아직 처리해야 하는)의 맥락을 잃는 트레이드오프를 발견했는데, 이는 예상치 못한 결과였습니다.
@moin이 위에서 말한 내용과 일치하며, @keegan이 지적했듯이 더 밀집된 디자인은 사이드바와 같은 컴포넌트에서 목표로 해 온 덜 밀집된 디자인 방향과 모순됩니다.
6개의 좋아요
이것은 Horizon && core 설정에서 더 큰 테두리 반지름을 설정하고, 이 반지름을 "large"로 지정했기 때문입니다. 이후 core에서 이 테두리가 일반적으로 설정된 테두리 반지름을 상속받도록 변경했습니다.
좋은 지적입니다. 아마도 잘못된 설정 때문인 것 같습니다.
3개의 좋아요
여백(spacing)에 관해… 이거 어떻게 생각해?
여기서 제목은 1줄로 제한하되, 시그니파이어(signifier)는 별도 줄을 가질 수 있도록 했다. 또한 아래 버튼들과 맞추기 위해 좌우 패딩을 동일한 크기로 추가했다.
7개의 좋아요
keegan
(Keegan George)
6월 10, 2025, 5:51오후
9
이 실험의 목적에서 약간 벗어날 수 있지만, 우리의 설계를 제한하는 더 큰 문제는 우리가 표시하는 알림의 양이라고 생각합니다. 브라우저 높이가 허용한다고 해서 알림을 한 페이지 분량이나 표시할 필요는 없다고 봅니다. 사용자가 모든 것을 확인해야 할 때 "더 보기"를 클릭하면 /my/notifications로 이동할 수 있도록 하면 됩니다.
나는 이것이 올바른 방향의 한 걸음이라고 생각하며, 다음과 같은 조치를 취할 수 있을 것 같습니다:
표시하는 알림의 수를 줄입니다
알림당 더 많은 정보를 표시합니다
예를 들어, 이 Dribbble에서 찾은 디자인 은 알림의 수 / 각 알림의 정보량 / 밀도 비율이 좋습니다.
10개의 좋아요
아, 맞다. 그 디스플레이 정말 마음에 들어.
3개의 좋아요
Moin
6월 10, 2025, 6:44오후
11
또한 스크린샷에서 아바타가 아이콘에 가려지는 정도가 제 화면보다 덜한 것 같았습니다. 설정에서 텍스트 크기를 "작게"로 선택하면 그런 현상이 발생하는 것 같습니다. 이전에 텍스트 크기를 변경했기 때문에 아바타의 더 큰 부분이 가려졌을 수도 있지만, 지금은 이전보다 아바타가 더 많이 가려져 있습니다. (그래도 저는 이전의 아이콘 전용 버전을 더 선호하므로 상관없습니다.)
비교를 위해: 실험 모드와 안전 모드에서
그리고 일부 아이콘은 들여쓰기가 되어 있습니다.
3개의 좋아요
알림 주위에 여백을 더 확보해야 할 것 같아요. 이렇게 하면 이 정렬 문제도 해결될 거예요:
이 반지름 값들을 동일하게 맞출 수 있을까요?
새로고침과 활성 상태를 표시하는 데 회색 배경이 잘 어울리지 않는 것 같아요. 보통 새로고침과 활성 상태에는 tertiary 색상을 사용하고, 호버 상태에는 회색을 사용하거든요.
아이콘이 지금은 좀 작게 느껴져요. 몇몇은 가만히 들여다보지 않으면 알아채기 힘들 정도예요.
검색 메뉴 변경 사항과 이 디자인이 어떻게 조화를 이룰지 아이디어가 있으신가요? 최근 검색 하이라이트를 전체 폭(full-width)으로 변경했었는데, 다시 박스 형태로 돌아가니 약간 어색하게 느껴져요.
7개의 좋아요
전반적으로 탭의 스타일 변경은 좋습니다.
여기 한 곳 더 여백을 조금 더 넓게 두면 좋겠습니다: 모바일에서 탭을 클릭하는 영역이 매우 작습니다.
탭을 누르기 꽤 어렵습니다.
3개의 좋아요
saquetim
(Sérgio Saquetim)
6월 10, 2025, 8:04오후
15
솔직히, 이번 변경사항은 마음에 들지 않았고 이전 레이아웃이 더 좋았어요.
위에서도 언급했듯이, 레이아웃이 너무 빽빽해요. 위 스크린샷에서는 그 부분이 개선되어 있습니다.
모든 항목 사이의 테두리 반경과 간격 때문에 목록이 더 복잡해 보입니다. 정보에 시각적 노이즈를 더하는 셈이죠:
읽지 않은 항목의 배경색이 다른 색상 팔레트에서는 이전만큼 아름답지 않아 보입니다. 모두 회색빛이 돌며 색상 강조 효과가 사라졌습니다.
이전 버전:
새 버전:
이제 알림과 아이콘을 구분하는 테두리가 없기 때문에, 그들과 항목 사이의 정렬이 어긋나 뭔가 어색해 보입니다. 특히 첫 번째 아이콘에서 더 그렇습니다.
아이콘이 너무 작고, 모바일 모드에서는 간격이 어긋납니다. 올바른 아이콘을 클릭하기가 더 어려워졌어요. 이미 실수로 아이콘 대신 알림을 두 번이나 클릭했습니다.
동의하지 않습니다. 사용 가능한 뷰포트 공간을 활용하는 것은 좋은 일입니다.
keegan:
알림당 더 많은 정보 표시
그것도 좋겠습니다.
7개의 좋아요
일부 변경 사항을 병합하고 있습니다. 최신 반복 버전입니다.
아바타를 상단에 정렬하면 사용자 이름 쪽에 항상 더 가깝게 보이게 할 수 있을 것 같은데, 어떻게 생각하세요? 이중 줄 알림이 많을 경우 중앙 정렬된 아바타가 약간 “부유하는” 느낌을 줄 것 같아요. 매우 대략적인 비교입니다.
1개의 좋아요
로컬에서 시도해 보았는데 뭔가 어색했지만, 여기 구현해서 모두의 의견을 들어보겠습니다.
1개의 좋아요
saquetim
(Sérgio Saquetim)
6월 10, 2025, 8:46오후
19
외쪽 패딩과 일치하도록 항목 사이의 간격을 넓혀서 느낌을 확인해 보시겠어요?
1개의 좋아요