📬 사다리 AI 레터 17호
안녕하세요, 사다리필름입니다.
5월도 절반이 지났습니다. 가정의 달 행사들이 마무리되고, 슬슬 상반기 결산을 준비해야 하는 시점이 다가오고 있죠. 이맘때쯤 담당자분들 책상 위에는 아직 정리 못 한 기획안 하나쯤은 쌓여 있지 않으신가요.
이번 주 레터에서는
✅ 발표 자료를 PPT 대신 클릭·복사까지 되는 동적 HTML로 만드는 법
✅ AI 이미지·영상에서 캐릭터 표정을 코드 한 줄로 정확하게 바꾸는 FACS 기법 이렇게 2가지를 준비했습니다.
둘 다 이번 주 저희 팀이 직접 현장에서 쓰고 확인한 내용입니다. 바로 써보실 수 있도록 자료도 함께 담았으니, 끝까지 확인해주세요.
담당자 여러분의 업무가 조금이라도 더 수월해지길 바라며, 인사를 마칩니다. 💌
1. 기획자를 위한 AI 레시피 🔦
교재나 가이드북은 꼭 PPT나 문서여야 할까?
이번 주 수요일, 사다리필름의 AI 교육팀 사다리스쿨은 국토부 실국장분들을 대상으로 한 리더십 워크샵에서 "AI로 의사결정 하는 법과 에이전트 만드는 법"에 대한 강의를 진행하고 왔습니다.
이번 강의를 위해 저희는 실무 봇을 7개 준비해갔는데요. 각 봇이 만들어낼 수 있는 산출물, 봇의 구조, 활용 시나리오까지 담다 보니 자료가 꽤 많아졌습니다.
문제는 거기서 생겼습니다.
봇 하나당 설계 문서가 3~4개씩 딸려있으니, 7개면 최소 20개 넘는 문서를 화면에 띄워가며 설명해야 한다는 것. "이 봇은 이렇게 생겼고, 이 산출물을 만들 수 있고, 이 프롬프트를 쓰면 되고…" 이렇게 가다가는 강의가 아니라 문서 탐방이 될 판이었죠. 그리고 지루한 강의는, 아무리 좋은 내용을 담아도 기억에 남지 않습니다.
그래서 저희가 이번에 도입한 것이 "동적 HTML 교재"입니다.
동적 HTML가 뭔데?
동적 HTML 문서가 뭘까요? 한마디로 클릭하고, 펼치고, 복사할 수 있는 — 반응하는 웹 문서입니다. 일반 PDF나 PPT는 보기만 할 수 있지만, 동적 HTML은 버튼을 누르고 섹션을 열고 내용을 복사할 수 있습니다.
HTML이라고 하면 웹개발자의 영역이라 생각하시는 분들이 많습니다. 지금은 다릅니다. 클로드에게 시키면 됩니다. 저희가 직접 써보니, 동적 HTML 교재의 강점은 딱 세 가지였습니다.
첫째, 수강자가 직접 클릭하고 탐색할 수 있습니다.
PPT는 발표자가 넘겨줘야만 다음 장을 볼 수 있죠. HTML 교재는 수강자가 직접 버튼을 누르고, 섹션을 열고, 원하는 부분으로 이동합니다. 강의 중 질문이 나오면 해당 화면으로 바로 이동해 보여드릴 수 있어요. 청중의 참여도가 달라집니다.
둘째, 시각화에 압도적으로 강합니다.
탭 구조, 아코디언 메뉴, 색상 구분, 카드형 레이아웃. 복잡한 봇 구조도 한 화면에 깔끔하게 정리할 수 있습니다. 실국장님들이 첫 화면을 보셨을 때 나온 첫 마디가 "이게 PPT예요?"였습니다. 저희는 그 순간, 이미 강의의 반은 성공했다고 느꼈습니다.
셋째, 프롬프트 복사 버튼을 넣을 수 있습니다.
AI 교육의 가장 큰 난관은 "배웠는데 막상 못 씀"입니다. 교재 안에 프롬프트를 삽입하고, 버튼 하나로 복사할 수 있게 만들면 교육장을 나가는 순간부터 바로 실무에 쓸 수 있습니다. PDF나 PPT로는 절대 구현할 수 없는 기능입니다. 그렇다면 어떻게 만드냐고요? 순서가 중요합니다.
✅ STEP 1 | 교육 내용을 먼저 MD 문서로 정리하세요
HTML을 바로 요청하고 싶은 충동을 참으세요. 내용이 틀린 채로 예쁘게 만들어지면, 수정하는 데 두 배의 시간이 걸립니다. 클로드에게 이렇게 요청하세요.
"우리 회사 [주제] 교육용 가이드를 만들려고 해. 아래 내용을 바탕으로 교재 초안을 마크다운(MD) 문서로 먼저 작성해줘. 바로 HTML로 만들지 말고, 내가 내용을 확인할 수 있도록 텍스트 형태로 먼저 줘. [교육 내용 입력]"
클로드가 구조화된 초안을 만들어줍니다. 여기서 내용의 정확성, 순서, 빠진 항목을 직접 확인하세요. 이 단계가 전체 작업의 70%입니다.
✅ STEP 2 | 내용 확인 후, 동적 HTML 변환을 요청하세요
내용 확인이 끝나면 그때 이렇게 요청하세요.
"위 내용을 직접 클릭하고 스크롤해서 볼 수 있는 동적 HTML 교재로 만들어줘. 탭 메뉴와 섹션별 펼치기/접기 기능을 넣고, 프롬프트가 있는 부분에는 복사 버튼도 추가해줘."
결과물은 .html 파일 하나입니다. 파일을 열면 바로 교재가 됩니다. 서버도 필요 없고, 별도 설치도 없습니다.
사내 AI 교육을 준비 중이신 교육 담당자분, 임직원 가이드북을 만들어야 하는 기획 담당자분, 시각화 대시보드가 필요한 보고 자료를 준비 중이신 분. PDF나 PPT 대신 동적 HTML을 한 번 써보세요. 처음 만들어진 결과물을 팀원들에게 보여줬을 때의 반응이, 이 방식을 계속 쓰게 만들 겁니다.
2. "이게 된다고?" AI 영상 실험실 🔬
표정 하나를 코드로 지정할 수 있다면?
AI 이미지와 영상을 만들다 보면 한 번씩 막히는 지점이 있습니다.
캐릭터의 표정입니다.
"살짝 웃게 해줘", "놀란 표정으로", "조금 더 진지하게"
프롬프트로 표정을 바꾸려 하면 결과가 들쑥날쑥합니다. 같은 말을 해도 매번 다른 얼굴이 나옵니다. 원본 캐릭터의 분위기는 유지하면서 표정만 바꾸는 것, 생각보다 훨씬 어려운 작업이었습니다.
저희가 이번 주에 발견한 것은, 그 문제를 해결하는 코드 체계가 이미 존재한다는 사실입니다.
FACS. 얼굴 움직임을 숫자로 정의한 시스템
FACS(Facial Action Coding System)는 원래 심리학 연구에서 나온 개념입니다. 인간의 얼굴 근육 움직임을 AU(Action Unit) 번호로 분류한 체계인데요, 윙크는 AU46, 입꼬리 올리기는 AU12, 눈썹 내리기는 AU4 이런 식으로 표정을 코드화합니다.
저희가 확인한 것은, GPT Image 2.0, 나노바나나, 그록 등 주요 이미지 AI가 이 FACS 코드를 인식한다는 점입니다. 영상 AI도 동일한 규격을 씁니다.
실제로 이렇게 했습니다.
원본 캐릭터 이미지를 업로드한 뒤, 프롬프트에 딱 한 줄만 추가했습니다.
"표정 변경 FACS AU46"
결과물: 원본 캐릭터가 그대로 윙크를 합니다. 얼굴형도, 헤어스타일도, 조명도 바뀌지 않습니다. 표정만 정확하게 바뀝니다.
영상 제작에서 이게 왜 중요한가
AI 영상 제작에서 캐릭터의 감정선을 유지하는 것은 반복 수정이 가장 많이 일어나는 구간입니다.
기존에는 "웃는 표정"을 얻기 위해 프롬프트를 여러 번 바꾸면서 원하는 결과가 나올 때까지 시도해야 했습니다. 캐릭터 일관성이 깨지는 경우도 많았고요.
FACS 코드를 쓰면 달라집니다.
☑️ 표정을 수치로 지정하니 결과물의 예측 가능성이 높아집니다
☑️ 복합 표정도 코드를 조합하면 됩니다 (예: AU6+AU12 = 뺨 올리며 웃는 표정)
☑️ 캐릭터를 바꿔도 동일한 코드로 동일한 감정을 구현합니다
전체 AU 코드 목록(49개)과 감정별 추천 조합표는 아래에서 무료로 받아보실 수 있습니다.
오늘 뉴스레터 어떠셨어요?
아래 버튼을 눌러 의견을 남겨주시면
피드백을 반영해 더 재밌고 유익한 콘텐츠로 찾아올게요. 💌
의견을 남겨주세요