드래그 앤 드롭과 데이터 저장 기능을 갖춘 웹 기반 칸반 보드를 개발할 때 사용합니다.
Build a Kanban project management board using HTML5, CSS3, and JavaScript. Create a flexible board layout with customizable columns (To Do, In Progress, Done, etc.). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.
HTML5, CSS3, JavaScript를 사용하여 칸반 프로젝트 관리 보드를 구축하세요. 사용자 지정 가능한 열(할 일, 진행 중, 완료 등)이 있는 유연한 보드 레이아웃을 만드세요. 부드러운 애니메이션과 함께 열 간 카드를 드래그 앤 드롭으로 이동할 수 있도록 구현하세요. 서식 있는 텍스트 편집, 레이블, 마감일, 우선순위 수준이 포함된 카드 생성 기능을 추가하세요. 아바타를 통한 사용자 할당 및 담당자별 필터링을 포함하세요. 카드 댓글 및 활동 내역을 구현하세요. 열 순서 재배치 및 색상 테마로 보드 커스터마이징 기능을 추가하세요. 빠른 전환이 가능한 여러 보드를 지원하세요. 내보내기/가져오기 기능과 함께 localStorage를 사용한 데이터 지속성을 구현하세요. 다양한 화면 크기에 조정되는 반응형 디자인을 만드세요. 주요 작업을 위한 키보드 단축키를 추가하세요.
출처 · prompts.chat · Kanban Board — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
TPI 워크스페이스를 위한 반응형 다중 보드 칸반 프로젝트 관리 시스템입니다. 드래그 앤 드롭 카드 이동, 담당자·우선순위·라벨 필터링, 상세 댓글 및 변경 이력 추적, 테마 변경, JSON 데이터 내보내기/가져오기 기능과 키보드 단축키를 제공합니다.
Build a Kanban project management board using HTML5, CSS3, and JavaScript for TPI Workspace. Create a flexible board layout with customizable columns (To Do, In Progress, Review, Done). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Build a Kanban project management board using HTML5, CSS3, and JavaScript for mopick Workspace. Create a flexible board layout with customizable columns (To Do, In Progress, Review, Done). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.
mopick 워크스페이스를 위한 반응형 다중 보드 칸반 프로젝트 관리 시스템입니다. 드래그 앤 드롭 카드 이동, 담당자·우선순위·라벨 필터링, 상세 댓글 및 변경 이력 추적, 테마 변경, JSON 데이터 내보내기/가져오기 기능과 키보드 단축키를 제공합니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Senior Frontend Developer. Build a fully functional, responsive Kanban project ma
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 3개[Custom Columns] · [Light/Dark/Custom Theme] · [e.g., Ctrl+N for new card]
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 4단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
01역할 정하기03결과 모양 정하기04지킬 조건 걸기05입력 칸으로 템플릿 만들기07작업을 단계로 나누기08스스로 검토하게 하기09구역을 나눠 쓰기
원문
Build a Kanban project management board using HTML5, CSS3, and JavaScript. Create a flexible board layout with customizable columns (To Do, In Progress, Done, etc.). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.
개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as a Senior Frontend Developer. Build a fully functional, responsive Kanban project management board web app using vanilla HTML5, CSS3, and JavaScript. ### Core Specifications: 1. **Board Layout:** Customizable columns (To Do, In Progress, Done, [Custom Columns]) with smooth drag-and-drop card movements and column reordering. 2. **Card Management:** Rich text card creation, labels, due dates, priority levels, user avatars, assignee filtering, comments, and activity history. 3. **Data & State:** Multi-board switching with `localStorage` persistence and JSON export/import functionality. 4. **UI & Accessibility:** Responsive design, customizable themes ([Light/Dark/Custom Theme]), and keyboard shortcuts ([e.g., Ctrl+N for new card]). ### Output Format & Constraints: - Provide clean, production-ready code split into `index.html`, `styles.css`, and `app.js` without external framework dependencies. - Include comments explaining drag-and-drop and state management logic. - Verify edge cases (e.g., invalid JSON import, empty board state) before delivering code.