직원들이 포지션 지정이 모호하다고 지적

[davidkingham]

방금 스태프 공지 기능을 사용하러 왔는데, 어떤 게시물을 가리키는지 헷갈립니다. 바로 위 게시물인지 아래 게시물인지 구별하기가 정말 어렵네요.

게시물을 구분하는 구분선 아래에 표시하는 것이 더 합리적이지 않을까요?

[david (David Taylor)]

이건 현재 사용 중인 테마 때문인 것 같네요? 알림 하단의 둥근 모서리 때문에 아래 게시물과 약간 분리된 느낌을 줍니다. 메타에서 기본 테마를 사용할 때 더 자연스러운 것 같아요? (예시로 이 주제에 몇 가지 알림을 추가했습니다)

[davidkingham]

데이비드, 고마워요. 하지만 테마를 안 쓰고도 테스트해 봤는데 여전히 명확하지 않아요. 여기에 올려주신 예시는 한쪽이 첫 번째 게시물이고 다른 쪽은 토픽 맵으로 구분되어 있어서 분명하지만, 그 너머로 가면 익숙하지 않은 사람은 어느 쪽이 어떻게 이어지는지 알 수 없어요. 이렇게 해 보세요. 그 알림들을 제거하고, 여기에 제게 답글을 달고, 제 답글에 알림을 추가해 보세요.

[isaac (Isaac Janzen)]

나도 참여하고 싶다

수정: 나한테는 제대로 된 것처럼 보이는데

[darkpixlz (Pyx)]

오히려 패딩이 좀 적은 편입니다:

[davidkingham]

데이비드의 게시물 위에 있는 통지를 제거하면, 해당 통지가 어떤 게시물을 가리키는지 혼동하기 매우 쉬울 것 같습니다. 오늘 이 기능을 모더레이터들에게 보여줬는데, 즉각적인 반응은 전혀 명확하지 않다는 것이었습니다.

[ToddZ]

(이 오래된 게시물을 다시 방문하던 중 우연히 발견했습니다. 다른 Staff notice 혼동 참고…)

저는 항상 Staff Notice의 위치가 잠재적으로 모호하다고 생각해왔습니다. 테마가 색상, 테두리, 구분선 등을 다르게 처리할 수 있기 때문에, 그 방식으로 해결하는 것은 아마도 어려울 것입니다.

오늘날 모든 게시물 공지사항에 전역적으로 적용할 수 있는 대안은 아바타 앞에 유니코드 화살표를 삽입하는 사용자 정의 CSS입니다:

CSS: 아바타 앞

.post-notice::before {
  content: '🡇';
}

(또는 아마도 더 정확하게는):

.post-notice::before {
  content: " \1F847";
}

…또는 텍스트 콘텐츠 앞에:

CSS: 텍스트 앞

.post-notice p::before {
  content: " \1F847";
  margin-right: .5rem;
}

오 — 색상을 변경하는 트릭이 있습니다:

CSS: 색상 변경

.post-notice p::before {
  content: " \1F847\fe0e";
  color: yellow;
  margin-right: .5rem;
}

(어떤 유니코드 문자에든 \fe0e를 추가하면 색상을 적용할 수 있는 텍스트 버전이 렌더링됩니다. 참고.)

그리고 저는 메인 토픽의 공지사항에 하향 화살표가 잘 어울리지 않는다고 생각했습니다. 왜냐하면 그것은 토픽을 더 명확하게 이끌고 있기 때문입니다. 이 CSS는 첫 번째 게시물에 대해서만 화살표를 불릿으로 대체합니다:

CSS: 메인 토픽은 다르게

#post_1 .post-notice p::before {
  content: " \29BF\fe0e";
  color: yellow;
  margin-right: .5rem;
}

[davidkingham]

좋은 아이디어네요, Todd! 광인인 게 나뿐이 아니어서 다행이에요

아래 화살표 표시에 문제가 있어서 살짝 수정했고, 코드를 조금 더 깔끔하게 다듬어 테마 호환성을 위해 tertiary 색상으로 변경했어요.

.post-notice p::before {
  content: "\2B07\FE0E";
  color: var(--tertiary);
  margin-right: .5rem;
}

#post_1 .post-notice p::before {
  content: "\29BF\FE0E";
}

[Lilly (Lillian)]

토픽에서 게시글이 정렬되는 방식과 스크롤할 때의 느낌을 고려하면, 아래 게시글을 가리킨다고 느끼는 것이 자연스럽고 논리적입니다. 화살표는 좋은 디테일이며, 더 명확한 안내를 위한 훌륭한 해결책입니다. 직원 공지에도 약간의 참고 사항을 추가할 수 있습니다.

[Mevo]

@Lilly

게시물이 최신 순서대로 위에서 아래로 정렬되므로, 스태프 공지사항은 그 바로 아래 있는 게시물을 가리킵니다.

불쾌한 의도는 없지만, 그건 마치 "나는 알고 있고 익숙해서 나한테는 자명해 보인다"는 식의 생각이네요. 스태프 공지사항은 게시물이 게시된 후에야 게시될 수 있을 것 같다는 점을 지적하고 싶습니다. 따라서 순서가 유지된다면, 스태프 공지사항이 게시물 뒤에 오는 것이 자연스러울 것 같다는 거죠.

개인적으로 @davidkingham 님의 지적이 옳다고 생각합니다: 모호합니다. 처음 보는 사람이 더 명확하게 이해할 수 있도록 개선하는 것이 좋을 것입니다. 하지만 여기서는 그런 상황이 아닙니다(게시물 상단에 표시되길 원한다면, 예를 들어 게시자 이름 아래에 스태프 공지사항을 배치하는 것이 훨씬 명확할 수 있습니다. 다만 이는 기술적으로 더 복잡할 수 있거나 다른 이유로 인해 비호감일 수 있습니다).

[NateDhaliwal]

일부 테마(현재 제가 사용 중인 Meta Branded 테마처럼)에서는 스태프 공지사항이 게시글을 구분하는 선 아래에 표시되므로, 해당 공지가 어디를 가리키는지 명확하게 알 수 있습니다.
다른 테마에서도 이 방식을 채택할 수 있을까요?

[Lilly (Lillian)]

@Mevo

그건 마치 "나도 알고 있고, 익숙해서 당연한 것처럼 느껴진다"는 것과 비슷해 보여.

아마도 그럴 수 있겠지.

내가 말하려던 것(하지만 잘 표현하지 못한)은, 게시물을 스크롤할 때 논리적인 시간 순서상 아래 게시물을 가리키는 것이 당연해 보인다는 거야.

[satonotdead]

왜 첫 번째 스태프 공지만 줄이 없고 나머지는 줄이 있나요?

저는 이 글에서 논의된 문제 때문에 개인적으로 스태프 공지를 사용하지 않습니다. 더 많은 노출을 위해 노력해 보았지만, 오른쪽으로 이동하는 것이 아마도 필요한 것 같습니다.

[hoangviet (DilysLena)]

안녕하세요, 공지사항을 게시물 아래가 아니라 위에 표시하는 대신 아래에 표시하려면 어떻게 해야 하나요?

죄송하지만 CSS로 가능한 방법이 있을까요?

[taravasya (Вася Тарарин)]

개인적으로도 공지사항을 게시글 뒤에 배치하는 것이 더 논리적이라고 생각합니다. 아직 거기로 옮기는 간단한 방법을 찾지 못해서 임시 해결책으로 이 CSS 스타일을 추가했습니다:

.post-notice.custom {
    background: linear-gradient(to bottom, rgb(255 0 5) 0%, rgba(255, 137, 139, 0.2) 2%, rgba(255, 137, 139, 0) 70%);
}

이제 공지사항은 다음과 같이 보입니다:

그라디언트의 방향 덕분에 그 '논리적 연속’이 어디인지 직관적으로 알 수 있습니다.
자동 생성되는 공지사항에는 이 클래스가 적용되지 않으므로 .custom 클래스를 가진 규칙을 사용했습니다. 예를 들어 사용자가 첫 메시지를 작성하거나 오랜 기간 후 다시 글을 남길 때 생성되는 공지사항이 해당됩니다. 이러한 경우를 위해 다른 그라디언트 색상을 사용할 수 있습니다.

참고로, 공지사항에 사용될 수 있는 다른 클래스가 있는지, 그리고 .custom 클래스가 스태프 공지사항에만 적용되는지 아니면 다른 곳에도 적용되는지 알고 싶습니다.