지난 10년간 서울의 기온변화를 대시보드로 만들어 아래의 효과를 최대한 활용 해 1. 인터랙션 및 애니메이션...

Prompt

지난 10년간 서울의 기온변화를 대시보드로 만들어 아래의 효과를 최대한 활용 해 1. 인터랙션 및 애니메이션 (Motion & Animation) 시각적인 생동감을 부여하고 사용자의 조작에 반응하게 만드는 용어입니다. Micro-interactions (마이크로 인터랙션): 버튼 클릭, 호버, 상태 변화 시 일어나는 미세하고 부드러운 애니메이션 효과 Hover Effects / Scale Effects (호버 효과 / 스케일 효과): 마우스를 올렸을 때 카드가 커지거나, 그림자가 깊어지거나, 빛이 나는 효과 Smooth Transitions / Seamless Morphing (트랜지션 / 모핑): 화면 전환이나 데이터 업데이트 시 요소들이 자연스럽게 변화하는 효과 Parallax Scrolling (패럴랙스 스크롤링): 배경과 전경 요소가 다른 속도로 스크롤되어 입체감을 주는 효과 Skeletal Loading Animation (스켈레톤 로딩): 데이터를 불러올 때 형태를 미리 보여주며 일렁이는 로딩 효과 Animated Counters (애니메이션 카운터): 숫자가 0부터 목표 수치까지 빠르게 올라가는 효과 2. 비주얼 스타일 및 UI 디자인 (Visual Style & Aesthetics) 대시보드의 트렌디하고 화려한 분위기를 연출하는 레이아웃 및 그래픽 용어입니다. Glassmorphism (글래스모피즘): 반투명 유리처럼 배경이 비치고 블러(Blur) 처리가 된 현대적인 스타일 Neumorphism (뉴모피즘): 소프트한 그림자와 입체감을 활용해 버튼이나 카드가 튀어나온 듯한 질감 연출 Cyberpunk / Neon Glow / Dark Mode Aesthetics: 네온 컬러 빛과 어두운 배경을 활용해 미래지향적이고 높은 대비를 주는 스타일 Bento Grid Layout (벤토 그리드 레이아웃): 애플 스타일처럼 크기가 다른 상자들을 조화롭게 배치하는 현대적 레이아웃 Gradient Overlays / Mesh Gradients (그라데이션 오버레이): 화려한 컬러 그라데이션을 그래프나 배경에 적용 3D Data Visualization (3D 데이터 시각화): 3D 입체 차트, 3D 지형도, 3D 파이 차트 등을 활용한 연출 3. 고급 시각화 컴포넌트 (Advanced Visual Components) 단순한 막대/꺾은선 차트 외에 시각적 임팩트를 주는 고급 차트 종류입니다. Sankey Diagram (샌키 다이어그램): 데이터의 흐름과 유입/유출 양을 선의 두께로 화려하게 표현하는 차트 Heatmap / Treemap (히트맵 / 트리맵): 색상의 짙고 옅음 또는 면적의 크기로 데이터 밀도를 한눈에 보여주는 시각화 Geospatial / Choropleth Map (지리 공간 지도 시각화): 지도 위에 3D 건물이 올라오거나, 광원 효과(Glowing Dot)로 데이터를 표시하는 지도 시각화 Gauge Charts / Radial Progress Bar (게이지 차트 / 방사형 프로그래스): 자동차 계기판 형태나 원형 테두리를 따라 채워지는 시각화 Radar / Spider Chart (레이더 / 스파이더 차트): 여러 다각도 지표를 거미줄 형태로 한눈에 비교하는 차트 Bubble / Scatter Plot with Pulse Animation (버블 차트 및 펄스 효과): 원의 크기로 데이터를 나타내며 퐁퐁 뛰는 효과 연출 4. 실시간 및 데이터 표현 (Dynamic Data Representation) 실제 데이터가 살아 움직이는 듯한 느낌을 주기 위한 용어입니다. Real-time Live Feed / Streaming Data (실시간 라이브 피드): 데이터가 끊임없이 움직이며 실시간 갱신되는 연출 Particle Effects (파티클 효과): 배경이나 데이터 연결선에 빛나는 입자들이 흐르는 효과 Dynamic Drill-down (동적 드릴다운): 특정 항목을 클릭하면 하위 데이터로 깊이 있게 파고드는 기능 Interactive Tooltips (인터랙티브 툴팁): 마우스를 대면 미니 차트나 상세 정보창이 떠오르는 효과 5. 스크롤 & 인터랙션 트리거 (Scroll & Trigger Effects) Scroll-triggered Animation (스크롤 트리거 애니메이션): 특정 스크롤 위치에 도달하면 요소가 나타나거나 움직이는 효과 (예: 페이드인, 슬라이드업) Sticky Scroll / Pin Section (스티키 스크롤): 특정 섹션이 화면에 고정된 채로 콘텐츠만 바뀌는 효과 (애플 제품 소개 페이지 스타일) Horizontal Scroll Storytelling (가로 스크롤 스토리텔링): 세로 스크롤을 가로 움직임으로 변환해 이야기를 전개하는 방식 Cursor-following Elements (커서 추적 효과): 마우스 커서를 따라다니는 도형이나 텍스트, 커스텀 커서 디자인 Magnetic Buttons (마그네틱 버튼): 마우스가 가까이 가면 버튼이 자석처럼 끌려오는 효과 Scroll-linked Progress Bar (스크롤 진행률 바): 페이지를 얼마나 읽었는지 상단/측면에 바로 표시 6. 레이아웃 & 구조 (Layout & Structure) Split Screen Layout (분할 화면 레이아웃): 화면을 좌우 또는 상하로 나눠 대비되는 콘텐츠를 배치 Card-based UI (카드 기반 UI): 정보를 카드 단위로 묶어 정리하는 방식 (지금 대시보드에도 많이 쓰임) Asymmetric Grid (비대칭 그리드): 일부러 정렬을 깨뜨려 개성 있게 배치하는 레이아웃 Full-bleed Layout (풀블리드 레이아웃): 이미지나 섹션이 화면 끝까지 꽉 차게 배치되는 방식 Sticky Navigation / Floating Header (스티키 내비게이션): 스크롤해도 상단 메뉴가 계속 따라오는 방식 7. 컬러 & 테마 (Color & Theming) Duotone / Monochrome Filter (듀오톤/모노톤 필터): 이미지를 두 가지 색상으로만 표현하는 감성적 스타일 Dynamic Theme Switching (다크/라이트 모드 전환): 사용자가 테마를 바꿀 수 있고, 전환 시 부드러운 애니메이션이 들어가는 방식 Accent Color Highlighting (강조 색상 하이라이트): 전체는 무채색으로 두고 중요한 부분만 원색으로 강조 Color Blending Modes (컬러 블렌딩): 이미지와 텍스트, 배경이 겹칠 때 색이 자연스럽게 섞이는 효과 8. 텍스트 & 타이포그래피 효과 (Typography Effects) Kinetic Typography (키네틱 타이포그래피): 글자 자체가 움직이며 의미나 리듬을 전달하는 효과 Text Reveal / Typewriter Effect (텍스트 등장/타자기 효과): 글자가 한 자씩 나타나거나 밑에서 올라오는 효과 Variable Fonts (가변 폰트): 스크롤이나 인터랙션에 따라 글자 굵기나 폭이 실시간으로 변하는 폰트 Text Masking with Image/Video (텍스트 마스킹): 글자 안에 이미지나 영상이 채워지는 효과 9. 3D & 몰입형 효과 (3D & Immersive) WebGL / Three.js Effects (웹지엘 효과): 브라우저에서 구현하는 3D 오브젝트, 유체(fluid) 시뮬레이션 등 Interactive 3D Model Viewer (3D 모델 뷰어): 마우스로 돌려보거나 확대할 수 있는 3D 제품 뷰 Depth & Layering (레이어드 뎁스감): 여러 레이어를 겹쳐 화면에 깊이감을 주는 연출 AR/VR Preview Integration (증강/가상현실 미리보기): 웹에서 바로 AR로 제품을 확인하는 기능 10. 사운드 & 감각적 피드백 (Sound & Sensory Feedback) UI Sound Effects (UI 사운드 이펙트): 클릭, 호버 시 미세한 효과음 Haptic Feedback (햅틱 피드백): 모바일에서 터치 시 진동으로 반응 (주로 앱) Ambient Background Sound (배경음): 페이지 분위기에 맞는 잔잔한 배경음악 자동 재생 11. AI/챗봇 & 개인화 UI (AI & Personalization) Conversational UI / Chat Widget (대화형 UI): 챗봇처럼 대화 형태로 정보를 제공하는 인터페이스 Personalized Dynamic Content (개인화 동적 콘텐츠): 사용자 행동에 따라 실시간으로 콘텐츠가 바뀌는 방식 Voice UI Integration (음성 UI): 음성 명령으로 조작 가능한 인터페이스 Predictive Search / Autocomplete Animation (예측 검색 애니메이션): 검색어 입력 시 자동완성 결과가 부드럽게 나타나는 효과 12. 접근성 & 완성도 (Accessibility & Polish) Reduced Motion Support (모션 감소 옵션): 어지러움을 느끼는 사용자를 위해 애니메이션을 줄이는 설정 Focus State Design (포커스 상태 디자인): 키보드 탐색 시 어디에 있는지 명확히 보여주는 디자인 Empty State Illustration (빈 상태 일러스트): 데이터가 없을 때 썰렁하지 않게 보여주는 일러스트/문구 Error/Success State Micro-feedback (오류/성공 피드백): 폼 제출 시 흔들림, 체크마크 애니메이션 등으로 결과를 알려주는 효과 위 프롬프트를 실행했을 때 생성되는 실제 완성형 Single HTML 실행 코드(ECharts 기반 대시보드)를 바로 작성해