이번 Prompt Tuesday #11에서는 AI에게 인상적인 HTML/JavaScript 시각화를 생성하도록 요청합니다. 세계 주요 증권 거래소가 개장 상태에 따라 빛을 발하는 회전하는 3D 지구본입니다.
Linkeum을 개발하는 틈틈이, AI가 어디까지 할 수 있는지 즉시 테스트해 보고 싶게 만드는 아이디어가 떠오를 때가 있습니다. 이번 Prompt Tuesday #11의 목표는 야심 찼습니다. Qwen에게 회전하는 3D 지구본을 표시할 수 있는 HTML/JavaScript 페이지를 생성하도록 요청하는 것이었습니다. 이 지구본에서는 세계 최대 증권 거래소가 시장이 열려 있는지 닫혀 있는지에 따라 상태가 변하는 빛나는 점으로 표시됩니다.
이 아이디어는 종이 위에서는 단순했지만, 실행에 있어서는 매우 시각적이었습니다. 각 금융 센터는 거래소가 열려 있을 때는 깜박이는 녹색 점으로, 닫혀 있을 때는 빨간색 점으로 나타나야 했으며, 점을 클릭하면 주요 정보가 담긴 작은 창이 표시되어야 했습니다.
Qwen에 사용된 프롬프트
이러한 유형의 코드 생성에서 흔히 볼 수 있듯이 프롬프트는 영어로 작성되었습니다. 코드 생성 모델은 일반적으로 HTML 구조, JavaScript 논리, 시각적 렌더링 및 사용자 상호 작용을 결합할 때 이 언어로 된 상세한 기술 지침을 더 잘 이해합니다.
Act as an expert Front-End Developer and Data Visualization specialist. Write a modern, responsive single-page HTML file that renders an interactive 3D globe using the
globe.gllibrary (andthree.js) via CDN, along with Tailwind CSS for styling.Here are the exact requirements:
- The Globe: Render a beautiful, dark-themed, highly detailed 3D globe. It should auto-rotate slowly.
- The Data: Plot the top 10 major world stock exchanges (e.g., NYSE, LSE, Tokyo, Shanghai, Euronext Paris, etc.) using their real latitude and longitude.
- Market Status Logic: Write JavaScript logic that uses the current UTC time to determine if each market is currently OPEN or CLOSED based on their real-world trading hours.
- Visual Markers: Represent each exchange on the globe as a glowing, pulsating point. Make the point Green and pulsating if the market is OPEN, and Red and pulsating if the market is CLOSED.
- Interactivity: When the user clicks on a point:
- Stop the globe's auto-rotation.
- Open a sleek, dark-themed HTML pop-up/tooltip floating above the globe displaying the Exchange Name, City, Local Time, and Status (Open/Closed in green/red text).
- Clicking elsewhere on the globe should close the pop-up and resume rotation.
- UI/Aesthetics: Give the page a premium, high-end fintech aesthetic (dark mode, glassmorphism for the pop-up, sleek typography).
Output the complete, fully functional HTML, CSS, and JS code in a single file so I can copy-paste it into an
index.htmlfile and run it immediately in my browser.
이 프롬프트가 흥미로웠던 이유
제가 이 프롬프트에서 마음에 드는 점은 단순히 "3D 지구본"만을 요구하지 않는다는 것입니다. 시각적 렌더링, 비즈니스 로직, 지리적 데이터 및 대화형 동작을 동시에 요구함으로써, AI가 단순한 코드 예제가 아닌 미니 제품에 가까운 것을 생성하도록 강제합니다.
다시 말해, 우리는 Qwen의 JavaScript 작성 능력만 테스트하는 것이 아닙니다. 또한 프리미엄 대시보드를 연상시키는 인터페이스를 통해 금융 지향적인 디자인 의도를 이해하는 능력도 테스트하고 있습니다.
Gemini를 활용한 몇 가지 수정
Qwen으로 얻은 첫 번째 결과는 이미 매우 유망했습니다. 점, 애니메이션, 클릭 상호 작용을 볼 수 있었고, 멋진 렌더링에 매우 근접했다는 것을 즉시 느꼈습니다.
그러나 디스플레이를 안정화하고 시각적 연출을 개선하기 위해 몇 가지 조정이 필요했습니다. 따라서 Gemini의 도움을 받아 지구본 렌더링, 초기 프레이밍, 대륙의 가독성, 로딩 시 카메라 동작 등 몇 가지 기술 및 프레젠테이션 세부 사항을 수정했습니다.
놀라운 결과
최종 결과는 솔직히 놀랍습니다. 우리는 우아하고 생생하며 상호 작용이 가능한 3D 지구본을 얻었으며, 빛나는 점들은 즉각적으로 글로벌 트레이딩 플로어의 인상을 줍니다.
처음 몇 초 만에 시선을 사로잡는 것이 바로 이런 경험입니다. 무엇보다도 이것은 단순한 시각적 장치가 아닙니다. 이 애니메이션 뒤에 주요 금융 시장을 직관적으로 추적하는 실제 제품 사용 사례를 이미 상상할 수 있습니다.
앞으로의 계획
이것이 아마도 이번 Prompt Tuesday #11에서 가장 흥미로운 부분일 것입니다. 이 렌더링은 단순한 블로그 게시물 이상으로 나아가고 싶게 만들 만큼 충분히 설득력이 있습니다.
나중에 Linkeum의 금융 섹션에 이 아이디어를 통합해 볼 생각입니다. 실제 데이터 레이어와 몇 가지 추가 개선 사항이 더해지면 이 인터랙티브 지구본은 사용자에게 훌륭한 "와우 효과" 요소가 될 수 있습니다.
