메타에서 사이드바 디자인에 몇 가지 조정을 적용하여 더 넓고 차분한 레이아웃을 만드는 실험을 진행 중입니다. 요소 사이의 간격을 넓히고 패딩과 여백을 최적화하여 더 깔끔하고 질서 정연한 외관을 지향하고 있지만, 이로 인해 더 많은 요소가 접힌선 아래로 숨겨질 수 있습니다.
변경 전
변경 후
기능적인 부분은 아무것도 변경되지 않았으며, 시각적으로만 약간의 적응 시간이 필요할 수 있습니다.
메타에서 사이드바 디자인에 몇 가지 조정을 적용하여 더 넓고 차분한 레이아웃을 만드는 실험을 진행 중입니다. 요소 사이의 간격을 넓히고 패딩과 여백을 최적화하여 더 깔끔하고 질서 정연한 외관을 지향하고 있지만, 이로 인해 더 많은 요소가 접힌선 아래로 숨겨질 수 있습니다.
기능적인 부분은 아무것도 변경되지 않았으며, 시각적으로만 약간의 적응 시간이 필요할 수 있습니다.
정말 마음에 들어요.
다만, 데스크톱 채팅에서 이것이 드러내는 점은, 여러 채널에 참여하고 있다면 새로운
읽지 않은 메시지를 확인하려면 꽤 많이 스크롤해야 한다는 거예요.
네, 맞아요. 전체 화면 채팅을 사용할 때, 어떤 시점부터는 포럼/채팅 전환기를 사용하는 것이 합리적이라고 생각합니다. 이 디자인은 확실히 그 시점을 더 빨리 맞게 해줍니다.
너무 텅 빈 느낌이에요. 물론 취향의 문제긴 하지만요.
취향의 문제일 뿐만 아니라 화면 크기의 문제이기도 합니다.
태블릿에서는 대부분의 섹션을 접어서 채팅 메시지를 보낸 사람이 채팅에서 온라인 상태인지를 계속 확인할 수 있도록 합니다. 따라서 DM 섹션은 항상 표시되어야 합니다. 하지만 상단 섹션도 자주 사용하므로, 한 번 아래로 스크롤한다고 해서 문제가 해결되지 않습니다.
화면에서 볼 수 있듯이, 모든 섹션을 접어두어도 추가 공간이 생겼음에도 DM과 상단 섹션을 동시에 볼 수 없습니다. 이전에는 일부 섹션을 열 공간이 있었거든요.
이것이 채팅 사이드바를 사용하지 않는 이유이기도 합니다. 채팅 버튼이 너무 많은 공간을 차지하기 때문입니다.
정말 좋아합니다
![]()
특히 사방으로 적용된 패딩이 마음에 듭니다. 오른쪽 가장자리까지 이어지는 배경 하이라이트가 에너지의 흐름을 약간 끊고 있었던 것 같습니다 ![]()
그렇지만, 스크롤바는 오른쪽 가장자리에 유지할 수 있을까요? 현재는 패딩 왼쪽으로 밀려 들어가서 잘 보이지 않습니다:
공간 문제에는 동의합니다.. 실제로는 버튼을 아예 제거하고, 메타의 관리자 메뉴나 문서에서 사용하는 것과 같은 컨텍스트 기반 전환 방식을 사용하는 건 어떨까요?
사이드바의 길이에 대해 일반적으로 말하자면, 이미 그 자체의 성공에 희생되고 있는 것처럼 보입니다. 넣을 것이 너무 많거든요.. 커스텀 섹션(또는 여러 개)을 가지는 것이 더 합리적인 경우가 많습니다. 회원들도 자신의 섹션을 만들 수 있고, 카테고리, 태그, 메시지, 채팅 목록 등도 있습니다. 그리고 화면 크기에 관계없이 끝없이 스크롤되는 그 메뉴도 있죠.
어디에나 컨텍스트 메뉴를 사용하는 건 어떨까요? 저에게 있어서는 접는 섹션보다 훨씬 더 자연스러운 흐름을 제공합니다.
더 깔끔해 보이긴 하지만, 특히 태블릿과 스마트폰에서의 화면 공간에 대해서는 저도 우려를 함께합니다. 직관적으로는 현재 디자인과 제안된 디자인의 중간 어딘가가 좋겠다는 생각이 듭니다.
또한: 사이드바가 그렇게 업데이트되면, 오른쪽의 게시물 목록이 즉시 너무 혼잡해 보입니다. 이 두 가지는 조율이 필요할 것 같습니다(기본 글꼴 크기가 증가된 이후로, 제가 개인적으로 선호하는 수준보다 이미 더 큰 불일치가 존재합니다).
조금 더 디테일하게 짚어볼게요:
섹션 하단에 왜 이렇게 여백이 많나요? 하단에 여백이 더 있는 게 더 자연스러운 경우도 있지만, 이건 너무 불균형하게 느껴집니다.
"전체 카테고리"와 "전체 태그"의 글자가 더 작은 건 의도적인 건가요? 제 생각에는 꽤 중요한 링크들이라요.
전반적으로 제목 텍스트가 작게 느껴지는데, 특히 접힌 상태일 때 그렇습니다.
오른쪽에 있는 캐럿(화살표)은 별로 안 좋습니다. 제목을 구분하려는 의도인 것 같은데, 이미 아이콘을 위한 사이드바 열이 있는데 공간 낭비처럼 느껴집니다.
마누엘이 언급했듯이, 스크롤바가 가장 오른쪽에 붙도록 사이드바 컨테이너의 오른쪽 패딩을 제거해야 합니다.
제목에 대한 배경 호버 효과가 사라졌습니다… 이게 더 작은 글자 크기와 겹쳐서 클릭 가능한 영역이 메인 링크보다 훨씬 모호하게 느껴집니다.
네, 솔직히 이렇게 패딩이 많이 들어가서 디스코스의 나머지 부분과 어울리지 않는다는 느낌이 듭니다… 이게 기본 설정이 되려면 다른 모든 곳에도 패딩을 더 추가하는 쪽으로 방향을 잡아야 할 것 같습니다(반대하는 건 아니지만, 큰 노력이 필요하죠).
네, 슬랙처럼 사이드바 안에 또 다른 사이드바를 추가하는 것을 고려하고 있습니다… 이렇게 하면 컨텍스트와 사이드바 콘텐츠를 전환할 수 있습니다. 현재 사이드바 작동 방식에 대해 몇 가지 다른 접근법이 있는데, 이들을 하나로 묶어야 합니다. 또한 메시지를 “정보” 섹션으로 이동시켜 메인 사이드바를 더 짧게 만들 수도 있습니다.
가장 도움이 될 부분은 스크롤을 할 때 섹션 헤더가 상단에 고정되는 것입니다. 사이드바에 카테고리나 채팅 채널이 많아서, 헤더가 화면 밖으로 스크롤되면 현재 어디에 있는지 빠르게 파악하기가 어려워졌습니다.
사용자 아바타가 게시물에서 스크롤 시 고정되는 것과 유사하게 섹션 헤더를 고정(sticky)하도록 구현해 주신다면, 훨씬 더 좋아질 것 같습니다 ![]()
다시 시도해 보고 느낌을 확인해 보세요. 이미 V2 버전입니다. ![]()
제 실수였습니다. 감사합니다 – 수정되어야 합니다.
의도적으로 그렇게 했습니다. 단순히 접기만 하는 제목이 다른 곳으로 이동하는 다른 요소들과 구별되기를 원했습니다. 접을 수 있는 헤더에 전체 호버 효과가 있는 것은 다소 이례적으로 느껴졌습니다. 또한 대부분의 행에는 2가지 작업(접기 및 메시지의 경우 편집 또는 추가)이 있습니다. 보조 작업을 포함하여 행 전체를 강조하는 것은 어색하게 느껴졌습니다.
docs 링크가 제거되었기 때문에 이제 두 개의 DM 채팅을 볼 수 있습니다 ![]()
개인적으로는 흰 공간이 거의 없는 밀도 높은 텍스트를 훨씬 선호합니다. 이전 레이아웃조차 공간 낭비가 심해 보이는데, 변경된 레이아웃은 더 나빠졌습니다. 사용자가 설정할 수 없으니 아쉬워요.
어젯밤에는 거의 잠자리에 들 준비를 하고 마지막 시어킹 투어를 돌았어요. 손으로 더 꽉 쥐어보려고 했어요 ![]()
“before” 버전의 더 조밀한 간격을 훨씬 선호합니다
디자인 실험의 현재 상태를 코어에 병합하기로 결정했습니다.
이미 사용자 취향에 맞게 이를 수정할 수 있는 사용하기 쉬운 변수들(예: --d-sidebar-row-height)이 제공되고 있으며, 간격을 더 줄이는 것을 선호하는 사용자를 위해 추가적으로 간격을 제거하는 것도 쉽습니다. 그러나 우리는 Discourse에서 다양한 사용자에게 더 나은 기본값으로 제공한다고 판단했습니다.