HTML5 Canvas 기반의 웹 드로잉 애플리케이션 프로토타입이나 핵심 기능을 빠르게 개발할 때 활용합니다.
Create an interactive drawing application using HTML5 Canvas, CSS3, and JavaScript. Build a clean interface with intuitive tool selection. Implement multiple drawing tools including brush, pencil, shapes, text, and eraser. Add color selection with recent colors, color picker, and palettes. Include layer support with opacity and blend mode options. Implement undo/redo functionality with history states. Add image import and export in multiple formats (PNG, JPG, SVG). Support canvas resizing and rotation. Implement zoom and pan navigation. Add selection tools with move, resize, and transform capabilities. Include keyboard shortcuts for common actions.
HTML5 Canvas, CSS3, JavaScript를 사용하여 인터랙티브 드로잉 애플리케이션을 생성하세요. 직관적인 도구 선택 기능을 갖춘 깔끔한 인터페이스를 구축하세요. 브러시, 연필, 도형, 텍스트, 지우개를 포함한 다양한 드로잉 도구를 구현하세요. 최근 사용한 색상, 컬러 피커, 팔레트가 포함된 색상 선택 기능을 추가하세요. 불투명도 및 혼합 모드 옵션이 있는 레이어 지원 기능을 포함하세요. 히스토리 상태를 활용한 실행 취소/다시 실행(undo/redo) 기능을 구현하세요. 다양한 형식(PNG, JPG, SVG)으로 이미지 가져오기 및 내보내기 기능을 추가하세요. 캔버스 크기 조절 및 회전을 지원하세요. 확대/축소 및 이동(zoom and pan) 탐색 기능을 구현하세요. 이동, 크기 조절, 변형 기능이 있는 선택 도구를 추가하세요. 자주 사용하는 동작에 대한 단축키를 포함하세요.
출처 · prompts.chat · Drawing App — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
HTML5 Canvas와 Vanilla JavaScript를 활용하여 전문 디자인 툴 수준의 레이어 시스템과 다양한 그리기 도구를 제공하는 웹 기반 드로잉 애플리케이션 'TPI 드로잉 스튜디오'를 제작했습니다. 캔버스 확대·축소·팬 이동, 실행 취소/다시 실행 내역 관리, 레이어 불투명도 및 혼합 모드 제어, PNG/JPG 이미지 내보내기 등 필수 드로잉 기능이 실시간 반응형 인터페이스로 완벽히 동작합니다.
HTML5 Canvas, CSS3, JavaScript를 사용하여 대화형 드로잉 애플리케이션 'TPI 드로잉 스튜디오'를 제작합니다. 직관적인 도구 선택이 가능한 깔끔한 인터페이스를 구축하고, 브러시·연필·도형(직사각형, 원, 선, 별)·텍스트·지우개 등 다양한 그리기 도구를 구현합니다. 최근 사용한 색상, 색상 추출기 및 팔레트를 포함한 색상 선택 기능을 추가합니다. 불투명도 및 혼합 모드(Blend Mode) 옵션이 있는 레이어 기능을 포함합니다. 작업 내역 기반의 실행 취소/다시 실행(Undo/Redo) 기능을 구현합니다. 다양한 형식(PNG, JPG)의 이미지 내보내기 및 이미지 불러오기 기능을 추가하고, 캔버스 크기 조절과 회전, 확대/축소 및 팬(Pan) 이동을 지원합니다. 이동·크기 조절이 가능한 선택 도구와 주요 기능에 대한 키보드 단축키를 구현합니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
HTML5 Canvas, CSS3, JavaScript를 사용하여 대화형 드로잉 애플리케이션 'mopick 드로잉 스튜디오'를 제작합니다. 직관적인 도구 선택이 가능한 깔끔한 인터페이스를 구축하고, 브러시·연필·도형(직사각형, 원, 선, 별)·텍스트·지우개 등 다양한 그리기 도구를 구현합니다. 최근 사용한 색상, 색상 추출기 및 팔레트를 포함한 색상 선택 기능을 추가합니다. 불투명도 및 혼합 모드(Blend Mode) 옵션이 있는 레이어 기능을 포함합니다. 작업 내역 기반의 실행 취소/다시 실행(Undo/Redo) 기능을 구현합니다. 다양한 형식(PNG, JPG)의 이미지 내보내기 및 이미지 불러오기 기능을 추가하고, 캔버스 크기 조절과 회전, 확대/축소 및 팬(Pan) 이동을 지원합니다. 이동·크기 조절이 가능한 선택 도구와 주요 기능에 대한 키보드 단축키를 구현합니다.
HTML5 Canvas와 Vanilla JavaScript를 활용하여 전문 디자인 툴 수준의 레이어 시스템과 다양한 그리기 도구를 제공하는 웹 기반 드로잉 애플리케이션 'mopick 드로잉 스튜디오'를 제작했습니다. 캔버스 확대·축소·팬 이동, 실행 취소/다시 실행 내역 관리, 레이어 불투명도 및 혼합 모드 제어, PNG/JPG 이미지 내보내기 등 필수 드로잉 기능이 실시간 반응형 인터페이스로 완벽히 동작합니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Senior Frontend Engineer. Build a production-ready interactive drawing web applic
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 3개[HTML/CSS/JS single file or modular structure] · [e.g., Dark modern UI] · [None / Specific library if needed]
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 4단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
01역할 정하기03결과 모양 정하기04지킬 조건 걸기05입력 칸으로 템플릿 만들기07작업을 단계로 나누기09구역을 나눠 쓰기
원문
Create an interactive drawing application using HTML5 Canvas, CSS3, and JavaScript. Build a clean interface with intuitive tool selection. Implement multiple drawing tools including brush, pencil, shapes, text, and eraser. Add color selection with recent colors, color picker, and palettes. Include layer support with opacity and blend mode options. Implement undo/redo functionality with history states. Add image import and export in multiple formats (PNG, JPG, SVG). Support canvas resizing and rotation. Implement zoom and pan navigation. Add selection tools with move, resize, and transform capabilities. Include keyboard shortcuts for common actions.
개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as a Senior Frontend Engineer. Build a production-ready interactive drawing web application using HTML5 Canvas, CSS3, and JavaScript. ### Requirements: 1. Tools: Brush, pencil, shapes, text, eraser, and selection (move, resize, transform). 2. Color & Layers: Color picker, recent colors, layer management (opacity, blend modes). 3. Canvas & History: Undo/redo stack, zoom/pan navigation, canvas resize, and rotation. 4. I/O & Shortcuts: Image import, export (PNG, JPG, SVG), and common keyboard shortcuts. ### Constraints & Output Format: - Code Structure: Provide clean, well-commented, self-contained code in [HTML/CSS/JS single file or modular structure]. - Design Theme: [e.g., Dark modern UI]. - External Libraries: [None / Specific library if needed]. - Ensure optimized canvas rendering performance and modular JS architecture.