2026 하반기에 상을 받았거나 새로 발표된 화면과 디자인 시스템입니다. 그 전에 나왔지만 지금도 기준으로 보는 항목은 카드의 날짜로 구분해 함께 실었습니다. 사이트 화면을 옮겨 싣지 않고, 무엇을 보면 되는지를 이 페이지가 새로 만든 견본으로 보여 드립니다.
드론 LiDAR 스캔 자료를 브라우저에서 실시간 3D 점구름으로 그립니다. 스크롤하면 스캔·전송·접기 장면이 차례로 넘어갑니다.
AI에게 전할 프롬프트
드론으로 찍은 지형을 많은 점으로 그린 3D 장면을 만들어 주세요. 처음에는 점이 흩어져 있다가 스크롤하면 모여 지형이 되고, 다음 단계에서 지형이 천천히 돌아갑니다. 움직임 줄이기 설정에서는 다 모인 지형만 보여 주세요.
석고 부조로 새긴 인물 벽에서 한 사람을 골라 생애를 읽는 한 페이지 사이트입니다. 제목부터 대화창까지 모든 요소를 부조 질감 하나로 맞췄습니다.
AI에게 전할 프롬프트
화면 전체를 석고에 새긴 듯한 부조 질감으로 통일해 주세요. 제목·카드·입력창까지 같은 질감을 쓰고, 빛은 왼쪽 위에서 비춥니다. 글자와 바탕의 명암비는 4.5:1 이상으로 맞춰 주세요.
눌러서 빛을 번지게 합니다(예시)
AI가 밤마다 새 세계의 그림과 소리를 꿈꾼다는 설정의 예술 작품 사이트입니다. 화면을 누르고 있는 동안 눈을 감는 조작을 씁니다.
AI에게 전할 프롬프트
화면을 누르고 있는 동안 가운데서 빛이 천천히 번지고, 손을 떼면 되돌아가게 해 주세요. 누르는 동안 진행 정도를 글로도 알려 주고, 키보드 스페이스 키로도 같은 조작을 하게 해 주세요.
F1 선수의 공식 사이트입니다. 형광 연두와 검정에 가까운 두 색만 쓰고 3D·몸짓 조작을 더했습니다. 점검일에 Awwwards 올해의 사이트 목록에 오른 마지막 연도의 수상작이라 하반기에도 기준으로 봅니다.
AI에게 전할 프롬프트
형광 연두와 검정에 가까운 두 색만으로 화면을 칠해 주세요. 굵은 제목이 옆에서 미끄러져 들어오게 하고, 연두 바탕 위 글자는 검정으로 써서 명암비 4.5:1 이상을 맞춰 주세요.
반투명 유리 재질을 유지하되 굴절을 고르게 하고 대비를 높여 읽기 쉽게 고쳤습니다. 설정에서 아주 투명한 상태부터 완전히 착색한 상태까지 사용자가 고르게 했습니다.
AI에게 전할 프롬프트
유리 질감 패널에 투명도 조절 막대를 붙여 주세요. 아주 투명한 상태부터 완전히 착색한 상태까지 고르게 하고, 어느 상태에서도 패널 위 글자의 명암비가 4.5:1 이상이 되게 해 주세요.
휴대폰·데스크톱·XR 기기를 한 틀로 맞추는 레이아웃 뼈대와 8dp 간격 체계를 내놓았습니다. 색과 모양이 뚜렷한 목록·메뉴를 더했습니다.
AI에게 전할 프롬프트
간격을 8의 배수로만 쓰는 화면을 만들어 주세요. 목록 항목을 고르면 모양이 둥근 사각형에서 알약 모양으로 바뀌고, 휴대폰 폭과 넓은 화면에서 같은 뼈대를 쓰게 해 주세요.
공공 서비스용 디자인 시스템이 최근 바꾼 것을 모았습니다. 판과 날짜는 항목마다 적었고, KRDS 는 점검일까지 새 판이 없어 2026년 1월 판을 기준점으로 실었습니다. 크게 확대해서 보는 사용자, 흐름을 멈추고 알리는 화면, 문서 전체를 Markdown 으로 내려받는 방식처럼 공공 화면에 바로 닿는 변경이 많습니다.
흐름을 잠시 멈추고 중요한 내용을 알리는 중단 패널, 어두운 바탕에 쓰는 반전 글자색, 의견 받기·언어 전환 시험 부품을 더했습니다.
아코디언 펼침 아이콘을 왼쪽에 둘 수 있게 해 크게 확대한 사용자도 찾기 쉽게 했고, 경로 표시가 기본으로 줄바꿈되며, 범위 슬라이더 위에 안내 문구를 더했습니다.
부품마다 사용법 페이지를 붙였고, 사이트 문서 전체와 접근성 지침을 Markdown 묶음으로 내려받게 했습니다.
음성 지원 부품과 표 형태의 구조화 목록을 더했습니다. 점검일까지 하반기 새 릴리스와 공지는 없습니다.
AI에게 전할 프롬프트
우리 화면의 아코디언 펼침 아이콘을 왼쪽에 두고, 경로 표시가 좁은 화면에서 줄바꿈되게 해 주세요. 범위 슬라이더 위에는 조작 방법을 글로 보여 주세요.
DESIGN.md
---
colors:
accent: "#ff6a2a"
rounded:
md: 8px
typography:
body:
fontFamily: Pretendard
---디자인 규칙을 파일로 적어 AI에게 넘기고, 디자인과 코드를 한 화면에서 함께 다루는 기능이 여러 도구에 나타났습니다.
색·글꼴·간격 같은 디자인 규칙과 그 쓰임새를 Markdown 파일 하나에 적어 AI 에이전트가 읽게 하는 형식을 공개했습니다.
디자인 레이어를 실제 코드 레이어로 바꿔 여러 안을 나란히 시험하게 했습니다. 6월에는 캔버스 안에서 움직임을 만드는 기능을 냈습니다.
대화로 디자인을 만들고, 6월부터 디자인 시스템을 넣어 결과를 그 규칙에 맞추게 했습니다. 10월에는 글과 차트를 움직이는 기능을 베타로 열었습니다.
사람과 AI 에이전트가 같은 코드 위에서 일하고, 역할별 작업 화면과 승인 기록을 두었습니다.
캔버스 안에 HTML 을 그리는 API 와, 사이트가 기능을 브라우저 에이전트에 알리는 WebMCP 를 시험(origin trial)에 내놓았습니다. 요소 단위 화면 전환은 Chrome 147 에서 쓸 수 있다고 적었습니다.
AI에게 전할 프롬프트
이 저장소의 DESIGN.md 를 먼저 읽고, 거기 적힌 색·글꼴·간격만 써서 화면을 만들어 주세요. 파일에 없는 값이 필요하면 만들기 전에 먼저 알려 주세요.
설문과 측정으로 지금의 웹 화면을 정리한 보고서입니다. 'AI가 만든 화면은 보라색'이라는 인상이 실제 CSS 에서는 어땠는지도 여기서 볼 수 있습니다.
결과 개요의 첫 절 제목이 'The Year of Anchor Positioning'입니다. 다른 분야와 달리 CSS 는 아직 손으로 쓰는 비중이 크다고 정리했습니다.
AI를 혼자 쓰던 방식에서 팀이 캔버스에서 함께 쓰는 방식으로 옮겨 가고 있고, 무엇을 만들지 정하는 일은 사람 몫이라고 정리했습니다.
AI가 만든 화면의 표지로 흔히 말하는 보라색 그라디언트를 실제 CSS 에서 세어 봤고, Tailwind 사이트 안에서는 눈에 띄게 늘지 않았다고 적었습니다.
AI에게 전할 프롬프트
보라색·남색 그라디언트를 기본값으로 쓰지 말고, 이 기관의 주 색 하나와 무채색으로 화면을 칠해 주세요. 강조색은 한 곳에만 써 주세요.
화면을 찾고, 규칙을 정하고, 부품과 움직임을 가져오는 사이트 25곳입니다. 견본은 각 사이트의 원리를 이 페이지가 새로 그린 것이고, 원문과 코드는 각 사이트에 있습니다.
스크롤에 따라 움직이는 웹사이트 템플릿과, AI 코딩 도구에 붙여 넣을 프롬프트를 파는 모음입니다.
이렇게 씁니다교육 과정 소개나 안전 캠페인 페이지처럼 이야기 순서가 있는 화면을 스크롤 장면으로 나눌 때 참고합니다.
이 견본의 웹 기술 animation-timeline: view()일부 브라우저
일부 템플릿만 무료로 열려 있고, 결제 뒤에는 환불이 없습니다.
AI에게 전할 프롬프트
스크롤하면 물결 모양 띠 여러 겹이 서로 다른 속도로 아래에서 밀려오고, 제목 글자 안이 아래부터 차오르게 해 주세요. 스크롤 연동을 지원하지 않는 브라우저에서는 장면이 화면에 들어올 때 한 번만 바뀌게 하고, 움직임 줄이기 설정에서는 다 찬 제목만 보여 주세요.
장식이 적은 웹사이트와 포트폴리오를 골라 화면 캡처로 보여 주는 갤러리입니다.
이렇게 씁니다정보가 많은 업무 화면에서 덜어 낼 것을 정할 때, 여백과 글자 크기만으로 위계를 만든 예를 찾는 데 씁니다.
열람에 로그인이 필요하지 않았습니다(관측). 소개된 템플릿은 외부 판매처의 상품입니다.
AI에게 전할 프롬프트
검은 바탕에 카드 격자를 놓고, 카드에는 장면 하나와 이름, 흐린 날짜만 붙여 주세요. 위쪽 분류 칩을 고르면 해당 카드만 또렷하게 남고 나머지는 흐려지게 해 주세요. 흐려진 카드의 글자도 명암비 4.5:1 이상으로 읽히게 해 주세요.
웹사이트·앱 화면·영상 같은 디자인 작업을 골라 올리는 피드입니다. Godly 를 대신하는 곳이라고 스스로 밝히고, godly.website 주소도 이곳으로 연결됩니다.
이렇게 씁니다새 안내 페이지나 행사 페이지의 분위기 후보를 여러 개 모아 견줄 때 씁니다.
열람에 로그인이 필요하지 않았습니다(관측).
AI에게 전할 프롬프트
높이가 다른 카드를 세로 열로 엇갈려 쌓은 벽을 만들어 주세요. 카드 아래 작은 점을 누르면 카드 안 장면이 옆으로 넘어가고, 키보드 화살표로도 넘기게 해 주세요.
이번 주 점검 대상과 결과를 한 화면에서 봅니다.
자세히 보기## Colors background: #0e1420 surface: #16202e text: #e8eef6 accent: #ff7a3d ## Typography font: Pretendard ## Shapes rounded: 14px ## Layout gap: 16px
제품 웹사이트의 색·서체·간격·부품을 정리해 AI가 읽는 DESIGN.md 글로 내보내는 곳입니다(베타).
이렇게 씁니다마음에 드는 화면의 색·서체·간격을 규칙 파일로 옮긴 예를 보고, 우리 기관 화면의 규칙 파일을 쓸 때 참고합니다.
무료로 보는 범위는 일부이고, MCP 연결은 유료 플랜에서만 됩니다.
AI에게 전할 프롬프트
같은 카드 하나를 두고, 분위기 문구를 고르면 카드의 색·서체·간격이 그 문구에 맞게 바뀌게 해 주세요. 옆에는 지금 값을 DESIGN.md 형식의 글로 보여 주고, 바뀐 줄을 표시해 주세요.
여러 디자인 시스템이 같은 부품을 어떻게 만들고 부르는지 사례를 모은 사전입니다. GOV.UK·USWDS 같은 공공 디자인 시스템도 들어 있습니다.
이렇게 씁니다AI에게 부품을 부탁하기 전에 정확한 부품 이름을 확인하는 데 씁니다. 같은 부품을 시스템마다 다르게 부르기 때문입니다.
가격 표기가 없고, 로그인 없이 열람했습니다(관측).
AI에게 전할 프롬프트
가는 선 모눈 위에 토글·탭·말풍선 부품을 선으로 그려 주세요. 부품을 누르면 같은 부품을 부르는 다른 이름들이 꼬리표로 펼쳐지고, 다시 누르면 접히게 해 주세요.
실제로 출시된 앱·웹 화면과 가입·결제 같은 사용 흐름을 검색하는 디자인 참고 자료실입니다.
이렇게 씁니다민원 신청과 접수 확인처럼 여러 화면이 이어지는 업무를 설계할 때, 단계를 어떻게 나누는지 보는 데 씁니다.
이 견본의 웹 기술 document.startViewTransition()최근 지원
사용 흐름(Flows) 보기는 무료 플랜에 들어 있지 않습니다.
AI에게 전할 프롬프트
가상 앱 화면 여러 장을 화살표로 이은 흐름 띠를 만들어 주세요. 단계 칩을 고르면 그 화면이 앞으로 나오고 나머지는 뒤로 물러나게 해 주세요.
DESIGN.md
---
colors:
accent: "#ff6a2a"
rounded:
md: 8px
typography:
body:
fontFamily: Pretendard
---사람들이 올린 DESIGN.md 파일을 찾아 내려받는 곳입니다. 파일을 저장소 맨 위 폴더에 두어 AI 코딩 도구가 읽게 합니다.
이렇게 씁니다우리 화면의 규칙 파일을 처음 쓸 때, 다른 사람이 색·서체·간격을 어떻게 적었는지 견주는 데 씁니다.
MCP 로 내려받을 때는 무료 API 키가, 올리기에는 GitHub 계정이 필요합니다.
AI에게 전할 프롬프트
왼쪽에 색·모서리·서체 값을 적은 규칙 글을 두고, 값을 고치면 오른쪽 작은 화면이 바로 다시 칠해지게 해 주세요. 바뀐 요소에는 선택 테두리를 잠깐 보여 주세요.
첫 화면·가격표·로그인·대시보드 같은 페이지 구역별로 AI 프롬프트와 Tailwind 코드를 모은 곳입니다.
이렇게 씁니다점검 현황판이나 신청 화면을 부탁할 때 머리글·통계 띠·표 같은 구역 이름을 정확히 적는 데 씁니다.
가격 표기가 없고, 로그인 없이 코드를 열람했습니다(관측).
AI에게 전할 프롬프트
빈 틀 하나를 두고, 프롬프트 문장이 한 줄씩 찍힐 때마다 그 문장이 말한 블록(머리글·두 칸·단추)이 선 그림으로 차례로 놓이게 해 주세요. 움직임 줄이기 설정에서는 다 놓인 모습만 보여 주세요.
디자인 엔지니어들이 올린 React·Tailwind 부품과 템플릿을 모은 장터입니다. 부품마다 AI 에이전트용 프롬프트와 설치 명령이 붙어 있습니다.
이렇게 씁니다React 로 업무 도구를 만들 때, AI 코딩 도구에 부품을 요청하는 문장과 설치 명령을 함께 보는 데 씁니다.
무료 계정은 하루에 복사하는 부품 수에 한도가 있고, 결제는 환불되지 않습니다.
AI에게 전할 프롬프트
어두운 앱 틀 안에 부품 카드 선반을 두고, 카드의 '프롬프트 복사'를 누르면 옆 터미널 창에 요청 문장과 설치 명령이 한 줄씩 찍히게 해 주세요.
무게가 느껴지는 스프링 움직임 예제를 CSS·React 코드와 AI 프롬프트로 보여 주는 모음입니다.
이렇게 씁니다점검 결과 저장·전송처럼 결과를 알려야 하는 단추의 반응을 정할 때 씁니다.
이 견본의 웹 기술 linear()널리 지원
가격 표기가 없고, 로그인 없이 복사했습니다(관측). 유료판은 대기자 명단 단계입니다.
AI에게 전할 프롬프트
단추를 누르면 빠르게 눌리고 튕기며 돌아오는 스프링 움직임을 넣어 주세요. 강성과 감쇠 값을 변수로 두고, 움직임 줄이기 설정에서는 튕김 없이 바로 바뀌게 해 주세요.
부품 코드를 내 프로젝트에 복사해 넣고 고쳐 쓰는 방식의 부품 모음입니다. 스스로 완성된 라이브러리가 아니라 라이브러리를 만드는 방법이라고 소개합니다.
이렇게 씁니다업무 도구 여러 화면의 색·모서리·밝음과 어둠을 변수 몇 개로 한꺼번에 맞추는 구조를 볼 때 씁니다.
AI에게 전할 프롬프트
무채색 변수 몇 개만 쓴 부품 카드 묶음(토글·슬라이더·막대 그래프)을 만들어 주세요. 밝음·어둠 전환과 모서리 둥글기 조절을 바꾸면 모든 카드가 한꺼번에 따라 바뀌게 해 주세요.
랜딩 페이지에 쓰는 움직이는 React 부품·블록·템플릿 모음입니다. 무료 부품과 유료 판이 함께 있습니다.
이렇게 씁니다교육 행사나 캠페인 페이지 첫 화면에 빛·입자 연출을 넣을 때 효과 이름을 찾는 데 씁니다.
이 견본의 웹 기술 @property최근 지원
유료 판은 한 번 결제하는 방식입니다.
AI에게 전할 프롬프트
어두운 바탕 위에서 원뿔 모양 빛이 위에서부터 열리며 제목이 떠오르는 첫 화면을 만들어 주세요. 가는 빛줄기 몇 가닥이 사선으로 지나가게 하고, 연출은 한 번만 재생해 주세요.
랜딩 페이지에 쓰는 움직이는 부품과 효과를 오픈 소스로 내놓은 모음입니다. 유료 Pro 판이 따로 있습니다.
이렇게 씁니다안내 페이지에 움직임을 조금 더할 때, 궤도·테두리 빛·흐르는 띠 같은 효과의 이름을 찾는 데 씁니다.
이 견본의 웹 기술 offset-path널리 지원
AI에게 전할 프롬프트
가운데 원을 둘러싼 크기가 다른 궤도 위로 작은 점들이 서로 다른 속도로 돌게 해 주세요. 카드 테두리를 따라 짧은 빛줄기 하나가 한 바퀴 돌게 하고, 움직임 줄이기 설정에서는 멈춘 모습만 보여 주세요.
압력계 바늘·안전핀·호스를 차례로 봅니다(예시).
React 화면에 쓰는 움직임 부품을 오픈 소스로 모은 키트입니다(베타).
이렇게 씁니다점검 대상 목록에서 상세로 넘어가는 화면처럼, 카드가 상세 창으로 커지는 전환을 요청할 때 씁니다.
이 견본의 웹 기술 document.startViewTransition()최근 지원
유료 Pro 판의 가격은 확인하지 못했습니다.
AI에게 전할 프롬프트
작은 카드를 누르면 같은 카드가 제자리에서 커지며 상세 창으로 바뀌게 해 주세요. 닫으면 원래 자리로 돌아가고, 키보드 초점도 그 카드로 돌아오게 해 주세요.
사람들이 만든 단추·입력창·로딩 표시 같은 UI 요소를 HTML/CSS·Tailwind·React·Figma 형식으로 복사해 가는 곳입니다.
이렇게 씁니다스크립트를 쓰기 어려운 화면에서 CSS 만으로 만든 단추·로딩 표시를 찾고, 마우스 올림·초점·누름 상태를 모두 갖췄는지 견줄 때 씁니다.
가격 표기는 확인하지 못했습니다. 공식 저장소 설명은 'free to use' 입니다.
AI에게 전할 프롬프트
CSS 만으로 단추·토글·로딩 표시를 하나씩 만들어 주세요. 요소마다 마우스 올림·키보드 초점·누름 상태를 따로 보여 주고, 스크립트는 쓰지 말아 주세요.
shadcn/ui 에 맞춘 첫 화면·가격표·대시보드 같은 완성 구역(블록) 모음입니다. 유료 블록이 중심이고 일부는 무료입니다.
이렇게 씁니다안내 페이지를 첫 화면·기능·문의 같은 구역으로 쌓아 설계할 때, 구역마다 어떤 변형이 있는지 견주는 데 씁니다.
유료 판은 한 번 결제하는 방식입니다.
AI에게 전할 프롬프트
페이지 하나를 머리글·기능·가격·바닥 구역으로 쌓아 주세요. 구역 하나를 고르면 같은 자리에 다른 변형이 미끄러져 들어오게 해 주세요.
표지·경로·팝업 같은 지도 부품을 React 앱에 넣는 오픈 소스 모음입니다. MapLibre GL 위에서 돌아갑니다.
이렇게 씁니다관할 구역·출동 경로처럼 위치를 보여 주는 화면을 React 로 만들 때 씁니다.
AI에게 전할 프롬프트
지도 위에 출발점과 도착점 표지를 두고 그 사이 경로선이 그려지게 해 주세요. 도착 표지를 누르면 작은 안내 창이 열리고, Esc 키로 닫히게 해 주세요.
날마다 웹사이트를 골라 상을 주고 수상작을 모아 보여 주는 곳입니다. 수상작 카드는 각 사이트로 이어집니다.
이렇게 씁니다지금 웹 화면이 쓰는 연출을 날짜별로 따라가며, 이 페이지의 하반기 사례처럼 볼 것을 골라 둘 때 씁니다.
열람은 로그인 없이 했고(관측), 회원·사이트 제출·강좌는 유료입니다.
AI에게 전할 프롬프트
넓은 무대 가운데에 아주 큰 낱말 하나와 날짜 칩을 놓고, 화면 아래에 떠 있는 메뉴 칸을 두어 주세요. 메뉴 칸에 마우스를 올리거나 키보드 초점이 가면 그 칸이 넓어지게 해 주세요.
Apple 식 유리 굴절 효과를 웹 화면에 입히는 React 부품의 데모와 문서입니다.
이렇게 씁니다교육 자료 표지나 발표 첫 화면처럼 글이 적은 곳에 한 번 씁니다. 유리 위 글자의 대비는 따로 확인합니다.
이 견본의 웹 기술 feDisplacementMap널리 지원
AI에게 전할 프롬프트
배경 위를 지나가는 둥근 유리 렌즈를 만들어 주세요. 렌즈 안쪽은 배경이 볼록하게 휘어 보이고, 가장자리에 가는 빛 반사가 있습니다. 렌즈 아래 글자도 명암비 4.5:1 이상으로 읽히게 해 주세요.
넘김판·네온·물 채움처럼 잘 쓰이지 않는 글자 효과를 CSS 만으로 모은 곳입니다. 효과마다 AI 에이전트용 프롬프트를 복사해 갑니다.
이렇게 씁니다행사 페이지 제목이나 119 같은 짧은 숫자를 강조할 때 씁니다. 한글로 바꿔도 깨지지 않는지 함께 봅니다.
AI에게 전할 프롬프트
숫자 '119'에 넘김판처럼 한 칸씩 뒤집히는 글자 효과를 넣어 주세요. CSS 만 쓰고, 움직임 줄이기 설정에서는 마지막 글자만 보여 주세요.
원 안에 가는 선을 잘라 넣고 그 사이로 빛이 지나가게 만든 원형 로딩 표시 모음입니다. 한 파일짜리 SVG 로 복사해 갑니다.
이렇게 씁니다AI가 답을 만드는 동안이나 자료를 불러오는 동안 보여 줄 대기 표시를 고를 때 씁니다.
AI에게 전할 프롬프트
원 안에 가는 동심 호를 여러 겹 두고, 밝은 부채꼴 하나가 천천히 쓸고 지나가는 로딩 표시를 SVG 하나로 만들어 주세요. 속도는 CSS 변수 하나로 바꾸고, 움직임 줄이기 설정에서는 멈춘 원만 보여 주세요.
.btn{background:linear-gradient(90deg,#b93a0b,#8f1d6b var(--g),#3a2fb0);transition:--g .5s}
.btn:hover{--g:80%}
@property --g{syntax:"<percentage>";inherits:false;initial-value:30%}그라디언트를 입힌 CSS 단추 모음입니다. 단추를 누르면 CSS 가 복사됩니다.
이렇게 씁니다신청·제출 같은 주 단추에 색 흐름을 넣을 때 두 색의 조합과 흐르는 방향을 고르는 데 씁니다.
이 견본의 웹 기술 @property최근 지원
가격 표기가 없고, 로그인 없이 복사했습니다(관측).
AI에게 전할 프롬프트
두 색으로 만든 단추에 마우스를 올리면 그라디언트가 옆으로 흐르게 해 주세요. 단추 글자와 바탕의 명암비는 밝은 쪽 끝에서도 4.5:1 이상으로 맞춰 주세요.
화면의 화소마다 색을 식으로 계산하는 셰이더를 만들어 공유하는 곳입니다. 미리보기는 WebGL 로 바로 그려집니다.
이렇게 씁니다안전 캠페인 영상이나 행사 화면의 배경 효과가 어떤 식에서 나오는지 볼 때 씁니다.
AI에게 전할 프롬프트
낮은 해상도 캔버스의 모든 화소를, 위치와 시간을 받아 색을 돌려주는 함수 하나로 칠해 주세요. 화면 밖에 있거나 움직임 줄이기 설정이면 멈추고, 함수 식은 옆에 글로 보여 주세요.
Blender 로 만든 입체 아이콘 렌더 모음입니다. 색과 각도를 바꿔 내려받는 편집기가 함께 있습니다.
이렇게 씁니다교육 자료나 안내 화면에 입체 아이콘을 쓸 때 질감과 빛 방향을 맞추는 데 씁니다.
아이콘 모음은 무료이고 편집기 Pro 는 유료입니다.
AI에게 전할 프롬프트
CSS 그라디언트(방사형 반사광과 안쪽 그림자)만으로 광택 있는 입체 아이콘 하나를 만들어 주세요. 포인터 위치에 따라 살짝 기울고, 색 견본을 누르면 색이 바뀌게 해 주세요.
CSS·SVG·화면 요소를 움직이는 자바스크립트 애니메이션 엔진입니다. 시간 지연을 퍼뜨리는 기능과 SVG 선 그리기 기능이 있습니다.
이렇게 씁니다현황판 숫자나 목록이 차례로 나타나는 연출을 요청할 때 지연 퍼뜨리기(stagger) 같은 이름을 확인하는 데 씁니다.
AI에게 전할 프롬프트
점 격자에서 한 점을 누르면 그 점부터 바깥으로 시간 지연이 퍼지며 점들이 커졌다가 작아지게 해 주세요. 키보드로도 점을 고르게 하고, 움직임 줄이기 설정에서는 고른 점만 표시해 주세요.