[로컬바이브코딩]DeepSeek-Coder-V2-Lite 는 Hard 급 프로그래밍 테스트를 통과하지 못함.

 

코딩계 현재 로컬 1황은

https://ollama.com/library/qwen3.6:27b

qwen3.6:27b

cpu 만으로 24시간 걸려서 Hard 난이도를 풀어냄.

 

 

 

코딩을 시켜보니 html 같은 경우는 디자인 능력과 알고리즘의 능력이 차이가 있음.

디자인 능력은 신경 쓰이지 않는다면 코딩 속도는 가장 빨랐음.

DeepSeek-Coder-V2-Lite 는 Hard 급 프로그래밍 테스트를 통과하지 못하지만 Medium 급 문제는 통과함

 

 

99999.html

0.01MB

 

Hard 급 문제는 통과 하지 못함

Medium 급 문제는 통과함

 

Sorting_Visualization.md

0.00MB

999999m.html

0.02MB

 

 

칸반보드의 디자인만 해달라고 요구사항을 수정요청하였습니다.

 

요구사항을 기능 구현(JavaScript 로직) 없이 HTML과 CSS를 통한 화면 디자인 및 마크업 설계에만 집중하도록 수정했습니다. 개발자 또는 디자이너가 UI/UX 스타일링 및 레이아웃을 선행 작업할 수 있도록 가이드를 재구성했습니다.

---

🎨 Kanban Board 가이드: UI/UX 디자인 및 마크업 요구사항

본 요구사항은 JavaScript 기능 구현을 제외하고, HTML과 CSS만을 이용해 시각적 디자인, 레이아웃, 호버 효과 및 반응형 웹을 구현하는 것을 목표로 합니다.

---

1. 레이아웃 및 테마 디자인 (Theme & Layout)

🌌 다크 테마 (Dark Theme)

• 배경색: 깊은 숯색/슬레이트 계열 (#0f1117 등)을 사용합니다.
• 타이포그래피: Google Fonts에서 Inter 글꼴을 로드하여 전체 페이지에 적용합니다.

🧊 글래스모피즘 컬럼 (Glassmorphic Columns)

• 각 컬럼은 반투명한 프로스티드 글래스(Frosted-glass) 효과를 적용합니다.
• backdrop-filter: blur(), 투명도가 있는 배경색, 미세한 테두리(border), 부드러운 그림자(shadow)를 조합합니다.

📱 반응형 레이아웃 (Responsive)

• 전체 보드는 기본적으로 가로 배열입니다.
• 화면이 좁은 모바일 기기에서는 레이아웃이 깨지지 않고 **가로 스크롤(Horizontal Scroll)**이 작동해야 합니다.

---

2. 컬럼 및 상단 바 UI (Columns & Header UI)

🔝 상단 필터 및 검색 바

• 검색창: 입력 폼 스타일링을 포함합니다.
• 우선순위 필터: All, Low, Medium, High를 선택할 수 있는 드롭다운 메뉴 스타일을 디자인합니다.
• 컬럼 추가 버튼: 보드 맨 끝에 위치하는 "＋ Add Column" 버튼을 스타일링합니다.

📋 컬럼 헤더 및 관리 UI

• 기본 4개 컬럼: Backlog, To Do, In Progress, Done 순서로 정렬합니다.
• 이름 수정 상태: 더블클릭 시 텍스트 입력창으로 전환되는 가상의 입력 폼 스타일을 준비합니다.
• 삭제 아이콘: 평소에는 숨겨져 있다가, 컬럼 영역에 마우스 호버(Hover) 시 나타나는 쓰레기통 아이콘을 CSS로 구현합니다.

---

3. 칸반 카드 및 인라인 폼 UI (Cards & Form UI)

🏷️ 카드 내부 요소

• 제목: 한눈에 들어오는 굵은 텍스트로 표현합니다.
• 설명 접기/펼치기: 제목 아래에 접고 펼칠 수 있는 상세 설명란의 디자인 요소를 배치합니다.
• 우선순위 배지: 부드러운 알약(Pill) 모양의 태그를 구현합니다.
  • Low (초록 계열) / Medium (황색/앰버 계열) / High (빨간 계열)
• 마감일 (Due Date): 일반 마감일 스타일과 마감일이 지난 상태(⚠️ 아이콘 + 빨간색 텍스트)의 오버듀(Overdue) 스타일을 각각 디자인합니다.
• 삭제 버튼: 카드 영역에 마우스 호버 시 우측 상단에 나타나는 삭제 버튼을 CSS로 제어합니다.

🔄 상태별 카드 스타일 변경

• Done 컬럼 카드: 완료된 컬럼에 위치한 카드는 톤다운된 색상(Muted), 제목 취소선(Strikethrough) 등이 적용된 디자인으로 차별화를 줍니다.
• 필터링 숨김 처리: 필터링되어 가려진 카드는 레이아웃이 무너지지 않도록 투명도나 고정 높이 공백(Placeholder gap) 스타일을 고려합니다.

➕ 카드 등록 인라인 폼 (Inline Mini-Form)

• 각 컬럼 하단의 "＋ Add card" 버튼을 누르면 나타날 가상의 인라인 폼 UI를 CSS로 작성합니다.
• 포함 요소: 제목 입력창, 우선순위 선택 드롭다운, 날짜 선택기, 설명 텍스트 영역, Save/Cancel 버튼

---

4. 애니메이션 및 인터랙션 효과 (Transitions & States)

자연스러운 사용자 경험을 위해 CSS Transition/Animation 효과를 필수로 포함합니다.

• 카드 호버: 마우스를 올렸을 때 카드가 살짝 위로 뜨는 느낌(Lift 효과)과 그림자 변화를 줍니다.
• 드래그 상태 시각화: 드래그 중인 카드의 반투명 효과(Ghost opacity)와 마우스가 올라간 타깃 컬럼의 펄스(Pulse) 강조 효과를 CSS 클래스로 미리 정의합니다.
• 삭제 애니메이션: 카드가 사라질 때 적용될 페이드아웃(Fade-out) 애니메이션을 정의합니다.

---

5. 하단 통계 바 (Bottom Statistics Bar)

• 화면 가장 아래에 고정(Fixed)되는 슬림하고 모던한 바를 디자인합니다.
• 표시 요소: Total cards, Overdue cards, Done, Completion rate (%) 가 시각적으로 균형 있게 배치되도록 Flexbox 또는 Grid 레이아웃을 잡습니다.

---

🛠️ 작업 제약 사항

• 단일 파일 구성: 모든 HTML 마크업과 CSS 스타일은 단 하나의 index.html 파일 내부(<style> 태그)에 구현합니다.
• 구현 범위: JavaScript 코드 작성은 제외하며, 오직 정적인 UI HTML구조와 디자인 CSS 스타일링만 완성합니다. (상태 변화 확인용 더미 데이터 카드들을 컬럼별로 배치해 둡니다.)

 

디자인 완성본 HTML/CSS 코드를 바로 생성해 드릴까요?

 

 

네, 요청하신 요구사항에 맞춰 JavaScript 로직 없이 오직 HTML과 CSS 스타일링만으로 완성된 100% 디자인 가이드용 index.html 코드를 생성했습니다.

글래스모피즘 효과, 다크 테마, 상태별 카드 디자인(오버듀, 완료 상태 등), 마우스 호버 시 나타나는 삭제 버튼 및 컬럼 추가/수정용 마크업 구조가 모두 포함되어 있습니다. 이 코드를 복사하여 .html 파일로 저장한 뒤 브라우저에서 바로 확인하실 수 있습니다.

 

요구사항 대로 디자인만 해달라고 요청한 결과

 

Qwen3-Coder-30B-A3B-Instruct 이 작업한 파일 10kb

999999x3.html

0.01MB

 

구글 gemini 거대모델 가 작성한 파일 20kb

999999x3g.html

0.02MB

 

구글의 gemini 거대모델은 해결하는데 로컬 Qwen3-Coder-30B-A3B-Instruct 은 해결하지 못하네요

 

 

이것은 Google에서 제공하는 AI이며, Gemini 제품군 모델로 구동됩니다.