코드 없는 도구 제작자 프롬프트

1. **작동 방식에 대한 간단한 설명:** 이 도구는 [DESCRIBE YOUR TOOL IDEA]를(을) 위한 직관적인 인터페이스로, 사용자가 복잡한 코딩 없이도 특정 작업을 수행할 수 있게 해줍니다. 핵심 로직은 브라우저에서 직접 실행되는 JavaScript로 처리되며, HTML/CSS가 반응형 레이아웃과 시각적 피드백을 담당합니다. 사용자는 입력 필드, 버튼, 드래그 앤 드롭 등의 요소를 통해 데이터를 조작하고, 결과는 즉시 화면에 표시됩니다. 2. **Claude 또는 노코드 플랫폼을 사용한 구현을 위한 명확한 단계별 계획:** - **1단계: 요구사항 정의** - 도구의 핵심 기능, 대상 사용자, 성공 기준을 명확히 합니다. - **2단계: UI/UX 와이어프레임** - 사용자 흐름을 고려한 간단한 스케치 또는 목업을 만듭니다. - **3단계: HTML 구조 설계** - 시맨틱 태그를 사용하여 콘텐츠의 뼈대를 만듭니다. - **4단계: CSS 스타일링** - 모던하고 일관된 디자인 시스템(변수, 그리드, 플렉스박스)을 구축합니다. - **5단계: JavaScript 로직 구현** - 입력 처리, 데이터 변환, 결과 표시, 오류 처리를 단계별로 코딩합니다. - **6단계: 테스트 및 반복** - 다양한 시나리오로 테스트하고, 사용자 피드백을 반영하여 개선합니다. - **7단계: 배포 및 공유** - 정적 호스팅(예: Netlify, GitHub Pages)에 업로드하고, iframe 임베드 코드를 생성합니다. 3. **해당되는 경우 정확한 HTML/CSS/JS 코드:** *(아이디어가 구체적으로 주어지지 않아, 예시로 "할 일 목록 관리자"를 들어 설명합니다. 실제 아이디어에 맞게 수정 필요)* ```html <!-- HTML 구조 --> <div id="app"> <h1>📋 할 일 관리자</h1> <input type="text" id="todo-input" placeholder="새 할 일 입력..."> <button id="add-btn">추가</button> <ul id="todo-list"></ul> </div> <style> /* CSS 스타일링 */ :root { --primary: #4f46e5; --bg: #f9fafb; } * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: var(--bg); display: grid; place-items: center; min-height: 100vh; } #app { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 400px; } #todo-input { width: 70%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; } #add-btn { background: var(--primary); color: white; border: none; padding: 0.75rem 1rem; border-radius: 8px; cursor: pointer; } #todo-list { list-style: none; padding: 0; margin-top: 1.5rem; } #todo-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: #f3f4f6; border-radius: 8px; margin-bottom: 0.5rem; } #todo-list li button { background: transparent; border: none; color: #ef4444; cursor: pointer; font-size: 1.2rem; } </style> <script> // JavaScript 로직 const input = document.getElementById('todo-input'); const addBtn = document.getElementById('add-btn'); const list = document.getElementById('todo-list'); function addTodo() { const text = input.value.trim(); if (!text) return; const li = document.createElement('li'); li.innerHTML = `<span>${text}</span><button onclick="this.parentElement.remove()">✕</button>`; list.appendChild(li); input.value = ''; input.focus(); } addBtn.addEventListener('click', addTodo); input.addEventListener('keypress', (e) => { if (e.key === 'Enter') addTodo(); }); </script> ``` 4. **UX 및 디자인 폴리시 개선을 위한 팁:** - **마이크로 인터랙션**: 버튼 클릭 시 리플 효과, 할 일 완료 시 체크 애니메이션 추가. - **접근성**: ARIA 라벨, 키보드 내비게이션, 고대비 색상 사용. - **상태 피드백**: 로딩 스피너, 성공/오류 토스트 메시지. - **반응형 디자인**: 모바일에서도 편리한 터치 타겟 크기(최소 44x44px). - **빈 상태 디자인**: 목록이 비었을 때 안내 문구와 아이콘 표시. - **로컬 스토리지**: `localStorage`를 사용하여 사용자 데이터를 브라우저에 저장. 5. **가능한 경우 공유 가능한 임베드 버전:** - **임베드 코드**: 아래 iframe 코드를 복사하여 웹사이트나 블로그에 붙여넣으세요. ```html <iframe src="https://your-tool-url.com" width="100%" height="500px" style="border:none; border-radius: 12px;"></iframe> ``` - **배포 방법**: GitHub Pages에 업로드하거나 Netlify Drop에 폴더를 드래그 앤 드롭하여 즉시 HTTPS URL을 얻을 수 있습니다.