컴팩트 메시지 스타일

안녕하세요,

2022년 1월 기준 Discourse 기본 메시지 스타일은 제 생각에 너무 부피가 크고 시선을 분산시키며 공간을 낭비합니다. 두 가지 수정을 제안합니다:

  1. 메시지 컨트롤을 더 컴팩트하고 정확하게 배치할 수 있습니다 - 제 스케치를 참고해 주세요. 특히 v2와 v4 디자인을 가장 좋아합니다.
  2. 모바일에서는 [좋아요, 수정, 답변, …더 보기]와 같은 일부 버튼은 항상 표시되어야 하지만, 데스크톱(Win/Mac/Lx)에서는 [좋아요, 수정]만 항상 표시하고, 각 메시지에 마우스를 올렸을 때만 다른 컨트롤을 표시할 수 있습니다.

P.S. 좋아요를 메시지의 반대편(극도로 멀리 :smiley:)에 배치한 것은 의도적인 결정입니다. 이는 아무 이유 없이, 웃음 때문에, 농담 때문에, “와, 또 보네” 때문에, 혹은 자신의 기분만 좋기 때문에 하는 등, 현재 너무 빈번하게 사용되고 있는 무의미하고 비객관적인 좋아요를 크게 줄이는 데 도움이 될 것입니다.

누군가 이런 스타일을 만들어 주실 수 있을까요? 부탁합니다.

1개의 좋아요

GVG님, 안녕하세요!

문제를 해결하기 위한 아이디어를 몇 가지 제안드립니다:

자주 묻는 질문 (FAQ)

1. 초기 솔루션

  • userstyles를 사용하여 Discourse 스타일을 변경할 수 있습니다.

2. 왜 user styles를 사용해야 하나요?

  • “원하는 대로 모든 웹사이트의 모양과 느낌을 커스터마이징하세요.” - https://userstyles.org/

3. 이것이 제 문제를 어떻게 해결할 수 있나요?

  • CSS 스타일을 설정하여 Discourse에서 이 메시지를 컴팩트하게 만들 수 있습니다.

4. 장점?

  • 이미 컴팩트 메시지용 커스텀 스타일이 있으며, 원하면 Discourse에 적용할 수 있습니다.
  • Userstyles는 구현이 쉬워 사용자에게 부담이 없습니다.
  • 이 방식이 매력적이고 실현 가능하다면, Discourse가 이를 공식 스타일로 채택할 수도 있습니다.
  • 브라우저에서 직접 작동하며, 다른 사람들과 이 스타일을 공유할 수 있습니다.

5. 단점?

  • 시각적 스타일을 비활성화하면 컴팩트 메시지 기능을 사용할 수 없습니다.
  • 사이트를 조작하려면 CSS와 JS에 대한 지식이 필요합니다.

6. 아이디어? 제 의견?

  • userstyles를 사용하거나 Discourse용 커스텀 테마를 만들어 여러분의 아이디어를 적용할 수 있다고 생각합니다.

7. 더 간단한 아이디어가 있나요?

  • 컴팩트 메시지 아이디어처럼 필요한 대로 테마를 만들어 커스터마이징하는 것입니다.

8. 참고 자료?

아이콘과 메뉴를 이동하지 않아도 됩니다(또한 스크린샷에 표시되지 않는 편집 횟수, 답변 대상 언급 등 다른 요소들도 있습니다). 시작점으로 여백(margin)을 조정해 볼 수 있습니다:

기본값:

.post-menu-area {
    margin: 20px 0;
}

커스텀:

.post-menu-area {
    margin: 0;
}

비교:

아이콘과 작업 버튼의 이동은 항상 쉬운 일이 아니며, 더 심층적인 작업이 필요할 수 있습니다.

2개의 좋아요

@Canapin 제 사용자 스타일(userstyles) 아이디어에 대해 어떻게 생각하세요? 나쁜 아이디어라고 생각하시나요? 이 아이디어가 좋은 건가요?

  • 이 코드를 기반으로 디스코urs(Discourse)용 사용자 정의 스타일을 만들 수 있으므로, 여러분의 의견을 듣고 싶습니다.

Userstyles는 클라이언트 사이드에서만 작동하며, 일반적으로 사이트별로 적용됩니다(저도 userstyles를 사용하며 몇 가지를 직접 만들었습니다).

누군가 Discourse의 전반적인 외관에 대한 개선 사항을 제안하고 싶다면, Contribute > UX 채널에서 어떤 제안이든 할 수 있습니다. 만약 아무도 테마 컴포넌트를 만들지 않거나 Discourse에 원하는 변경 사항을 포함하지 않는다면, 각 사용자는 자신의 방식으로 해결책을 만들 수 있을 것입니다. 관리자인 경우 테마 컴포넌트를, 아니면 클라이언트 사이드 솔루션을 사용할 수 있으며, 어떤 브라우저 플러그인이 마음에 들든 자신의 CSS를 사용하면 됩니다.

하지만 이 경우, 이 논의는 더 이상 Discourse에 초점을 맞춘 것이 아닐 것 같습니다.


@GVG 이 관련 논의를 한번 살펴보세요. 당신에게 흥미로울 수 있습니다:

2개의 좋아요

아니요, 당신의 메시지는 웹 서비스의 전형적인 스팸 광고처럼 보입니다.

감사합니다. 하지만: a) 여백을 줄이는 것은 제가 직접 할 수 있습니다. b) 그 정도로는 부족합니다. 왜냐하면 활성 요소들이 공간을 낭비하고 너무 많은 공간을 차지하기 때문입니다. 따라서 주요 목표는 메시지 제어 버튼을 현재 위치에서 훨씬 적은 공간을 차지하는 다른 위치로 옮기는 것입니다.

@GVG

아니요, 당신의 메시지는 웹 서비스의 전형적인 스팸 광고처럼 보입니다.

    1. 죄송합니다 :(. 제 의도는 Discourse의 클라이언트 측 사용자 스타일을 통해 사용자화를 하는 것이었습니다 - 테마를 만들 필요가 없다면 이것이 작동할 것입니다. 저는 당신의 아이디어가 매우 유효하다고 생각합니다 - 단지 사용자 스타일을 통해 누구나 플러그인이나 테마를 개발하지 않아도 UX 경험을 느낄 수 있도록 MVP(최소 가치 제품)로 도움을 드리고 싶었을 뿐입니다.
    1. 사용자화를 원할 때 웹사이트에서 자주 하는 작업이라고 생각했습니다.
    1. 그들이 게시한 링크들은 제가 조사하고 읽은 자료에 대한 참고 자료였습니다.
    1. 그것이 당신에게 도움이 되지 못했다면 사과드립니다. 실수를 저질렀습니다.

@Canapin

  1. 말씀하신 내용이 매우 흥미로웠지만,
  • 제 의도는 Discourse의 클라이언트 측 사용자 스타일(userstyles)을 통해 커스터마이징을 해보는 것이었습니다 - 테마를 만들 필요가 없다면 이 방식이 작동합니다.
  • 저는 단순히 MVP(최소 가치 제품)에 도움을 주고 싶었습니다 - 플러그인이나 테마를 개발하지 않아도 사용자 스타일로 UX 경험을 느껴보길 원했기 때문입니다.
  • 예를 들어, refined github라는 저장소가 있습니다. 여기는 GitHub 개선 사항을 공유하는 곳이며, 이를 가능하게 하는 브라우저 확장 프로그램도 있습니다.
    1. 제 아이디어는 이 저장소의 아이디어와 유사합니다. 어쩌면 refined-discourse를 만들 수 있을 것입니다 - MVP와 같은 다양한 시각적 개선 사항(예: 컴팩트 메시지)을 포함하는 userstyles.css 파일입니다. 그러면 커뮤니티가 무엇이 가장 좋으며 어떤 것이 합리적인지 확인할 수 있습니다.
    2. 테마나 플러그인을 구현하거나 만들지 않아도 필요한 조정 사항을 확인할 수 있다면 정말 멋진 일이 될 것입니다.
    3. 컴팩트 메시지 아이디어가 정말 좋다고 생각하면서 이 생각을 하게 되었습니다. 사용자 스타일로 이를 커스터마이징할 수 있다면 - 그것은 쉬운 방법이 될 것입니다.
    4. 이것이 제가 말하는 오즈의 마법사(Wizard of Oz) 경험입니다. userstyles.css를 만든다면 아이디어를 개발하는 데 많은 시간을 쓰지 않아도 됩니다.
    • 오즈의 마법사 실험: 인간-컴퓨터 상호작용 분야에서, 오즈의 마법사 실험은 주체가 자율적이라고 믿는 컴퓨터 시스템과 상호작용하는 연구 실험이지만, 실제로는 보이지 않는 인간이 운영하거나 부분적으로 운영합니다.
      • 테마나 플러그인 없이도 개선된 UX/UI를 확인할 수 있습니다.
      • 사용자 스타일을 사용하는 사람들에게는 테마나 플러그인처럼 보일 수 있지만 - 사실은 그렇지 않습니다.
      • 이것은 MVP - 최소 가치 제품의 아이디어처럼 보입니다.
  1. 이것이 나쁜 아이디어인가요?
  • 마지막 질문입니다. 이 문제에 대한 귀하의 견해나 관점에 만족할 수 있다면 좋겠습니다.
  • 더 많은 피드백을 원합니다 ;D

참고

더 긴 게시물에 대해 이 방식이 어떻게 작동할지 생각해 보셨나요? 게시물을 읽은 후, 좋아요를 누르려면 위로 스크롤해야 하고, 다음 게시물을 읽으려면 다시 아래로 스크롤해야 합니다.

2개의 좋아요

논리적으로는 동의합니다. 좋은 반론이지만, 다음과 같은 이유로 그렇게 효과적이지 않다고 생각합니다:

  • 무엇보다도 저는 v4 스타일을 가장 좋아합니다. 메시지 컨트롤이 게시물의 오른쪽에 나타나며, 세로 방향으로 "가능한 한 아래쪽, 즉 메시지 끝과 화면 하단"에 배치될 수 있기 때문입니다. 컨트롤 패널은 각 메시지의 세로 위치 중 현재 마우스 위치와 가장 가까운 곳으로 동적으로 이동할 수도 있습니다! :wink: 따라서 이는 문제가 되지 않습니다.
  • 긴 글을 쓰고 읽는 대부분의 사용자는 답변 시 정확한 텍스트 인용을 사용하거나, 항상 주제 자체에 답변할 수 있으므로 “답변” 버튼은 그다지 필요하지 않습니다.
  • 이전에 "모바일용"에 대해 언급했듯이, 오른쪽 여백이 없고 터치스크린을 사용하므로, 주요 컨트롤 버튼은 여전히 항상 표준 위치에 표시되어야 합니다. 세로로 좁은 모바일 화면에는 이것이 가장 좋은 디자인인 것 같습니다.
  • v3를 선호할 수도 있는데, 여기서는 주요 메시지 컨트롤이 하단에 남아 있거나 유사한 형태를 취합니다.

따라서 메시지 컨트롤을 하단에 유지하기를 원하신다면 괜찮지만, 여전히 컨트롤 위아래의 모든 빈 세로 공간을 최소화하고 컨트롤(좋아요/편집 제외)은 마우스 오버 시에만 표시해 주시기를 요청합니다(데스크톱용).

1개의 좋아요

번거없이 디스커스를 커스터마이징해 보고 싶다면 서드파티 도구가 전혀 필요 없습니다.

https://theme-creator.discourse.org/ 에서 바로 해볼 수 있습니다. 이 도구가 바로 그런 용도로 만들어졌으니까요.

프로필 메뉴에서 테마를 만들 수 있습니다: https://theme-creator.discourse.org/my/themes

포럼 컴포넌트의 모든 외관은 여기서 확인할 수 있습니다: https://theme-creator.discourse.org/styleguide/

그리고 게시물 자체의 스타일은 여기서 확인하세요: https://theme-creator.discourse.org/styleguide/organisms/post

새로 만든 테마에서 CSS를 수정하면 실시간으로 적용되며, 페이지를 새로고칠 필요가 없습니다.

자세한 정보:


더 자세히 설명해 주시겠어요? 우리가 창의적으로 다른 아이디어를 제안하길 원하시나요, 아니면 CSS 코드를 작성해 드릴까요?

2개의 좋아요