Isometric Technology

노트북, 데스크톱, 스마트폰, 태블릿, 키보드, 마우스, USB 메모리, 하드디스크, 서버, 클라우드, 반도체 칩, 로봇, 와이파이, 블루투스, 배터리, 플러그를 쓸 수 있어요. 사용자 기기와 백엔드 부품을 같은 깊이로 그려서 스마트폰, 클라우드, 서버를 이은 도식이 하나의 시스템으로 읽혀요.

기기 모형은 투명 PNG와 무손실 WebP 두 형식이에요.

이런 곳에 잘 어울려요

• 개발자 문서 사이트의 네트워크 구성도 일러스트
• 하드웨어 카탈로그의 제품 라인업 비교
• 기기 동기화를 보여 주는 클라우드 서비스 소개 페이지
• 인터넷 작동 원리를 다루는 기술 워크숍 슬라이드

이미지 한 장 + 공용 CSS로 연동

128px 표시 크기의 WebP 스프라이트, 공용 애니메이션, React 컴포넌트, 원본 파일을 함께 제공합니다. 스프라이트를 쓰면 컬렉션 전체가 이미지 요청 한 번으로 표시됩니다. 원본 해상도가 필요한 곳은 개별 WebP를 사용하세요.

<link rel="stylesheet" href="./assets.css">
<span class="cc-asset cc-laptop-isometric-technology cc-float" role="img" aria-label="노트북"></span>

cc-float · cc-pulse · cc-pop · cc-swing · cc-spin. 모션 줄이기 설정을 존중하며 외부 애니메이션 라이브러리가 필요하지 않습니다.