상태와 구조를 그리는 법: State·ER·Class 다이어그램
흐름이 아니라 '상태를 가진 대상'과 '데이터·코드의 구조'를 그리는 세 가지 다이어그램을 정리했습니다. State·ER·Class를 직접 그려보며 느낀 강점과 한계, 그리고 무엇을 그릴 때 어떤 도구가 맞는지를 담았습니다.
흐름이 아니라 '상태를 가진 대상'과 '데이터·코드의 구조'를 그리는 세 가지 다이어그램을 정리했습니다. State·ER·Class를 직접 그려보며 느낀 강점과 한계, 그리고 무엇을 그릴 때 어떤 도구가 맞는지를 담았습니다.
흐름을 그리는 두 종류의 다이어그램을 비교합니다. Flowchart는 절차와 분기를, Sequence는 시간순 상호작용과 동기·비동기 경계를 드러냅니다. 발행 파이프라인을 직접 그린 경험을 곁들였습니다.
다이어그램 종류가 많은 이유는 각자 답하는 질문이 다르기 때문입니다. 같은 시스템을 Flowchart·Sequence·State로 그려 보며, 다이어그램은 그림이 아니라 관점이라는 생각에 이른 기록입니다.
몇 년 미뤄둔 받은편지함 대청소를, Claude Code에 Gmail MCP를 붙여 AI에게 맡겨본 기록입니다. OAuth 직접 발급 같은 셋업 함정부터, 부작용 있는 대량 작업을 AI에게 맡길 때 무엇이 어긋나는지, 휴지통·검증·범위 좁히기로 되돌릴 수 있게 설계한 과정을 담았습니다.
2026년 6월 발표된 /design-sync가 Claude Code와 Claude Design을 양방향으로 잇는 방식을 직접 써보기 전 사실 위주로 정리하고, 흔한 오해 두 가지(MCP 등록이 아닌 인증, 에이전트 위임이 아닌 파일 동기화)를 짚었습니다.
claude.ai와 Claude Code를 매일 쓰면서도 막연히 뭉뚱그려 두었던 둘의 차이를, 한번 제대로 구별해보고 싶어 파고들었습니다. AI가 대화를 기억하는 게 아니라 클라이언트가 매 턴 히스토리를 다시 첨부할 뿐이며, 이것이 CLAUDE.md가 매 턴 삽입되는 것과 같은 원리임을 짚은 기록입니다.
HTML은 doctype·head·body 세 개가 필수일까요. WHATWG 스펙 원문을 펼치고 W3C validator에 직접 돌려본 결과, 가장 엄밀한 최소 유효 문서는 세 줄이었습니다. DOCTYPE이 요소가 아닌 이유와 charset이 조건부인 이유까지 실측으로 확인합니다.
모델이 업데이트되는 건 엄밀히 따지면 파인튜닝일까. 사전학습·사후학습·파인튜닝의 경계를 먼저 정리하고, 매일 쓰는 Claude 라인업의 토크나이저 변화를 거의 유일한 단서로 각 전환의 성격을 추론한다. 다만 그 판단이 어디까지가 확증이고 어디부터가 추측인지 솔직하게 구분했다.
데스크톱은 멀쩡한데 아이폰에서만 웹게임 배경음이 무음이었습니다. 원인은 WKWebView의 Web Audio 라우팅 제약이었고, 무음 audio 요소로 오디오 세션을 먼저 열어 해결한 과정을 정리했습니다.