강의 내용을 단일 HTML 교안으로 개발했다.
이번 강의의 핵심은 AI에게 좋은 답을 얻는 방법에만 머물지 않는다. 프롬프트와 컨텍스트를 넘어, AI가 반복적으로 일을 수행할 수 있는 절차와 지식 구조를 만드는 방법을 다룬다.
프롬프트 → 컨텍스트 → 바이브코딩 → 하네스·에이전틱 엔지니어링
왜 HTML 교안으로 만들었을까?
마크다운은 내용을 빠르게 기록하고 수정하기에 좋다. 하지만 강의 현장에서는 핵심 개념을 비교하거나, 단계별 내용을 선택해서 보여주고, 관련 실습 페이지로 이동할 수 있는 시각적인 교안이 유용하다.
이번 결과물은 다음 조건을 기준으로 제작했다.
별도의 설치 과정 없이 브라우저에서 바로 실행할 것
하나의 HTML 파일만으로 작동할 것
PC와 모바일 화면에 모두 대응할 것
강의 내용을 단순히 나열하지 않고 구조적으로 보여줄 것
수업 중 필요한 외부 실습 자료로 바로 이동할 수 있을 것
교안에서 다루는 핵심 내용
1. Markdown, Skill, LLM-Wiki의 차이
세 개념은 서로 경쟁하는 기술이 아니라 다른 층위를 설명한다.
개념
역할
한마디로
Markdown
텍스트를 구조화하는 경량 서식 문법
저장하는 형식
Skill
AI가 특정 작업을 수행할 때 따르는 절차 지침
실행하는 절차
LLM-Wiki
AI가 지식을 계속 축적하고 연결하는 관리 패턴
축적하는 구조
관계로 정리하면 Markdown은 위키 페이지를 저장하는 형식이고, Skill은 위키를 만들고 유지하는 방법을 정의한 절차서다. LLM-Wiki는 이 둘을 활용해 AI가 지식을 누적하고 연결하는 전체 패턴이다.
2. LLM-Wiki의 3계층 구조
LLM-Wiki는 다음 세 계층으로 구성된다.
원본(Raw)
사람이 입력한 자료다. AI는 읽을 수 있지만 원본을 직접 수정하지 않는다.위키(Wiki)
AI가 요약, 개념, 엔티티, 비교 페이지 등을 만들고 갱신하는 공간이다.스 키마(Schema)
위키의 구조와 규칙, 작업 흐름을 AI에게 알려주는 설정 문서다.
핵심 원칙은 간단하다.
원본은 보존하고, 해석은 위키에 쌓고, 운영 규칙은 스키마로 관리한다.
3. 좋은 Skill을 만드는 다섯 가지 질문
좋은 Skill은 단순한 프롬프트 모음이 아니다. 다음 다섯 가지 조건을 분명하게 정의해야 한다.
언제 사용하는가?
Skill이 실행되어야 하는 상황과 실행하지 말아야 하는 경계를 정한다.무엇이 필요한가?
작업을 시작하기 위해 필요한 입력 자료와 조건을 지정한다.어떤 순서로 처리하는가?
판단 기준과 예외 처리를 포함해 재현 가능한 작업 순서를 만든다.결과는 어떤 모양인가?
제목, 항목, 파일 형식 등 사용자가 받을 결과의 형태를 정한다.언제 완료되는가?
결과 검증 기준과 입력이 부족할 때 표시할 내용을 정의한다.
HTML 교안에서는 이 다섯 가지 조건을 버튼으로 선택하며 확인할 수 있도록 인터랙티브 탭으로 구현했다. (지아코모님 강의 자료 참고)
자동화의 목적
자동화가 필요한 가장 현실적인 이유는 일이 많기 때문이다. 그러나 자동화의 최종 목적은 단순히 편해지는 것이 아니다.
자동화는 중요한 일에 집중하기 위해 시간의 밀도를 높이는 것이다.
규칙이 명확하고 반복되는 작업, 입력과 출력이 정해진 변환 작업은 자동화하기 좋다. 반면 외부에 즉시 공개하거나 발송하는 작업, 플랫폼 정책에 영향을 받는 작업, 책임 있는 판단이 필요한 작업은 사람이 마지막으로 확인하는 구조가 필요하다.
블로그 자동화 실습 연결
교안에는 블로그 키워드 분석기로 이동하는 버튼을 넣었다.
관심 분야인 절약을 중심으로 필요한 마인드와 실천 과제를 분석하고, 블로그 콘텐츠 아이디어를 탐색할 수 있다.
아직은 매우 단순한 상태...
타이프리스 활용 예시
타이프리스는 키보드로 입력하는 대신 음성으로 초안을 만들 수 있는 AI 받아쓰기 도구다. 단순히 음성을 글자로 바꾸는 것을 넘어, 말한 내용을 이메일이나 메시지에 어울리는 자연스러운 문장으로 다듬어 준다.
예를 들어 다음과 같이 말할 수 있다.
내일 회의 참석 어렵다고 정중하게 답장 써줘.
그러면 다음과 같은 형태의 문장으로 정리할 수 있다.
안녕하세요. 내일 예정된 회의에는 부득이하게 참석이 어려울 것 같습니다. 양해 부탁드립니다.
구현된 기능
완성된 단일 HTML 교안에는 다음 기능이 포함되어 있다.
강의 흐름을 보여주는 반응형 첫 화면
Markdown, Skill, LLM-Wiki 비교 카드
LLM-Wiki 3계층 구조 시각화
좋은 Skill의 다섯 가지 조건을 살펴보는 인터랙티브 탭
자동화가 적합한 일과 사람의 확인이 필요한 일 비교
블로그 키워드 분석기로 이동하는 실습 버튼
타이프리스의 입력과 결과 비교 예시
라이트·다크 화면 전환
현재 읽고 있는 위치를 보여주는 스크롤 진행 표시
PC와 모바일을 지원하는 반응형 레이아웃
CSS와 JavaScript는 HTML 내부에 포함했다. 외부 프레임워크나 라이브러리를 사용하지 않아 파일 하나만 보관하거나 전달해도 실행할 수 있다.
결과물
원본 강의 노트:
Day06.md단일 HTML 교안:
1410_AIAgentMaster_day06.html
HTML 파일을 브라우저로 열면 별도의 서버나 설치 없이 바로 사용할 수 있다.
마무리
이번 작업은 마크다운으로 기록한 강의 자료를 단순히 웹페이지로 변환한 것이 아니다. 강의의 논리 구조를 다시 정리하고, 학습자가 개념을 비교하고 단계적으로 탐색할 수 있는 인터랙티브 교안으로 재구성한 작업이다.
AI와 협업하는 방식도 이와 비슷하다. 한 번의 좋은 답을 얻는 것보다 중요한 것은, 필요한 입력과 절차, 결과 형식, 완료 조건을 정의해 AI가 안정적으로 일을 수행할 수 있는 구조를 만드는 것이다.
