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