프로젝트 개요
게임 제작에 필요한 표현을 찾아 구현 요청 문장으로 조합하는 웹 도구입니다. Codex를 활용해 개념별 게시물과 움직이는 도식, 검색과 프롬프트 조합 기능을 개발했습니다.
- 작업 기간 (Git 커밋 기록 기준): 2026.10.13 ~ 2026.10.14
- 개발 형태: AI 활용 개인 개발
- 기술: HTML, CSS, JavaScript, SVG, Node.js
- 배포 환경: GitHub Actions, GitHub Pages
- 형상 관리: Git, GitHub
주요 구현
- 한글·영문 용어, 약어와 별칭으로 개념을 검색하고 카테고리·게임 유형별로 조회합니다.
- SVG·CSS 애니메이션으로 카메라, 전투, 물리, 네트워크 등의 개념을 시각화합니다.
- 게시물에서 선택한 기술을 장바구니에 모으고 대상 엔진과 요청 언어를 선택합니다.
- 선택한 내용을 한국어·영어 요청 문장으로 조합해 클립보드로 복사합니다.
- 북마크, 선택한 기술, 엔진·언어 설정을 브라우저 localStorage에 저장합니다.
- 밝은 테마·어두운 테마와 모바일 레이아웃, 도식 재생·정지를 적용했습니다.
개발 포인트
site/articles의 Markdown을 원본으로 관리하고 스크립트로 검색용catalog.js를 생성합니다.app.js가 검색 조건과 기술 선택, 저장 상태와 프롬프트 조합을 처리합니다.articles-ui.js가 게시물 상세 화면을 구성하고,animation-art.js와technical-art.js가 개념 도식을 그립니다.- 카탈로그·커버와 원본의 일치 여부를 검사한 뒤 GitHub Actions에서 정적 사이트를 배포합니다.
사용자가 개념을 탐색해 기술을 선택하면 앱이 요청 문장을 조합합니다. 조합한 문장은 외부 AI에 직접 전달하며, 앱 내부에서는 AI 모델을 호출하지 않습니다.