CASE STUDY

작업이 끝나도 경험이 남도록, 기록에서 공개까지 연결했다

2026-11-01 · 발자취 시스템

AI와 함께 만든 결과물은 늘어났지만, 어떤 문제를 발견했고 왜 그 방법을 골랐는지는 대화 속에 흩어졌다. 작은 개선과 실패까지 프로젝트의 이력으로 쌓고, 다른 사람이 이해할 수 있는 포트폴리오로 보여주는 시스템을 구축했다.

문제와 설계 기준

개인 메모가 많은 지식 저장소를 통째로 배포할 수는 없었다. 그래서 기록은 개인 볼트에 보관하고, 공개를 승인한 글에서 생성한 파일만 별도의 비공개 GitHub 저장소로 전달하도록 나눴다.

기준은 세 가지였다. 작은 작업도 남길 것, 같은 프로젝트의 앞선 기록과 연결할 것, 실제로 확인한 결과만 공개할 것. 글 작성과 공개 결정은 사람과 AI가 담당하고, 파일 변환과 배포는 코드와 서비스가 담당하도록 역할을 정했다.

전체 시스템 연결

아래 구조도는 실제 데이터 흐름이다. 자동 수집은 종료된 대화의 위치를 남기며, 수신함 정리와 공개용 편집은 요청에 따라 실행한다.

flowchart TD
    U["사용자: 목적과 공개 범위 결정"] --> A["Claude Code 또는 Codex"]
    S["공유 스킬: 절차와 검증 기준"] --> A
    T["로그 템플릿과 기존 기록"] --> A
    A --> L["새 로그: 검토전"]
    E["세션 종료"] --> H["공통 수집기: 중복 방지"]
    H --> I["개인 수신함: 대화 위치"]
    I -.->|"정리 요청"| A
    L --> D["Obsidian 대장: 최근 로그와 후보"]
    L --> C["독자용 케이스스터디"]
    C --> R["사용자 공개 승인"]
    L --> R
    R --> P["Python: 공개 필터와 사이트 생성"]
    P --> O["HTML·CSS·그림·모션"]
    O --> G["비공개 GitHub 저장소"]
    G --> F["Cloudflare Pages 자동 배포"]
    F --> V["포트폴리오 방문자"]

기록 한 개가 사이트에 도착하기까지

재생하면 기록이 이동하는 단계를 순서대로 살펴볼 수 있다. 정지하거나 다음·이전 단계로 직접 이동해 설명을 읽을 수도 있다. 페이지를 열기만 해서는 모션이 시작되지 않는다.

스킬은 어떻게 구성했나

스킬은 에이전트가 읽는 작업 지침이다. 계속 실행되는 프로그램이 아니라 요청에 맞는 순서와 확인 기준을 제공한다. Python 수집기와 발행기는 이 절차에서 실제 파일 처리를 맡는다.

flowchart LR
    Q["요청"] --> K["SKILL.md"]
    K --> W["기록 작성"]
    K --> I["수신함 정리"]
    K --> E["공개용 편집"]
    K --> P["발행과 배포"]
    K --> M["대표 사례 정리"]
    X["구성·작성법 참조 문서"] -.-> K
    V["검증 기준"] -.-> W
    V -.-> P

원본과 공개 결과물을 분리한 이유

개인 기록에서 공개 산출물로 이동하는 경계원본 그림 보기

수신함과 대화 원본은 개인 영역에 둔다. 발행기는 공개가능 글과 그 글에서 참조한 미디어만 읽어 사이트를 만든다. 저장소를 비공개로 유지하더라도 웹사이트는 공개되므로, 공개 결정은 배포 전에 별도로 확인한다.

실패와 교정

초기 안내는 공개 저장소와 GitHub Pages를 전제로 했다. 사용자의 요구에 맞춰 비공개 저장소와 기존 Cloudflare 계정으로 바꿨다. 스킬도 처음에는 한 에이전트의 경로에만 있었지만, 같은 원본을 두 환경에서 읽도록 연결했다.

대시보드 로그인과 브라우저 연결도 별개였다. 연결이 끊겨 화면을 확인하지 못했을 때 배포 버튼 클릭만으로 완료라고 판단하지 않고, 공개 URL 응답과 실제 파일 일치로 최초 배포를 확인했다.

검증한 것과 추가 확인할 것

최초 버전에서는 공개가능 글만 포함되는지, 내부 점검이 제외되는지, 프로젝트가 날짜순인지, 공개를 철회한 파일이 재생성 때 제거되는지 확인했다. 최초 운영 사이트는 HTTP 200으로 응답했고 로컬 HTML과 일치했다.

확장 버전은 짧은 세션 수집·중복 방지, 공개 케이스스터디 포함, 관련 기록 연결, 참조 미디어만 복사, 잘못된 입력에서 기존 산출물 보존을 시험했고 Python 통합 시험 12개가 통과했다. Chrome에서 구조도 2개·SVG 이미지·모션 재생과 정지·단계 이동·키보드 조작을 확인했다. 320px에서는 도식과 그림을 내부 좌우 스크롤로 읽을 수 있게 보완하고 페이지 가로 넘침이 없음을 확인했다. 이 글은 사용자 공개 승인을 거쳐, 검증한 범위와 추가 확인할 항목을 구분해 공개한다.

Codex의 새 종료 훅은 사용자 신뢰를 완료했다. 다만 빈 세션 종료 시험에서는 실제 수집 영수증이 확인되지 않았다. 수집기 코드 시험·설정 설치·신뢰 완료와 실제 작업 세션의 자동 수집 검증은 구분하며, 후자는 확인 대기 상태다.

내가 결정한 것과 AI가 수행한 것

나는 작은 작업까지 축적한다는 목표, 공개 범위, 비공개 저장소 유지, Cloudflare 선택, 사례에 구조와 작동 원리를 자세히 담는 방향을 결정했다. AI는 기존 파일 조사, 스킬과 코드 수정, 샘플 검증, 배포 연결과 기록 작성을 수행했다. 공개할 문장과 최종 결과의 판단은 내가 맡는다.