Upload
sangsu-song
View
643
Download
8
Embed Size (px)
Citation preview
1주차 첫 시간
2014-12-29 디자이너를 위한 SW원리 이해 2
2. 릴레이 소개
2014-12-29 디자이너를 위한 SW원리 이해 3
2분의 시간을 드립니다.
- 앞에 있는 종이에 자신을 나타내는‘명사’ 또는 ‘형용사’를 적습니다.
- 30초 동안 자신을 소개할 내용을 생각합니다.
- 2분뒤에 30초 릴레이 발표 시작!
3. 무엇을 할 것인가
2014-12-29 디자이너를 위한 SW원리 이해 4
• 오리엔테이션• 디자이너와SW• 컴퓨터동작원리
• 정보과학적사고• 알고리즘• 알고리즘 경험
• 마크업 언어• DOM Tree• 자바스크립트
• 서버실 견학• 블로그 만들기
4. 기대하기
2014-12-29 디자이너를 위한 SW원리 이해 5
- 컴퓨터가 어떤 식으로 돌아가는지 대충은 안다.
- 개발자들이 어떤 식으로생각하는지 조금은 안다.
- 마크업 언어의 원리에 대해서 조금 안다.
- 클라이언트와 서버의 관계를 이해한다.
- 나도 이제 개발자!!!- HTML/CSS 마스터- 자바스크립트 마스터
기대해도 좋습니다 큰일날 소리
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 6
1) 왜 SW를 알아야 하는가?
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 7
1) 왜 SW를 알아야 하는가?
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 8
1) 왜 SW를 알아야 하는가?
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 9
1) 왜 SW를 알아야 하는가?
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 10
1) 왜 SW를 알아야 하는가?
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 11
1) 왜 SW를 알아야 하는가?
개발자와의 소통을 위해
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 12
1) 왜 SW를 알아야 하는가?
5. 디자이너와 SW
2014-12-29 디자이너를 위한 SW원리 이해 13
1) 왜 SW를 알아야 하는가?
1주차 첫 시간
2014-12-29 디자이너를 위한 SW원리 이해 14
1. 미션 수행하기
2014-12-29 디자이너를 위한 SW원리 이해 15
1) 각 팀에게 미션지가 주어집니다.2) 주어진 미션을 가장 먼저 해결해 보세요!3) 몇 가지 규칙!
- 책들은 오직! 각 팀의 책상 위에서만올려놓고 펴서 볼 수 있습니다.
- 각 팀의 책상에는 최대 4권의 책이동시에 올라갈 수 있습니다.
- 다 본 책은 반납함에 넣어주세요!4) 모르는것이 있다면 도우미 선생님께 손을~!
1. 미션 수행하기
2014-12-29 디자이너를 위한 SW원리 이해 16
각 팀의 미션 확인
1) 고사성어 찾기2) 동물이름 찾기3) 식물이름 찾기4) 한국의 도시 이름 찾기5) 외국의 도시 이름 찾기
1. 미션 수행하기
2014-12-29 디자이너를 위한 SW원리 이해 17
각 팀의 미션 확인
1) 고사성어 찾기 – 낭중지추, 각골난망2) 동물이름 찾기 – 재규어, 병아리3) 식물이름 찾기 – 고사리, 갈대4) 한국의 도시 이름 찾기 – 속초, 천안5) 외국의 도시 이름 찾기 – 아테네, 로마
1. 미션 수행하기
2014-12-29 디자이너를 위한 SW원리 이해 18
그런데..
2. 컴퓨터의 동작 원리
2014-12-29 디자이너를 위한 SW원리 이해 19
컴퓨터 동작 원리
2. 컴퓨터의 동작 원리
2014-12-29 디자이너를 위한 SW원리 이해 20
미션지 배부미션지 배부 = 프로그램 실행
: 사용자가 마우스로 아이콘을 더블클릭: 프로그램을 실행시키는 행위
2. 컴퓨터의 동작 원리
2014-12-29 디자이너를 위한 SW원리 이해 21
도서관
도서관 = 하드디스크
: 컴퓨터 속에 자성으로정보를 기록 해 놓은 보조 기억장치
: 프로그램, 파일들이 여기에저장되어 있어요
2. 컴퓨터의 동작 원리
2014-12-29 디자이너를 위한 SW원리 이해 22
책을 찾아라
책 찾는 행위
=하드디스크에 있는 파일을 찾는 행
위
: 사용자가 실행시킨 프로그램을하드디스크에서 찾는중..
1. 미션 수행하기
2014-12-29 디자이너를 위한 SW원리 이해 23
책상책상 = 메모리(RAM)
: 읽고 쓰는 것이 가능한 기억장치: 전원 공급이 중단되면 내용이 사라짐: 작업대 라고 보면 됩니다.
2. 컴퓨터의 동작 원리
1. 미션 수행하기
2014-12-29 디자이너를 위한 SW원리 이해 24
2. 컴퓨터의 동작 원리
책상 위에책을 올려놓고
펴보는것
책.책.펴=
하드디스크에 있는 내용을 메모리에 올려 놓은 것
: 작업대에 작업내용들을 올려놓은것
1. 미션 수행하기
2014-12-29 디자이너를 위한 SW원리 이해 25
2. 컴퓨터의 동작 원리
책에 있는 내용을수행하는 사람들
수행자 = CPU
: 실제로 명령들을 읽고 계산하는 장치: 다른 장치들에게 지시를 하기도 함
간단하게 말하면..
2014-12-29 디자이너를 위한 SW원리 이해 26
2. 컴퓨터의 동작 원리
컴퓨터 동작 원리
사람들이 프로그램을 실행하면하드디스크에서 그 파일을 찾아서
메모리에 그 내용을 올려놓고그 내용을 CPU가 수행하는것
우리가 자주쓰는 프로그램들
2014-12-29 디자이너를 위한 SW원리 이해 27
이 모든 것들이다 0과 1로 구현이 된다?
2014-12-29 디자이너를 위한 SW원리 이해 28
조금 있어 보이게 말하면.. - 폰 노이만 구조
2014-12-29 디자이너를 위한 SW원리 이해 29
2. 컴퓨터의 동작 원리
조금 더 자세히
2014-12-29 디자이너를 위한 SW원리 이해 30
2. 컴퓨터의 동작 원리
메모리를 자세히 - 정보저장
2014-12-29 디자이너를 위한 SW원리 이해 31
2. 컴퓨터의 동작 원리
메모리를 자세히 - 정보저장
2014-12-29 디자이너를 위한 SW원리 이해 32
2. 컴퓨터의 동작 원리
메모리를 자세히 – 영역
2014-12-29 디자이너를 위한 SW원리 이해 33
2. 컴퓨터의 동작 원리
메모리를 자세히 – 영역
2014-12-29 디자이너를 위한 SW원리 이해 34
2. 컴퓨터의 동작 원리
CPU를 자세히
2014-12-29 디자이너를 위한 SW원리 이해 35
2. 컴퓨터의 동작 원리
CPU를 자세히
2014-12-29 디자이너를 위한 SW원리 이해 36
2. 컴퓨터의 동작 원리
CPU를 자세히
2014-12-29 디자이너를 위한 SW원리 이해 37
2. 컴퓨터의 동작 원리
CPU를 자세히
2014-12-29 디자이너를 위한 SW원리 이해 38
2. 컴퓨터의 동작 원리
처음 본 그림. 다시 정리하자.
2014-12-29 디자이너를 위한 SW원리 이해 39
2. 컴퓨터의 동작 원리
1주차 첫 시간
2014-12-29 디자이너를 위한 SW원리 이해 40
프로그래밍
= 컴퓨터가 알아들을 수 있는 말로 명령들을 내리는것
= 프로그래밍 언어를 사용하여 명령을 내리면 됨.
2014-12-29 디자이너를 위한 SW원리 이해 41
1. 프로그래밍 해보기
프로그래밍 언어로 프로그램을 만들면
컴파일러가
0과 1의 신호로 바꿔줌
2014-12-29 디자이너를 위한 SW원리 이해 42
1. 프로그래밍 해보기
# 프로그래밍 언어 : 넥스트
이 프로그래밍 언어를 사용하여‘숫자 + 숫자’ , ‘숫자 x 숫자’결과 값을모니터에 출력할 수 있다.
2014-12-29 디자이너를 위한 SW원리 이해 43
1. 프로그래밍 해보기
이렇게 생긴 종이에명령어들을 쓰면 됨.
2014-12-29 디자이너를 위한 SW원리 이해 44
1. 프로그래밍 해보기
단,
(숫자)는 0~15중 하나를(연산)은 ‘더하기, 곱하기’만 할 수 있다.(공간)은 A,B,C 3개를 사용할 수 있다.
2014-12-29 디자이너를 위한 SW원리 이해 45
1. 프로그래밍 해보기
사용할 수 있는 명령어
- (공간A/B/C)에 (숫자) 넣기- (공간A/B/C)에 (공간A/B/C) 값 넣기- (공간A/B/C)값과 (공간A/B/C)값 (연산)한 것을
남은 공간에 넣기- 모니터에 (공간A/B/C)를 출력하기
2014-12-29 디자이너를 위한 SW원리 이해 46
1. 프로그래밍 해보기
# 넥스트 사용 규칙
1) 첫 줄에는 무조건 [시작]을 적고, 마지막 명령다음 줄에는 무조건 [끝]을 적는다.
2014-12-29 디자이너를 위한 SW원리 이해 47
1. 프로그래밍 해보기
# 넥스트 사용 규칙
2) 한줄에 하나의 명령만 쓸 수 있다.Ps) 컴퓨터가 명령은 위에서 아래로 순서대로 읽는다.
2014-12-29 디자이너를 위한 SW원리 이해 48
1. 프로그래밍 해보기
# 프로그래밍 예제
1) 3+4를 해서 모니터에 결과값을 보여주는 프로그램
2014-12-29 디자이너를 위한 SW원리 이해 49
1. 프로그래밍 해보기
2명이서 짝이 되어 주어진 명령어로 프로그램을 만들어 보세요. (인간컴퓨터로 실행해볼 예정!)
A팀 B팀을 나누어서 상대팀이 준 프로그램을 가장 빨리 처리하는 팀이 승리!
2014-12-29 디자이너를 위한 SW원리 이해 50
1. 프로그래밍 해보기
비트박스
2014-12-29 디자이너를 위한 SW원리 이해 51
2의7승= 128
2의6승= 64
2의5승= 32
2의4승= 16
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
비트박스
2014-12-29 디자이너를 위한 SW원리 이해 52
0 0 0 0 0 1 0 1
2의7승= 128
2의6승= 64
2의5승= 32
2의4승= 16
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
0 0 0 0 1 1 0 1
2의7승= 128
2의6승= 64
2의5승= 32
2의4승= 16
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
0 1 0 0 0 1 0 1
2의7승= 128
2의6승= 64
2의5승= 32
2의4승= 16
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
1 0 0 0 0 0 0 1
2의7승= 128
2의6승= 64
2의5승= 32
2의4승= 16
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
1+4 = 5
1+4+8 = 13
64+4+1= 69
128+1 = 129
조금다른 비트박스
2014-12-29 디자이너를 위한 SW원리 이해 53
명령 구분 부분 2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
조금다른 비트박스
2014-12-29 디자이너를 위한 SW원리 이해 54
0 0 0 1 0 1 0 1
0001 = 더하기 0111 = 곱하기0011 = 빼기 1111 = 나누기
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
0 0 1 1 1 1 0 1
0001 = 더하기 0111 = 곱하기0011 = 빼기 1111 = 나누기
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
0 1 1 1 0 1 0 1
0001 = 더하기 0111 = 곱하기0011 = 빼기 1111 = 나누기
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
1 1 1 1 0 0 0 1
0001 = 더하기 0111 = 곱하기0011 = 빼기 1111 = 나누기
2의3승= 8
2의2승= 4
2의1승= 2
2의0승= 1
5 더하기
13 빼기
5 곱하기
1 나누기
상대팀(사용자)- 자신이 만든 프로그램을 컴파일하고 실행함
2014-12-29 디자이너를 위한 SW원리 이해 55
컴파일러- 상대가 만든 프로그램을 0,1로
바꿔주고 하드디스크에 넘겨줌
하드디스크- 0,1로 바뀐 프로그램을메모리에게 전달해줌(가져다 주는것이 아니라 복사)
메모리- 하드디스크에 있는 모든 내용이 다 들어오면 두 손을 듦.
운영체제- 메모리가 손을 들면 호루라기를 붐
CPU@ 명령 가지고 오는 사람- 호루라기 소리를 들으면 메모리에서 명령 한 줄을 가지고 와서 (복사) 해독&명령자에게 줌@ 해독&명령자- 명령을 해석한 다음 (명령 가지고 오는 사람 / 모니터 / 계산기) 에게 명령을 내림@계산기- 해독&명령자의 지시에 따라계산을 하고 결과를 말해줌
모니터- 출력하라는 명령을 받으면0,1을 보고 숫자를 출력해줌
숙련된 조교의 시범
2014-12-29 디자이너를 위한 SW원리 이해 56
실제 컴퓨터 프로그램
1) 계산기2) 코딩해보기
2014-12-29 디자이너를 위한 SW원리 이해 57
정리하며
2014-12-29 디자이너를 위한 SW원리 이해 58
소감 나누기
2014-12-29 디자이너를 위한 SW원리 이해 59