Discourse Splash 소개 - 사이트 자산 로딩 중 표시되는 시각적 프리로더

Johani · 7월 5, 2022, 5:15오후

Discourse는 단일 페이지 JavaScript 애플리케이션입니다.

이것은 앱 내 탐색이 매우 빠르다는 것을 의미합니다. 현대 웹 애플리케이션의 단점은 초기 페이지 로드 시 모든 것이 로드되고 파싱되어야 한다는 점입니다. 수년에 걸쳐 사이트 자산 서빙 방식을 최적화하기 위해 많은 노력을 기울였지만, 장치 및 네트워크 상태에 따라 이 과정이 다소 느릴 수 있습니다.

지난 몇 주간, 느린 연결/장치를 사용하는 사용자가 경험하는 초기 대기 시간을 줄이기 위한 잠재적 개선 사항을 적극적으로 작업하고 테스트해 왔습니다. 이 커밋부터 Discourse 사이트에서 사이트 자산이 로드되는 동안 스플래시 스크린을 표시하게 된 것을 기쁘게 알려드립니다.

어떤 모습인가요?

Meta에서는 이미 일찍부터 이 기능을 활성화해 왔으므로, 이미 본 적이 있을 수 있습니다. 그렇지 않다면, 다음과 같은 모습입니다.

어떻게 작동하나요?

사용자가 Discourse 사이트를 로드할 때, 2초 이내에 Discourse가 파싱되지 않으면 스플래시 스크린을 표시합니다. 즉, 연결 시간 + 2초를 기준으로 합니다.

빠른 장치/연결을 사용하는 사용자에게는 스플래시 스크린을 표시하지 않습니다.

어떻게 활성화하나요?

이것은 코어 기능이며, 설정이 기본적으로 활성화되어 있으므로 최신 버전으로 업데이트하기만 하면 됩니다. 만약 우연히 우리가 추가한 설정을 실험해 보았고 스플래시 스크린을 볼 수 없다면, splash_screen 사이트 설정이 활성화되어 있는지 확인하십시오.

어떤 이점이 있나요?

느린 장치/연결을 사용하는 사용자에게 무언가를 표시하는 것 외에도, 이 기능은 Discourse 사이트의 FCP/LCP 지연을 줄여줍니다. Meta에서 FCP/LCP를 추적하기 위해 내부 도구를 구축했으며, 결과는 다음과 같습니다.

알아두어야 할 다른 것이 있나요?

스플래시 스크린에 표시되는 “로딩 중” 텍스트는 preloader_text 번역 문자열을 기반으로 합니다. 우리의 커뮤니티는 훌륭하며, 해당 텍스트는 이미 많은 언어로 번역되어 있습니다. 다른 문구를 선호한다면, 사이트의 /admin/customize/site_texts?q=preloader_text에서 해당 문자열을 사용자 지정할 수 있습니다.

스플래시 스크린은 사이트를 어떤 식으로든 지연시키지 않으며, 사이트 자산이 로드되는 동안에만 표시됩니다. 사이트가 준비되면 스플래시 스크린은 즉시 제거됩니다. 사이트가 준비된 시점과 스플래시 스크린이 제거되는 시점 사이에 지연은 없습니다.

Jumanji · 7월 6, 2022, 9:58오후

내부 데이터가 Google Search Console에 기록된 CWV 데이터와 일치하는지 궁금합니다.

Falco · 7월 6, 2022, 10:48오후

내부 지표에는 Google의 자체 Web-Vitals 라이브러리를 사용하므로 값이 일치합니다. 다만 Search console의 피드백 루프가 더 넓기 때문에, 솔루션을 더 빠르게 개선하기 위해 자체적으로 해당 데이터를 수집했습니다.

WebPageTest 도구를 사용하여 새로운 LCP 값을 검증할 수도 있습니다.

Paracelsus · 7월 7, 2022, 11:52오전

정말 멋져요!

너드 같은 세부 사항인 것 같지만, 로딩 화면의 원 색상 변경이 가능할까요?

Canapin · 7월 7, 2022, 12:43오후

로더를 수정하려는 분들을 위해 해당 파일을 공유합니다:

github.com/discourse/discourse

app/views/common/_discourse_splash.html.erb

main

<section id="d-splash">
  <style>
    html {
      <%- if custom_splash_screen_enabled? %>
      overflow: hidden !important;
      <%- else %>
      overflow-y: hidden !important;
      <%- end %>
    }

    /* user picked a theme where the "regular" scheme is dark */
    <%- if dark_color_scheme? %>
      html {
        background-color: #<%= light_color_hex_for_name("secondary") %>;
      }

      #d-splash {
        --dot-color: #<%= light_color_hex_for_name("tertiary") %>;
        <%- if custom_splash_screen_enabled? %>
          <%- if splash_screen_image_animated? %>

This file has been truncated. show original

Johani · 7월 8, 2022, 2:33오후

스플래시 화면은 다른 CSS 범위에 있으므로, 아쉽게도 테마를 통해 CSS를 수정할 수 없습니다. 다만, 개선 사항을 계획하고 있으며 이 부분을 먼저 시작했습니다.

해당 변경 사항이 사이트에 적용되면, 스플래시 화면의 점들이 현재 테마의 색상을 사용하게 됩니다.

darkpixlz · 7월 14, 2022, 6:14오전

그 애니메이션 대신 일관성을 위해 기본 Discourse 스피너를 표시하는 것이 좋다고 생각합니다. 다만 개인적인 의견일 뿐입니다.

agemo · 7월 14, 2022, 11:22오후

좋은 기능이에요. 최신 업데이트에서 이미 사용할 수 있습니다.

외관적인 것보다 우선시되어야 할 점은 다크 테마와의 동기화라고 생각해요. 다크 테마를 사용하다가 갑자기 전체 화면이 하얗게 변하면, 어두운 방에서라면 눈이 부셔 미칠 것 같거든요!

다크 테마와 일관성을 유지할 수 있도록 같은 조치를 취해 주세요.

sam · 7월 17, 2022, 11:07오후

제가 이해한 바로는 이미 다크 배경을 동기화하고 있는 거죠, @Johani?

문제는 서버가 다크 테마를 사용 중임을 알려주는 데 몇 초가 걸릴 수 있다는 점입니다. 서비스 워커의 마법을 이용해 두 번째 로딩 속도를 개선할 수는 있지만, 매우 매우 까다로운 문제입니다.

agemo · 7월 17, 2022, 11:17오후

마지막 게시글 이후로 한 가지 변화를 발견했습니다. 조건을 정리하자면, 로그아웃 상태에서는 Discourse가 운영체제의 테마를 다크로 인식하고, 이에 맞춰 Discourse 사이트의 테마도 다크로 설정하며, 따라서 로딩 화면도 테마 스타일링과 동기화되도록 다크 배경색을 사용합니다.

그러나 다크 테마를 기본값으로 설정된 사용자 계정으로 로그인하면, 로딩 화면이 다시 흰색으로 돌아갑니다.

따라서 제 추측이 맞다면, 이미 50%는 의도대로 작동하고 있다고 볼 수 있습니다.

직접 테스트해 보지는 못했지만, 다른 분들이 시도해 보실 수 있을 것 같습니다.

agemo · 7월 18, 2022, 4:13오후

네, 오늘 테스트해 봤는데 말씀하신 대로 동작합니다. 로그아웃 상태에서는 정상 작동하지만, 다크 테마가 설정된 사용자로 로그인하면 기본적으로 흰색 화면으로 전환됩니다. OS의 다크 테마가 감지되었을 때와 동일한 방식으로 동작하도록 수정해 주시면 해결될 것 같습니다.

seanblue · 7월 18, 2022, 11:44오후

이상하게도 제 운영체제가 라이트 모드인지 다크 모드인지에 따라 달라지는 것 같습니다. 그리고 Discourse는 제가 기대하는 것과 정반대로 동작하더군요. 기본적으로 다크 모드로 설정되어 있으면 Discourse가 하얗게 깜빡이는데, 라이트 모드로 설정되어 있으면 콘텐츠가 로드될 때까지 다크 페이지가 표시됩니다.

여기 다크 모드입니다. 처음에는 어둡게 시작됩니다(서버에서 데이터를 받는 동안 iOS가 대기 중), 그 다음 하얗게 깜빡입니다(아마 Discourse의 초기 페이지 로딩 때문일 것입니다), 그리고 제가 설정한 다크 테마가 로드됩니다:

그리고 여기는 라이트 모드입니다. 처음에는 하얗게 시작됩니다(서버에서 데이터를 받는 동안 iOS가 대기 중), 그 다음 어둡게 변합니다(아마 Discourse의 초기 페이지 로딩 때문일 것입니다), 그리고 제가 설정한 다크 테마로 유지됩니다:

sam · 7월 19, 2022, 12:42오전

흥미롭네요! 영상 공유해 주셔서 감사합니다. @Johani 님이 확인해서 알려드리겠습니다.

agemo · 7월 20, 2022, 3:06오후

네, 맞습니다. 영상까지 포함된 완벽한 예시네요!

내가 미친 게 아니었구나!

agemo · 7월 23, 2022, 12:25오후

@Johani 제가 수정이라고 생각했던 내용(혹은 수정이 되길 바라는 내용)으로 최신 커밋을 업데이트했지만, 실제로 차이가 있는지 확실하지 않습니다 (iOS, Safari / macOS Safari)

지금 제 인터넷 연결이 너무 좋아서 쉽게 재현할 수 없네요. 다이얼업이나 다른 느린 연결 환경을 찾아보겠습니다…

Canapin · 7월 23, 2022, 1:35오후

데스크톱에서는 브라우저의 개발자 도구를 사용하여 연결 속도를 제한할 수 있습니다: How to perform Network Throttling in Chrome | BrowserStack

다만 모바일 브라우저에 대해서는 잘 모르겠습니다.

agemo · 7월 23, 2022, 4:49오후

감사합니다. 크롬은 안 쓰지만 xCode 도구를 살펴보고 스로틀링을 설정해 보겠습니다.

조금 더 시간을 들여 확인해 봤는데, 여전히 같은 상태입니다.

seanblue · 7월 24, 2022, 3:19오전

이 문제는 흰색 플래시와 관련이 있을 수 있으므로 여기에 게시합니다.

iPhone을 라이트 모드로 설정했을 때, 상단 바가 어둡게 표시됩니다. 이는 제가 사용하는 어두운 Discourse 레이아웃과 일치하므로 예상된 동작입니다.

iPhone을 다크 모드로 설정했을 때, 상단 바가 밝게 표시됩니다. 이는 예상치 못한 현상이며, 흰색 플래시와 마찬가지로 레이아웃의 일부가 페이지가 흰색이라고 휴대폰에 인식시키는 것처럼 보입니다. 이렇게 말하는 이유는 iPhone의 Safari가 표시 중인 사이트의 주요 색상과 일치하도록 상단 바의 색을 바꾸려 하기 때문입니다.

Johani · 7월 25, 2022, 12:04오후

동기화했지만, 사용자가 일반 색상 스킴만 다크로 설정한 경우를 놓쳤습니다. 이전에는 사용자가 둘 다 설정하고 OS 토글을 사용한다고 가정하여, 스플래시 화면의 라이트/다크 모드 선택을 OS 설정에 의존하고 있었습니다.

수정 사항을 몇 가지 푸시했습니다.

github.com/discourse/discourse

UX: Set theme color on splash a bit earlier (#17619)

main ← hnb-ku:splash-background-flicker

merged 09:53AM - 23 Jul 22 UTC

hnb-ku

+8 -3

Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-prel…oader-displayed-while-site-assets-load/232003/17 We currently set the theme `secondary` color as the background for the splash, and this works and respects light/dark modes. The issue is that we set it on the `#d-splash` div. That div doesn't have a specified height and only gets its height when the splash image loads. This can cause a flicker effect where the `<HTML>` background shows for a fraction of a second while the splash image loads. This PR sets the theme color on the `<HTML>` tag to alleviate this. This allows us to set the theme color a little bit sooner and should hopefully prevent the flicker effect from happening. This PR also adds the `theme-color` `<meta>` tag for dark mode. Browsers that don't support multiple `theme-color` tags will ignore the second tag and fall back to the first one.

github.com/discourse/discourse

UX: Prevent color flicker on dark themes (#17620)

main ← hnb-ku:splash-flicker-take-2

merged 10:02AM - 25 Jul 22 UTC

hnb-ku

+60 -33

Follow up to: https://github.com/discourse/discourse/pull/17619 Context: https:…//meta.discourse.org/t/introducing-discourse-splash-a-visual-preloader-displayed-while-site-assets-load/232003/17 We previously relied on the user's browser when deciding when to show the splash in light/dark mode. This worked well but can fail if the user manually selects a theme with a default "dark" scheme. This PR will now factor that in. If the user selects a theme with a default dark scheme, use that. If a user selects a theme with a "light" default scheme and also picks a secondary "dark" scheme, use the `media` detection we had before. This PR also removes the dark mode `theme-color` that was added in the previous PR. That will now go in a separate PR

일반 스킴이 다크라면 그 것을 사용하고, 라이트라면 OS 라이트 모드에는 라이트 스킴을, OS 다크 모드에는 다크 스킴을(설정되어 있다면) 사용하도록 했습니다.

해당 이슈와 이 문제

이제는 수정되었을 것입니다. 보고해 주셔서 감사합니다.

agemo · 7월 26, 2022, 10:09오전

+1: 멋진데요! 직접 써보고 싶어요!

제안 - 브랜딩

애니메이션된 점 위쪽에 기본 로고 커스터마이징을 허용하거나, 점 자체에 로고(fav.ico 크기 이미지)를 넣거나, 로딩 및 속도 문제가 있을 경우 고정된 저해상도 고정 크기의 이미지를 사용하는 것이 가능한가요?

다른 사용자가 로딩 원형을 복원하는 것을 제안했는데, 이는 Discourse의 익숙한 요소로, UI/UX 일관성을 위해 좋은 아이디어라고 생각합니다. 기본 정적 사이트 이미지/로고 지정 기능을 허용하면 이 기능이 더욱 향상될 것입니다. 이는 사용자가 로딩 상태의 불확실한 구간에서도 방향성을 유지하고 위치를 파악할 수 있게 하여 사용자 경험과 신뢰도를 높여줍니다.

추가로, 기존 브랜딩 설정, fav.ico 또는 "작은 로고"에서 이미지를 가져오는 것이 좋은 기본값이 될 것 같습니다.

글		댓글	조회수
How to disable "preloader-image" on Discourse instance? Support splash	8	337	5월 9, 2026
Personal branding for the splash screen Feature completed , splash	9	927	2월 4, 2026
Change loading animation Support splash	2	350	2월 4, 2026
Which color scheme does the preloader use? Support splash	10	490	10월 10, 2023
Branding the Discourse splash screen with custom SVG images Announcements splash	33	2051	8월 26, 2026

Discourse Splash 소개 - 사이트 자산 로딩 중 표시되는 시각적 프리로더

어떤 모습인가요?

어떻게 작동하나요?

어떻게 활성화하나요?

어떤 이점이 있나요?

알아두어야 할 다른 것이 있나요?

제안 - 브랜딩

Related topics