프로그래밍

‘개념’ 맛보기

NHN NEXT 조영호 교수 http://aeternum.egloos.com/

snatcher@nhn.com

PreSchool

11일(화) ~ 13일(목) 14일(금) ~ 18일(화)

과정 소개

• 작업을 흐름으로 표현하기

• 흐름을 순서도로 표현하기

• Scratch를 이용해 프로그램 작성하기

• 칸 아 카 데 미 개 발 환경에서 프로그램 개발하기

• 스크래치의 도구들을 실제 프로그래밍 언어의 문장들로 연결하기

목적

특정한 프로그래밍 언어를 배우는 것이 목적이 아니라

프로그래밍이란 무엇인가에 집중

우리가 사고하는 방식

집

학교

집

학교

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

흐름

해야 할 일의

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

순서

해야 할 일의

사람은 본능적으로

어떤 일을

작업의 순서 또는 절차의 관점에서

생각하려고 합니다

기초화장

베이스

색조화장

어떤 일을 하나 떠올리고 순서에 따라 나열할 수 있는지

고민해 봅시다

컴퓨터와 대화하기

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

컴퓨터가 이해할 수 있는 언어

Programming Language

필요한 작업들을 순서대로 나열

컴퓨터가 이해할 수 있는 프로그래밍 언어로 표현

Programming

필요한 작업들을 순서대로 나열

컴퓨터가 이해할 수 있는 프로그래밍 언어로 표현

Programming

컴퓨터가 이해할 수 있는

컴퓨터의 관점에서

언어로 표현하는 방법을

학습

필요한 작업들을 순서대로 나열

컴퓨터가 이해할 수 있도록 프로그래밍 언어로 표현

Programming

순서도

스크래치 JavaScript

작업의 순서를 설명하는 방법

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

순서

작업의 순서를 어떤 방식으로 설명하는 것이 좋을까요?

요리책(Cookbook)

송송 썬 김치(1/2컵)에 양념장을 섞어 버무리고

버무린 김치에 삶은 라면사리를 넣어 버무리고

라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에 건져 헹구고

그릇에 담고 오이채와 통깨(약간)를 뿌려 마무리. 완성~!

1 2

3 4

초간단 비빔라면

재료 라면사리(1개), 송송 썬 김치(1/2컵), 오이채, 통깨(약간), 양념장, 간장(0.5), 고추장(1), 설탕(0.5), 참기름(1), 다진파(0.5), 다진마늘(0.3) * 계량은 밥숟가락과 종이컵으로 합니다

논리적인 순서를 이해하기 쉽게 그림으로 표현

순서도 (Flowchart)

시작

끝

터미널Terminal

기호

시작

끝

처리Process

기호

프리스쿨을 듣는다

푹 잔다

작업의 순서를 그림으로 표현한 것

순서도 (Flowchart)

개운한 상태로 귀가한다

송송 썬 김치(1/2컵)에 양념장을 섞어 버무리고

버무린 김치에 삶은 라면사리를 넣어 버무리고

라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에 건져 헹구고

그릇에 담고 오이채와 통깨(약간)를 뿌려 마무리. 완성~!

1 2

3 4

초간단 비빔라면

재료 라면사리(1개), 송송 썬 김치(1/2컵), 오이채, 통깨(약간), 양념장, 간장(0.5), 고추장(1), 설탕(0.5), 참기름(1), 다진파(0.5), 다진마늘(0.3) * 계량은 밥숟가락과 종이컵으로 합니다

시작

끝

송송 썬 김치(1/2컵)에 양념장을 섞어 버무린다

버무린 김치에 삶은 라면사리를 넣어 버무린다

라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에

건져 헹군다

그릇에 담고 오이채와 통깨(약간)를 뿌려

마무리한다

사고방식

표현방식

아까 생각했던 작업을 순서도를 이용해 일련의 순서대로

표현해 보세요

중요한 것은 작업을 논리적인 순서에 따라 요리책처럼 정리하는

사고 능력

순서도는 단지 사고의 결과를 표현하고 다른 사람에게 설명하기 위한 도구

필요한 작업들을 (요리책처럼) 순서대로 나열

컴퓨터가 이해할 수 있는 프로그래밍 언어로 표현

Programming

순서도

프로그래밍 언어 컴퓨터가 이해할 수 있는 요리책을 만들 수 있는 언어

작업의 순서를 표현할 수 있는 미리 정의된 제한된 개수의 표현 방법을 제공

필요한 작업들을 (요리책처럼) 순서대로 나열

컴퓨터가 이해할 수 있도록 프로그래밍 언어로 표현

Programming

순서도

스크래치

스크래치(Scratch)

http://scratch.mit.edu/

집

학교

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

시작

끝

집에서 나와서 직진

다시 직진

삼거리에서 좌회전

삼거리에서 우회전

다시 직진

스크래치의 방식으로 표현

스크래치에서 제공하는 도구를

이용해 컴퓨터에서 실행

가능하도록 논리적인 순서를

표현

스크래치에서 어떤 명령들을 제공하는 지 한번 둘러 보세요

컴퓨터적인 사고 방식

송송 썬 김치(1/2컵)에 양념장을 섞어 버무리고

1 라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에 건져 헹구고

2

버무린 김치에 삶은 라면사리를 넣어 버무리고

3 그릇에 담고 오이채와 통깨(약간)를 뿌려 마무리. 완성~!

4

초간단 비빔라면

재료 라면사리(1개), 송송 썬 김치(1/2컵), 오이채, 통깨(약간), 양념장, 간장(0.5), 고추장(1), 설탕(0.5), 참기름(1), 다진파(0.5), 다진마늘(0.3) * 계량은 밥숟가락과 종이컵으로 합니다 재료 완성된

요리

요리 절차

재료 라면사리(1개), 송송 썬 김치(1/2컵), 오이채, 통깨(약간), 양념장, 간장(0.5), 고추장(1), 설탕(0.5), 참기름(1), 다진파(0.5), 다진마늘(0.3) * 계량은 밥숟가락과 종이컵으로 합니다

송송 썬 김치(1/2컵)에 양념장을 섞어 버무리고

1 라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에 건져 헹구고

2

버무린 김치에 삶은 라면사리를 넣어 버무리고

3 그릇에 담고 오이채와 통깨(약간)를 뿌려 마무리. 완성~!

4

재료

요리 절차

완성된 요리

재료 라면사리(1개), 송송 썬 김치(1/2컵), 오이채, 통깨(약간), 양념장, 간장(0.5), 고추장(1), 설탕(0.5), 참기름(1), 다진파(0.5), 다진마늘(0.3) * 계량은 밥숟가락과 종이컵으로 합니다

송송 썬 김치(1/2컵)에 양념장을 섞어 버무리고

1 라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에 건져 헹구고

2

버무린 김치에 삶은 라면사리를 넣어 버무리고

3 그릇에 담고 오이채와 통깨(약간)를 뿌려 마무리. 완성~!

4

입력Input

처리Process

출력Output

시작

끝

송송 썬 김치(1/2컵)에 양념장을 섞어 버무린다

버무린 김치에 삶은 라면사리를 넣어 버무린다

라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에

건져 헹군다

그릇에 담고 오이채와 통깨(약간)를 뿌려

마무리한다

처리Process

재료 라면사리(1개), 송송 썬 김치(1/2컵), 오이채, 통깨(약간), 양념장, 간장(0.5), 고추장(1), 설탕(0.5), 참기름(1), 다진파(0.5), 다진마늘(0.3) * 계량은 밥숟가락과 종이컵으로 합니다

송송 썬 김치(1/2컵)에 양념장을 섞어 버무리고

1 라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에 건져 헹구고

2

버무린 김치에 삶은 라면사리를 넣어 버무리고

3 그릇에 담고 오이채와 통깨(약간)를 뿌려 마무리. 완성~!

4

입력Input

처리Process

출력Output

입력Input

N을 입력 받는다

N을 출력한다

출력Output

시작

끝

송송 썬 김치(1/2컵)에 양념장을 섞어 버무린다

버무린 김치에 삶은 라면사리를 넣어 버무린다

라면 사리는 끓는 물에 넣어 2~3분간 삶아 건져 찬물에

건져 헹군다

그릇에 담고 오이채와 통깨(약간)를 뿌려

마무리한다

처리Process

재료를 준비한다

비빔라면 완성

입력Input

출력Output

컴퓨터가 세상을 바라보는 방식

입력Input

처리Process

출력Output

임의의 수 N을 입력 받아 N을 2배만큼 증가하도록 처리한 후

화면에 출력하는 순서도를 작성하세요

컴퓨터 세계의 의사소통 방식

시작

끝

N = N x 2

N을 입력 받는다

N을 출력한다

컴퓨터 관점에서의 논리적 순서

시작

끝

N = N x 2

N을 입력 받는다

N을 출력한다

N

5

변수

값

변수Variable

변수Variable

시작

끝

N = N x 2

N을 입력 받는다

N을 출력한다

N = N x 2

같음equal

시작

끝

N = N x 2

N을 입력 받는다

N을 출력한다

N

5

N = N x 2

x 2 10

임의의 수 N을 입력 받아 N을 2배만큼 증가하도록 처리한 후

화면에 출력하는 프로그램을 작성하세요

임의의 수 num1과 num2를 입력 받아 두 수를 더한 값을 result에 넣은 후 result를 출력하는 순서도를 작성하고 스크래치로 프로그래밍해 보세요

임의의 수 num1과 num2를 입력 받아 두 수를 더한 값/뺀 값/ 곱한 값/나눈 값을 차례대로 출력하는 순서도를 작성하고 스크래치로 프로그래밍해 보세요

메모리Memory

메모리Memory

8bit

1byte

0 1 2 3 4 5

6 7 8 9 10 11

12 13 14 15 16 17

18 19 20 21 22 23

24 25 26 27 28 29

30 31 32 33 34 35

36 37 38 39 40 41

42 43 44 45 46 47

주소Address

200 14

x

변수Variable

조건에 따라 다른 길로 가기

집

학교

놀이동산

갈림길

if

집

학교 if 평일

놀이동산

집

학교 if 공휴일

놀이동산

시작

끝

판단Decision

학교에 간다 놀이동산에 간다

평일?

yes

no

임의의 수 num1과 num2를 입력 받고 연산 방법 op를 입력 받은 후 op에 따라 결과를 계산하는 프로그램을 작성하세요 op = 0 ? 덧셈 0 이외의 수 ? 뺄셈

시작

끝

num1 + num2 출력 num1 – num2 출력

op = 0?

yes

no

num1을 입력 받는다

num2를 입력 받는다

op를 입력 받는다

정수 하나를 입력 받아 짝수인지 홀수인지 구별하는 프로그램을 스크래치로 작성해 보세요.

시작

끝

‘짝수’ 출력 ‘홀수’출력

N / 2의 나머지 = 0 ?

yes

no

N을 입력 받는다

반복되는 작업을 쉽게 만들기

집

학교

집에서 나와서 직진

삼거리에서 좌회전

다시 직진

삼거리에서 우회전

다시 직진

시작

집에서 나와서 직진

다시 직진

삼거리에서 좌회전

삼거리에서 우회전

다시 직진

집에서 나와서 직진

다시 직진

삼거리에서 좌회전

삼거리에서 우회전

다시 직진

집에서 나와서 직진

다시 직진

삼거리에서 좌회전

삼거리에서 우회전

다시 직진

시작

끝

집에서 나와서 직진

다시 직진

삼거리에서 좌회전

삼거리에서 우회전

다시 직진

한 번만 작성

단순한 반복 작업은 컴퓨터에게

시작

끝

집에서 나와서 직진

다시 직진

삼거리에서 좌회전

삼거리에서 우회전

다시 직진

count = 1

count > 5 ?

yes

no count = count + 1

반복문Loop 구조

초기값

증가값 반복 종료

조건

반복문Loop

1 ~ 100까지의 합을 구하는 프로그램을 반복문을 이용해서 작성하세요.

n = n + i

시작

끝

i > 100

yes

no

n = 0, i = 1

i = i + 1

n 출력

1에서 100까지 사이에 3의 배수가 몇 개 있는지 구하는 프로그램을 스크래치로 구현해 보세요.

한번 만든 코드를 재사용하기

1 ~ 100까지의 합을 구해서 출력한 후 1 ~ 200까지의 합을 구해서 출력하고, 마지막으로 1 ~ 300까지의 합을 구해서 출력하는 프로그램을 작성하세요

이만큼을

복사한 후 100을

200으로 변경

복사한 후 100을

300으로 변경

좀 더 효과적인 방법…

이만큼을

복사한 후 100을

200으로 변경

복사한 후 200을

300으로 변경

변수Variable

사용

to

100

to

100

to

200

to

300

블록

매개변수

블록 매개변수

왜 블록을 사용할까요?

1 ~ 100까지의 짝수의 합을 출력한 후 101 ~ 200까지의 짝수의 합을 구해서 출력하고, 마지막으로 201 ~ 300까지의 짝수의 합을 구해서 출력하는 프로그램을 작성하세요

수정

수정

수정

한 곳만 수정

반복적으로 재사용이 가능

임의의 수를 매개변수로 전달 받아 1에서 그 수 사이에 3의 배수가 몇 개 있는지 구하는 블록을 스크래치로 작성해 보세요.

리스트List

국어 , 영어 , 수학 과목의 점수를 입력 받아 세 과목의 평균을 구해 출력하는 프로그램을 작성하세요.

과목의 개수가 추가되거나 삭제될 수 있다면?

프로그래밍은 기능의 변경 가능성에 따라

데이터의 형태와 작업의 순서를 끊임 없이 조정해가는

트레이드오프의 연속

자료구조

알고리즘

변수Variable

변수Variable

리스트List 변수Variable

리스트

1

2

3

4

5

10

20

5

6

12

10

20

5

과목

국어

영어

수학

1

2

3

성적

100

200

300

1

2

3

과목을 추가하거나 삭제해 보세요.

이벤트Event

시작

끝

처리

입력

출력

Event

반응

Program

시작

끝

처리

입력

출력

Event

시작

끝

처리

입력

출력

Event

시작

끝

처리

입력

출력

Event

시작

끝

처리

입력

출력

Event

시작

끝

처리

입력

출력

Event

시작

끝

처리

입력

출력

Event

화면 상에 존재하는 스프라이트를 키보드의 상 하좌우 키를 이용 해 움직이는 프로그램을 작성해 보세요.

모듈Module

비슷한 것들끼리 모아 다른 것과 경계를 짓는 것

모듈

블록도 일종의 모듈

순서대로 실행되어야 하는 작업의

모듈화

화면 상에 2개의 스프라이트를 만든 후 하나의 스프라이트를 움직여 다른 스프라이트와 충돌하게 만듭니다. 충돌한 다른 스프라이트는 충돌 시 화면에서 사라져야 합니다.

데이터와 기능을 하나의 단위 모듈로

모아 놓은 것

객체Object