정말 파충류 같네요!
한 개를 반시계 방향으로 약 60도, y축 기준으로 180도 회전시키면 부활한 것의 눈이 됩니다
y축 기준으로 회전시킨 거울상을 추가하여 두 개의 이미지(눈)를 만듭니다
디스코스로 가자, 공룡아
네, 머릿속에서 이 생각이 떠나질 않네요. 그리고 분명히 좀 더 밖으로 나가야 할 것 같습니다
2개의 좋아요
여기서 단륜차 로더를 하나 올려봤어요! https://unicyclist.com
멋지죠!
원래 애니메이션은 제가 CSS만으로 만들었고, Gemini에게 이를(일종의) SVG로 "변환"해 달라고 요청했습니다.
10개의 좋아요
https://unicyclist.com 의 로딩 화면에서 로딩 바가 배경을 넘어가는 것처럼 보입니다.
1개의 좋아요
감사합니다. 한 사용자가 이 문제를 보고했습니다. 업로드된 게시글에서는 이미지가 이상하게 보이는 SVG의 특이한 문제(?)가 있었지만, 로딩 화면에서는 그렇지 않았습니다.
예를 들어, 이 이전 버전은:
여기서는 완전히 깨져 보입니다. 클릭해도 마찬가지입니다(더블 로딩 바가 표시됩니다…).
하지만 스플래시 화면으로 사용할 때는 정상적으로 보입니다.
저는 무작정 Gemini에게 이를 “수정해 달라고” 요청했는데, 그 결과 제가 게시한 SVG가 만들어졌고 겉보기에는 괜찮아 보였습니다. 그러나 분명히 일부 사용자는 진행 표시줄과 관련하여 문제를 겪고 있습니다. 아마도 이것이 여러분이 보고 계신 문제일 것입니다:
저는 Windows의 Chrome/Firefox 또는 Android의 Chrome에서는 문제가 없습니다.
Discourse와 이러한 오류 사이에 어떤 관련이 있는지 모르겠습니다.
그래서 주제에 부합하도록, CSS가 아닌 애니메이션의 경우, 스플래시 화면에 애니메이션 SVG를 사용하고자 할 때 주의해야 할 사항이 있는지 궁금합니다.
2개의 좋아요
저는 SVG에서 clipPath를 사용하여 요소가 넘치지 않도록 합니다.
아래와 같이 Gemini에게 지시하는 것이 효과적일 수 있습니다:
이 SVG의 로딩 바가 배경을 벗어나고 있습니다. clipPath를 사용하여 배경 범위 내에 있도록 수정해 주세요.
4개의 좋아요
관련된 초안 구현을 별도로 열었지만, 더 넓은 개념은 단순히 이 기능의 후속 작업일 수 있습니다:
현재 var(--primary), var(--secondary), var(--tertiary)를 사용하는 단일 SVG 방식은 여전히 대부분의 사이트, 특히 동일한 SVG가 색상만 적응하면 되는 경우에서 깔끔하고 간단한 방법입니다.
제가 탐구하던 사용 사례는 단순히 동일한 SVG의 색상을 변경하는 것이 아니라, 다크 모드 스플래시 화면에 실제로 다른 자산이나 광학적 처리가 필요한 경계 사례입니다. 예를 들어, 로그인된 다크 헤더는 하나의 투명한 로고/배경 처리가 가장 잘 작동할 수 있는 반면, 익명 로그인/스플래시 화면은 더 나은 대비를 위해 약간 다른 술탐색 배경이나 조정된 SVG가 필요할 수 있습니다.
따라서 이 아이디어는 현재 변수 기반 방식을 대체하는 것이 아니라, 다크 스플래시 아트워크가 라이트/기본 스플래시 아트워크와 실제로 달라야 하는 사이트에 대한 탈출구를 제공하는 것입니다.
이것이 별도의 splash_screen_image_dark 설정으로 포함되는 것이 적절한지, 아니면 기존 단일 SVG + 색상 변수 방식이 유일한 지원 경로로 남아야 하는지에 대한 피드백을 환영합니다.
1개의 좋아요
처음에는 스플래시 화면에 애니메이션 SVG를 사용하려고 했습니다. 데스크톱에서는 잘 작동했지만, 모바일에서는 복잡한 경로나 SVG 내부 요소를 직접 애니메이션 처리하면 지연이 발생하거나 애니메이션이 멈추는 문제를 발견했습니다.
매끄러운 경험을 보장하기 위해, SVG를 감싸는 표준 HTML 컨테이너(div)로 애니메이션 로직을 옮겼습니다. CSS 애니메이션(transform, scale, opacity)을 SVG가 아닌 div 래퍼에 적용함으로써, 모바일 브라우저가 지연 없이 하드웨어 가속을 훨씬 더 효율적으로 활용할 수 있게 되었습니다.
5개의 좋아요
해당 함수를 애니메이션 WebP 형식으로 확장할 수 있는지, 아니면 CSS 변환에 엄격하게 종속되어 있는지 궁금합니다.
GIF 파일은 용량이 크지만, WebP는 요즘 손실 없는(무손실) 표준 형식으로 널리 사용되고 있습니다. 200x200px 크기의 15FPS 애니메이션을 5초 길이로 만들면 50/100kb 수준으로 압축됩니다. 루프를 2~3초로 줄이면 용량을 더 이상으로 줄일 수도 있습니다.
다크/라이트 모드 변형을 지원할 수 있을까요?
1개의 좋아요
SVG를 변경할 때마다 업로드 중 UI에서 오류가 보고되지만, 실제로는 파일이 존재하며 정상적으로 작동합니다.
2개의 좋아요
아까 제가 좀 멍청하게 굴어서 스스로 답글을 달았네요. SVG에서 Discourse의 색상 스킴 CSS 변수를 참조하기만 하면, 라이트/다크 모드에 필요한 애니메이션이 자동으로 렌더링됩니다.
5개의 좋아요
크기에 대한 언급이 있었던 것 같아요. 스플래시 애니메이션을 좀 더 큰 버전으로 지원할 계획이 있나요?
애니메이션 주변의 빈 공간을 잘라내서, 더 큰 이미지의 인상을 줄 수 있기를 바랍니다.