🏆 AI스터디 21기 4주차 베스트 사례 큐레이션 - 콘텐츠&지식

📚 21기 옵시디언

✍️ 옵시디언에 축적되는 지식을 실제 삶에 적용하기 위한 SKILL 제작 및 경험 공유

송세현

하려던 것 📝

• 쌓이는 지식을 실행 가능한 프로젝트로 전환하여 관리하는 사례

• 지식 축적 속도보다 소화 속도가 느려 발생하는 Inbox 병목 현상을 해결하고자 함.

• 프로젝트 완료 후 경험과 인사이트가 흩어지는 완료 병목 현상을 해결하고자 함.

• 지식 수집과 실행, 완료 후 지식 결정화 과정을 통합하여 지식 자산을 체계적으로 관리하고 재사용성을 높이고자 함.

활용한 툴 ⚒️

내용이 부족하여 요약하지 못했습니다

진행 세부 내용 🔍

• 1️⃣ Inbox 지식 묶음을 프로젝트로 전환함

- 개별 클리핑 처리 시 에너지 분산을 막고자, 같은 주제의 클리핑이 5~8개 쌓였을 때를 프로젝트 전환 신호로 삼았음. - `/proj-init` 명령어를 활용하여 쌓인 클리핑을 소화하고 실행으로 전환하는 게이트 역할을 수행하게 함. - 하네스 관련 클리핑 6개가 쌓이자 `/proj-init --role po '에이전틱 AI 기반 전주기 품질 평가 하네스 및 통합 워크플로우 구축' 📎 2026-04-03-agentic-ai-harness-skill-module.md` 명령어를 사용하여 프로젝트를 시작했음. - 소스 파일을 지정하면 Inbox 클리핑 내용이 인터뷰 질문지의 초안 답변으로 자동으로 채워져 정보 재입력 부담을 줄였음.

• 2️⃣ proj- SKILL 5개 스킬을 연결하여 프로젝트 전주기를 커버함

- `/proj-init`: 역할별 인터뷰 질문지를 생성하여 '무엇을 물어야 하는가'를 정의하고 인터뷰 질문지 MD를 산출함. - `/proj`: 답변 기반으로 '어떻게 할 것인가'를 설계하고 프로젝트 청사진 및 워크스페이스를 생성하여 청사진 MD와 폴더 구조를 산출함. - `/proj-log`: 진행 중 발견 사항을 기록하고 파일을 이동시키며 프로젝트를 홀드/재개하여 청사진 로그를 업데이트함. - `/proj-map`: Phase 전환 시 지식 현황을 분석하고 지식 맵 노트를 갱신함. - `/proj-close`: 완료 회고를 진행하고 지식을 재배치하며 청사진을 아카이브하여 회고 노트와 파일 재배치를 수행함.

• 3️⃣ `/proj-init`으로 인터뷰 질문지를 생성함

- `po` 역할 템플릿을 사용하여 핵심 비즈니스 문제, 이해관계자, 성공 기준, 제약 조건, 범위, 마일스톤 등 반드시 답해야 하는 항목들을 강제했음. - `00. Inbox/01. Actions/진행중/2026-04-04-proj-init-agentic-ai-e2e-quality-harness.md` 파일 형태로 질문지를 산출했음.

• 4️⃣ `/proj`로 청사진과 워크스페이스를 생성함

- 인터뷰 답변을 분석하여 Phase 구조를 설계했으며, 예를 들어 Phase 1은 '정의·기준 수립 (due 2026-04-07)'으로 설정함. - vault를 탐색하여 기존 지식(예: `[[📎 2026-04-04-everything-claude-code-agent-harness]]`)을 핵심 연계 및 참고 자료로 연결했음. - `10. CMDS Process/13. Develop/agentic-ai-e2e-quality-harness/` 경로에 `connect/`, `merge/`, `develop/`, `_interviews/`와 같은 워크스페이스 폴더를 생성하고 인터뷰 파일을 이동시켰음.

• 5️⃣ `/proj-log`로 진행 상황을 기록함

- Phase 진행 중 중요한 발견이나 결정이 생길 때마다 `/proj-log 2026-04-04-proj-agentic-ai-e2e-quality-harness-blueprint.md '이재훈 위원 1:1 완료. Rubric 초안 승인. 사내 LLM API는 Claude Claude-sonnet-4-6 wrapper로 제공 확인.'`과 같이 호출하여 기록했음. - Inbox 파일을 워크스페이스로 이동할 때는 `/proj-log [blueprint] --import '📎 2026-04-04-everything-claude-code-agent-harness.md'` 명령어를 사용하여 파일 유형을 자동 판단하고 `connect/`로 이동시켰음. - Phase 완료 시 `/proj-log [blueprint] 'Phase 1 완료 — Rubric 확정, 이해관계자 승인' --done` 명령어를 사용했음.

• 6️⃣ `/proj-map`으로 Phase 전환 시 지식 맵을 갱신함

- `/proj-map 2026-04-04-proj-agentic-ai-e2e-quality-harness-blueprint.md` 명령어를 사용하여 지식 맵을 갱신했음. - 지식 맵은 '지금 어디에 있고, 무엇이 비어 있고, 다음에 어디로 가야 하는가'를 명확하게 보여주어, '확립됨', '갭', '다음 탐구 질문' 등으로 현재 상황을 파악하게 함.

• 7️⃣ 완료 후 청사진 단일 관리 및 지식 카테고리를 재배치함

- 프로젝트 완료 시 `/proj-close [blueprint]` 명령어를 사용하여 `connect/`, `merge/`, `develop/` 안의 파일들을 각 지식 카테고리로 흩뜨렸음. - 청사진은 모든 파일을 링크로 연결하는 인덱스 파일로 남겨 유사 과제 시 전체 지식 네트워크에 즉시 접근 가능하게 했음. - `/proj-close`는 파일 이동 전에 각 산출물의 재사용 가능성을 '보편 원칙', '역할 방법론', '도메인 지식', '실패 교훈', '재사용 코드' 등으로 분류하여 해당 카테고리로 재배치했음.

• 8️⃣ World Map을 통해 지식 체계의 어느 꼭지를 채웠는지 시각화함

- 지식 수집이 1~3년 목표를 향해 필요한 지식을 선택적으로 채워가는 행위가 되도록 World Map을 활용했음. - `knowledge-space`와 `target-cmds`를 청사진 YAML에 명시하여 프로젝트가 CMDS World Map의 어느 꼭지를 채우기 위한 것인지를 명확히 했음. - 예시로 E2E 하네스 구축 프로젝트는 '[601] AI Agent Development'를 80% 채우는 등, 프로젝트가 특정 지식 꼭지를 얼마나 채웠는지 평가했음.

📚 21기 AI숏폼드라마

✍️ 나 대신 내 클론 아바타가 출현하고, remotion으로 편집 - 유튜브 영상 만든 후기

Gia_윤미정

하려던 것 📝

• AI로 아바타와 손글씨 모션그래픽 유튜브 영상을 외주 없이 제작한 사례

• 1인 크리에이터로서 영상 제작 외주 비용 부담을 줄이고자 함.

• 아바타 영상만으로 밋밋한 화면에 숫자, 통계, 키워드 같은 정보를 시각적으로 보여줘 임팩트를 강화하고자 함.

• 전문 모션그래픽 도구 사용의 어려움과 외주 시 발생하는 비용 및 수정 번거로움을 해결하고자 함.

활용한 툴 ⚒️

• Claude Code (Claude Opus): AI 코딩, 모션그래픽 스타일 A/B 테스트, Remotion 모션그래픽 코드 작성 및 수정, FFmpeg 합성 명령어 생성, 자막 필터 우회 솔루션 제시

• Remotion (React 기반 영상 프레임워크): 모션그래픽 영상 제작, 자막 영상 번인

• Rough.js (손글씨 드로잉): 손글씨 느낌의 모션그래픽 구현

• 얼굴 클론 아바타: 본인의 얼굴과 닮은 아바타 생성

• ElevenLabs: 본인의 목소리 클론 생성

• FFmpeg: 모션그래픽과 아바타 영상 합성

진행 세부 내용 🔍

1️⃣ 내 클론 업그레이드 - 이전보다 '나다운' 클론을 만들고자 얼굴과 목소리 클론을 업그레이드함. - 조명을 새로 구매하여 얼굴을 선명하게 촬영한 결과, 이전보다 더 닮은 얼굴 클론을 만들었음. - ElevenLabs에 실제 목소리를 입력하여 영어 글을 학습시켜, 완벽한 발음보다 본인의 발음과 비슷한 목소리 클론을 생성함.

2️⃣ A/B 테스트로 모션그래픽 스타일 결정 - 어떤 모션그래픽 스타일이 좋을지 몰라 Claude Code에게 두 가지 버전의 10초 테스트 영상 제작을 요청함. - `Two 10-second test videos: Version A (clean motion graphics) vs Version B (rough.js hand-drawn style)` 프롬프트를 사용함. - 깔끔한 모션그래픽(Version A)과 Rough.js를 활용한 손글씨 느낌(Version B)을 비교한 결과, 핸드드로잉 스타일이 훨씬 개성 있고 눈에 띄어 해당 스타일로 확정함.

3️⃣ 첫 시도 — 올인원 방식의 한계 인식 - 처음에는 아바타 영상과 모션그래픽을 Remotion 안에서 한 번에 처리하려 시도함. - `57-second K-Beauty promo video with avatar PIP + rough.js motion graphics` 프롬프트를 사용함. - 아바타 PIP, 모션그래픽, 씬 전환을 모두 포함한 컴포지션이 Remotion에서 제대로 작동하지 않아 문제가 발생함. - 모션그래픽은 Remotion으로 따로 렌더링하고 아바타 영상과는 FFmpeg으로 합성하는 분리 방식으로 전략을 변경함.

4️⃣ 57초 모션그래픽 영상 제작 - 분리 전략에 따라 Claude Code에게 구간별 스펙을 상세하게 전달하여 Remotion 프로젝트에서 57초짜리 모션그래픽 영상 제작을 요청함. - `Remotion 프로젝트에서 57초짜리 모션그래픽 영상을 만들어줘. 이건 아바타 영상과 나중에 FFmpeg으로 합성할 거야. Remotion은 모션그래픽만 담당. 구간별 모션그래픽: 0:00-0:08 '$600B' 손글씨로 카운트업 + 'Global Beauty Market' 타이핑 0:08-0:14 빈 화면 (아바타 풀스크린 대체 구간) 0:14-0:16 한국 국기 아이콘이 Rough.js로 그려짐 0:16-0:28 카드 3개 순차 등장 0:28-0:47 네 기둥 순차 빌드업 0:47-0:57 빈 화면 + 마지막 2초 CTA 텍스트` 등의 프롬프트를 사용함. - Claude Code가 각 구간을 별도 컴포넌트로 만들어서 조립했으며, Rough.js로 실제 손글씨처럼 흔들리는 선이 자연스럽게 그려지는 것을 확인함.

5️⃣ 태극기 — AI가 놓친 부분을 직접 짚다 - 태극기를 Rough.js로 그리는 장면에서 외곽선만 그려지고 안쪽 빨강/파랑이 채색되지 않는 문제가 발생함. - `태극기의 원 안, 빨강 파랑 부분까지 다 색칠해줘야해`라고 요청함. - Claude Code가 Canvas API로 S-커브 태극 모양을 채색하고 Rough.js로 손글씨 외곽선을 덧씌우는 방식으로 문제를 해결함. - AI가 한 번에 완벽하게 못 하더라도 대화하면서 고쳐나가 완성도를 높일 수 있음을 확인하였음.

6️⃣ 글씨체도 손글씨로 - 모션그래픽 드로잉은 손글씨 느낌인데 텍스트 폰트가 딱딱한 기본체라 어울리지 않는 문제가 있었음. - `글씨체를 손글씨 느낌 나는 글씨체로 하고싶어`라고 요청함. - Claude Code가 Google Fonts에서 Caveat라는 손글씨 폰트를 찾아 전체 컴포넌트에 적용함. - Rough.js 드로잉과 Caveat 폰트의 조합이 딱 맞아 전반적인 영상 통일성을 높임.

7️⃣ FFmpeg 합성 — 한 줄 요청으로 복잡한 명령어 생성 - 렌더링된 모션그래픽과 아바타 영상을 합성하기 위해 Claude Code에게 복잡한 합성 규칙 설명을 요청함. - `motion_graphics.mp4와 아바타 영상을 FFmpeg으로 합성해줘. 0:00-0:08 → 모션그래픽 풀스크린 + 아바타 PIP 0:08-0:14 → 아바타 풀스크린 0:14-0:47 → 모션그래픽 풀스크린 + 아바타 PIP 0:47-0:55 → 아바타 풀스크린 PIP: 270x270, 우측 하단, 라운드 사각형` 프롬프트를 사용함. - 라운드 사각형 PIP, 구간별 전환, 오디오 트랙 선택까지 포함된 복잡한 FFmpeg 명령어를 자연어 설명만으로 한 번에 생성함.

8️⃣ 자막 추가 — 안 되면 우회한다 - 모션그래픽 풀스크린 + 아바타 PIP 구간에 자막 추가를 시도함. - `모션그래픽 풀스크린 + 아바타 PIP 구간에 자막을 넣어줘`라고 요청함. - Mac의 FFmpeg에 자막 필터(libass, drawtext)가 설치되어 있지 않아 문제가 발생했으나, Claude Code가 Remotion 쪽에서 자막을 직접 영상에 번인하는 방식으로 우회하여 해결함. - `자막, 흰색 배경에 텍스트는 검정색으로 해줘`, `0:41-0:46 자막이 너무 길어. 세 개로 나눠줘.` 프롬프트를 통해 자막 스타일 및 분할을 세부 조정함.

📚 21기 교육앱만들기

✍️ 처음 도전해 본 구글 AI 스튜디오 앱 만들기

공대언니

하려던 것 📝

• 중고등학생 대상 QA 교육용 퀴즈 웹앱을 개발한 사례

• 중고등학생들에게 앱 개발 경험을 제공하고 QA 관련 교육용 퀴즈 앱을 제작하고자 함.

• 지난 발표에서 구글 AI 스튜디오 사용을 권유받아 웹 페이지보다는 앱에 가까운 형태로 만들기를 희망함.

• QA 관련 퀴즈 기능을 포함하며, 사용자가 정답 시 피드백과 함께 다음 단계로 진행할 수 있는 교육용 앱을 개발하고자 함.

활용한 툴 ⚒️

• Google AI 스튜디오: HTML, CSS, JavaScript를 포함하는 단일 파일 QA 교육용 퀴즈 앱 코드 생성 및 수정.

진행 세부 내용 🔍

• 1️⃣ 초기 퀴즈 앱 개발 요청

• 시도한 방법과 접근 방식: 구글 AI 스튜디오에 HTML 단일 파일로 구성된 QA 교육용 퀴즈 앱 개발을 요청함.

• 사용한 프롬프트나 코드: '첫번째 페이지: 타이틀 \\'버그 마스터\\' 하단에 start 버튼, 두 번째 페이지: 퀴즈 문제가 나오는데 QA 관련 퀴즈. 예시: 다음의 설명으로 올바른 것은? 장애에서부터 결함, 원인을 찾는 활동을 무엇이라고 하는가? 버튼 총 3개 1\\. 정적 테스팅 2\\. 동적 테스팅 3\\. 탐색적 테스팅 정답은 2, 맞추면 정답입니다! 하고 팡파레가 나오는 교육앱을 개발해줘. html 단일 파일이면 좋겠어.'

• 얻은 결과나 피드백: '버그 마스터' 타이틀과 START 버튼이 있는 시작 페이지, QA 퀴즈 문제가 제시되는 퀴즈 페이지가 생성됨. 정답 시 '정답입니다!' 메시지와 팡파레 효과가 나타나는 기능이 구현됨. 단일 HTML 파일로 깨끗한 카드 타입 UI와 반응형 레이아웃이 적용된 코드를 받음.

• 2️⃣ 내비게이션 기능 추가 요청

• 시도한 방법과 접근 방식: 초기 생성된 앱에 홈으로 돌아가거나 다음 문제로 넘어가는 내비게이션 버튼이 없음을 인지하고, 해당 기능을 추가해달라고 요청함.

• 사용한 프롬프트나 코드: '정답 화면에 home로 돌아가는 버튼과 다음으로 넘어가는 버튼이 있어야 할 것 같아. 추가해줄 수 있을까?'

• 얻은 결과나 피드백: 'quizData' 배열을 활용한 동적 퀴즈 시스템이 추가되어 3개의 예시 문제가 관리됨. 정답 시 '홈으로' 및 '다음 문제' 버튼이 애니메이션과 함께 나타나며, 오답 시 버튼 색상 변경 및 '다시 시도' 메시지 피드백이 제공되는 기능이 업데이트됨. 모든 문제를 풀면 알림 메시지 후 홈으로 돌아가는 기능도 구현됨.