#7
칸반보드 + Add Task 모달 (미니멀 프로젝트 관리 UI)
| 출처 | 텔레그램 업로드 이미지 (UI 컴포넌트 캡처) |
| 날짜 | 2026-07-13 |
| 카테고리 | web |
| 태그 | 칸반보드, UI컴포넌트, 모달, 프로젝트관리, 태스크카드 |
🗣️ 이렇게 말하세요
"7번(칸반보드 + Add Task 모달 (미니멀 프로젝트 관리 UI)) 스타일로 만들어줘"
에이전트용 정본: ~/design-team/references/web/kanban-board-add-task-modal-20260713.md
📦 실제 적용 사례
- 라이브 할일 보드에 적용 — 카드형 3열·색점·개수 배지·파스텔 필·검정 버튼·할일 추가 모달·다크모드 토글. 체크리스트 6/9 일치, 2 부분일치(모달 상시노출 대신 오버레이, 아바타 단색), 1 해당없음(Status/Assignee 필드 부재)
~/.hermes/simple-board/index.html
| 색상 | 토큰 | HEX |
|---|---|---|
| background | #F5F5F6 | |
| cardBg | #FFFFFF | |
| headingText | #17171A | |
| bodyText | #8D8D93 | |
| primaryButton | #111114 | |
| tagBackend | #C7D8F7 |
| 역할 | 폰트 | 비고 |
|---|---|---|
| heading | 산세리프 세미볼드 (추정: Inter/SF 계열) | |
| body | 산세리프 레귤러 (추정: Inter/SF 계열) |
관찰 체크리스트 (레퍼런스 충실 프로토콜 1단계)
| # | 항목 | 레퍼런스는? (관찰) |
|---|---|---|
| 1 | 레이아웃 형태 | 좌측 3열 보드(To Do/In Progress/Done) + 우측 Add Task 모달 패널을 나란히 배치한 컴포넌트 캡처. 카드 폭 고정, 컬럼별 세로 스택 |
| 2 | 네비게이션 | 해당 없음 (상단 GNB 없이 보드 컴포넌트만 캡처됨) |
| 3 | 현재 위치·진도 표시 | 컬럼 헤더에 색점(빨강/주황/초록)+카드 개수 배지(3, 2, 2)로 각 상태별 작업량을 표시 |
| 4 | 인터랙션 | 해당 없음 (정적 이미지, 드래그앤드롭 여부 확인 불가). Done 카드에는 초록 체크 아이콘 표시 |
| 5 | 색·타이포 | 무채색 배경(#F5F5F6)에 화이트 카드, 검정 프라이머리 버튼(+Add Task/Create Task), 태그별 파스텔 필컬러(탠/블루/그린)로 카테고리 구분 |
| 6 | 도식·일러스트 | 별도 도식 없음. 담당자는 이니셜 아바타(원형, 검정/빨강/회색 배경)로 표현 |
| 7 | 콜아웃 박스 | Add Task 모달이 곧 폼 박스: Status/Tag/Assignee 항목이 각각 선택형 필(pill) 버튼 그룹으로 구성 |
| 8 | 반응형·모바일 | 해당 없음 (정적 이미지) |
| 9 | 표지·간지 | 해당 없음, UI 컴포넌트 단독 캡처 |