보정 스크립트는 3주째 못 만들었고, 64일 묵은 대시보드는 하드코딩 색상 33곳이 아니라 파이썬 3.13의 cgi 모듈 삭제로 아예 안 켜졌다

소개

2주차 사례글에서 저는 이렇게 적었습니다.

보정 스크립트를 이번 주에 만들겠습니다. 1주차에 적고 안 한 것이고, 고칠 곳이 63개라 손으로는 안 됩니다.

3주차를 시작하며 먼저 확인할 것은 이 계획을 실행했는지였습니다. 이번 세션은 1, 2주차 사례글이 쓰인 PC와 다른 기기에서 진행됩니다. 그래서 econ-radar나 citation-verifier처럼 예전 글이 참조하던 자료는 이 기기에 없고, 대신 제가 실제로 운영 중인 autobiox 연구 저장소를 소재로 쓰기로 했습니다. BioProject01/web/은 논문 분석 하네스를 클릭으로 조작하는 실제 대시보드입니다. designlang이 자동 추출한 시스템이 아니라 제가 직접 짠 코드라는 점이 이번 주의 핵심입니다. 1, 2주차가 "자동 추출을 믿지 말라"였다면, 3주차는 "내가 직접 짠 것도 다시 열어 보면 다르다"였습니다.

3주차 강의는 실습 위주로, 디자인 시스템을 웹사이트에 적용하고 버셀(Vercel)로 배포하는 데모가 반복됩니다. 그런데 제 대시보드의 DEPLOY.md는 "Do not expose it to the public internet"이라고 못 박고 있습니다. 강의가 요구하는 배포와 제 저장소의 실제 제약이 부딪히는 지점을, 지어내지 않고 있는 그대로 남기려 합니다.

진행 방법

사용 도구: Claude Code (CLI), Python 3, grep, git, curl

Step 1. 2주차 계획 실행 여부부터 확인

2주차에 적은 계획은 세 가지였습니다. 보정 스크립트를 만든다, 고치기 전에 산출 폴더 전체를 센다, 이번 주 웹사이트는 보정한 시스템으로 만든다. 먼저 보정 스크립트가 생겼는지 찾았습니다.

find /Users/kkkim/study/GPTers -iname "*fix*" -o -iname "*correct*" -o -iname "*보정*"

결과는 0건입니다. 3주 연속 안 만들었습니다.

Step 2. 1주차 산출물을 다시, 이번에는 전체를 센다

2주차에 저는 object Object 출현을 8개 파일만 훑어 63회로 세었습니다. 이번에는 design-extract-output 폴더의 84개 파일 전체를 하나씩 돌며 다시 세었습니다.

for f in $(find design-extract-output -type f); do
  n=$(grep -o "object Object" "$f" | wc -l)
  [ "$n" != "0" ] && echo "$n  $f"
done | sort -rn

22개 파일에서 나왔고, 합이 111회였습니다. 2주차에 제가 "63개"라고 쓴 근거였던 8개 파일 목록에는 benchling-com-prompts/v0.txt, lovable.txt, claude-artifacts.md, gpters-org-variables.css 같은 파일이 아예 빠져 있었습니다. Apple Color Emoji도 같은 방식으로 다시 세니 2주차의 3개 파일이 아니라 13개 파일에 남아 있었습니다.

Step 3. 실제 코드에는 같은 노이즈가 있는지 확인

designlang이 만든 노이즈(object Object, Apple Color Emoji)가 사람이 직접 짠 코드에도 나오는지 확인했습니다.

grep -ric "object Object" app.py index.html static/app.css static/app.js
grep -ric "Apple Color Emoji" app.py index.html static/app.css static/app.js

전부 0입니다. 이 두 노이즈는 designlang의 자동 추출/직렬화 과정에서만 생기는 것이지, 코드 자체의 일반적인 문제가 아니라는 것을 실제 대비로 확인했습니다.

Step 4. 대신 이 코드에 있는 진짜 문제를 센다

static/app.css에는 :root에 토큰이 12개 정의돼 있습니다.

--bg: #f7f7f4;   --panel: #ffffff;  --text: #202124;  --muted: #62666d;
--line: #d8dbe0; --line-strong: #aeb5bd; --accent: #0f6b5f; --accent-dark: #0a4d45;
--warn: #9b5a12; --bad: #9a2d2d; --good: #246b38; --code: #f0f2f4;

토큰이 있는데도 :root 밖에서 색상을 직접 적은 곳이 얼마나 되는지 세었습니다.

grep -o "var(--[a-zA-Z-]*)" static/app.css | wc -l        # 70
tail -n +16 static/app.css | grep -o "#[0-9a-fA-F]\{3,6\}" | wc -l   # 33
tail -n +16 static/app.css | grep -o "#[0-9a-fA-F]\{3,6\}" | sort | uniq -c | sort -rn

var()로 토큰을 쓴 곳이 70군데, :root 밖에서 hex를 직접 적은 곳이 33군데였습니다. 그중 #fff가 12번으로 가장 많았는데, --panel이 이미 #ffffff로 정의돼 있어 사실상 같은 값을 12번 다시 적은 것입니다.

Step 5. 안전한 선에서 실제로 고친다

되돌리기 쉬운 범위로, :root 정의부(1~15줄)는 건드리지 않고 그 밖의 #fff만 var(--panel)로 치환했습니다.

new_line, n = re.subn(r'#fff\b(?!\w)', 'var(--panel)', line)

12곳이 치환됐고, git diff로 정확히 그 12줄만 바뀐 것을 확인했습니다.

Step 6. 실제로 로컬에서 띄워 본다

강의는 버셀 배포까지 데모했지만, 이 저장소의 DEPLOY.md는 공개 배포를 금지합니다. 그래서 배포 대신 로컬 실행부터 실제로 해 봤습니다.

cd /Users/kkkim/projects/autobiox/BioProject01
python3 web/app.py --port 8765

Traceback (most recent call last):
  File ".../web/app.py", line 12, in <module>
    import cgi
ModuleNotFoundError: No module named 'cgi'

켜지지도 않았습니다. app.py는 Flask가 아니라 파이썬 표준 라이브러리(http.server의 BaseHTTPRequestHandler, ThreadingHTTPServer)로 만든 서버였고, cgi.FieldStorage로 폼 데이터를 파싱합니다. 이 기기의 기본 python3는 pyenv로 관리되는 3.13.12인데, cgi 모듈은 파이썬 3.13에서 표준 라이브러리에서 완전히 빠졌습니다.

pyenv versions --bare        # system, 3.13.12 뿐
/usr/bin/python3 --version   # Python 3.9.6
/usr/bin/python3 web/app.py --port 8765
# BioProject01 paper dashboard: http://127.0.0.1:8765
curl -s -o /dev/null -w "HTTP %{http_code}\n" http://127.0.0.1:8765/
# HTTP 200

시스템 파이썬(3.9.6)으로는 그대로 켜지고 HTTP 200이 돌아왔습니다. 문제는 코드가 아니라, 이 기기에 파이썬 3.11~3.12대 버전이 pyenv로 하나도 설치돼 있지 않다는 것이었습니다.

Step 7. 출처를 알 수 없는 변경을 발견하고 되돌린다

수정 후 git status를 다시 확인하다가, 제가 건드리지 않은 web/index.html도 변경된 것으로 나왔습니다. git diff를 열어 보니 제가 작성한 적 없는 "결제 자리 표시(스케치, 미연동)" 블록과, 이 사례글 작업을 지칭하는 듯한 주석이 이미 파일에 들어 있었습니다. 이번 세션에서 저는 static/app.css 외에는 편집한 적이 없으므로, 이 내용을 제가 만든 결과물로 사례글에 쓰지 않고 git checkout -- web/index.html로 되돌렸습니다. 원인은 확인하지 못했습니다.

결과와 배운 점

측정 결과

배운 점

1. 계획을 적는 것과 실행은 3주째 별개였습니다. 1주차에 계획을 적고 2주차에 0개 실행, 2주차에 다시 계획을 적고 3주차에도 보정 스크립트는 0개입니다. "이번 주에 만들겠다"는 문장 자체가 실행을 보장하지 않는다는 것이 세 번째로 확인됐습니다.

2. 지난주에 다시 센 숫자도 완전히 다시 세어야 했습니다. 2주차에 저는 "요약본만 보고 세서 28을 63으로 고쳤다"고 썼는데, 이번 주에 84개 파일 전체를 다시 돌아보니 63도 8개 파일만 본 부분 집계였고 실제는 111이었습니다. 매주 "이번엔 전체를 봤다"고 생각했는데 매주 더 넓은 범위가 남아 있었습니다.

3. 자동 추출 노이즈와 코드 품질 문제는 서로 다른 문제입니다. object Object와 Apple Color Emoji는 사람이 짠 대시보드 코드에는 한 건도 없었습니다. 대신 이 코드에는 토큰 정의를 두고도 하드코딩을 33곳에 쓴, 성격이 다른 일관성 문제가 있었습니다. "디자인 시스템이 지저분하다"는 한 문장으로 뭉뚱그리면 이 둘을 같은 원인으로 착각하게 됩니다.

4. 가장 큰 장벽은 코드가 아니라 환경이었습니다. app.py는 64일 전 커밋 이후 한 줄도 바뀌지 않았는데, 그사이 이 기기의 기본 파이썬이 3.13으로 바뀌면서(또는 처음부터 3.13만 설치돼 있으면서) cgi 모듈이 사라져 서버가 아예 뜨지 않았습니다. 강의가 다루는 "화면이 잘렸다", "저절로 움직인다" 같은 문제는 말로 고칠 수 있었지만, 이 문제는 인터프리터 버전을 바꿔야 풀리는 문제였습니다.

5. 출처를 모르는 변경은 내 것으로 세면 안 됩니다. 작업 도중 제가 만들지 않은 index.html 변경을 발견했습니다. 그럴듯해 보여도 이번 세션에서 실행한 명령의 결과가 아니면 사례글에 넣지 않고 되돌리는 것이, designlang 요약본을 의심 없이 믿지 않는 것과 같은 원칙이라고 봤습니다.

시행착오

• timeout 5 python3 ...로 서버를 잠깐 띄우려 했는데, 이 셸에는 timeout 명령이 없어 command not found로 조용히 실패했습니다. 백그라운드 실행 후 sleep으로 대기하는 방식으로 바꿔야 했습니다.

• #fff를 var(--panel)로 치환할 때 #fff6f6, #f1f8f2 같은 값까지 같이 바뀔 뻔했습니다. 정규식을 #fff\b(?!\w)로 좁히고, :root 정의부(1~15줄)는 치환 대상에서 제외한 뒤에야 정확히 12곳만 바뀌었습니다.

• git status --short web/처럼 하위 폴더로 범위를 좁혀 확인하다가, 상위 저장소 전체를 다시 본 뒤에야 index.html과 무관한 BioProject02/CLAUDE.md(다른 프로젝트, 팀 인프라 정보 포함)까지 변경 상태인 것을 발견했습니다. 이번 사례글과 무관하고 민감한 내용이라 손대지 않고 그대로 두었습니다.

앞으로의 계획

• 3주 연속 미루어진 보정 스크립트는 이번에는 범위를 좁혀, [object Object] 검출 한 가지만 먼저 만들 계획입니다. 세 가지를 한 번에 하겠다고 적어서 매번 0개였던 것 같습니다.

• 이 기기의 pyenv에 파이썬 3.11 또는 3.12를 하나 더 설치해, cgi 모듈 제거로 막힌 대시보드 실행 경로를 시스템 파이썬에 의존하지 않고 재현 가능하게 만들 계획입니다.

• 남은 하드코딩 hex 21곳 중 반복되는 값(#fff6f6, #f1f8f2, #a8c9b0, #e1b1b1이 각 3회)부터 --warn-bg, --good-bg, --bad-bg 같은 상태별 토큰으로 정리해 볼 생각입니다.

• 공개 배포는 이번 주에도 하지 않았습니다. DEPLOY.md의 로컬/LAN 공유 방식과 강의의 버셀 배포 흐름이 근본적으로 다른 용도(팀 내부 도구 대 공개 웹사이트)라는 점을 다음 주에 스터디장에게 직접 확인해 볼 계획입니다.

도움 받은 글 (옵션)

• 23기 클로드 디자인 3주차 강의 (김민철): 디자인 시스템을 적용한 카페/맵 페이지 데모, 버셀 배포, "@사이트"로 배포하는 흐름, 위시(wishy) 사이트를 UX 레퍼런스로 활용하는 팁, 사례글에 막힌 지점을 남기라는 안내

• 23기 클로드 디자인 2주차 사례글 (본인): 63회로 보고했던 object Object가 이번 주 전체 재검사에서 111회로 다시 늘어난 것을 확인한 근거