한줄 요약
50페이지 넘는 교육 제안서의 레이아웃 구조화와 레퍼런스 정리를 Claude Code로 이틀 만에 끝냈습니다.
이런 분들께 도움돼요
내용은 다 나왔는데 PPT 구조 잡는 데만 며칠 걸리는 분
과거 제안서/레퍼런스 자료가 폴더에 쌓여 있는데 정리할 시간이 없는 분
Claude Code로 개발 말고 뭘 할 수 있는지 궁금하신 분
소개: 시도하고자 했던 것과 그 이유
문제 상황 (Before)
제안서를 만들 때 진짜 시간이 걸리는 건 내용 작성이 아니라 PPT 구조화입니다.
이번에 50페이지가 넘는 교육 제안서를 만들어야 했습니다. 여러 교육 영역 × 여러 난이도 레벨로 구성된 복잡한 과정 구조. 내용은 다른 PM이 작업하고, 저는 디자인을 담당하는 분업 구조였습니다.
PM이 넘겨준 Word/PDF에 내용은 다 들어있었습니다. 문 제는 그 다음이었죠.
PPT 구조화에 걸리는 시간:
어떤 내용을 한 슬라이드에 넣을지, 어떻게 배치할지 결정 → 이게 제일 오래 걸림
영역별, 레벨별 구분이 한눈에 들어오면서도 통일감 있는 레이아웃 설계
2페이지에 걸친 내용을 1장으로 합칠지, 표를 시각화할지 같은 구조적 판단
PPT 템플릿 사이트에서 괜찮은 거 골라와서 50페이지 넘게 하나하나 적용
보통 이 과정만 2~3일은 잡아야 했습니다.
레퍼런스 정리에 걸리는 시간:
또 하나 시간 잡아먹는 게 레퍼런스 정리입니다. 이전에 만들었던 제안서, 참고 자료, 강의계획서 등이 폴더에 10개 넘는 파일로 쌓여 있었습니다. 이전 고객사 제안서, 워크숍 결과보고서, RFP 문서 등등. 이걸 하나하나 열어서 "이번 제안에 쓸 수 있는 레퍼런스가 뭐가 있지?" 정리하는 것만으로도 반나절은 가볍게 날아갑니다.
시작하게 된 계기
"레이아웃 시안을 빠르게 여러 개 뽑아보고 비교할 수 있으면 좋겠다" — 이 생각이 Claude Code를 열게 만들었습니다. HTML로 목업을 만들면 브라우저에서 바로 확인할 수 있으니까, PPT에서 드래그하며 삽질하는 것보다 훨씬 빠를 거라는 판단이었습니다.
진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
사용한 도구
Claude Code (Claude Opus 4.6, VS Code 확장)
결과물 형태: HTML/CSS 목업 → PPT 작업 시 참조
보조 도구: Poppler (PDF 읽 기용)
AI와 협업한 과정
1. 디자인 방향 잡기 — "4가지 질문으로 10분 만에 결정"
상황: 50페이지 넘는 제안서의 디자인을 어디서부터 시작해야 할지 막막했습니다.
이렇게 요청했어요:
제안 요청서를 바탕으로 제안서를 작성하고 있어. 내용은 나왔고, 이제 제안서 디자인을 해야 해. 전체적인 키 디자인을 정하고, 각 슬라이드별 레이아웃을 정해야 하는데, 어떻게 진행하면 좋을까?
결과: Claude가 4가지 질문을 던졌습니다 — 작업 도구, 기대하는 결과물, 키 컬러 방향, 전체 톤앤매너. 선택지를 주니까 고민 없이 바로 답할 수 있었고, 10분 만에 디자인 방향이 결정됐습니다.
바로 첫 번째 HTML 목업이 나왔습니다. 표지, 간지, 교수설계 방향, 커리큘럼, 인력 프로필 등 6가지 핵심 슬라이드 유형에 컬러 팔레트(딥 네이비 + 틸 그린 + 코랄 오렌지)까지, 브라우저에서 바로 확인할 수 있었습니다.
느낀 점: PPT를 열기도 전에 전체 레이아웃 구조가 잡혔다는 게 신기했습니다. 보통은 빈 슬라이드 앞에서 한참 고민하는데, HTML 목업으로 먼저 보니까 "이 방향이 맞나?" 판단이 빨라졌습니다.
2. 레퍼런스 자동 정리 — "폴더 던지니까 알아서 읽고 정리해줬다"
상황: 프로젝트 폴더 안에 레퍼런스/ 폴더가 있었습니다. 이전 제안서, 강의계획서, 워크숍 결과보고서 등 10개 넘는 파일이 들어있었는데, 하나하나 열어서 "이번 제안에 활용할 수 있는 내용 이 뭔지" 파악하려면 반나절은 걸리는 작업이었습니다.
결과: Claude Code가 프로젝트 폴더를 읽으면서 레퍼런스 폴더의 PDF들도 함께 읽었습니다. 별도로 "이거 정리해줘"라고 요청하지 않았는데, 제안서 작업을 하면서 자연스럽게 관련 레퍼런스를 참조하고, 이전 프로젝트에서 활용할 수 있는 내용 — 교육 사례, 운영 실적, 강사 정보 등 — 을 자동으로 뽑아서 레퍼런스 카드 형태의 HTML로 정리해줬습니다.
느낀 점: 레퍼런스 정리는 제안서 작업에서 가장 지루하면서도 빠뜨리면 안 되는 작업입니다. 이걸 AI가 폴더를 통째로 읽고 알아서 정리해준다는 건, 단순히 시간 절약을 넘어서 "빠뜨리는 레퍼런스 없이 다 챙길 수 있다"는 의미였습니다.
3. 레이아웃 구조화 — "2페이지를 1장으로, 표를 프로세스 플로우로"
상황: PM이 작성한 내용 중, 핵심 교수설계 전략이 PDF에서 2페이지에 걸쳐 있었습니다. 내용이 중요한데 2장으로 나뉘어 있으니 임팩트가 떨어졌습니다.
이렇게 요청했어요:
PDF [페이지]이랑 [페이지] 합쳐서 하나의 장표로 구성할 수는 없을까? 이 부분이 상당히 중요한데
결과: 좌측에 전략 카드, 우측에 레벨별 계단형 비교 카드를 배치한 통합 레이아웃이 나왔습니다. 정보량은 동일한데 전달력이 확 올라갔습니다.
강사 양성전략도 마찬가지였습니다. 딱딱한 표 형태를 4단계 프로세스 플로우(준비→교육→심화→안착)로 시각화해달라고 요청했습니다.
이렇게 요청했어요:
이 내용을 조금 시각화해서 표현해줄 수 있을까?
이 한마디로 표가 브랜드 컬러가 적용된 프로세스 플로우로 바뀌었습니다. "이 내용을 어떤 구조로 보여줄까"라는 판단을 AI와 함께 하니까, 혼자 고민할 때보다 선택지가 많아졌습니다.
4. 시안 비교 — "레퍼런스 이미지 던지고 대안 뽑기"
상황: 첫 시안이 괜찮았지만, 다른 방향도 보고 싶었습니다.
이렇게 요청했어요:
다른 시안도 몇개 보면 좋을 것 같아. 첨부된 이미지를 바탕으로 몇개 시안을 더 준비해줘
레퍼런스 이미지 3장을 첨부하면서 각각의 특징만 짚어줬습니다. Claude가 각 스타일을 분석해서 3가지 대안을 만들어줬고, 브라우저에서 원본과 나란히 비교했습니다.
결론은 원래 시안이 가장 좋았습니다. 하지만 비교해보지 않았으면 확신을 못 했을 겁니다.
인상적이었던 순간
"오!" 했던 순간: 레퍼런스 폴더를 따로 정리해달라고 한 적이 없는데, Claude가 제안서 작업 중에 자연스럽게 이전 제안서의 교육 사례, 운영 실적을 참조해서 레퍼런스 카드로 정리해준 순간. "아, 이게 AI한테 폴더를 통째로 주는 것의 장점이구나" 싶었습니다.
결과와 배운 점
Before vs After
항목
Before
After
PPT 레이아웃 구조 잡기
2~3일 (빈 슬라이드에서 고민)
이틀 만에 50장 넘는 전체 구조 완성
레퍼런스 정리
반나절 (10개 넘는 파일 하나하나 열어보기)
자동 읽기 + 카드 정리
시안 비교
머릿속으로 상상
브라우저에서 즉시 비교
콘텐츠 구조 판단
혼자 고민
AI와 함께 대안 탐색
디자인 가이드
없음 (매번 감으로)
컬러/폰트/레이아웃 문서화
결과물
HTML 목업 10개 (전체 레이아웃, 시안 비교, 표지, 교수설계방향 2버전, 레퍼런스 카드)
디자인 가이드 문서 1개
작업 정리 문서 1개
배운 점과 나만의 꿀팁
효과적이었던 것
HTML 목업으로 PPT 전에 구조를 잡는 방식. PPT에서 드래그하며 레이아웃을 잡는 대신, HTML로 먼저 전체 구조를 확정하고 PPT로 옮기는 순서가 훨씬 빨랐습니다. PPT는 "어떻게 배치할까" 고민하는 도구가 아니라 "확정된 구조를 구현하는" 도구가 됩니다.
프로젝트 폴더를 통째로 주기. 레퍼런스 파일을 하나씩 던져주는 게 아니라, 프로젝트 폴더 전체를 Claude Code가 읽게 하니까 맥락을 알아서 파악합니다. "이전 제안서에서 이 부분을 참고할 수 있겠다"는 판단까지 AI가 해줍니다.
구조적 판단을 AI와 함께 하기. "이 2페이지를 1장으로 합칠 수 있을까?", "이 표를 시각화해줘", "색상 대신 도형으로 구분하면 어때?" 같은 구조적 질문을 던지면, AI가 대안을 제시해줍니다. 혼자 고민하면 한 가지 방법밖에 안 떠오르는데, 여러 선택지를 빠르게 볼 수 있습니다.
시안을 여러 개 뽑아서 비교하기. 한번에 완성하려 하지 말고, 레퍼런스 이미지를 던지면서 "이것도 해보고 저것도 해봐"라고 하면 됩니다. 비교하는 과정 자체가 디자인 품질을 높여줍니다.
이렇게 하면 안 돼요
HTML 목업이 최종 결과물은 아닙니다. 결국 PPT로 옮기는 작업은 필요합니다. HTML은 "이렇게 만들자"의 설계도이지, 납품물이 아닙니다.
AI가 넣어준 내용을 검증 없이 쓰지 마세요. 교육학 용어를 임의로 바꾸는 것처럼, AI가 "더 좋은 표현"으로 원본을 수정하는 경우가 있습니다. 반드시 원본과 비교 확인하세요.
처음부터 전체 페이지를 한번에 요청하지 마세요. 핵심 슬라이드 6종으로 디자인 시스템을 먼저 잡고, 그 다음 전체로 확장하는 게 효율적입니다.
과정 중 시행착오
Claude가 교수설계방향 내용에서 원본 용어를 교육학적으로 "더 좋은" 용어로 바꿔버린 것이 가장 큰 시행착오였습니다. 원래 원본이 있는 작업에서는 "PDF 원본 용어를 그대로 사용해"라고 명시적으로 지시해야 합니다. 다만, 이 시행착오 덕분에 원본 버전과 보완 버전을 나란히 비교하는 더 좋은 워크플로우를 발견하게 됐습니다.
앞으로의 계획
PPT 자동 생성도 가능하지 않을까?
