사용자와 함께 만드는 카드뉴스 에이전트
AIFFEL 메인 퀘스트 '사용자와 함께 만드는 카드뉴스 에이전트'를 강의 따라하기 순서대로 구현하고, 지원사업·공모전 마감 카드뉴스로 확장한 학습일지입니다.
10월 23일부터 26일까지 AIFFEL 메인 퀘스트 “사용자와 함께 만드는 카드뉴스 에이전트”를 진행했다. 방향과 결정, 결과 확인은 내가 했고 코드 작성과 실행은 Claude Code가 했다. 결과물은 card-news-agent 저장소에 있다. 실제로 만든 카드는 저장소 README의 “만든 카드 예시”에서 볼 수 있다.
이 퀘스트의 핵심
주제를 넣으면 AI가 알아서 카드뉴스를 끝까지 만드는 앱이 아니다. AI가 조사하고 판단한 것을 사람이 고르고, 승인하고, 고칠 수 있게 하는 앱을 만드는 것이 목표다. 그래서 흐름 곳곳에 사람이 결정하는 자리가 있다.
| 단계 | AI가 하는 일 | 사람이 하는 일 |
|---|---|---|
| 조사 | 최근 7일 소식 후보 7-12개, 출처·게시일 | 후보 1-3개 고르기 |
| 심층 조사·편집 판단 | 원문 확인, 독자·형식·후킹 제안 | 질문이 나오면 답하기 |
| 스토리보드 | 카드 5-8장 기획 | 변경 요청 또는 승인 |
| 제작 | 배경 그림(agy), 글자 올리기 | 검수, 카드 골라 고치기 |
| 내보내기 | PNG·ZIP·출처 기록, 다시 열어 검사 | 최종 승인, “확인 필요” 항목 확인 |
이 앱에는 AI가 세 종류 들어간다. 조사·편집은 Claude CLI, 배경 그림은 agy(Antigravity CLI), 그리고 앱 자체를 만든 것은 Claude Code다.
강의 따라하기 순서와 이 글의 대응
강의 따라하기는 STEP 0부터 14까지로 나뉜다. 아래 표에서 STEP마다 한 일을 정리했고, 본문은 번호 없이 주제별로 썼다.
| 따라하기 STEP | 한 일 | 날짜 |
|---|---|---|
| 0-3. 시작 전, 형식 고르기, 설계 키트, PRD | 카드 형식 두 개(목록형·이야기형), 첫 결정 D1-D9, PRD 반영 | 10/23 |
| 4. 화면 먼저 만들기 | 모의 엔진으로 전체 화면 흐름 | 10/23 |
| 5. 실제 엔진 연결 | Claude CLI 연결(sonnet, effort medium) | 10/23 |
| 6. 질문과 재개 검증 | 새로고침·두 번 클릭·지난 질문·서버 재시작 상황 재현 | 10/23 |
| 7. 스토리보드와 이미지 | agy 그림, 실패하면 Claude CLI SVG로 대신 | 10/23 |
| 8. 글자 넣기와 미리보기 | HTML/CSS + Chromium으로 글자 올리기, 가독성 점검 | 10/23 |
| 9. 부분 수정과 내려받기 | 카드 골라 고치기, 최종 승인, ZIP, 내보낸 파일 검사 | 10/23 |
| 10. ‘AI 최신소식’ 제작과 검수 | 실제로 세 번 제작 | 10/25-10/26 |
| 11-12. 짝과 교차 검수, 참고 구현 비교 | 이 기록에는 결과를 남기지 않았다 | - |
| 13. 나만의 워크플로로 확장 | 지원사업·공모전 마감 카드뉴스 | 10/26 |
| 14. 제출 | README 카드 예시까지 정리, 나머지는 진행 중 | 10/26 |
내가 정한 것과 AI가 정한 것
결정은 DECISIONS.md에 D1부터 D21까지 남겼다. 내가 정한 것과 AI가 제안한 것을 나눠 적는 것이 규칙이었다. 내가 정한 것 중 AI 추천과 달랐던 것은 두 가지다.
- 실행 엔진(D2): AI는 Claude Agent SDK를 추천했고, 나는 Claude CLI를 골랐다. 그래서 질문이 나오면 CLI가 끝나고, 답을 받으면 저장한 세션 ID로
--resume해서 이어가는 구조가 됐다. - 글자 렌더러(D8): AI는 Pillow를 추천했고, 나는 HTML/CSS를 헤드리스 브라우저로 찍는 방식을 골랐다. 미리보기와 결과물이 같은 HTML을 쓴다.
그 밖에 내가 정한 것:
- 카드 크기 1080×1350(세로 4:5), 글꼴 Pretendard.
- 카드 형식 가설: 목록형은 빠르게 훑고 싶은 독자, 이야기형은 AI를 처음 접하는 독자. AI가 둘을 비교해 하나를 추천한다.
- 제목에 ‘최신’을 쓰려면 조사 기준일과 원문 게시일로 뒷받침해야 한다.
- 엔진이 실제로 열어 본 출처만 “열어 봄”으로 표시하고, 공식 출처인데 열지 않았으면 “출처 미확인” 배지를 붙인다(D12).
- 조사 기간 밖 후보는 빼고 이유를 보여 준다(D13).
- 그림체는 잡지 화보 같은 정물 사진(D17).
실제로 만들며 생긴 문제와 고친 것
| 문제 | 고친 것 |
|---|---|
| 조사 출처가 대부분 블로그였다(14개 중 12개) | 공식 → 논문 → 언론 → 블로그 순서로 찾게 지시. 공식·논문 출처가 있는 후보가 0/9에서 3/7로 |
| 엔진이 열어 보지 않은 주소가 “공식” 출처로 보였다 | 엔진 로그에서 WebFetch가 2xx로 연 주소만 “열어 봄”으로 인정 |
| 조사 기간 밖 소식이 후보에 섞였다 | 앱이 게시일로 걸러 빼고 이유 표시 |
| 서버를 꺼도 조사 중이던 claude 프로세스가 남아 계속 돌았다 | 작업 프로세스가 끝날 때 claude·agy까지 함께 끝내게 |
agy가 그림을 안 만들고도 SUCCESS를 돌려줬다(그리기 전에 ls -la를 시도하다 막힘) | 지시문에 “명령을 실행하지 말고 이미지 도구만” 줄을 넣고 다시 만들어 성공 |
| 날짜 검사가 기사 게시일만 보고 통과를 줬다 | 1차 자료로 확인한 공식 발표일이 없으면 ‘확인 필요’ |
| 엔진이 기사를 열지 않고 검색 요약만으로 사실을 적었다 | 화면과 검사에서 ‘엔진이 열어 보지 않음’으로 표시 |
내보낸 파일 검사는 확인하지 못한 것을 통과로 적지 않는다. 예를 들어 카드 문구가 원문과 맞는지는 앱이 판단할 수 없어서, 항상 ‘사용자 확인 필요’로 남는다. AI 최신뉴스 카드에서 Google Cloud 블로그의 날짜가 ‘확인 필요’로 나왔을 때는 내가 원문을 열어 10월 22일인 것을 확인했고, 그 뒤 심층 조사에서 찾은 1차 자료의 공식 발표일을 연결하도록 고쳤다.
실제로 만든 카드뉴스
| 주제 | 독자·형식 | 결과 | 내보낸 파일 검사 |
|---|---|---|---|
| AI 최신소식 | AI를 처음 접하는 대학생, 이야기형 | 7장 | 통과 18 · 실패 0 · 확인 필요 13 |
| AI 최신뉴스 | AI 소식을 빠르게 훑고 싶은 직장인·개발 입문자, 목록형 | 7장 | 통과 29 · 실패 0 · 확인 필요 4 |
| 국내 반도체 최신뉴스 | 이번 주 소식을 빠르게 훑고 싶은 일반 독자, 목록형 | 6장 | 통과 20 · 실패 0 · 확인 필요 8 |
나만의 워크플로로 확장: 지원사업·공모전 마감 카드뉴스
확장 주제는 내가 골랐다. 대학생과 예비 창업자가 지원할 수 있는 지원사업·공모전·해커톤을, 오늘부터 6개월 안의 공고로 모아 마감과 금액을 한눈에 보는 카드뉴스다. 공고가 여러 사이트에 흩어져 있어 마감을 놓치기 쉽다는 이유였다.
내가 정한 것:
- 기간은 오늘부터 6개월. 지금 지원 가능과 곧 열릴 예정 두 묶음으로 나눈다.
- 대상은 대학생·일반인 예비 창업자가 지원할 수 있는 모든 지원사업과 공모전(해커톤 포함).
- 금액이 큰 것, 주목받는 것을 앞에 둔다.
- 공고 하나에 카드 한 장.
- 상시 모집·예산 소진 시 마감 공고는 “지금 지원 가능”에 넣는다.
기존 앱을 새로 만들지 않고 시작 화면에서 [최신 소식]/[지원사업·공모전]을 고르게 했다. 바뀐 것은 엔진 지시문, 후보 형식, 기간 거르기, 카드 정리, 검사 규칙이다. 그림·글자·검수·내보내기는 그대로 쓴다.
- D-day는 엔진이 적은 숫자를 쓰지 않고, 글자를 올리는 날 기준으로 앱이 계산한다.
- 공고 카드의 대상·마감·신청 세 줄은 공식 공고문을 다시 열어 확인한 결과로 앱이 채운다.
- 검사에 마감일·D-day·금액·예정 공고 항목을 더했다. 엔진이 공식 공고문을 실제로 열었을 때만 통과다.
구현 뒤 독립 검토를 한 번 더 받았다. 결함 7건이 나왔다. 그중에는 카드 문구를 고치면 D-day가 옛 값으로 남는 문제, 금액 검사가 엔진이 낸 값끼리만 비교하는 문제, 모음 사이트 주소가 공식 주소로 인정되는 문제가 있었다. 모두 고쳤고 자동 테스트는 194개가 통과했다.
두 번 실행해 보기: 기대와 반대로 나왔다
| 입력 | 기대 | 실제 |
|---|---|---|
| 대학생·예비 창업자를 위한 IT·AI·콘텐츠 지원사업과 공모전·해커톤 | 후보 7-12개 | 후보 2개, “분야나 지역을 넓혀서 다시 찾을까요?” 질문 |
| 제주에서 열리는 우주 게임 1인 창업 지원사업 | 넓히기 질문 | 질문 없이 6개. 그런데 주제와 맞지 않는 공고(팁스 등)가 섞였다 |
자료가 부족한 입력에서 엔진이 스스로 범위를 넓혀 버려서, “맞는 공고가 적다”는 사실이 드러나지 않았다. 다음에는 주제에 바로 맞는 공고만 찾게 하고, 후보마다 주제에 맞는지 표시를 받아 앱이 따로 세게 할 계획이다. 이 재실행은 아직 하지 않았다.
그림이 갑자기 평면 2D가 된 일
내가 직접 지원사업 카드를 만들어 봤는데 그림이 이전 카드들과 달리 평면적이었다. 원인은 agy의 그림 모델 할당량이 바닥난 것이었다. agy는 그림을 만들지 못하고도 SUCCESS를 돌려줬고, 앱은 새 그림 파일이 없으니 정해 둔 대로 Claude CLI SVG로 대신 그렸다. 국내 반도체 카드 5·6장도 같은 이유로 SVG였다.
할당량은 19:15에 풀렸다. 19:20에 다시 그리는 예약을 걸었지만 컴퓨터가 잠들어서 끝나지 않았다. 21시 넘어 직접 다시 실행했다. 지원사업 5장, 반도체 5·6장을 모두 agy 그림으로 다시 만들고, 두 프로젝트를 다시 최종 승인해 내보냈다.
| 프로젝트 | 내보낸 파일 검사 |
|---|---|
| 지원사업·공모전(5장) | 통과 24 · 실패 0 · 확인 필요 4 |
| 국내 반도체 최신뉴스(6장) | 통과 20 · 실패 0 · 확인 필요 8 |
지원사업 3번 카드 본문에 신청 사이트 주소가 들어가 있어서, 카드에 링크 주소를 쓰지 않는다는 PRD 규칙에 맞춰 뺐다.
저장소를 분리했다
처음에는 aiffel_work 저장소 안의 폴더였다. 26일에 카드뉴스 앱만 독립 공개 저장소 card-news-agent로 분리했다. 로컬 폴더 위치는 그대로 두고, GitHub에서만 따로 관리한다.
아직 남은 것
- 확장 작업의 조사 지시문 보완과 두 입력 다시 실행
- 제출 정리: 검증 기록 최신화, 실행 화면 캡처
- 시작 화면의 작업 종류 선택칸에 이름표가 없어 헷갈린다. 고치기 전까지 README에 고르는 법을 적어 두었다.
정리
- AI가 판단하고, 사람이 고르고 승인하는 흐름을 처음 설계부터 확장까지 구현했다.
- 엔진·렌더러 선택처럼 AI 추천과 다르게 정한 것도 결정 기록에 남겼다.
- 엔진 결과는 그대로 믿지 않고 앱이 한 번 더 걸렀다: 출처 열람 여부, 조사 기간, 공식 발표일, D-day.
- 확인하지 못한 것은 통과로 적지 않고 ‘확인 필요’로 남겼다.
- 실제 실행에서 엔진이 결과는 성공이라고 하지만 실제로는 실패한 경우(agy SUCCESS, 범위를 스스로 넓힌 조사)가 있었다. 결과 파일과 로그를 직접 보고 원인을 찾았다.