claude중급코딩

사이드스크롤링 타이핑 게임 웹 앱 생성

단일 HTML 파일로 Tailwind CSS 기반의 WASD 조작 사이드스크롤링 타이핑 게임 웹 앱을 생성합니다.

변수 채우기

0 / 5 채움

사용자 입력게임_핵심_컨셉주요_기능_및_규칙디자인_요구사항추가_구현_요소

프롬프트

2,717자

[역할] 한국 웹 프론트엔드 개발 10년차 전문가로서, UI/UX 설계와 고성능 웹 애플리케이션 개발에 능하며, 특히 Tailwind CSS를 활용한 반응형 및 미려한 디자인 구현에 탁월한 경험을 보유하고 있습니다. 빠르게 프로토타입을 만들면서도 실제 서비스 수준의 완성도를 지향하며, 단일 파일 내 고품질 웹 앱 개발에 특화되어 있습니다. [입력] 게임_제목 (예: "우주 타자왕") 게임_핵심_컨셉 (예: "WASD로 캐릭터를 이동시키며 나타나는 단어를 빠르게 타이핑하여 점수를 획득하는 사이드스크롤링 게임") 주요_기능_및_규칙 (예: "점수 카운터 우측 상단 표시, 랜덤하고 다양한 단어 출현, 빠른 타이핑 점수 가산") 디자인_요구사항 (예: "Tailwind CSS를 사용하여 미려하고 직관적인 UI 구현, 전체적으로 어두운 테마") 추가_구현_요소 (예: "게임 오버 시 최종 점수 화면 표시, 배경 스크롤링 속도 조절 기능") [사고 흐름] 1) 요청 분석: 제공된 게임_제목, 게임_핵심_컨셉, 주요_기능_및_규칙, 디자인_요구사항, 추가_구현_요소를 면밀히 분석하여 게임의 핵심 로직과 디자인 방향을 명확히 파악합니다. 특히 사이드스크롤링, WASD 조작, 타이핑 점수 시스템, 랜덤 단어 생성 및 디자인 요구사항의 상호작용을 고려합니다. 2) 기술 스택 선정: 단일 HTML 파일 내 구현을 위해 HTML, CSS(Tailwind CSS), JavaScript 조합을 최적화합니다. 불필요한 외부 라이브러리나 복잡한 의존성 없이 순수 DOM 조작 및 CSS 클래스를 최대한 활용하는 방안을 모색합니다. 3) 구조 설계: 게임 영역, 점수 표시 영역 등 UI 레이아웃을 구성하고, 각 기능별 JavaScript 모듈을 어떻게 배치할지 큰 그림을 그립니다. Tailwind CSS 유틸리티 클래스를 활용한 미려하고 직관적인 디자인을 염두에 두어 초기 마크업 구조를 구상합니다. 4) 코드 생성 및 통합: 분석 및 설계 내용을 바탕으로 HTML 마크업, Tailwind CSS 스타일링, 그리고 게임 로직을 구현하는 JavaScript 코드를 순차적으로 작성합니다. 모든 코드를 단일 HTML 파일 내에 포함되도록 `<style>` 태그와 `<script>` 태그를 사용하여 통합합니다. 5) 최종 검토: 생성된 코드가 요청된 모든 기능(WASD 이동, 단어 타이핑, 점수 계산, 랜덤 단어, Tailwind 스타일링 등)을 충족하는지, 오류는 없는지, 그리고 사용자 경험상 개선할 점은 없는지 점검하여 완성도를 높입니다. [출력 형식] 결과는 완벽하게 동작하는 단일 `index.html` 파일 형태로 제공되어야 합니다. 파일 내에는 `<head>` 태그에 Tailwind CSS CDN 링크가 포함되어야 하며, `<body>` 태그 내에 모든 게임 로직 JavaScript 코드가 `<script>` 태그로 포함되어야 합니다. 주요 섹션은 `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>` 등으로 명확하게 구분되어야 합니다. `<body>` 내부에는 게임 화면을 구성하는 HTML 요소와 점수판 등 UI 요소가 포함됩니다. 주석은 핵심 로직 설명에만 최소한으로 사용합니다. [금기] 외부 JavaScript 프레임워크 (예: React, Vue, Angular)나 복잡한 외부 라이브러리를 사용하지 마세요. 순수 HTML, CSS, JavaScript로만 구현해야 합니다. 여러 개의 파일로 분리하여 제공하지 마세요. 반드시 단일 `index.html` 파일 내에 모든 내용을 담아야 합니다. 클리셰적인 '매우 쉽고 직관적인', '새로운 패러다임을 제시하는' 같은 모호한 표현은 지양하고 구체적인 기술적 설명을 사용하세요. 게임 로직에서 보안 취약점을 유발할 수 있는 요소 (예: `eval()` 함수 사용)를 포함하지 마세요. CSS에 인라인 스타일을 과도하게 사용하지 마세요. Tailwind CSS 클래스 활용을 우선시합니다. [톤] 전문적이고 명확하며 기술적인 어조를 사용합니다. 존댓말('~습니다', '~합니다')을 사용합니다. 한국어 직역체 표현이나 불필요한 영어 표현은 지양하고, 한국 개발 커뮤니티에서 자연스럽게 통용되는 용어를 사용합니다. (예: "side-scrolling game" 대신 "사이드스크롤링 게임") [예시] 사용자 입력: 게임_제목: "코스믹 키스트로크", 게임_핵심_컨셉: "WASD로 우주선을 조작하며 나타나는 단어를 빠르게 타이핑하여 외계 침공을 막는 사이드스크롤링 게임", 주요_기능_및_규칙: "점수 카운터 좌측 상단 표시, 고난도 기술 용어 출현, 정확성 기반 점수 가산", 디자인_요구사항: "Tailwind CSS와 어두운 테마 활용", 추가_구현_요소: "리더보드 기능" 출력 예시: ```html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>코스믹 키스트로크</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body>  </body> </html> ```

한 줄 평가 — 다음 사람 도와주세요

입력 예시

{게임_제목}: "코스믹 키스트로크", {게임_핵심_컨셉}: "WASD로 우주선을 조작하며 나타나는 단어를 빠르게 타이핑하여 외계 침공을 막는 사이드스크롤링 게임", {주요_기능_및_규칙}: "점수 카운터 좌측 상단 표시, 고난도 기술 용어 출현, 정확성 기반 점수 가산", {디자인_요구사항}: "Tailwind CSS와 어두운 테마 활용", {추가_구현_요소}: "리더보드 기능"

출력 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코스믹 키스트로크</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- 여기에 사이드스크롤링 타이핑 게임의 모든 HTML 요소와 JavaScript 로직이 포함됩니다. -->
</body>
</html>

\n\n\n \n\n\n```"}

Lattice 오픈카톡— 매일매일 AI 큐레이션 받기