1.프로그램 — 컴퓨터에게 주는 정확한 지시서
프로그램은 컴퓨터가 해야 할 일을 차례대로 적어 둔 지시서입니다. 요리 레시피와 비슷하지만 큰 차이가 하나 있습니다. 사람은 레시피에 '소금 약간'이라고 적혀 있어도 알아서 짐작하지만, 컴퓨터는 짐작하지 않습니다. 적힌 그대로, 적힌 순서대로만 움직입니다. 그래서 프로그램을 쓴다는 것은 '알아서 해 주겠지'라는 부분을 하나도 남기지 않고 모두 말로 적는 일입니다.
이 '짐작하지 않음'은 단점이자 장점입니다. 지시가 조금만 틀려도 엉뚱한 결과가 나오지만, 지시가 맞으면 백 번이든 백만 번이든 똑같이, 지치지 않고, 빠르게 해냅니다. 매달 엑셀 표에서 같은 열을 더하고, 파일 이름을 하나하나 바꾸고, 수백 줄의 텍스트에서 전화번호 형식을 맞추는 일처럼 사람이 하면 지루하고 실수하기 쉬운 일이 바로 프로그램이 잘하는 일입니다.
요즘은 AI 코딩 도우미에게 말로 부탁하면 코드를 대신 써 주기도 합니다. 그렇다고 코딩 기초가 필요 없어진 것은 아닙니다. AI가 써 준 코드가 내가 원한 일을 정말 하는지, 빠뜨린 경우는 없는지 판단하려면 코드를 읽을 줄 알아야 합니다. 이 과정의 목표는 전문 개발자가 되는 것이 아니라, 간단한 코드를 직접 쓰고 남이(또는 AI가) 쓴 코드를 읽고 확인할 수 있게 되는 것입니다(10강).
2.알고리즘 사고 — 순서·조건·반복으로 쪼개기
어떤 문제를 푸는 단계들의 묶음을 알고리즘이라고 합니다. 이름은 거창하지만 우리는 매일 알고리즘을 씁니다. 아침에 집을 나서는 과정, 장을 보는 순서, 시험지를 채점하는 방법이 모두 알고리즘입니다. 프로그래밍을 배운다는 것은 이렇게 머릿속에서 자연스럽게 하던 일을 하나하나 꺼내어 적는 연습이기도 합니다.
놀랍게도 거의 모든 알고리즘은 세 가지 재료로 만들어집니다. 첫째는 순서로, 위에서 아래로 차례대로 하는 것입니다. 둘째는 조건으로, '만약 ~이면 이렇게, 아니면 저렇게'처럼 상황에 따라 갈라지는 것입니다(3강). 셋째는 반복으로, 같은 일을 정해진 횟수만큼 또는 어떤 조건이 될 때까지 되풀이하는 것입니다(4강). 이 세 가지만 자유롭게 조합할 수 있으면 대부분의 일을 지시서로 바꿀 수 있습니다.
쪼갤 때의 요령은 '이 단계를 처음 보는 사람이 그대로 따라 할 수 있는가'를 묻는 것입니다. '시험지를 채점한다'는 너무 큽니다. '첫 번째 답을 정답과 비교한다, 같으면 점수에 1을 더한다, 다음 답으로 넘어간다, 마지막 답까지 되풀이한다'처럼 쪼개면 비로소 순서·조건·반복이 드러납니다. 이렇게 드러난 구조가 곧 코드의 뼈대가 됩니다.
| 재료 | 뜻 | 생활 속 예 | 배우는 강의 |
|---|---|---|---|
| 순서 | 위에서 아래로 차례대로 한다 | 물을 끓이고 → 면을 넣고 → 3분 기다린다 | 1강 |
| 조건 | 상황에 따라 다른 일을 한다 | 비가 오면 우산을 챙기고, 아니면 그냥 나간다 | 3강 |
| 반복 | 같은 일을 여러 번 되풀이한다 | 답안지 끝까지 한 문제씩 채점한다 | 4강 |
- 1단계 준비(순서): 결석 수를 0으로 정하고, 명단의 첫 번째 학생부터 시작합니다.
- 2단계 확인(조건): 지금 학생이 자리에 없으면 결석 수에 1을 더합니다. 있으면 아무것도 하지 않습니다.
- 3단계 넘어가기(반복): 다음 학생으로 넘어가 2단계를 되풀이합니다. 명단의 마지막 학생까지 확인하면 멈춥니다.
- 4단계 결과(순서): 결석 수를 알려 줍니다.
- 검산: 30명 모두 출석이면 결석 수는 처음 정한 0 그대로이고, 모두 결석이면 30이 됩니다. 양 끝의 경우가 맞으면 쪼갠 단계도 믿을 만합니다.
3.입력 → 처리 → 출력
알고리즘을 바깥에서 보면 늘 같은 모양입니다. 무언가를 받고(입력), 그것으로 무언가를 하고(처리), 결과를 내놓습니다(출력). 계산기는 숫자와 연산을 받아 계산한 뒤 화면에 답을 보여 주고, 맞춤법 검사기는 글을 받아 틀린 곳을 찾은 뒤 표시해 줍니다. 처음 코드를 짤 때 이 세 칸을 먼저 채워 두면 무엇을 만들어야 하는지가 훨씬 분명해집니다.
특히 입력을 분명히 하는 것이 중요합니다. '가격을 계산한다'고만 하면 무엇을 받는지가 빠져 있습니다. '상품 가격과 개수를 받아 합계를 낸다'라고 하면 입력이 두 개라는 것, 둘 다 숫자라는 것이 드러납니다. 그다음에는 '개수가 0이면?', '가격이 음수로 들어오면?' 같은 질문이 자연스럽게 따라옵니다. 이런 질문을 미리 던지는 습관이 3강의 경계값, 10강의 AI 코드 검증으로 이어집니다.
이 과정의 실습장에서는 처리 결과를 주로 console.log로 출력합니다. 5강에서 함수를 배우고 나면 입력을 '매개변수'로 받고 출력을 '반환값'으로 돌려주는 방식으로 넘어갑니다. 모양은 바뀌어도 입력·처리·출력이라는 틀은 그대로입니다.
| 작업 | 입력 | 처리 | 출력 |
|---|---|---|---|
| 장보기 합계 | 상품 가격들 | 모두 더한다 | 합계 금액 |
| 평균 점수 | 점수 목록 | 더한 뒤 개수로 나눈다 | 평균 |
| 글자 수 세기 | 글 | 글자를 하나씩 센다 | 글자 수 |
| 합격 여부 | 점수 | 기준 점수와 비교한다 | 합격 또는 불합격 |
4.첫 코드 — JavaScript와 `console.log`
이 과정은 JavaScript로 배웁니다. JavaScript는 모든 웹 브라우저 안에 실행기가 들어 있어서 따로 무언가를 설치하지 않아도 바로 돌려 볼 수 있습니다. 웹 페이지를 움직이는 언어로 시작했지만 지금은 서버, 자동화 스크립트, 스프레드시트 확장 기능 등에서도 널리 쓰입니다. 여기서 배우는 순서·조건·반복·함수 같은 생각은 다른 언어로 옮겨 가도 거의 그대로 통합니다.
가장 먼저 배울 명령은 console.log입니다. 괄호 안에 넣은 값을 출력 창에 한 줄로 보여 줍니다. 글자(문자열)는 큰따옴표나 작은따옴표로 감싸고, 숫자는 그대로 씁니다. 쉼표로 여러 값을 넣으면 한 줄에 빈칸을 사이에 두고 이어서 보여 줍니다. 계산식을 넣으면 계산한 결과가 나옵니다.
코드는 위에서 아래로 한 줄씩 실행됩니다. 그래서 console.log를 세 줄 쓰면 출력도 세 줄이 같은 순서로 나옵니다. 이것이 알고리즘의 첫 재료인 '순서'가 코드에서 드러나는 가장 단순한 모습입니다. 아래 코드를 실습장에 그대로 옮겨 실행해 보고, 숫자나 글자를 바꿔 가며 출력이 어떻게 달라지는지 확인해 보세요.
console.log("안녕하세요");
console.log("코딩 기초 과정입니다");
console.log(2026);안녕하세요 코딩 기초 과정입니다 2026
console.log("사과 3개 가격:", 1200 * 3);
console.log("10 나누기 4 =", 10 / 4);
console.log("이름", "민수", "나이", 20);사과 3개 가격: 3600 10 나누기 4 = 2.5 이름 민수 나이 20
console.log로 값을 따라가는 데서 시작합니다.5.문장·주석, 그리고 첫 오류 읽기
코드의 한 줄 한 줄을 문장이라고 부르고, JavaScript에서는 문장 끝에 세미콜론(;)을 붙이는 것이 관례입니다. 빠뜨려도 대부분 알아서 처리되지만, 드물게 의도와 다르게 해석되는 경우가 있어서 이 과정에서는 늘 붙입니다. // 뒤에 쓴 글은 주석이라 실행되지 않습니다. 주석은 사람이 읽으라고 남기는 메모로, '왜 이렇게 했는지'를 적어 두면 나중의 나와 동료(그리고 AI)가 코드를 이해하는 데 큰 도움이 됩니다.
컴퓨터는 짐작하지 않기 때문에 한 글자만 틀려도 멈춥니다. 예를 들어 console을 consol이라고 잘못 쓰면 '그런 이름은 정의되지 않았다'는 오류가 납니다. 처음에는 빨간 오류 메시지가 겁나지만, 오류는 컴퓨터가 어디에서 무엇 때문에 멈췄는지 알려 주는 친절한 안내문입니다. 메시지에는 보통 오류의 종류, 짧은 설명, 줄 번호가 들어 있습니다.
아래 예에서 첫 줄은 정상적으로 출력되고, 둘째 줄에서 멈춥니다. 오류가 난 뒤의 줄은 실행되지 않는다는 점도 눈여겨보세요. 오류 메시지의 문구는 브라우저마다 조금씩 다를 수 있지만 오류의 종류(여기서는 ReferenceError)와 줄 번호는 같은 정보를 줍니다. 오류의 종류별 읽는 법은 8강에서 자세히 다룹니다.
// 주석은 실행되지 않습니다
console.log("첫째 줄"); // 줄 끝에도 쓸 수 있습니다
console.log("둘째 줄");첫째 줄 둘째 줄
console.log("여기까지는 실행됩니다");
consol.log("오타가 있는 줄");
console.log("이 줄은 실행되지 않습니다");여기까지는 실행됩니다
ReferenceError: consol is not defined- 오류 메시지를 끝까지 읽는다: 종류(
ReferenceError등) → 설명 → 줄 번호 순서로 본다 - 줄 번호가 가리키는 줄과 그 바로 위 줄을 함께 본다: 괄호·따옴표를 빠뜨린 실수는 앞줄에서 시작되기도 한다
- 한 번에 하나만 고치고 다시 실행한다: 여러 곳을 한꺼번에 고치면 무엇이 효과가 있었는지 알 수 없다
- 철자와 대소문자를 확인한다: JavaScript는
Console과console을 다른 이름으로 본다
6.실습장 쓰는 법
강의마다 맨 아래에 코드 실습장이 있습니다. 처음 코드에는 할 일이 주석으로 적혀 있고, 빈칸을 채운 뒤 실행하면 출력이 보이고, 채점을 누르면 기대한 결과와 비교해 줍니다. 막히면 힌트를 먼저 보고, 그래도 어려우면 예시 답안을 보되 그대로 베끼지 말고 한 줄씩 왜 그렇게 썼는지 확인한 다음 지우고 스스로 다시 써 보는 것이 가장 빨리 느는 방법입니다.
실습장의 코드는 여러분의 브라우저 안에서만, 다른 페이지와 분리된 안전한 공간(샌드박스)에서 실행되며 서버로 보내지지 않습니다. 그래서 console.log로 출력하는 것 말고 화면을 바꾸거나 인터넷에 접속하는 코드는 실습장에서 동작하지 않습니다. 실수로 끝나지 않는 반복을 만들어도 몇 초 뒤 자동으로 멈추니 마음껏 실험해도 됩니다.
실습장에서 무엇이든 바꿔 보는 것을 두려워하지 마세요. 숫자를 바꾸고, 줄 순서를 바꾸고, 일부러 오타를 내 보면 오류 메시지가 어떻게 바뀌는지 알 수 있습니다. 코딩은 읽기만 해서는 늘지 않고, 직접 실행하고 틀려 보면서 늡니다.
📌 핵심 정리
- 프로그램은 컴퓨터가 짐작 없이 그대로 따르는 정확한 지시서다
- 거의 모든 알고리즘은 순서·조건·반복 세 가지 재료의 조합이다
- 일을 쪼갤 때는 처음 보는 사람이 그대로 따라 할 수 있을 만큼 작게 쪼갠다
- 어떤 작업이든 입력·처리·출력으로 나누어 보면 만들 것이 분명해진다
console.log로 값을 출력하고, 오류 메시지는 종류·설명·줄 번호 순서로 읽는다
🧪 코드 실습
console.log만 써서 출력을 맞추는 연습입니다. 출력은 줄 단위로 기대 출력과 비교합니다.
코드는 이 브라우저 안의 격리된 공간에서만 실행되고 서버로 보내지 않습니다. 네트워크에는 접속할 수 없고, 2초가 넘으면 멈춥니다. 고친 코드는 이 브라우저에만 저장됩니다. Ctrl+Enter(⌘+Enter)로 실행하고, Tab 키는 공백 두 칸입니다(Esc 다음 Tab 은 다음 칸으로 이동).
자바스크립트가 꺼져 있어 실행할 수는 없지만, 문제와 처음 코드, 자동 검사 내용, 예시 답안은 그대로 읽을 수 있습니다.
1세 줄 출력하기
console.log를 세 번 써서 다음 세 줄을 순서대로 출력하세요: 안녕하세요 / 코딩 기초 1강 / 준비 완료
안녕하세요 코딩 기초 1강 준비 완료
💡 힌트
글자는 큰따옴표로 감싸고, 줄 끝에 세미콜론을 붙입니다. 한 줄에 console.log 하나씩입니다.
예시 답안 보기
console.log("안녕하세요");
console.log("코딩 기초 1강");
console.log("준비 완료");
2입력 → 처리 → 출력: 영수증
가상의 장보기입니다. 우유 2,500원 2개, 빵 3,000원 1개를 샀습니다. 계산은 코드에 맡겨, 다음처럼 세 줄을 출력하세요: 우유: 5000 / 빵: 3000 / 합계: 8000. 숫자를 직접 적지 말고 2500 * 2처럼 계산식을 쓰세요.
우유: 5000 빵: 3000 합계: 8000
💡 힌트
쉼표로 이어 쓴 두 값은 빈칸 하나로 이어집니다. 곱하기는 *이고, 곱하기가 더하기보다 먼저 계산됩니다.
예시 답안 보기
// 우유 2500원 x 2개, 빵 3000원 x 1개
console.log("우유:", 2500 * 2);
console.log("빵:", 3000 * 1);
console.log("합계:", 2500 * 2 + 3000 * 1);
3순서 바로잡기
라면 끓이는 단계가 뒤섞여 있습니다. 줄의 순서만 바꿔서 1단계부터 5단계까지 차례대로 출력되게 하세요. 글자는 고치지 마세요.
1. 냄비에 물을 붓는다 2. 물을 끓인다 3. 면과 수프를 넣는다 4. 3분 기다린다 5. 그릇에 담는다
💡 힌트
코드는 위에서 아래로 실행됩니다. 먼저 해야 할 일이 위에 오도록 줄을 옮기세요.
예시 답안 보기
console.log("1. 냄비에 물을 붓는다");
console.log("2. 물을 끓인다");
console.log("3. 면과 수프를 넣는다");
console.log("4. 3분 기다린다");
console.log("5. 그릇에 담는다");
🤖 AI에게 이렇게 물어보세요
복사해서 [ ] 부분을 내 상황으로 바꿔 쓰세요. 답을 그대로 믿지 말고 본문과 비교해 확인하세요.
일상 업무를 알고리즘으로 쪼개 보고 싶을 때
내가 매주 하는 [작업 설명]을 처음 보는 사람이 그대로 따라 할 수 있게 단계로 쪼개 줘. 각 단계가 순서·조건·반복 중 무엇인지 표시하고, 입력과 출력을 따로 적어 줘. 아직 코드는 쓰지 말고, 내가 빠뜨린 경우(예: 자료가 비어 있을 때)가 있으면 질문해 줘.
오류 메시지를 처음 만났을 때
나는 JavaScript를 막 배우기 시작했어. 아래 오류 메시지를 종류·뜻·줄 번호로 나눠서 쉬운 말로 설명해 주고, 고친 코드를 바로 주기보다 내가 스스로 찾을 수 있게 확인할 곳을 먼저 알려 줘. 코드: [코드 붙여 넣기] 오류: [오류 메시지 붙여 넣기]
연습 문제가 더 필요할 때
JavaScript `console.log`만 써서 풀 수 있는 아주 쉬운 연습 문제 5개를 만들어 줘. 문제마다 기대 출력을 정확히 적고, 정답 코드는 숨겨 둔 채 내가 답을 보내면 한 줄씩 비교해서 알려 줘.
🧰 관련 도구
이 강의에서 다룬 JSON·정규식·텍스트를 바로 확인하고 다듬어 볼 수 있는 도구입니다. 실제 개인정보나 비밀번호는 붙여 넣지 마세요.
- MDN Web Docs — JavaScript 안내서(Guide)의 문법과 자료형·console 문서
- 프로그래밍 입문 교재에서 다루는 알고리즘(순서·선택·반복)과 입력·처리·출력 모형의 일반적 내용
학습 목표를 모두 이뤘다면 완료를 눌러 진도에 기록하세요.
이 브라우저에서는 저장할 수 없어 이 화면에서만 표시됩니다.