Discourse의 스플래시 애니메이션을 Pulse 애니메이션으로 교체하고 싶습니다. (애니메이션은 codepen에서 확인해 주세요)
어떻게 해야 하나요?
잘 모르겠지만, 한 가지 더 짚고 넘어갈 점이 있습니다: 사용자가 스플래시 애니메이션을 본다면, 그 외관이 어때서가 아니라 더 큰 문제가 있다는 신호입니다. 그리고 구글봇이 이를 보고 점수를 조금 더 높게 준다고 해서, 외관이 어때서 신경 쓰지는 않겠죠. 
제가 말하고자 하는 바는
- 애니메이션을 어떻게 바꾸는지는 중요하지 않다
- Discourse가 왜 이렇게 느리게 응답하는지 모든 문제를 해결하는 것이야말로 (주로 서버 레벨에서) 해결해야 할 일이며, 그 해결책에 대해 Axel은 아마도 도움을 필요로 할 것이다
이전 두 번의 업데이트/업그레이드 이후로 스플래시를 본 적이 없습니다. 이는 Discourse가 이전보다 더 빨라졌다는 것을 의미합니다.
실제 문제는 서버 문제나 다른 기술적 요인이 아닙니다. 저는 스리랑카에서 살고 있습니다. 요즘 우리는 심각한 경제 위기에 처해 있습니다. 경제 위기 때문에 당국은 연료 발전소를 관리할 수 없어 정전을 실시하고 있습니다. 이로 인해 통신사들은 배터리 소모를 줄이기 위해 인터넷 서비스 속도를 낮추고 있습니다. 그래서 요즘 인터넷 속도가 매우 느립니다.
음, 스리랑카의 상황은 정말 좋지 않네요. 만약 당신의 주요 독자층도 스리랑카 출신이라면, 당신의 경우는 예외가 될 수 있겠지요.
다행히 누군가가 올바른 방향으로 안내해 주기를 바랍니다. 하지만 AFAIK(제가 아는 한) 그것은 쉽게 변경될 수 없어요.
고마워, 친구. 어떻게 해야 할지 한번 보자.
테마에서 편집하는 것은 불가능하다고 생각합니다. 그 이유는 erb 파일을 수정해야 하기 때문입니다. 특히 이 파일입니다: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
스플래시 화면은 Discourse 앱의 상당 부분이 로드되기 전에 표시되므로, 이 기능을 사용자 정의 가능하게 만드는 것이 꽤 복잡할 것 같습니다. @Johani 맞나요?
맞습니다 
스플래시는 모든 핵심 JS/CSS보다 먼저 로드됩니다. 현재 구현은 커스터마이징에 초점을 맞추지 않지만, v2에서는 이를 지원할 예정입니다. 계획은 스플래시 이미지를 localStorage에서 제공하여 성능을 약간 향상시키고, 테마의 head_tag 필드에 인라인 <script> 태그를 통해 관리자가 커스텀 이미지를 설정할 수 있도록 하는 것입니다.
현재 이 작업에 대한 예상 완료일(ETA)은 없으며, 테스트가 약간 더 필요합니다. 하지만 계획에는 포함되어 있습니다.
테마에서 ERB 스플래시 템플릿을 직접 편집할 수 없으며, 스플래시가 코어 CSS/JS보다 먼저 로드되므로 커스터마이징이 까다롭습니다.
테마의 일반 CSS/SCSS 탭에서 작성한 CSS는 컴파일되어 스플래시 로더가 표시된 후에만 로드됩니다. 따라서 해당 CSS가 정상 작동하더라도, 로드 시점에 원래의 점들이 잠시 표시됩니다.
그럼에도 불구하고, 테마의 head_tag 안에 인라인 CSS를 주입하여 스플래시 애니메이션을 오버라이드할 수 있습니다. 이렇게 하면 스타일이 즉시 적용되어 기본 점들의 깜빡임 현상을 방지할 수 있습니다.
아래는 기본 점 애니메이션을 Codepen의 것과 유사한 Pulser 효과로 대체하는 예시입니다:
<style>
:root {
--pulser-color-1: #ffcc00;
--pulser-color-2: #ff6347;
}
#d-splash .dots {
all: unset;
position: absolute;
width: 1.6em;
height: 1.6em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
#d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
#d-splash .dots[style*="--n:0"] { transform: translate(0%, -50%); }
#d-splash .dots[style*="--n:1"] { transform: translate(150%, -50%); }
#d-splash .dots[style*="--n:2"] { transform: translate(300%, -50%); }
#d-splash .dots::before,
#d-splash .dots::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--pulser-color-1);
top: 0;
left: 0;
opacity: 0;
animation: pulse 1s ease-out infinite;
}
#d-splash .dots::before {
border-color: var(--pulser-color-2);
animation-delay: 0.3s;
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.6;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
</style>
참고: 브라우저는 <style> 태그 내에서 SCSS를 파싱할 수 없습니다. 따라서 SCSS를 그대로 인라인으로 넣을 수 없으며, SCSS 대신 CSS를 사용해야 합니다.
결과:
새로운 테마 컴포넌트를 생성하고, 코드 편집(Edit Code)을 클릭한 후 Head 태그에 들어가서 위의 블록을 붙여넣어야 합니다.
저장 후 하드 리로드로 사이트를 새로고침하면 스플래시 화면에서 업데이트된 펄스 애니메이션이 즉시 표시됩니다.
이것은 Discourse가 계획된 v2 업데이트에서 더 커스터마이징 가능한 스플래시 화면을 구현할 때까지 유용한 우회 방법입니다.
커스텀 이미지를 사용할 수 있는 새로운 기능을 발표했습니다: Branding the Discourse splash screen with custom SVG images