2026-09-09(수) 세션 — 스터디 팁 페이지 신설(캘린더 + 모달) · 첫 글 본문·도식 완성

프로젝트 = danggeun-ai-study · 기록자 = 코디 산출 = C:\dev\devplan\danggeun-tips.html (관리페이지 좌측 네비 「4 스터디 팁」)

[페페] 지시 (원문 요지)

1. 「당근 스터디 자유 게시판에 내가 쓴 글 다음에 올릴만한 팁을 정리해서 글 올려줘. 다이어그램이나 파이프라인 첨부. 먼저 내용만 정해서 보고」
2. (1차안 반려) 「과제를 주는 느낌보다 내 자산이나 작업 스타일에서 가져온 팁을 줘야 한다. ytmine, stt 는 대외비 — 실제 모임 참석 인원들에게 페페가 직접 알려주기만 할 거다. 클로드 코딩이 예상처럼 잘 안 되는 부분, 모르는 게 무엇인지 몰라서 작업을 못 하는 부분 이 정도 단계에서 도움이 될 팁이 좋겠다」
3. 「관리페이지에 스터디팁 페이지를 만들고 캘린더에 하루에 글 하나씩 등록하는 형태로. 모달로 확대해서 내가 내용을 확인한다. 정해진 글 내용으로 작성하고 올려봐. 도식·다이어그램은 기존 컨셉과 다른 연두·주황으로 상큼하게, 그림 곳곳에 귀여운 고양이. 칼리 페르소나로 작성」

[코디] 한 것

1. 글 내용 확정 — 「클로드가 예상처럼 안 움직일 때 — 규칙서에 박아둔 문장 5개」

• 형식 = 증상 → 왜 그런가 → 규칙서에 박을 문장(인용) 5세트. 출처는 C:\dev\CLAUDE.md 실제 조항을 일반화했다. ① 뭘 물어야 할지 모를 때 = 질문을 AI한테 넘긴다(한 번에 하나씩·추천안 병기) ② 시키지 않은 걸 고쳐놨을 때 = 범위 못 박기 ③ 「다 됐습니다」가 거짓일 때 = 완료의 정의를 준다(직접 돌려보고 출력 붙이기·에러는 전체) ④ 같은 실수 반복 = 그 자리에서 한 줄 ⑤ 조용히 위험한 일 = 금지 목록 먼저
• ⛔공개 금지 처리 = ytmine·stt는 물론 사내 프로젝트명·실경로·리포명·계정까지 전부 제외. 인용문은 조항만 남기고 파일명은 「규칙서」·「함정 파일」로 일반화했다. 자체검사에 노출 검사 1항목을 넣어 회귀를 막았다.
• 화자 = 칼리(운영 도우미 · 친절·공손한 존댓말 + 상큼발랄). 페페는 「모임장님」.

2. 페이지 — 7번째 장 신설

• 데이터 = C:\dev\devplan\danggeun\tips.json 신규(원장 5개째). 빌더 = 기존 build_danggeun.py 확장.
• 구성 = 월 캘린더(<table> · 하루 1편) → 날짜 칸 버튼 → 부트스트랩 모달에 글 전문(도식 포함) 그대로. 아래에 글 목록 카드.
• 현재 = 26.9.10(목) 1편 검수 대기, 9.11·9.12 제목만 예정.
• 캘린더 구현 판단 = table + 셀 안 button(코덱스 의견: 접근성상 월 캘린더는 표 구조가 맞다). 모달 본문은 30편 규모까지 전부 DOM 에 미리 심는 방식이 단순·빠르다(같은 상의).

3. 도식 2장 (인라인 SVG · 연두 + 주황 + 고양이 3마리)

• svg_rulebook() = 규칙서 한 장 해부도(맨 위=대화 시작 / 가운데=금지 / 맨 아래=답변마다) + 「위치가 곧 실행 시점」
• svg_flip() = 흔한 방식(되돌이 루프) ↔ 뒤집은 방식(질문→합의→실행) 대비
• 고양이 = cat() 헬퍼(머리만·표정 4종 happy/curious/dizzy/sleepy). 색은 --cat-* 전용 토큰.

3-b. 도식을 GPT 생성 완제품 이미지로 교체 (페페 추가 지시)

• 지시 = 「도식·다이어그램 생성을 지피티 이미지 생성으로 해라. 모바일 세로형 스크롤로 보는 것이고 당근 게시물은 HTML 형식으로 못 올린다. 완제품을 이미지로 생성해서 올려라. 결과물 확인 후 승인」
• 경로 = C:\dev\tools\imagegen\chatgptimg.py(CDP 크롬 9334) · level="high" · size=None(원본 2:3 = 1024×1536)
• ⛔gptapp.py image 는 실패 — 「ChatGPT 웹뷰 타깃이 없다」. 그 앱은 페페 것이라 건드리지 않는다.
• 🔑한글이 오탈자 0으로 나왔다. 「한글 맡기면 깨진다」는 규칙은 나노바나나(gemini) 얘기였고 ChatGPT 이미지에는 안 맞는다 → rules 갱신.
• 프롬프트 함정 3개(실측) = ①기호(→··)를 문장에 넣으면 한 줄이 두 칸으로 쪼개진다 ②긴 제목 끝에 없는 글자가 붙는다(「규칙서 한 장은 란」) → line 1:/line 2: 로 못 박고 no stray characters ③박스 개수는 exactly N + one line per box 로 지정
• 생성 3회(테스트 1 + 최종 2 + 재생성 1 = 총 4장 소비). 산출 = danggeun/img/tip-{rulebook,flip}.png, 프롬프트는 prompt_*.txt 로 남겨 재생성 가능.
• 페이지 반영 = figures[].img 있으면 <img>(max-width 430px), 없으면 옛 SVG 폴백. 자체검사에 파일 존재 + alt 텍스트 2항목 추가.

3-c. 카드 이미지 세트로 재구성 + 그림체 교체 (페페 추가 지시)

• 지시 = 「카드 이미지세트로 하고 그림체와 선 종류를 좀더 세밀하게 수정해. 너무 귀여운 컨셉으로 단순화됐다」
• 1차 도식(플랫 벡터 + 통통한 카툰 고양이)은 반려. 새 아트 디렉션 = 세밀한 펜화 에디토리얼 일러스트 — 선 굵기를 헤어라인/중간/강조 3단으로 나누고, 실선·점선·점묘로 선 종류가 의미를 나르게 한다. 크로스해칭 음영, 종이 질감, 연두·주황은 큰 면이 아니라 가는 선·밑줄·작은 채움으로만. 고양이는 마스코트가 아니라 잉크 라인의 동물 습작(털 결·해부학). 프롬프트에 STRICTLY AVOID: chibi, kawaii, thick uniform cartoon outlines, flat clip-art, drop shadows, 3D, emoji 를 명시했다.
• 구성 = 카드 9장 (표지 · 규칙서 도식 · 규칙1 · 질문뒤집기 도식 · 규칙2~5 · 마무리). 실제 당근 스와이프 순서 그대로.
• 🔑그림체 일관성 = 표지(card-01)를 참조 이미지로 물려 나머지를 굽는다. 안 물리면 장마다 그림체가 흔들린다.
• 생성기 = C:\dev\devplan\danggeun\img\make_cards.py(문구·스타일·순서가 전부 이 파일에 있다). --only N·--from N·--dump 지원 → 페페가 문구를 고치면 그 장만 다시 굽는다.
• 페이지 = 모달이 카드 갤러리(9장, 클릭하면 원본) + 같이 올릴 글(캡션) + 원본 텍스트 접힘으로 바뀌었다. 자체검사에 카드 파일 9개 존재·갤러리·캡션·접힘 검사를 넣었다.
• 검수에서 잡아 3장 재생성(총 생성 14장) — ⓐcard-04 「함정」이 「합정」으로 나옴 → 프롬프트에 SPELLING CHECK 로 음절 지정 ⓑcard-03 인용 3줄이 재배치돼 「한 번에 하나씩 질문마다」로 붙음 → 줄을 짧게 끊음 ⓒ지시 안 한 영문 장식(책등·노트에 Better Questions Better Days 등)이 장마다 제멋대로 들어가 통일성이 깨짐 → 금지목록에 NO English words anywhere 추가 후 03·05·07 재생성.
• 1차 도식(tip-rulebook.png·tip-flip.png)과 그 프롬프트는 삭제했다 — 카드 02·04 가 대체한다.
• 실측 = 카드 9장 전부 로드 · 원본 1024×1536 · 데스크톱 3열 348px · 원본 링크 9개 · 가로 overflow 0 · check_font FAIL 0.

4. web-designer 상담 반영 (착수 전 필수 · 페페 상시지시)

• 🔴연두·주황을 정보 전달용으로 쓰지 마라 — protan 시뮬 색거리에서 신규 lime↔--live 49.6 / tangerine↔--accent 46.6 으로, 페페가 이미 「거의 같다」고 경고해 둔 accent↔live 기준선(91.0)보다 더 가깝다. → 신규 색은 장식 전용으로 못 박고(theme.css 주석), 상태는 기존 dg-b ok/run/wait/warn 유지. 캘린더의 「글 있음/제목만」도 색이 아니라 실선/점선으로 가른다.
• 대비 통과값 채택 = --fresh #669720(3.49:1 UI) / --fresh-deep #4d7811(5.24:1 텍스트) / --zest #ce7b0d / --zest-deep #8d5107(6.34:1).
• 모바일 7열(칸 43px) = 제목 숨기고 날짜 + 점만. 모달은 modal-xl + modal-dialog-scrollable, SVG 는 .dg-figure{overflow-x:auto} 그대로.
• 「오늘」은 색만으로 알리지 않고 테두리 + 「오늘」 글자 병기.
• 미채택 = 캘린더 CSS grid 안(→ table 유지, 접근성·기존 함정 회피) · 토큰명 --lime/--tangerine(→ CSS 클래스명과 맞추려 --fresh/--zest 유지).

5. 검증

• build_danggeun.py --selftest [ALL PASS] (팁 항목 신규 9개 포함 — 모달 1:1 연결·월 날짜 30칸·도식 2장·고양이·대외비 노출 0)
• check_font.py FAIL 0 · check_theme.py FAIL 0 · WARN 0
• 실측(Playwright) = 데스크톱 1400px 가로overflow 0 · 모바일 375px 가로overflow 0(칸 43×65) · 관리페이지 사이드바 1개(중복 없음) · 네비에 「4 스터디 팁」 노출
• 허브 = projects.json 카드 설명 갱신(6장→7장) → build_hub.py 재생성, 2026-09-09 보드에 카드 확인

사고 2건 (이번 세션에서 실제로 밟음 → rules 에 박음)

1. 🔴부트스트랩과 같은 클래스명을 SVG 안에 쓰면 도형이 조용히 사라진다 — <rect class="card"> 가 .card{display:flex} 를 물어 오른쪽 설명 상자 3개가 통째로 안 그려졌다(에러 0). scard 로 개명해 해결.
2. 🔴/assets/theme.css 를 그냥 링크하면 브라우저가 옛 파일을 계속 쓴다 — 토큰을 새로 넣었는데 페이지에서 var() 가 전부 빈 값 → SVG 가 새까맣게 나왔다(8799 가 Cache-Control 을 안 보내 크롬이 휴리스틱 캐시). shell() 이 mtime 을 쿼리로 붙이도록 고쳤다.

미결

• ⏳당근 실제 게시 — 페페가 모달로 검수한 뒤. 게시 주체는 칼리 계정으로 정리됐다(페페 지시 「칼리의 페르소나로 작성」).
• ⏳9.11·9.12 예정 글 2편(지시문 4칸 / 첫 과제 관문 4개)은 제목만. 앞 글 반응 보고 작성.
• 제안(미채택·보류) = 모달 헤더에 ◀▶ 날짜 네비 — 매일 검수 루틴이면 유용하나 지금 3편이라 보류.