요약
초보자에게 “Node.js를 설치하세요. 사이트에 가서 초록 버튼 중 왼쪽을 누르고, 다운로드된 파일을 더블클릭하고, Next를 계속 누르고, 명령 프롬프트를 열어서…” 하는 안내문은 길수록 안 읽힌다. 화면이 조금만 달라도 막히고, 막히면 안내문은 답을 못 준다.
연대지능활동가 아카데미 사이트의 실습 메뉴(도구 설치 15단계, 연대지능 개념 7단계)를 이렇게 바꿨다.
- 단계마다 프롬프트 한 덩어리만 보여준다. 학습자는 복사 → 자기 클로드 입력창에 붙여넣기 두 동작만 한다.
- 설명·질문·오류 대응은 학습자의 클로드가 한다. 사이트는 순서와 진행률만 관리한다.
- 다음 단계로는 “다음 →” 버튼으로 넘어간다. 입력창에 “다음”이라고 칠 필요가 없다.
바꾸는 데 걸린 시간은 두 메뉴 합쳐 반나절. 핵심은 코드가 아니라 프롬프트를 어떻게 쓰느냐였다.
왜 이 기술인가
- 활동가 교육에서 가장 많이 막히는 곳은 개념이 아니라 설치·설정이다. 그런데 설치 안내는 운영체제·버전·화면마다 달라 문서로는 못 따라간다.
- 학습자는 이미 클로드(앱이든 Claude Code든)를 쓸 수 있다. 그렇다면 사이트가 설명을 다 하려 들지 말고, 클로드에게 시킬 말을 잘 써서 건네주는 편이 낫다. 클로드는 화면 캡처를 받아 그 사람의 상황에 맞게 답한다.
- 개념 학습도 마찬가지다. 사이트에 긴 설명문을 띄우면 읽지 않는다. 핵심 내용을 프롬프트에 담아 “이걸 쉽게 설명하고, 내가 이해했는지 질문해 줘”라고 시키면 대화가 된다.
단계별 따라하기
1. 단계마다 “프롬프트 한 덩어리”를 쓴다
프롬프트는 학습자가 자기 입으로 하는 말이다. 그래서 1인칭으로, 상황을 먼저 밝히고, 클로드가 어떻게 행동할지 정해 준다. 도구 설치 단계의 예:
나는 컴퓨터 초보자야. 연대지능활동가 아카데미 실습 2단계 "Git 설치 및 설정"을 하려고 해.
먼저 명령 프롬프트에서 node --version 으로 1단계(Node.js)가 잘 됐는지 확인시켜 줘.
그다음 https://git-scm.com 에서 Git을 내려받아 설치하고(설정은 기본값 그대로),
git config 로 내 이름과 이메일을 등록하고, git --version 으로 확인하는 것까지
한 번에 한 가지씩만 알려줘.
내가 "됐어"라고 하면 다음으로 넘어가고, 막히면 화면을 캡처해서 올릴 테니 봐줘.
프롬프트에 넣을 다섯 가지:
| 요소 | 예 | 없으면 생기는 일 |
|---|---|---|
| 내가 누구인지 | ”나는 컴퓨터 초보자야” | 전문가 말투로 답한다 |
| 무슨 단계인지 | ”아카데미 실습 2단계 Git 설치” | 맥락 없이 일반론 |
| 이전 단계 확인 | ”먼저 node —version으로 1단계가 잘 됐는지 확인시켜 줘” | 앞 단계가 안 된 채 진행 |
| 할 일의 고정값 | 주소, 폴더 이름, 명령어, 옵션 | 클로드가 제멋대로 고른다 |
| 진행 규칙 | ”한 번에 한 가지씩”, “됐어라고 하면 넘어가”, “막히면 캡처 올릴게” | 한 번에 열 줄을 쏟아낸다 |
개념 단계는 핵심 내용을 그대로 프롬프트에 넣는다. 그래야 어느 클로드에 붙여넣어도 아카데미가 가르치려는 틀(4원칙, 4역할, 문서 4종 같은 것)에서 벗어나지 않는다. 끝에는 “내가 이해했는지 확인하는 쉬운 질문을 2개만 해줘”처럼 대화가 이어지게 한다.
2. “어디에 붙여넣는지”를 단계마다 표시한다
Claude Code를 설치하기 전 단계(1~5)는 클로드 앱이나 claude.ai에, 파일을 만들거나 GitHub에 올리는 단계는 Claude Code에 붙여넣어야 한다. 이걸 안 적어 주면 “Claude Code가 아직 없는데요”에서 멈춘다. 카드마다 한 줄:
- 붙여넣는 곳: 클로드 앱 또는 claude.ai 대화창 (Claude Code가 아직 없어도 돼요)
- 붙여넣는 곳: Claude Code 대화창 (명령 프롬프트에서 claude 를 입력하면 열려요)
3. 화면에는 카드 하나만 남긴다
카드 구성은 위에서 아래로: 단계 번호와 제목 → 한 줄 설명 → “복사 → 내 클로드 입력창에 붙여넣기 → 다음” 안내 → 붙여넣는 곳 → 프롬프트 → 버튼(프롬프트 복사 / ← 이전 / 다음 →).
옛 화면에 있던 긴 설치 설명, “시작 전 점검” 블록, “완료라고 입력하세요” 문구는 전부 뺐다. 뺀 정보는 프롬프트 안으로 들어갔으니 사라진 게 아니다.
4. 다음 단계는 버튼으로
“입력창에 ‘다음’이라고 쓰세요”는 초보자에게 한 단계 더 어렵다. 버튼을 카드 안과 화면 위 두 곳에 두고, 누르면 진행률을 올리고 다음 카드를 띄운다. 타이핑 경로는 지우지 않고 같은 함수로 보내 두면 둘 다 된다.
작은 함정 하나: “시작” 직후에는 진행 기록이 비어 있어서, “다음” 버튼이 “아직 시작 안 했네” 하고 다시 1단계를 띄울 수 있다. 시작할 때 기록 한 줄을 남겨 두면 해결된다.
5. 복사 버튼은 프롬프트 본문만 복사하게
버튼 글자(“복사”)까지 딸려 가지 않도록 프롬프트 본문을 별도 요소에 넣고 그 요소의 텍스트만 복사한다. 클립보드 API가 막힌 브라우저를 위해 옛 방식(숨은 textarea + execCommand) 폴백을 둔다. 복사 뒤 “복사됨”으로 2초 바뀌었다가 원래 글자로 돌아오게 한다(공용 함수를 빌려 쓰면 “프롬프트 복사”가 “복사”로 바뀌어 버린다).
6. 프롬프트 유인물도 같은 데이터에서 뽑는다
프롬프트를 코드 한 곳(단계 id → 프롬프트 표)에 두면, 사이트 카드와 종이 유인물이 같은 원본에서 나온다. 사이트 코드에서 표만 읽어 마크다운으로 찍는 스크립트 열 줄이면 된다. 문구를 고칠 때 두 군데를 고칠 일이 없다.
7. 반영은 “내 사이트가 어디서 서빙되는지”까지
push하고 빌드가 성공했는데 사이트가 안 바뀌면, 사이트가 GitHub Pages가 아닐 수 있다. curl -I로 Server: 헤더를 본다. 사교원 사이트들은 자체 서버(Caddy)가 서빙하므로 서버에서 배포 스크립트를 한 번 더 돌려야 한다. 확인은 “페이지가 열리나”가 아니라 서버 파일 갱신 시각 + 새 코드 존재 + 라이브 파일과 커밋 대조 세 가지로 한다.
교훈
- 사이트가 설명하지 말고, 학습자의 AI가 설명하게 하라. 사이트는 순서·진행률·프롬프트만 쥔다. 상황 대응은 학습자 옆의 클로드가 캡처를 보며 한다.
- 프롬프트는 학습자의 1인칭 발화다. “나는 초보자야, N단계야, 먼저 앞 단계 확인해 줘, 고정값은 이것, 한 번에 하나씩, 막히면 캡처 올릴게.” 이 다섯 가지가 빠지면 클로드가 제멋대로 간다.
- 개념도 프롬프트에 담긴다. 가르치려는 틀을 프롬프트에 써 두면, 학습자가 어떤 클로드를 쓰든 같은 틀로 배운다.
- 줄이는 것이 설계다. 옛 화면의 정보를 버린 게 아니라 프롬프트로 옮겼다. 화면에 남는 건 초보자가 할 두 동작(복사, 붙여넣기)과 버튼 하나(다음)뿐이어야 한다.
- 원본은 한 곳. 카드와 유인물이 같은 표에서 나오게 하면 문구 수정이 한 번으로 끝난다.
참고
- 사이트: https://sakyowon.co.kr/academy-site/ — 교육과정 → 실습시작(15단계), 연대지능 → 연대지능 학습 가이드(7단계)
- 프롬프트 유인물:
실습15단계_프롬프트_20260925.md,연대지능학습가이드7단계_프롬프트_20260925.md(연대지능활동가 아카데미 자료 폴더) - 코드: deka2026/academy-site
index.html의LEARN_PROMPTS,SOLID_PROMPTS - 절차 스킬: sakyowon-ai
skills/academy-site-deploy - 문서 정리 = 데카(deka2026)