로고 로더 — 디자인 아틀라스

<div class="wrap" role="status" aria-live="polite" aria-label="Atloop 불러오는 중"> <svg class="lg" viewBox="0 0 100 100"><path class="lg-fill" d="M50 12 L84 70 L16 70 Z" /><path class="lg-line" d="M50 12 L84 70 L16 70 Z" /></svg> <span class="cap">stroke-dashoffset 드로잉 + fill 페이드</span> </div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:16px} .lg{width:clamp(40px,13vmin,72px);height:clamp(40px,13vmin,72px)} .lg-fill{fill:var(--accent);opacity:0;animation:lgfill 3s ease-in-out infinite} .lg-line{fill:none;stroke:var(--accent-2);stroke-width:5;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220;animation:lgline 3s ease-in-out infinite} @keyframes lgline{0%{stroke-dashoffset:220}45%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:220}} @keyframes lgfill{0%,45%{opacity:0}60%,85%{opacity:1}100%{opacity:0}} .cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

기다리는 동안 아무 의미 없는 도형 대신 브랜드 마크를 보여줘서, 비확정적 대기 시간을 브랜드 노출 시간으로 함께 쓰는 방식입니다. 로그인 직후나 앱 스플래시처럼 브랜드가 처음 각인되는 자리에 어울리고, 일반적인 버튼 로딩처럼 자주 반복되는 자리에 쓰면 금방 지루해지므로 링 스피너 같은 무난한 형태가 낫습니다. 실존하는 로고를 그대로 베끼지 말고, 이 데모처럼 가상의 마크를 씁니다.

로고 윤곽을 SVG path로 그린 뒤 stroke-dasharray로 선 전체 길이를 지정하고, stroke-dashoffset을 그 길이만큼에서 0으로 줄이는 keyframe을 줘서 "선을 따라 그려지는" 효과를 만듭니다. 선이 다 그려진 직후 fill의 opacity를 0에서 1로 올려 면이 채워지게 하고, 잠시 멈췄다가 다시 dashoffset을 원래 길이로 되돌려 반복합니다.

브랜드 노출이 목적이라도 실제로는 비확정적 로더이므로, 진행률을 알 수 있는 작업에는 progress-ring처럼 확정적인 형태를 우선하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고, 로고 자체는 alt 텍스트 없는 순수 장식이 아니라 브랜드를 나타내므로 aria-hidden 대신 aria-label="회사명 불러오는 중" 같은 문구를 붙이는 걸 권합니다. prefers-reduced-motion에서는 드로잉 애니메이션 없이 완성된 로고를 정적으로 보여줍니다.