새 사이트 피드백을 구합니다

네, 저도 그걸 읽자마자 같은 생각을 했어요. 저도 그 사이트를 한번 확인해볼게요! 사실 저는 Air 테마로 시작해서 CSS 등으로 꽤나 세심하게 커스터마이징을 했었는데, 지금 쓰고 있는 테마와 이전에 쓰던 Air 테마를 비교해 보면… 제 입으로 말하기엔 좀 이상하지만, 너무 “기본적인” 느낌이 들어서 그래요. 저는 원래 미니멀리즘을 좋아하거든요, 하하.

@Lilly, @bryce, @omarfilip 님이 느리다고 말씀하셨을 때, 제 기준으로는 밤의 특정 시간이었고, 서버가 호스팅되는 곳에서도 대략 비슷한 시간이었어요. 혹시 @Heliosurge, @daemon, @merefield 님께서 시간이 나고 깨어 계신다면, 12시간 뒤에 다른 분들이 느리다고 말씀하신 그 시간에 한번 확인해 주실 수 있을까요? 하하. 이게 시간대 때문인지 너무 궁금해서 안 될 지경이에요.

이런 소식이 정말 기쁘네요! 특히 서버가 호스팅되는 곳과 지구 반대편에서라 더 그렇습니다.

훌륭하네요!! 혹시 다른 피드백이나 추천 사항이 있으신가요?

1개의 좋아요

방금 시도해 봤는데, 이제 거의 즉시 로딩되는 것 같아요. 처음에는 메모리 캐시에서 로딩되는 줄 알았는데, 그런 것 같지는 않네요.

2개의 좋아요

아, 그렇군요. 네, 좀 이상하네요. 그러면 이건 시간대에 따른 문제인 것 같네요. 서버가 호스팅된 지역의 밤 시간대였고, 그 시간에 온라인이던 대부분의 사용자들도 그랬을 테니 말이죠. 그래도… 수백억 달러짜리 회사들은 하루 중 어떤 시간이든 그런 문제는 없지 않나요? 주요 웹사이트에서 전에 느릴 때를 경험한 적은 있지만, 그런 경우는 드물거든요.

네브래스카에서 500Mbps 회선을 사용하는데, 내 경우에도 매우 빠르게 로드되었습니다.

1개의 좋아요

내 기준으로는 새벽 3시인데, 보통 그 시간에 잘 때가 많아요. :wink:

1개의 좋아요

지금은 오전 8시 30분 (PDT) 기준으로 꽤 빠르게 로드됩니다.

1개의 좋아요

내 환경에서는 페이지가 빠르게 로드됩니다. :+1: 잘 보입니다.

Discourse에 대해, 태그 스타일링은 크게 좋아하지 않습니다 (개인 의견이긴 하지만):

  • 이건 태그인데, 여기서 전체 폭(full-width)을 차지할 거라고 기대하지 않습니다.
  • 시각적으로 시선을 많이 빼앗습니다.
  • 대비 문제 – 가독성이 매우 좋지 않습니다.

임의의 예시:

좋은 결과 있으시길 바랍니다!

2개의 좋아요

피드백 감사합니다!
네, 실제로 태그의 너비에 대해 실험을 해 봤는데, 크기를 조절하면 어떻게 가운데 정렬을 해야 하는지 도저히 모르겠더라고요. 색상 측면에서는 라이트 모드와 다크 모드 양쪽 모두에 잘 어울리는 더 나은 색상을 찾기가 정말 어려웠습니다. 라이트 모드에서 박스를 더 밝게 만들면 다크 모드에서는 너무 밝아져서 같은 문제가 발생하거든요.

예를 들어, 태그의 요소를 검사(Inspect Element)해서 max width 속성을 40%로 바꾸면 시각적으로는 훨씬 더 좋아 보이는데, 그러면 어떻게 전체를 가운데 정렬해야 할지 모르겠습니다. 시도해 볼 때마다 박스 뒤의 배경이 아니라 텍스트만 이동하거든요.

해당 태그들을 중앙 정렬하려면 flexbox 속성을 사용할 수 있습니다. 태그들은 이미 display: flex로 설정된 부모 컨테이너 안에 있습니다.

Flexbox는 컨테이너 내부에서 자식 요소들이 어떻게 배치되는지를 제어하는 것을 매우 쉽게 만들어 줍니다. 개발자 도구에는 display: flex 옆의 작은 아이콘을 클릭하면 원하는 효과를 내는 속성이 무엇인지 확인할 수 있는 컨트롤 세트가 나타나는 유용한 기능이 있습니다.

이 경우, justify-content: center가 해결책입니다:

여러 개의 태그가 있을 때도 동일하게 작동한다는 점에 유의하세요:

더 자세한 내용을 알고 싶다면 이것은 flexbox에 대한 훌륭한 고전적인 튜토리얼입니다. CSS 도구상에서 매우 유용한 도구입니다 :grin:

3개의 좋아요

와, 이렇게 알려주셔서 정말 감사합니다! 네, 태그가 2개 표시되면 가운데로만 하나 표시되는 것보다 훨씬 덜 어색해 보이긴 하네요. 하지만 솔직히 대부분의 게시물에서 여러 태그를 사용하는 사람들을 많이 보진 못했어요. 음… 태그가 표시되는 곳에 CSS나 다른 방식으로 토픽/게시물의 다른 요소를 함께 표시해서 두 가지가 보이도록 하는 방법을 찾아봐야 할 것 같아요. 아니면 아예 다 숨기는 것도 방법일 텐데, 뭐.

아니면 더 나은 방법으로, 카테고리를 그것으로 대체할 수도 있을까요?

다크 모드에서 더 잘 작동할 수 있도록 색상에는 Discourse CSS 변수 사용을 권장합니다. (아무 요소나 검사해서 아래로 스크롤하면 됩니다)


가운데 정렬: 편집: Bryce가 이미 이 질문에 답했습니다!

.discourse-tags {
    justify-content: center;
}
color: var(--secondary-low) !important;
background: var(--blend-primary-secondary-5) !important;


dark-light-choose(<lightcolor>, <darkcolor>) 함수를 사용하여 라이트 모드와 다크 모드 색상을 정의할 수도 있습니다. 이렇게 하면 다크 모드가 켜져 있거나 꺼져 있는 상태에 따라 올바른 색상이 적용됩니다.

4개의 좋아요

음, 제가 잘못한 걸까요? 이 내용을 Inspect Element에 붙여넣었더니 다음과 같은 결과가 나옵니다:

background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

1개의 좋아요

이것은 Discourse 코어에서 사용할 수 있는 SCSS 함수입니다. 처리될 수 있도록 테마 CSS에서 사용해야 합니다. 브라우저에서 직접 사용하면 작동하지 않습니다.

1개의 좋아요

사이트가 여전히 빠르게 로드됩니다. 아주 잠깐만 보입니다.

요구사항에 따라 컴포넌트를 추가하는 방식이 정말 좋습니다. 저는 아직 코드 부분을 배우는 중이라, 저보다 앞서 가시는 것 같아요. 오래전 Discourse를 사용하기 전에는 기본적인 QBasic과 구형 Turbo Pascal 정도만 만져본 적이 있었거든요. 하지만 점차 익숙해지고 있습니다.

1개의 좋아요

음, 알겠습니다. 제 .scss 파일에는 다음과 같은 코드가 있습니다:

.discourse-tags {
        display: flex;
        margin: 1em 0 0 0;
        /* justify-content: center; */
        a {
          display: inherit;
          flex: 1 0 auto;
          justify-content: center;
          max-width: 35%;
          //line-height: var(--line-height-small);
          line-height: 1.1rem;
          border: 0.5em solid transparent;
          /* color: #000000 !important; */
          color: var(--secondary-low) !important;
          background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

여기서 주목해야 할 부분은 마지막 2줄입니다. 라이트 모드와 다크 모드 모두에서 #f0f2f5 색상이 그대로 유지되고, 다크 모드에서는 3a3b3c 색상으로 전환되지 않는 것 같습니다. 원인이 무엇일까요?

요소 검사(Inspect Element)를 해봐도 속성이 그대로 유지됩니다:
background: #f0f2f5 !important;
위에서 링크해 주신 URL도 시도해 보고, $tagbglight와 $tagbgdark로 변경하여 정의하는 등 여러 방법을 해 봤지만 여전히 해결되지 않습니다.

dark-light-choose('#f0f2f5', '#3a3b3c')을 실행하면 다음과 같은 결과가 나옵니다:

이전 결과와 거의 같습니다.
참고: Inspect Element(요소 검사)에서는 이중 인용부호가 표시되지만, 코드에서는 당신처럼 단일 인용부호를 사용했습니다.

음, 최종 결과에 따옴표가 포함되어 있다면 이렇게 시도해 보세요:

dark-light-choose(unquote("#f0f2f5"), unquote("#3a3b3c"))

그래서 올바른 색상이 선택되는지 확신은 없어요!

이렇게 하면 인용 부호가 제거되지만, 모드 전환 시에도 여전히 이 색상만 배경으로 표시됩니다: #f0f2f5

이상하네요. 함수 자체가 주색과 보조색의 밝기를 비교하는 것 같습니다. 왜 작동하지 않는지 잘 모르겠습니다. :thinking:

@function dark-light-choose($light-theme-result, $dark-theme-result) {
  @if is-light-color-scheme() {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

@function is-light-color-scheme() {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return true;
  } @else {
    @return false;
  }
}

color_definitions.scss 파일에서 CSS 변수를 정의해야 할 것 같습니다.

예를 들어:

:root {
    --bg-custom: dark-light-choose(#f0f2f5, #3a3b3c);
}

그런 다음 이렇게 사용할 수 있습니다:

background: var(--bg-custom) !important;