Shaula

처음 시작하는 사람의 눈높이에서

무엇을 요청해야 할지 막막하거나, 오류 한 줄에 멈추는 사람도 시작할 수 있도록. 개념을 길게 듣기보다 작은 과제를 풀며 구조를 이해하는 방향을 생각하고 있습니다.

이해하기
익숙한 비유로 입력·처리·저장·배포의 구조 살펴보기
만들기
AI와 기능 하나를 구현하고, 직접 바꿔보기
판단하기
예상과 실제 결과를 비교하고, 사람이 결정할 조건 정하기

경험에서 출발한 설명 자료

케이크 만들기와 자동차처럼 익숙한 대상에서 출발했습니다. 쉽게 전달하면서도 실제 구조와 어긋나지 않도록, 설명을 계속 다듬고 있습니다.

기존 강의 자료 기반 · 재구성

케이크 굽기로 이해하는 프로그래밍

‘달걀을 꺼낸다’는 말에는 무엇을, 어디에서, 얼마나 가져올지가 숨어 있습니다. 익숙한 작업을 구체적인 단계로 나누며 변수와 함수의 역할을 살펴봅니다.

  1. 재료의 양 · 변수
  2. 작업 묶음 · 함수
  3. 확인할 결과

프로그래밍이 낯선 입문자를 위한 설명 · 케이크 제조 경험에서 출발했습니다.

설명과 실행 예시 살펴보기

‘케이크를 만들어줘’에서 한 걸음 더

재료와 양, 작업 순서, 완성 기준을 정하면 요청이 구체적이 됩니다. ‘예쁜 웹페이지를 만들어줘’라는 말에는 어떤 정보가 빠져 있을까요?

값에 이름을 붙이고, 작업을 함수로 묶기

def mix(flour_grams, sugar_grams):
    total = flour_grams + sugar_grams
    return f"총 {total}g입니다."

flour = 100
sugar = 30
print(mix(flour, sugar))
# 결과: 총 130g입니다.

설탕의 양을 50으로 바꾸면 결과는 어떻게 될까요? 먼저 예상하고, 실행해서 150g이 나오는지 확인해 보세요.

실행 가능한 Python 예시입니다. 실제 조리법이나 재료를 섞는 프로그램이 아니라, 두 수를 더해 문장을 만드는 코드입니다.

기존 설명 자료 기반 · 새 실습안

버튼을 누르면, 화면은 어떻게 바뀔까요?

컴퓨터의 내부를 모두 알아야 시작할 수 있는 것은 아닙니다. 입력이 어디에서 처리되고 어떤 결과로 돌아오는지 알면, 원하는 기능을 설명하기가 쉬워집니다.

  1. 이름 입력
  2. 처리 규칙
  3. 인사말 표시

컴퓨터 입문 자료의 입력·처리·출력을 작은 웹 실습으로 이어갑니다.

설명 방식과 확인 질문 살펴보기

기존 강의에서는 자동차를 비유로 컴퓨터의 구조를 설명했습니다. 공개용 콘텐츠에서는 웹 화면의 변화를 따라가며 입력·처리·출력을 살펴봅니다.

이름이 있으면 인사말을, 없으면 안내를 보여줍니다. 공백만 넣어도 같은 안내가 나올까요? AI가 고쳤다고 말했을 때 무엇을 직접 확인해야 할까요?

아래 체험은 이번에 구성한 새 실습입니다. 과거 수업 운영 결과와 구분합니다.

작은 실습으로 확인해 보기 ↓

Codex 제작 노트 · 데이터 없이 생각 분류 기준 만들기 →
구매 욕구와 거래 사실을 구분하는 기준을 읽고, 네 문장의 기대 처리를 직접 골라봅니다.

생활 속 작은 실습 · 입력, 처리, 출력

넣은 정보가, 안내문이 되기까지.

일시·장소·준비물을 넣어 교육 안내문을 만들어보세요. 각 정보가 문장의 어디에 들어가는지 비교하고, 장소를 비우면 어떻게 달라지는지도 확인합니다.

01 · 내가 넣은 정보

교육 안내에 필요한 것

위 정보를 넣으면 어떤 문장이 나올까요? 이 실습은 화면 안에서 문장을 조합하며 입력을 저장하거나 외부로 보내지 않습니다.

02 · 버튼이 하는 일

확인하고 조합하기

  1. 입력 앞뒤의 공백 제거
  2. 일시와 장소가 있는지 확인
  3. 정보가 있으면 안내문 조합

버튼을 누르면 이 순서로 처리합니다.

03 · 만들어진 결과

교육 안내문

안내문이 들어올 자리

‘안내문 만들기’를 누르면 왼쪽의 정보가 이곳의 문장으로 바뀝니다.

다른 상황도 확인해보기

LESSON PREVIEW · 50분 실습 활동지

설명보다, 작은 성공을 먼저.

입력과 요청, 저장을 직접 확인해볼 수 있는 샘플 활동지입니다. 준비된 예제의 한 기능을 다루는 50분 구성안이며, 실제 수업 운영 결과와는 구분합니다.

첫 API 요청 · 작은 미션 가져오기의 목표, 50분 진행표, 직접 확인 기준이 담긴 활동지

첫 API 요청 · 작은 미션 가져오기

빈 카드에 서버의 미션이 도착하는 과정을 보고, 실패와 재시도를 확인합니다.

설치·계정·배포 권한은 수업 전에 준비합니다. 50분은 준비된 예제의 한 기능을 완성하는 단위이며, 처음부터 전체 웹앱을 완성하는 시간 보장은 아닙니다.

요약만 믿고 움직여도 괜찮을까요?

클래스 준비물과 쇼핑 반품 안내를 요약한 문장을 살펴보세요. 틀린 내용이나 빠진 근거를 찾고, 실제로 어떤 문제가 생길지 생각해봅니다.

예약 안내를 요약해 달라고 했어요. 이 요약만 보고 수업에 가도 괜찮을까요?

아래 요약은 오류를 포함하도록 만든 학습용 예시입니다. 실제 AI 호출 결과는 아닙니다. 문장마다 안내문과 비교해보세요.

요약 문장 1

클래스는 토요일 오후 2시에 시작합니다.

요약 문장 2

앞치마는 현장에서 빌릴 수 있습니다.

요약 문장 3

참가비는 무료입니다.

‘원문에 없음’과 ‘원문과 다름’을 구분해보세요. 없는 정보는 추측으로 채우지 않고 확인할 질문으로 남깁니다.

AI가 준 답, 그대로 써도 될까요?

AI 요약을 팀에 올리기 직전, 결정 문서에 링크를 붙이기 직전처럼 판단이 필요한 순간을 골라 보세요. 선택하면 왜 그런지와 함께 다음에 확인할 질문을 보여 드립니다.

가상의 업무 장면입니다. 선택은 저장하거나 전송하지 않으며, AI 모델을 호출하지 않습니다.

읽기 · 약 8분

월요일 아침, 팀 슬랙에 주간 싱크용 요약을 올려야 합니다. 긴 회의록을 AI에게 맡겼더니 30초 만에 깔끔한 불릿이 나왔습니다. 채널에는 이미 “요약 있나요?”라는 멘션이 두 개 와 있습니다.

붙여넣기 직전에 멈춥니다. 이 요약을 그대로 올려도 될까요?

지금 가장 적절한 행동은?

프로젝트 학습 · 준비 중인 구성안

작은 과제를 하나씩, 50분씩.

긴 영상보다 함께 풀이하고 구현하는 과정을 구상하고 있습니다. 아래는 준비 중인 구성안이며, 아직 운영한 AI 교육 프로그램은 아닙니다.

입문 구성안 · 10회 × 50분

나의 일상을 담은 인터랙티브 웹페이지

나의 경험·강점·꿈을 정리하고, HTML/CSS와 작은 상호작용으로 표현합니다. AI의 추측과 나의 사실을 구분하며 개인 기능 하나를 더해봅니다.

10회 작은 과제 살펴보기
  1. 1경험 카드와 공개할 이야기 정하기
  2. 2AI의 추측과 나의 사실 구분하기
  3. 3HTML로 소개·강점·꿈의 구조 만들기
  4. 4CSS로 나다운 색과 배치 정하기
  5. 5버튼과 입력으로 작은 상호작용 만들기
  6. 6개인 기능 하나 구체화하기
  7. 7전화교환원 비유로 첫 API 요청하기
  8. 8모바일과 빈 입력 직접 시험하기
  9. 9준비된 배포 환경에서 공개 링크 만들기
  10. 10제작 과정과 나의 다음 목표 정리하기
웹앱 구성안 · 16회 × 50분

생각모음부터 배포까지

Pause & Ponder와 별이음 제작에서 배운 입력·연결·저장 구조를 바탕으로, 나만의 작은 웹앱에 기능을 붙이고 시험해봅니다. 터미널·API·DB·배포 개념도 필요한 순간에 연결합니다.

16회 작은 과제 살펴보기
  1. 1내 소개 페이지 열기
  2. 2색과 카드 모양 바꾸기
  3. 3버튼에 반응 주기
  4. 4입력한 목표 보여주기
  5. 5목표 목록 만들기
  6. 6완료와 삭제 구현하기
  7. 7새로고침 후 기록 유지하기
  8. 8개발 서버 실행하고 종료하기
  9. 9변경 기록하고 되돌리기
  10. 10오류 하나 재현하고 고치기
  11. 11API에서 데이터 가져오기
  12. 12데이터베이스에 회고 저장하기
  13. 13사용자별 기록 구분하기
  14. 14AI 회고 질문 연결하기
  15. 15다른 기기에서 앱 열기
  16. 16사용자와 시험하고 개선하기

한 회차에 남기고 싶은 것만든 기능 하나 · 직접 확인한 결과 · 작동 원리를 설명하는 한 문장

50분은 회차의 길이입니다. 설치와 계정 준비, 실습 범위는 따로 점검하며, 한 회차에 전체 웹앱 완성이나 배포를 보장하지 않습니다.

다른 기술도 익숙한 비유로 살펴보기

01 / API

전화교환원과 웨이터

API · 필요한 것을 요청하는 약속

주문을 받아 주방에 전달하고 결과를 가져오는 웨이터처럼, 정해진 형식으로 서버에 요청하고 응답을 받습니다.

  1. 주문 · 요청
  2. 주방 · 서버
  3. 요리 · 응답
비유에서 한 걸음 더

API는 사람처럼 의도를 알아채지 않아요. 주소·입력 형식·오류 처리를 정해야 합니다.

02 / LOGIC

레시피와 식재료

알고리즘과 변수 · 입력을 바꾸는 규칙

재료가 달라져도 레시피의 순서는 남습니다. 변수는 값에 붙인 이름이고, 알고리즘은 그 값을 처리하는 절차입니다.

  1. 재료 · 입력값
  2. 레시피 · 처리
  3. 완성 · 결과
비유에서 한 걸음 더

같은 입력에 같은 규칙을 적용하는 코드와, 매번 다른 초안을 낼 수 있는 AI를 구분합니다.

03 / DATABASE

창고와 서랍장

데이터베이스 · 다시 꺼낼 수 있는 기록

서랍에 이름표를 붙여 보관하듯, 데이터의 모양과 찾는 기준을 정합니다. 서버 DB는 허용된 사용자에게 기록을 다시 내어줍니다.

  1. 기록 · 저장
  2. 서랍 · 데이터
  3. 꺼내기 · 조회
비유에서 한 걸음 더

새로고침 뒤 유지되는 기록은 브라우저 저장일 수도 있어요. DB에는 접근 권한과 저장 성공 확인도 필요합니다.

04 / PUBLISH

가게 열기와 간판 달기

호스팅과 도메인 · 누구나 열 수 있는 주소

호스팅은 앱이 운영되는 공간, 도메인은 그곳을 찾아가는 주소입니다. 내 컴퓨터 밖에서도 같은 링크로 앱을 열게 만듭니다.

  1. 내 컴퓨터
  2. 호스팅 · 운영 공간
  3. 도메인 · 주소
비유에서 한 걸음 더

도메인만 연결하면 끝나는 것은 아니에요. 배포 상태·환경변수·실제 접속을 함께 확인합니다.

익숙한 경험으로 설명한다면?

여러분에게 익숙한 경험으로 기술을 설명한다면, 어떤 비유를 쓰고 싶나요? 저도 만들고 설명하는 과정에서 그 연결을 조금씩 찾아가고 있습니다.