검색으로 대시보드 이미지를 찾아서
이것을 이용해 다이나믹 HTML을 만들어 보았습니다.
전문가들의 작업과 비교하면 아쉬움이 있지만
개인적으로 사용할 유틸리티를 만들기에는 충분히 훌륭합니다.
[ 대시보드 만들기 프롬프트]
/첨부한 이미지와 동일한 다이나믹 HTML을 만들어줘.
그래프에는 애니메이션을 넣어 움직이게 해줘.
[테스트 결과]
지극히 개인적인 느낌입니다.
- 제미나이: ⭐️⭐️⭐️
- 젠스파크 : ⭐️⭐️⭐️
- 클로드 : ⭐️⭐️⭐️
- 챗GPT :⭐️
- 퍼플랙시티 :⭐️
색상, 폰트 등 다양한 CSS요소를 변경해서
나만의 UI 컴포넌트를 구축하고, 나중에 대시보든 만들때
요기에서 가져다 쓰면 좋겠다는 생각이 들었습니다.
다양한 테스트 결과 마음에 드는 7개를 골라 1페이지로 정리했습니다.
7개의 대시보드를 이용해 12개의 차트 유형과
24개의 UI 컴포넌트가 만들어졌습니다.
[프론트엔드 기술]
- HTML5: 웹페이지의 구조를 만드는 언어
- CSS3: 디자인과 스타일을 입히는 언어
- JavaScript: 상호작용과 동작을 만드는 언어
- Chart.js: 차트를 쉽게 만들어주는 라이브러리
[디자인 기법]
- 반응형 디자인: 모든 기기에서 잘 보이는 디자인
- 그리드 시스템: 정렬된 레이아웃 만들기
- 플렉스박스: 유연한 배치 시스템
- CSS 변수: 색상과 값을 쉽게 관리하기
[1페이지로 정리하기 프롬프트]
현재 폴더의 모든 대시보드 HTML을 한페이지에서 볼 수 있도록
다이나믹 HTML 만들어줘.
썸네일 이미지를 클릭하면 HTML을 새로운 창에 열어줘.
이미지는 img 폴더 안에 있어.
라이트보드 다크모드로 제목은 ‘Dashboard UI Kit’으로 해.