devplan›문서›2026-08-03 세션 — devplan UI 부트스트랩 전환 1단계(메인 허브)
13.4 KB · 수정 2026-08-04 11:53
목차

2026-08-03 세션 — devplan UI 부트스트랩 전환 1단계(메인 허브)

논의·대안

페페 지시: "devplan ui 를 전격 변경할거야. 다운 받은 bootstrap ui를 사용할거고, 먼저 메인페이지만 변경해. 확인 후 나머지 연결된 페이지 모두 변경할거야. 다만 색상은 현재 테라코타 색상을 유지한다."

전날 적재한 design-refs 자산(Bootstrap 5.3.8 · MIT)을 devplan 대시보드에 실제로 투입하는 첫 작업이다. 뼈대를 어디까지 바꿀지 3안으로 그릴링(질문 1개) — (A) 공식 dashboard 예제 쉘(상단 고정 navbar + 좌측 사이드바 + 본문) / (B) 현행 1단 구조 유지, 컴포넌트만 치환 / (C) A + 상단 KPI 요약 카드 행. 페페 A 선택.

색 유지 방법도 두 갈래였다 — ①부트스트랩 SCSS를 테라코타로 재컴파일 ②배포본 그대로 링크하고 CSS 변수만 덮기. ②를 택했다: 빌드 도구가 필요 없고, 버전을 올려도 게시본 링크만 바뀌며, 테라코타 토큰이 이미 assets/theme.css 단일 출처로 있다.

결정

산출물·커밋

검증(전부 실측)

1차 피드백 반영 (같은 세션, 페페 지시)

"좌측 사이드 메뉴 가로폭을 줄여라(공간낭비) · 등록·수정 = projects.json → build_hub.py 문구는 페이지에 필요 없다, 삭제 · 절약한 공간으로 프로젝트별 기획페이지·관리페이지 아이콘을 바로 클릭하게". - 사이드바 col-md-3 col-lg-2(1680px에서 277px) → flex 고정 170px(넓은 화면에서 사이드바가 같이 넓어지던 낭비 제거). 본문 1388→1495px, 목록 표 999→1079px. navbar 브랜드도 170px로 맞추고 라벨을 "devplan. 허브"로 줄였다. - 사이드바 하단 빌드 안내 문구 삭제(운영 방법은 rules.md·devplan/CLAUDE.md 몫이지 화면 몫이 아니다). - 목록 표(고정·최근 등록)에 바로가기 열 신설 — 기획📋(projects.json.url, 26/36) · 관리⚙(project_state.json.admin_url, 2건) · 사이트🔗(site, 새 탭 2건). 없는 항목도 흐린 아이콘으로 자리를 지켜 열이 흔들리지 않게 했고, 행 클릭(모달)과는 분리(stopPropagation). 기존의 클릭 안 되는 ↗(계획 페이지 있음) 표시는 실제 링크로 대체. - 🔑 .row 안에서 폭 고정 사이드바를 만들 땐 본문 flex:1 1 0 — basis:auto면 콘텐츠 폭이 기준이 돼 남은 공간을 넘고 flex는 줄이기 전에 줄바꿈부터 한다 → 본문이 사이드바 아래로 통째로 내려갔다(실측 main.y=1050). 좌표로 확인해야 잡히는 사고. - 재검증: 좌표 실측(사이드바 x0·170px / 본문 x170 같은 줄) · 기획·관리 아이콘 실클릭 이동(pfs.html·kakao-ops.html) · 390px 오버플로 0 · 콘솔 에러 0 · build_hub.py --selftest 10 · 테마 FAIL 0.

2차 피드백 반영 (같은 세션, 페페 지시)

"바로가기 버튼이 너무 작다 — 아이콘 테두리는 삭제해라(그것만 해도 커진다) · 나는 폰트크기 13 이상을 원한다. 그 미만은 글씨가 작아서 사용자 읽기가 불편하다". - 글자 13px 미만 전면 금지 — 허브의 모든 font-size를 px로 재조정(본문·표 셀 14 / thead·배지·날짜·진행판 셀 13 / 카드 헤더·아코디언 15 / 사이드바 nav 14). 부트스트랩 .badge(.75em)·small(.875em)·code(.875em)는 상대단위라 부모가 작아지면 같이 작아진다 → 바닥 3줄(.badge/small,.small/code,kbd = 13px)을 깔았다. - 게이트 신설 devplan/check_font.py — font-size 전량을 px로 환산(rem×16)해 13px 미만이면 FAIL, HTML은 바닥 3줄 존재까지 확인. --selftest 7항목. build_hub.py --selftest에 연결(10→11항목) → 템플릿을 고치다 글자가 조용히 작아지는 걸 막는다. 정적 검사로는 em 체인을 못 푸니 브라우저 computed 값으로도 확인했다(직접 텍스트를 가진 전 요소 순회 → 13px 미만 0곳). - 바로가기 아이콘 — 테두리·배경 제거, 글리프 19px·클릭영역 26×26, 열 66→100px. 🔑 flex 자식은 flex:none이 없으면 좁은 열에서 쪼그라든다(실측 26→19px). 크게 만들었는데 화면에선 그대로여서 값이 아니라 렌더된 박스 크기를 재서 잡았다. - 재검증: 아이콘 26×26·border 0 · 셀 넘침 0 · 진행판 표 1060/1061 · 확대 후 아이콘 실클릭(furniture-learn.html) · 테마 FAIL 0 · 폰트 FAIL 0 · selftest 11. 행 높이 25→35px는 가독성 대가로 수용.

3차 피드백 + 2단계 전환 (2026-08-04)

페페: "순번이나 4자 이하의 글자는 줄바꿈이 안 되게 공간을 확보해라. 굵은 글씨를 너무 남발하지 마라. N 기호의 글씨가 너무 뚱뚱하다. 전체 페이지 수정 진행해."

스타일 3건 - 짧은 라벨(회차·배지·트랙·단계·프로젝트명)에 white-space:nowrap + 열 min-width. 진행판은 레일 옆(1061px)에서 계속 접혀서 본문 전폭으로 내렸다(1090 → 1426px 확보, 줄바꿈 0건). 레일은 좌측 목록과 높이를 맞춰(34vh) 빈 공간 제거. - 굵기: 카드 제목·브랜드만 700, 프로젝트명 600, thead·배지·레일 500~600 → 화면 전체 bold 요소 8개(브랜드 3 + 카드 제목 5). - N(신규) 배지 800 → 500.

2단계 = 연결된 30페이지 전량 전환(방식은 그릴링 3안 중 페페가 "연결된 것만 수동 전환" 선택) - 신설 assets/shell.css = 공용 쉘(navbar·사이드바 170px·본문·카드·글자 바닥). 허브도 이 파일을 링크하고 중복 CSS 32줄을 뺐다 → 쉘 규칙 단일 출처. - 신설 apply_shell.py = 정적 변환기. head 링크 4개(부트스트랩→아이콘→theme.css→shell.css 순서 강제), navbar+사이드바+.hub-main 래핑, bootstrap JS, 13px 미만 글자 상향, hub-shell-v1 표식으로 재적용 방지, 원본은 _trash/devplan-preshell-20260804/에 백업. --list/--all/--fixfonts/--selftest(8항목). - 대상 판정 = 허브 네비 + 카드 url + admin_url로 실제 열리는 30개. 미연결 28개(목업·구버전)는 지시대로 제외. - order-auto.html의 자체 --accent:#c2703d → 정본 #c97c4a로 통일(navbar 색이 그 페이지만 달랐다).

🔑 함정 4개(전부 실측으로 태움) 1. body{display:flex}·max-width·padding이 쉘을 부순다 — 내용은 이미 .hub-main으로 옮겨졌는데 body 선언이 남아 navbar와 사이드바가 가로로 나뉘고 본문이 412px 밀렸다. html > body{display:block;margin:0;padding:0;max-width:none} (특정도 0,0,2 > 페이지 body{} 0,0,1)로 무력화 — !important 없이 이긴다. 2. <body>도 <head>도 없는 페이지가 있다(암묵 태그) → 본문 시작점을 </style> → </title> 순으로 폴백. 3. 글자 상향은 <style>만 훑으면 놓친다 — 인라인 style=·JS 템플릿 문자열·em/%(code{.85em} = 11.9px)까지. check_font.py도 em/%를 본문 14px 기준으로 환산하게 확장(그 전엔 "상대단위"로 흘려보냈다). 4. 브라우저 캐시가 검증을 거짓말하게 만든다 — 파일을 고쳤는데 옛 화면을 재서 "쉘이 안 붙었다/글자가 안 커졌다"고 3번 오판했다. 검증은 ?cb=<시각> + CSS에 cache-control:no-cache 라우트로 돌린다.

검증 — 31페이지 실브라우저 전수 PASS(사이드바 170 · 본문 x170 · navbar rgb(201,124,74) · qahelper 존재 · computed 13px 미만 0 · 가로 오버플로 0 · 콘솔 에러 0 · 본문 텍스트 존재) + 390px 오프캔버스 개폐 + 사이드바 링크 실이동(catalog→harness) + 게이트 3종(테마 60개 FAIL 0 / 폰트 31개 FAIL 0 / build selftest 11).

회귀 1건 — 2단 레이아웃 페이지가 안 보임 (2026-08-04, 페페 신고)

"furniture-learn 페이지 오류가 있다. 자가학습 검토 페이지가 보이지 않음."

다음

관계