이번 Prompt Tuesday #9에서는 금융과 웹 개발을 결합합니다. 배당 시즌의 한가운데서 Gemini AI를 사용하여 HTML, JavaScript 및 Tailwind CSS로 최신 대시보드를 즉시 코딩하는 방법을 알아보세요.
개인 금융과 웹 개발의 결합은 Linkeum DNA의 핵심입니다. 유명한 "배당 시즌"(4월, 5월, 6월)에 접어들면서 많은 투자자와 개발자가 자체 추적 도구를 만들고자 합니다.
이 테스트의 목표는 Gemini(Google의 AI)를 사용하여 배당 대시보드의 프런트엔드 코드를 처음부터 생성하는 것입니다. 순수 HTML, 기본 JavaScript(Vanilla JS), 그래프용 Chart.js 라이브러리, 디자인용 Tailwind CSS와 같이 복잡한 설정이 필요 없는 간단하고 보편적인 기술을 사용하도록 요구합니다.
프롬프트 (The Prompt)
AI가 브라우저에서 직접 사용할 수 있는 파일을 생성하도록 하려면 특정 역할을 부여하고, 라이브러리에 대한 CDN 링크 사용을 강제하고, 비즈니스 컨텍스트를 제공해야 합니다. 사용된 정확한 프롬프트는 다음과 같습니다.
Act as an expert Front-End Developer. Write a modern, responsive single-page HTML file for a "Dividend Tracking Dashboard" using Tailwind CSS (via CDN) and vanilla JavaScript. Include a chart using Chart.js (via CDN) to visualize monthly dividend income. The UI should have a sleek dark mode aesthetic. Include a main card showing the total yearly dividend goal with a progress bar. Below that, display a neat list or grid of recent dividend payouts using mock data for the following stocks: M6 Metropole, Pepsico, and TotalEnergies. Make the design look premium, similar to high-end fintech apps. Output the complete, functional code so I can copy-paste it directly into an index.html file.
이 프롬프트가 달성하고자 했던 것
이 프롬프트의 과제는 금융 아이디어를 즉시 테스트 가능한 시각적 웹 인터페이스로 변환하는 것이었습니다.
- "플러그 앤 플레이" 기술 스택 정의: HTML, 기본 JS, Tailwind 및 Chart.js의 CDN 링크를 요구함으로써 복잡한 개발 환경 없이 파일을 두 번 클릭하기만 하면 즉시 작동하는 코드를 얻을 수 있습니다.
- 데이터 시각화 통합: 대화형 차트(Chart.js)에 대한 명시적 요청은 AI가 월 수입에 대한 시각적 캔버스를 인스턴스화하고 구성하는 데 필요한 JavaScript 로직을 작성하도록 강제합니다.
- 아트 디렉션 강제: "sleek dark mode aesthetic" 및 "high-end fintech apps"와 같은 용어는 Gemini가 금융에 적합한 프리미엄 디자인(그림자, 그라데이션, 어두운 색상)을 제안하도록 안내합니다.
- 비즈니스 로직 통합: 연간 목표를 향한 진행률 표시줄과 특정 주식(M6, Pepsico, TotalEnergies)을 포함하면 투자자에게 즉시 관련성 있는 렌더링을 제공할 수 있습니다.
결과가 흥미로운 이유
이 결과는 코딩 어시스턴트로서 Gemini의 강력한 기능을 보여줍니다. AI는 단순히 HTML 태그를 정렬하는 데 그치지 않고 페이지를 올바르게 구성하고, 외부 스크립트를 지능적으로 가져오고, Chart.js의 JavaScript 로직을 작성하고, 심미적이고 반응형인 렌더링을 위해 Tailwind CSS 유틸리티 클래스를 적용합니다.
개발자나 프로젝트 제작자에게 이는 엄청난 시간 절약입니다. Chart.js 및 Tailwind 문서를 읽고 목업을 구성하는 데 몇 시간을 소비하는 대신 몇 초 만에 견고하고 시각적인 기반을 확보하여 실제 데이터에 연결하기만 하면 됩니다.
