Discourse 스플래시 화면에 사용자 지정 SVG 이미지로 브랜딩하기

[awesomerobot (Kris)]

Meta에서 이 기능이 매우 많이 요청되었습니다: Personal branding for the splash screen .

이제 기본 로딩 도트 표시기를 대체할 스플래시 화면 이미지로 정적 또는 애니메이션 SVG를 추가할 수 있는 옵션을 추가했습니다:

정적 SVG를 사용하는 경우, 로딩 도트 애니메이션 위에 표시됩니다:

반면, 애니메이션 SVG를 사용하는 경우 도트를 완전히 대체합니다:

성능상의 이유로, 애니메이션 SVG는 CSS transform 또는 opacity 애니메이션만 사용해야 합니다. ^[1]

Upcoming Changes 시스템( /admin/config/upcoming-changes )을 통해 이 기능을 활성화할 수 있습니다:

splash screen image 사이트 설정이 이 기능에 사용됩니다. SVG 내에서 var(--primary), var(--secondary), var(--tertiary) CSS 변수를 사용하여 테마의 색상을 참조하고 다크 모드에 적응할 수 있습니다.

중요한 점은 이 기능을 활성화하면 LCP 점수 에 영향을 줄 수 있다는 것입니다. 따라서 변경 사항을 적용한 후 잠시 기다렸다가 Google Search Console에서 LCP나 인덱싱에 영향을 미치는지 확인하는 것이 이 기능을 테스트하는 가장 좋은 방법입니다.

---

1. 원래 SMIL 애니메이션 요소(<animate>, <animateTransform> 등)를 허용하려고 시도했지만, 이러한 애니메이션은 JavaScript가 실행될 때 브라우저에 의해 일시 중지되어 버벅거림이 발생합니다. Transform과 opacity CSS 애니메이션은 JS에 의해 차단되지 않으며, 이 문제를 방지합니다. ↩︎

[philh]

음 Discourse Logo with Throbber

[eisammy (Sammy)]

이 점들을 어떻게 대체하나요? 제 화면에는 SVG 로고를 넣는 것만 표시됩니다.

[Don]

안녕하세요

@awesomerobot

정적 SVG가 사용되면 로딩 점 애니메이션 위에 표시되고, 애니메이션 SVG가 사용되면 이를 대체합니다:

따라서 애니메이션 SVG를 사용하면 대체됩니다.

[ばこん (べーこん(bac0n))]

SVG 애니메이션을 적용했는데, 화면에서 매우 작게 보입니다.

크기를 키우는 방법이 있을까요?

[awesomerobot (Kris)]

현재 이 화면은 앱의 대부분이 로드되기 전에 불러와지며 제약 조건이 많아 커스텀 CSS를 추가할 방법이 없습니다. 여기서 사용하고 계신 SVG 이미지를 공유해 주시겠어요 (또는 DM으로 보내주세요)? 테스트를 해 보고 기본 설정을 더 유연하게 조정할 수 있는지 확인해 볼 수 있습니다.

[ばこん (べーこん(bac0n))]

여기 있습니다

[awesomerobot (Kris)]

참조해 주셔서 감사합니다!

조금 더 큰 차원을 허용하고, 정적 로고가 있는 화면의 중앙 정렬을 더 잘 처리하도록 하는 변경 사항을 추가하겠습니다: UX: better centering and slightly larger experimental splash - Pull Request #37574 - discourse/discourse - GitHub

또한 SVG 상단에 여백이 많이 있어 중앙 정렬에 영향을 미치고 있는 것을 발견했습니다. 이것이 의도적인 것인지 확실하지 않지만, 이 버전에서는 해당 여백을 제거했습니다.

[ばこん (べーこん(bac0n))]

정말 감사합니다!

[awesomerobot (Kris)]

SVG 애니메이션에 대해 허용하는 사항이 조금 변경되었음을 유의해 주세요 (OP도 이를 반영하여 업데이트했습니다). 원래는 SVG에서 SMIL 애니메이션을 허용하고 있었지만, 브라우저가 JavaScript 실행 중 이러한 유형의 애니메이션을 일시 중지하기 때문에 버벅거림이 발생하는 것으로 나타났습니다.

따라서 JS에 의해 차단되지 않는 CSS transform 및 opacity 애니메이션만 SVG에서 사용하도록 권장합니다.

위에서 @ばこん 님의 SVG를 살펴보면… 허용되는 애니메이션의 좋은 예시를 보여줍니다:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

또한 Discourse의 다른 애니메이션과 충돌하지 않도록 애니메이션에 고유한 이름을 부여하는 데에도 주의해야 합니다(“blink”, “rotate”, “fade” 등의 이름은 너무 일반적일 수 있습니다). unique-와 같은 접두사를 사용하는 것은 이를 피하는 좋은 방법입니다.

[Falco]

Google이 방금 Gemini Pro 3.1을 출시했는데, 이 모델의 첫 번째 하이라이트는 애니메이션 SVG였습니다. 당연히 저는 https://discourse-on-a-pi5.falco.dev/ 로더를 만들어 봤고, 프롬프트를 단 2번만 입력했을 때 이런 결과가 나왔습니다.

이 새로운 기능과 정말 잘 어울립니다!

[Bas (Bas van Leeuwen)]

정말 놀랍네요, Falco

Gemini가 Discourse 로고로 뭘 할 수 있는지 꼭 보고 싶어요

[Falco]

네, 결과물에 꽤 만족했어요! 모델들과 함께 이것을 꽤 오랫동안 시도해 왔는데, 이 모델이 처음으로 이를 잘 처리해 주네요.

프롬프트는 다음과 같습니다.

라즈베리 파이 미니 보드 PC에 대한 포럼에서 로딩 애니메이션으로 사용될 애니메이션 SVG를 생성하세요. 애니메이션은 반드시 SVG 인라인 CSS를 사용하여 구현해야 합니다.

위 프롬프트로 생성된 결과는 다음과 같습니다.

그 후 저는 이렇게 후속 질문을 했습니다.

훌륭해요! 라즈베리 자체, 빨간 육각형, 애니메이션을 변경할 수 있을까요? 현재는 왼쪽 위부터 오른쪽 아래로 대각선 방향으로 움직이고 있지만, 중심에서 벗어나 있어 이상해 보입니다. 이 요소들을 정적(고정)으로 중앙에 배치하고 더 은은한 애니메이션으로 바꾸는 건 어떨까요?

이 질문 후 제가 공유한 버전이 생성되었습니다.

유일한 문제점은 SVG 코드에 다음과 같은 CSS 주석이 많이 포함되어 있다는 것입니다.

/* Base Animation & Board Styles */

이러한 주석은 SVG 파일로 저장할 때 무효(invalid)하므로, 저는 해당 주석이 포함된 7줄을 수동으로 제거했습니다.

[Bas (Bas van Leeuwen)]

나보다 훨씬 더 좋은 결과를 얻고 있구나.

몇 번 시도하고 나서 포기했는데, 이게 내가 만든 것 중 가장 좋은 거야

[수정] 중간 상태 두 가지를 더 추가해볼게:
이건 꽤 좋았는데.. 로고가 깨져서 그랬지:

이게 가장 흥미로웠다고 생각했는데, 실제로는 로고 애니메이션으로 잘 안 먹혔어 (그리고 아무 이유 없이 SVG 대신 소리가 있는 비디오로 렌더링되었지):

---

주제를 벗어난 이야기 해서 죄송해 팔코의 작업을 감상하고 스플래시 스크린에 대해 이야기하는 것으로 돌아가자!

[Falco]

@Bas

나보다 훨씬 더 좋은 결과를 얻고 있네요.

몇 번의 반복 후에 포기하는 중

아쉬운 점은 디스코스(Discourse) 로고 제약이 너무 엄격할 수 있다는 겁니다.

다음처럼 시도해 보았어요.

토론 포럼에서 로딩 애니메이션으로 사용될 애니메이션 SVG를 생성하세요. 포럼이 디스코스(Discourse)에서 구동되므로, 무지개색 말풍선 같은 디스코스의 모티프를 SVG에 활용할 수 있습니다. 애니메이션은 SVG 인라인 CSS를 사용하여 구현해야 합니다.

그 결과

[Falco]

애니메이션 디스커스 스플래시 콘테스트를 열어보는 건 어떨까요!

[Canapin (Coin-coin le Canapin)]

@Bas

저보다 훨씬 더 좋은 결과를 얻고 계시네요.

Gemini 설정을 “pro” 모드로 변경해 보셨나요? 기본값으로 설정되어 있지 않을 수 있습니다.

[keegan (Keegan George)]

@Falco

애니메이션 디스코urs 스플래시 콘테스트를 해야 합니다!

새로운 브랜딩 스타일에 맞춰 하나 만들어 보았습니다

[noahl (Noah Lovell)]

@Falco

애니메이션 디스코urs 스플래시 콘테스트를 열어봐야겠어요!

음… 이 트렌드에 저도 동참하게 생겼네요

프롬프트

이것을 애니메이션 SVG로 변환해 주세요.

규칙:

• 반드시 애니메이션 SVG여야 합니다.
• 페이지 간 로딩 아이콘으로 사용될 예정이므로, 절제되고 미니멀해야 합니다.

아이디어:

• 전체적인 형태를 왜곡 없이 유지하고 싶습니다.
• 내부의 3가지 도형으로 무언가를 할 수 있을 것 같습니다 - 테이블 테니스 라켓을 손잡이로 잡고 돌릴 때 생기는 것과 유사한 종류의 회전 효과요.

브랜드 아이덴티티를 반드시 유지해야 하며, 전체적인 디자인을 깨뜨리면 안 됩니다 - 이는 브랜드에 있어 필수적입니다.

출력 결과 (3차 수정 후):