지피터스 스터디에서 경험한 자동화 사례들을 발표할 자리가 생겼습니다.
솔직히 말하면, 발표자료를 안 만들 뻔했습니다. 다들 너무 실력자이신 데다 발표도 잘하시고 — 자료까지 준비하고 오신 분들을 보면서 뒤늦게 정신이 번쩍 들었습니다.
PowerPoint가 익숙했지만, HTML 대시보드 형태로 만들어보기로 했습니다. 닿님께서 직접 HTML 발표자료 만드시는 모습을 공유해주신 적이 있어서 한번 시도해보고 싶었습니다. 나중엔 PPT로도 도전해볼 예정이에요.
과정 — 보여주고, 피드백하고, 다시 만들고
첫 번째 버전이 나왔습니다. 내용은 맞았는데, 뭔가 답답했습니다.
슬라이드 하나에 텍스트가 너무 많았고, 배경이 너무 어두웠습니다. Zoom으로 화면공유를 하면 오히려 집중하기 어려울 것 같았습니다.
"여백이 없어서 한눈에 안 들어와요. 더 크게, 가운데 정렬로 해주세요."
두 번째 버전. 슬라이드가 5개에서 7개로 늘었고, 카드마다 숨이 생겼습니다. 그런데 이번엔 너무 하얗고 평평 했습니다. 집중이 잘 안 되는 느낌.
결국 아이보리 웜톤으로 갔습니다. 크림빛 배경에 따뜻한 포인트 컬러. 눈도 덜 피로하고, 화면공유에서도 훨씬 나아졌습니다.
막힌 부분 — 같은 문제인데, 왜 여기선 안 되지?
텍스트 줄바꿈 문제가 있었습니다.
"Apps Script → Slack 담당자 알림 (연결 예정)" 항목이 두 줄로 깨져서 표시됐습니다. 수정을 요청했고, .li 클래스에 white-space: nowrap을 적용해서 해결됐습니다.
그런데 CASE 3에서도 똑같은 현상이 남아있었습니다.
"CASE 3은 왜 줄바꿈 처리가 안 됐지?"
이유가 있었습니다. CASE 3의 요소들은 .li가 아닌 .pipe-node라는 다른 클래스를 쓰고 있었습니다. 겉으로는 같아 보이는 문제였지만, 내부 구조가 달랐던 것입니다.(사실 무슨 소리인지 잘 모르겠더라구요.)
이건 내가 직접 화면을 보고 짚어주지 않으면 알 수 없는 부분이었습니다.
해결
항목
결과
HTML 발표자료 완성
✅ 7개 슬라이드
아이보리 웜톤 적용
✅ Zoom 공유 최적화
줄바꿈 문제 해결
✅ .li + .pipe-node 모두 처리
불필요한 내용 정리
✅ 사용 도구 카드, 설명 박스 제거
완벽하진 않지만, Zoom으로 발표할 수 있는 수준이 됐습니다.
그리고 한 가지 더 — Opus 이야기
이번 스터디 과정에서 기업 분석 대시보드와 PDF 파일 생성도 도전해봤습니다. 해당 기업정보를 공유하기는 어려운 내용이지만, 확실히 느낀 게 있었습니다.
Claude Opus는 정보력이 상당합니다. 그런데 토큰 사용량도 그만큼 어마어마합니다. 앞으로는 용도에 맞게 조금씩 써봐야겠다고 생각했습니다.
느낀 점
"Claude한테 맡기면 되겠지" — 어느 정도는 맞는 말이었습니다.
내용 분석, 구조 설계, 초안 작성까지는 빠르게 해결됐습니다. 하지만 내가 뭘 원하는지 정확히 말해야 했고, 어디가 왜 이상한지 직접 짚어줘야 했습니다.
화면을 보고 "뭔가 답답하다"는 감각은 제가 가져야 했습니다. 줄바꿈이 깨진 것도, CASE 3이 빠진 것도 제가 발견해야 했습니다.
AI는 제가 본 것을 고쳐줄 수 있지만, 제가 보지 못한 것은 고쳐주지 않았습니다.
그 과정에서 HTML 구조와 CSS가 어떻게 동작하는지 — 물어보지도 않았는데 — 어느 정도 이해하게 됐습니다. 이전 자동화 경험과 똑같은 패턴이었습니다.
이전 사례글처럼 첫 번째 버전의 30분이, 완성본의 아이보리 배경을 만들어줬습니다.
즉, 하다보면 발전한다.
스터디 내내 이끌어주신 닿님, 진심으로 감사드립니다. 🙏
