AI 로 실현하는 디지털 생활의 즐거움. DiJoy AI

부제: 단순 점수 측정을 넘어 실제 수정 코드와 1-클릭 Git 커밋을 자동 생성하는 풀스택 웹 애플리케이션 아키텍처 및 차세대 생성형 AI 검색엔진(Perplexity, ChatGPT Search, Google AI Overviews) 완벽 대응 전략📌 목차들어가며: 웹 품질 관리의 페인포인트와 해결책Fresnel(Website Checker) 프로젝트 개요 및 핵심 철학Google AI Studio 기반 개발 워크플로우 & 풀스택 환경 구성핵심 아키텍처 & 실전 코드 예시 (Deep Dive)4.1. 백엔드: Gemini Managed Agent & 정적 분석 파이프라인4.2. Lighthouse LHR JSON 파서 & DOM 1:1 매핑 패치 생성기4.3. 프론트엔드: Angular 19/21 ..

핵심 요약 (AI Overview / AEO Snippet)본 가이드는 Google AI Studio의 최신 자율 에이전트 기술인 Gemini Managed Agent (Antigravity Preview / Gemini 4 Argon) 및 Gemini API CLI를 결합하여, 텍스트 입력 한 번으로 3D 팝업 디오라마 삽화, 24kHz 다중 배역 성우 낭독(Multi-Voice TTS), 어쿠스틱 챔버 스코어(Lyria 3.5)가 완벽히 결합된 고전 오디오 동화책(Audio Storybook)을 자동으로 제작하는 전 과정을 상세한 실전 코드와 함께 다룹니다.📌 목차 (Table of Contents)프로젝트 개요: 왜 오디오 스토리북인가?Google AI Studio와 Gemini Managed A..

Tistory 포스팅 메타데이터 (SEO/AEO 요약)글 제목: [Google AI Studio] 복잡한 엑셀 장부를 120 BPM 인터랙티브 재무 스토리로! Gemini 기반 'Finance Story' 풀스택 개발기 & 배포 완벽 가이드타겟 키워드: Google AI Studio, Gemini, 재무 데이터 시각화, 회계 장부 인터랙티브 대시보드, Pixi.js, GSAP 애니메이션, 자연어 질의, GitHub Pages 배포, TypeScript, AI 코딩배포 사이트 URL: https://djai32521.github.io/Finance_Story/GitHub 소스코드: https://github.com/djai32521/Finance_Story⚡ [AEO Direct Answer] 3줄 핵심 ..

"네 가지 간단한 질문에 답하면, 나만을 위한 커스텀 픽셀 아트 게임과 3D 아케이드 기기가 실시간으로 탄생합니다!"안녕하세요! 오늘은 Google AI Studio와 최신 Gemini API를 활용하여, 웹 브라우저에서 실시간으로 3D 아케이드 캐비닛과 레트로 픽셀 게임을 자동 생성하는 풀스택 프로젝트 Arcade Game Generator (playglow) 제작기를 상세하게 공유해 드립니다.웹에서 누구나 무료로 바로 즐길 수 있도록 GitHub 소스 코드 배포 및 GitHub Pages 정적 호스팅까지 완료했습니다. 이번 포스팅에서는 기획 의도부터 Three.js 3D 그래픽스, Gemini 구조화된 프롬프트 엔지니어링, iframe 샌드박스 게임 엔진, 그리고 GitHub 배포 과정까지 실제 핵심..

요약: Google AI Studio와 Three.js, WebGL2/GLSL 커스텀 셰이더를 활용하여 64층 볼륨 쉘(Volumetric Shells)과 60,000가닥의 인스턴스 헤어 스트랜드, GPGPU 베를레(Verlet) 물리 시뮬레이션, Marschner 헤어 셰이딩, 실시간 AR 웹캠 조명 추정까지 구현한 풀스택 3D 그래픽스 프로젝트 개발기입니다.📌 목차프로젝트 소개: Mochi-Puff 3D GPU 털 시뮬레이션왜 3D 웹 털(Fur) 시뮬레이션인가? 기술적 도전 과제Google AI Studio를 활용한 개발 여정 & 프롬프트 엔지니어링 노하우핵심 그래픽스 및 물리 아키텍처4.1 64층 볼류메트릭 쉘 & 60,000가닥 인스턴스 스트랜드 하이브리드4.2 GPGPU 핑퐁 렌더타깃 기반 ..

안녕하세요! 이번 포스팅에서는 Google AI Studio를 적극 활용하여 웹 브라우저에서 60FPS로 매끄럽게 구동되는 3D 미니어처 레이싱 게임 「데스크 레이서(Desk Racer)」를 개발한 전 과정과 핵심 코드 분석, 그리고 GitHub Pages로 원클릭 배포하는 방법까지 상세하게 공유해보려 합니다.평소 3D 그래픽스나 물리 시뮬레이션 게임 개발에 관심이 많으셨던 분들, 특히 AI 코딩 도구를 활용해 복잡한 Three.js 프로젝트를 현실로 완성해보고 싶으신 분들께 큰 도움이 되기를 바랍니다!📌 목차프로젝트 소개: '데스크 레이서(Desk Racer)'란?Google AI Studio와 함께한 개발 여정시스템 아키텍처 및 주요 기술 스택핵심 기능 및 상세 코드 분석4-1. 롤러코스터 트랙 C..

"어린 시절 거실에서 온 가족이 TV 앞을 뛰어다니며 즐기던 닌텐도 Wii Sports 테니스의 그 짜릿한 손맛, 이제 크롬 브라우저 하나만으로 설치 없이 즐길 수 있을까?"안녕하세요! 오늘은 Google AI Studio를 적극 활용하여 최신 웹 기술(Three.js, Web Audio, MediaPipe, Optical Flow)을 총동원해 개발한 3D 아케이드 테니스 웹게임, Argon Tennis(아르곤 테니스)의 전체 개발 과정과 핵심 아키텍처, 코드 구현 비하인드를 상세하게 공유하고자 합니다.단순한 키보드 조작 게임에 그치지 않고, 웹캠을 이용한 핸드 트래킹 스윙, 스마트폰 자이로 센서를 연동한 포켓 라켓(Pocket Racket), 정교한 스윗스팟 타격 판정과 공 궤적 물리, 그리고 한국어/..

"고전 명작 심시티와 에이지 오브 엠파이어의 감성을 웹 브라우저 위에 그대로 구현하다!"Google AI Studio를 활용하여 2:1 디메트릭(Dimetric) 등각 투영 엔진, 256개 픽셀 아트 타일, 실시간 애니메이션, 한글/영문 다국어 지원, 그리고 GitHub Pages 배포까지 완성한 전체 개발 과정을 코드 예시와 함께 상세히 공유합니다.📌 목차프로젝트 소개 & 완성 데모 미리보기Google AI Studio를 활용한 개발 워크플로우2:1 디메트릭(Isometric) 등각 투영 수학 원리 & 핵심 코드살아 숨쉬는 생태계 애니메이션 파이프라인256개 픽셀 아트 타일셋과 5대 테마 바이옴한국어/영어 다국어(i18n) 아키텍처Vite 빌드 최적화 및 GitHub Pages 배포 자동화마무리 & ..