한국방송통신대학교(Korea National Open University)

한국방송통신대학교(Korea National Open University)

한국방송통신대학교(KNOU) 컴퓨터과학과의 학교·학과 안내, 주요 과목 강의별 정리, 평가 운영 방식, 시험 대비용 암기표를 한 곳에 모은 위키 문서다.

출처와 한계

본 문서의 강의별 정리·연습문제·암기표는 U-KNOU 강의 페이지의 학습개요·학습목표·연습문제·정리하기·참고자료를 교재 및 멀티미디어 강의에서 가져와 시험 대비용으로 재구성한 것이다. 시험 범위와 평가 방식은 학기마다 바뀔 수 있으므로 응시 전 반드시 학교 공지사항으로 최종 확인한다. 강의 개편이 있는 경우 최신 내용은 학교 공지에서 확인한다.

원본 자료 저장소: https://github.com/currenjin/knou-archive

한국방송통신대학교 안내

KNOU(Korea National Open University)는 원격 학사 시스템을 운영하는 국립대학이다. 온라인 강의(U-KNOU)와 출석수업, 지역 학습관 운영을 결합해 학기는 1·2학기 체제로 진행하고, 평가는 출석수업(또는 대체시험), 과제물, 형성평가, 기말시험으로 구성한다.

공식 안내는 학교 사이트를 참고한다.

학교 홈페이지: https://www.knou.ac.kr/
U-KNOU(강의 사이트): https://ucampus.knou.ac.kr/

컴퓨터과학과 안내

컴퓨터과학과는 정보컴퓨터과학대학 소속으로, 프로그래밍 언어(Java, Python), 웹 프로그래밍(HTML5), 데이터 처리·분석, 컴퓨팅 응용 영역(유비쿼터스 등)을 다룬다. 이 문서에서 다루는 과목은 학과 커리큘럼의 일부이며, 전체 과목 안내는 학과 페이지를 참고한다.

학과 안내(컴퓨터과학과): https://cs.knou.ac.kr/

평가 운영 방식

구분	방식	비고
출석수업평가	맞춤형평가 (지역대학별)	출석수업 담당 교수가 직접 출제
출석수업대체시험	온라인출석시험(객관식) 또는 온라인과제물	과목별로 다름
형성평가	학습진도율 + 연습문제	진도·연습 비중은 과목별 상이
기말시험	온라인출석시험(객관식)	교재 및 멀티미디어 강의 전 범위

학습 가이드

각 강의의 학습목표와 연습문제부터 훑은 뒤, 헷갈리는 강의는 학습개요·주요용어로 되돌아가 다시 읽는다. 연습문제는 정답을 가리고 풀어본 뒤 맞춘다. 강의별 정리만으로 부족하면 각 과목 끝에 붙어 있는 핵심 암기표·시험범위 암기 리스트·키워드 압축 카드를 활용한다.

과목별 강의 정리

데이터정보처리입문

우선순위: 통계자료 검색·엑셀 함수/그래프·R/Python 분석 흐름을 절차 중심으로 암기

평가/시험 범위

평가유형	평가방법	출제범위	비고
출석수업평가	맞춤형평가	출석수업 담당 교수가 수업 내 공지	-
출석수업대체시험	온라인과제물	추후 학교 홈페이지 공지사항 참고	-
형성평가	진도20/연습문제0	학습진도율 20점	-
기말시험	온라인출석시험(객관식)	교재 및 강의 전 범위	공학용 계산기 및 계산기 사용 가능

1강. 데이터 분석과 컴퓨터

학습시간: 58분 / 58분
학습개요: 지식정보화 사회에서 우리는 수많은 정보를 접하게 되는데, 특히 많은 부분이 데이터를 통한 정보라고 할 수 있다. 우리가 살고 있는 현실을 파악하고, 현실을 이해하는 많은 과정이 데이터를 통해서 이루어진다. 데이터분석을 위해서는 데이터분석에 대한 기본 개념과 방법론이 요구되며, 데이터분석 소프트웨어의 활용이 필수적으로 요구된다. 이 장에서는 데이터분석을 위한 기본 개념을 소개하고, 데이터분석 소프트웨어들을 소개하도록 한다. 또한 엑셀과 R을 이용한 데이터분석 예를 소개한다.
학습목표:
- 지식정보화사회에서 컴퓨터의 활용에 대하여 이해할 수 있다.
- 데이터분석 절차를 설명할 수 있다.
- 데이터분석 소프트웨어들을 설명할 수 있다.
- 엑셀과 R을 이용한 데이터분석 예를 설명할 수 있다.

연습문제

지문: ( a ) - 조사, 실험의 계획 - 데이터의 수집 - ( b ) - 분석결과의 평가 Q1. 일반적인 데이터분석 절차이다. ( )안에 순서대로 가장 적합한 것은?

a : 문제의 정의, b : 설문지 평가

a : 설문지 작성, b : 데이터의 정리, 분석

a : 전문가와의 상담, b : 데이터의 분석

a : 문제의 정의, b : 데이터의 정리, 분석 정답: 4

Q2. 컴퓨터를 통하여 데이터 정보를 효율적으로 처리하기 위해 요구되는 사항이 아닌 것은?

컴퓨터를 쉽게 사용할 수 있어야 한다.
정보를 검색하고 수집․분석하기 위해서는 반드시 컴퓨터 프로그램 언어를 알아야 한다.
데이터 분석에 대한 기본개념과 방법론들을 숙지하여야 한다.
데이터 분석을 위한 다양한 소프트웨어의 활용법을 숙지하여야 한다.

정답: 2

Q3. 다음 중 범용 통계패키지에 대한 설명으로 잘못된 것은?

SPSS는 GUI 환경아래에서 통계분석 및 자료처리가 이루어지므로 쉽게 분석처리를 할 수 있다.
SAS는 방대한 양의 자료 처리 기능이 뛰어나며 다양한 통계 분석 절차를 제공하고 있다.
파이썬은 미국에서 개발된 프로그램 언어로 스프레드시트 형태의 데이터 입력을 취하고 있다.
R은 객체지향 프로그래밍 언어로서 대화형 통계분석과 그래프 기능이 뛰어나다.

정답: 3

Q4. 오늘날과 같이 효율적인 정보의 수집, 수집된 정보의 가치판단, 정보활용 능력이 필수적으로 요구되는 사회를 가장 잘 나타낸 말은?

유비쿼터스사회
전자정보화사회
지식정보화사회
전자통신사회

정답: 3

Q5. R 통계패키지를 다운받고자 한다. R 공식 사이트는 ?

www.r-package.org
www.r-project.org
www.r-package.com
www.r-project.com

정답: 2

참고자료/링크

2강. 데이터 입력과 점검

학습시간: 53분 / 53분
학습개요: 엑셀이나 R, 파이썬 등을 이용한 데이터 분석 방법을 공부하기에 앞서 데이터에 대한 개념과 정의, 데이터 입력, 점검 등에 대하여 학습한다. 데이터란 관심 있는 어떤 주제에 대해서 수집된 구조화된 정보이다. 데이터는 조사나 실험을 통해서 얻어지는데, 데이터를 분석하기 위해서는 데이터의 코딩 설계가 적합해야 하고, 알맞은 형태로 컴퓨터에 입력되어야 한다. 또한 입력된 데이터에 입력 과정이나 조사 과정의 오류가 없는지 점검해야 한다.
학습목표:
- 데이터의 정의와 분석 목적을 설명할 수 있다.
- 측정의 수준과 데이터의 종류에 대해서 설명할 수 있다.
- 데이터의 입력과정을 설명할 수 있다.
- 입력된 데이터에 대한 점검과정을 설명할 수 있다.
- 주요용어
- 데이터(data) : 어떤 관심 있는 주제에 대해서 수집된 구조화된 정보(organized information)를 말함. 넓은 의미의 데이터는 수치, 문자, 그림 등의 표현양식과 관계없이 어떤 주제에 대한 구조화된 정보를 뜻함
- 케이스(case) : 특정 조사단위로부터 얻어진 정보의 집합체를 말함
- 변수(variable) : 각 조사단위로부터 측정된 개별적인 속성들

연습문제

Q1. 설문문항에서 명목척도에 해당하는 것은?

문항1, 문항3
문항2, 문항3
문항2, 문항4
문항3, 문항4

정답: 3

Q2. 주어진 설문지를 이용하여 100명의 학생들에게 응답을 얻었다. 데이터의 구성에 대한 올바른 설명은?

4개의 케이스와 100개의 변수로 구성된다.
100개의 케이스와 4개의 변수로 구성된다.
50개의 케이스와 4개의 변수로 구성된다.
4개의 케이스와 50개의 변수로 구성된다.

정답: 2

지문: Ⅰ. 데이터는 어떤 관심 주제에 대한 구조화된 정보(information)이다. Ⅱ. 데이터 수집의 대표적인 방법으로는 조사, 실험, 관찰 등을 들 수 있다. Ⅲ. 데이터는 숫자로만 이루어져 있다. Q3. 다음의 데이터에 대한 설명 중 올바른 것끼리 짝지어진 것은?

Ⅰ, Ⅱ

Ⅰ, Ⅲ

Ⅱ, Ⅲ

Ⅰ, Ⅱ, Ⅲ 정답: 1

Q4. 다음 측정 수준에 대한 설명 중 옳지 않은 것은?

명목척도에서 각 조사단위에 부여된 숫자는 구분을 목적으로 부여된 기호에 불과하다.
섭씨온도, 습도, 지능지수 등은 구간척도로 측정된 값이다.
변수의 측정수준이 적합한 통계 분석 기법의 선택에 영향을 미치지는 않는다.
계란을 크기에 따라 대․중․소로 구분하면 순서척도로 측정된 것이다.

정답: 3

Q5. 데이터를 입력한 후, 제대로 입력되었는지 점검하고자 한다. 데이터의 오류를 점검하기 위한 방법이 아닌 것은?

각 변수의 입력 범위를 벗어난 케이스를 확인해 본다.
변수간의 논리적 연관성을 고려하여 확인한다.
각 케이스를 조사된 설문지와 비교하면서 점검한다.
설문항목 중 하나라도 응답하지 않은 경우가 있다면 해당 설문지는 분석에서 제외한다.

정답: 4

지문:

학생의 소속 지역대학

학교 생활만족도(아주 만족, 만족, 보통, 불만족, 아주 불만족)

수강 신청한 과목 중 제일 좋아하는 교과목 Q6. 통계·데이터과학과에 재학 중인 학생들을 대상으로 통계조사를 실시하였다. 다음에 제시된 변수를 조사하였는데, 이 중 명목척도로 측정된 변수는 몇 개인가?

없음

1개

2개

3개 정답: 3

참고자료/링크

3강. 통계정보의 검색 및 활용 (1)

학습시간: 43분 / 43분
학습개요: 인터넷은 전 세계 수많은 컴퓨터가 연결되어 있는 지구촌 네트워크를 일컫는 말이다. 인터넷은 전자우편, 인터넷 전화 등을 통해 효율적인 통신수단의 역할을 하고 있으며, 연결된 데이터베이스의 증가와 검색엔진 등의 활성화로 인해 좋은 정보습득의 도구로 이용되고 있다. 이 강의에서는 국가통계정보의 검색 및 데이터제공 사이트를 알아본다.
학습목표:
- 인터넷을 이용하여 국가통계정보를 검색할 수 있다.
- 데이터제공 사이트를 찾아볼 수 있다.

연습문제

Q1. 한국사회과학데이터센터 사이트는?

http://ww.ksdc.re.kr
http://ecos.bok.or.kr/
http://lib.stat.cmu.edu/DASL
http://www.itl.nist.gov/div898/strd/

정답: 1

Q2. 국가경제에 관한 통계들을 제공하는 한국은행 경제시스템 사이트는?

http://kosis.kr/
http://ecos.bok.or.kr/
http://kostat.go.kr/
http://laborstat.molab.go.kr/

정답: 2

Q3. 통계청 사이트는?

http://kosis.kr/
http://ecos.bok.or.kr/
http://kostat.go.kr/
http://laborstat.molab.go.kr/

정답: 3

Q4. 다음 중 카네기 멜론 통계학과에서 운영하는 사이트로서 다양한 데이터를 제공하는 사이트는?

http://kosis.kr/
http://ecos.bok.or.kr/
http://lib.stat.cmu.edu/DASL
http://www.itl.nist.gov/div898/strd/

정답: 3

Q5. NIST(National Institute of Standards and Technology)에서 여러 통계 분석 등과 관련하여 유용한 데이터를 제공하는 사이트는?

http://ww.ksdc.re.kr
http://ecos.bok.or.kr/
http://lib.stat.cmu.edu/DASL
http://www.itl.nist.gov/div898/strd/

정답: 4

참고자료/링크

4강. 통계정보의 검색 및 활용 (2)

학습시간: 65분 / 66분
학습개요: 이번 강의에서는 데이터의 특성을 요약할 때 기본적으로 이용되는 기술통계량과 그래프들을 알아보고, 웹을 활용한 데이터분석 예를 알아본다.
학습목표:
- 기술통계량을 이해할 수 있다.
- 연속인 자료에 이용되는 통계그래프를 설명할 수 있다.
- 웹을 활용하여 기술통계량을 구하고, 통계그래프를 그려볼 수 있다.

연습문제

Q1. 다음 중 표본분산을 구하는 공식은?

정답: 4

Q2. 자료의 개수나 측정단위가 다른 두 개 이상의 자료에 대한 표본집단 간의 상대적인 산포를 비교할 때 이용되는 측도로, 두 집단의 단위가 다르거나, 단위는 같지만 평균의 차이가 클 때 두 그룹의 산포를 비교하는 데 유용하게 이용되는 측도는?

중앙값
표준편차
표준오차
변동계수

정답: 4

Q3. 다음 중 표본평균을 구하는 공식은?

정답: 3

지문: 22 5 21 16 18 20 23 24 32 490 36 Q4. 조사된 자료가 다음과 같다. 중앙값은?

20

21

22

23 정답: 3

Q5. 탐색적 자료분석의 관점에서 살펴볼 때 한 묶음의 자료를 정리하는 숫자로서 다섯숫자요약이란 다음 중 무엇인가?

중앙값, 평균, 분산, 제1사분위수, 제3사분위수
중앙값, 평균, 표준편차, 제1사분위수, 제3사분위수
최소값, 최대값, 중앙값, 제1사분위수, 제3사분위수
최소값, 최대값, 평균, 제1사분위수, 제3사분위수

정답: 3

참고자료/링크

5강. 문서작성

학습시간: 61분 / 61분
학습개요: 문서를 작성한다거나, 보고서를 작성하는 데 있어서 널리 이용되고 있는 한글 2018 사용법을 공부한다. 한글 2018은 한글, 영문 및 기타 다양한 문자를 이용한 문서작성, 문자변환 기능, 표 만들기 기능 등 다양한 문서작성에 필요한 대부분의 기능을 제공하고 있다. 이번 강의에서는 한글 2018을 사용하여 효율적인 문서를 작성하는데 필요한 기능을 살펴본다.
학습목표:
- 한글 2018의 기초 사용법을 이해할 수 있다.
- 한글 2018을 이용한 문서 작성 방법을 설명할 수 있다.
- 한글 2018을 이용한 표 작성 방법을 이해할 수 있다.
- 한글 수식편집기 사용 방법을 설명할 수 있다.
- 주요용어
- 서식 도구 모음 : 문서를 작성하면서 글꼴이나 글자크기, 글자 모양, 문단모양, 또는 스타일을 지정할 수 있는 기능을 모아놓은 것
- 문단 정렬 방식 : 문단을 구성하는 단어들을 문단의 폭에 맞게 배치하는 방법으로 양쪽 정렬, 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 배분 정렬, 나눔 정렬 중에 하나를 선택할 수 있음
- 다단 편집 : 신문이나 잡지 등에서 단행본과는 달리 하나의 쪽을 세로 방향으로 공간을 나누어 각 공간마다 글을 배치한 것

연습문제

지문: 문서를 작성하다 보면 전문적인 용어에 대한 추가적인 설명이 필요한 경우가 있다. 이 때 이용할 수 있는 것이 ( ㉠ )와(과) ( ㉡ )이다. ( ㉠ )는(은) 낱말이 있는 페이지의 아래쪽에 추가 설명이 위치하며, ( ㉡ )는(은) 문서의 맨 마지막에 온다는 점에서 차이가 있다. Q1. 다음 괄호 안에 알맞은 용어로 짝 지어진 것은?

㉠ : 각주 ㉡ : 미주

㉠ : 미주 ㉡ : 각주

㉠ : 장평 ㉡ : 간격

㉠ : 간격 ㉡ : 장평 정답: 1

지문: ( ㉠ )^2 ~ ( ㉡ ) =~ sum {( 관측도수 - 기대도수 )^2 } ( ㉢ ) 기대도수 # ( ㉡ ) =~ sum { ( f_{ij} - {hat f}{ij} )^2 } ( ㉢ ) {hat f}{ij}} 수식편집기창을 이용하여 다음 수식을 작성하고자 한다. Q2. 수식편집창의 다음 ( ) 안의 ㉠, ㉡, ㉢에 적합한 것은?

㉠ : chi, ㉡ : &, ㉢ : vert

㉠ : chi, ㉡ : &, ㉢ : over

㉠ : theta, ㉡ : #, ㉢ : vert

㉠ : theta, ㉡ : &, ㉢ : over 정답: 2

지문: f(x) = ( a ) { 1, & 0 leq x leq 1 ( b ) 0, & 아닐 ~때 } 한글 2018의 수식편집기창을 이용하여 다음 수식을 작성하고자 한다. Q3. 수식편집창의 다음 ( ) 안의 a, b 에 적합한 것은?

a=cases, b=&

a=vert, b=&

a=cases, b=#

a=vert, b=# 정답: 3

지문: Ⅰ. 복사나 이동을 위한 블록 지정에서 F3는 칸 단위 블록 설정, F4는 줄 단위 블록을 지정할 수 있다. Ⅱ. 신문이나 잡지 등에서 사용되고 있는 다단 편집의 기능은 제공하고 있다. Ⅲ. 그림을 삽입하여 문서를 작성할 수 있다. Q4. 다음은 한글 2018 사용법에 대한 설명이다. 옳은 설명을 모두 고른 것은?

Ⅰ, Ⅱ

Ⅰ, Ⅲ

Ⅱ, Ⅲ

Ⅰ, Ⅱ, Ⅲ 정답: 3

지문: Ⅰ. 한자로 된 단어를 입력하고자 하는 경우는 먼저 한글로 해당 단어를 입력하고 [입력] - [한자로 변화]을 이용하여 변환한다. Ⅱ. [F5] 키를 이용하면 [입력] - [한자 입력]을 대신할 수 있다. Ⅲ. 두 글자 이상의 단어는 [F3] 키로 블록으로 잡아 한자로 변환시킬 수 있다. Q5. 다음은 한글 2018 사용법에서 한자 변환에 대한 설명이다. 옳은 설명을 모두 고른 것은?

Ⅰ, Ⅱ

Ⅰ, Ⅲ

Ⅱ, Ⅲ

Ⅰ, Ⅱ, Ⅲ 정답: 2

참고자료/링크

이전 강의와 동일

6강. 엑셀을 이용한 데이터 처리 (1)

학습시간: 43분 / 43분
학습개요: 엑셀은 대차대조표, 성적표 작성, 고객 관리 등과 같이 행과 열로 구성된 데이터에 대한 분석에 유용하게 활용되고 있는 대표적인 스프레드시트로 데이터 분석, 그래프 표현, 데이터베이스 관리 도구 등 다양한 기능을 갖고 있다. 이번 시간에는 엑셀의 주요 기능과 기본 용어에 대해서 살펴보고, 데이터의 입력, 데이터의 이동과 복사, 저장과 출력 방법 등의 기초 활용법에 대해서 실습과 함께 살펴본다.
학습목표:
- 엑셀의 주요 기능을 제시할 수 있다.
- 엑셀의 기본 용어를 설명할 수 있다.
- 데이터의 입력과정을 이해할 수 있다.
- 데이터의 이동과 복사, 저장과 출력 방법을 설명할 수 있다.
- 주요용어
- 케이스(case) : 특정 조사단위로부터 얻어진 정보의 집합체를 말함
- 변수(variable) : 각 조사단위로부터 측정된 개별적인 속성들
- 셀(cell) : 워크시트에서 데이터가 입력되는 열과 행이 만나는 지점을 말함. 각 셀은 A1(A와 1이 만나는 위치라는 뜻)처럼 셀이 속한 행과 열의 위치에 따라서 셀주소를 갖음

연습문제

지문: 가. 값, 셀참조, 함수 등을 사용하여 새로운 값을 생성한다. 나. 함수식은 등호(=)로 시작한다. 다. 엑셀에서 함수 이름은 대문자로만 입력해야 한다. Q1. 다음은 엑셀에 대한 함수 사용방법에 대한 설명이다. 옳은 설명끼리 짝지어진 것은?

가, 나

가, 다

나, 다

가, 나, 다 정답: 1

Q2. 다음은 엑셀의 통합문서(workbook)와 워크시트(worksheet)에 대한 내용이다. 잘못된 것은?

통합문서는 데이터 입력이나 분석 작업을 하여 그 결과를 저장하는 하나의 파일을 의미한다.
통합문서는 워크시트(worksheet), 차트시트(chart sheet), 매크로시트(macro sheet)를 포함한다.
통합문서를 한 권의 책에 비유한다면 하나의 워크시트는 한 페이지를 의미한다.
워크시트는 항상 고정된 이름을 가지며, 한번 정해지면 바꿀 수 없다.

정답: 4

Q3. 선택된 셀의 정보를 보여주고, 데이터를 입력하거나 수정할 수 있으며, 계산을 위해서 수식을 입력할 수 있는 부분을 무엇이라 하는가?

메뉴표시줄
도구모음
워크시트
수식입력줄

정답: 4

Q4. 데이터를 입력한 후 이웃하지 않은 셀들을 선택하고자 한다. 올바른 방법은?

ALT 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.
CTRL 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.
SHIFT 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.
TAB 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.

정답: 2

Q5. 다음 중 엑셀의 중요한 기능이라고 할 수 없는 것은?

그래프 표현 기능을 가지고 있다.
통계분석 기능을 가지고 있다.
인터넷 검색기능을 가지고 있다.
데이터베이스의 관리도구 기능을 가지고 있다.

정답: 3

참고자료/링크

이전 강의와 동일

7강. 엑셀을 이용한 데이터 처리 (2)

학습시간: 48분 / 48분
학습개요: 엑셀의 다양한 함수 기능을 활용하면 어려운 계산도 손쉽게 할 수 있고, 데이터 분석도구를 활용하면 기술통계량을 쉽게 구할 수 있다. 이번 시간에는 엑셀의 연산자, 엑셀 함수의 기능과 형식, IF 함수 활용방법 등에 대해서 공부한다. 또한 엑셀의 데이터 분석도구를 활용하여 데이터에 대한 기초적인 데이터 분석 방법에 대해서 공부한다.
학습목표:
- 엑셀의 연산자를 활용할 수 있다.
- 엑셀 함수의 기능과 형식을 설명할 수 있다.
- 엑셀 함수를 사용하여 계산할 수 있다.
- 엑셀을 활용하여 데이터를 분석할 수 있다.
- 주요용어
- 케이스(case) : 특정 조사단위로부터 얻어진 정보의 집합체를 말함
- 변수(variable) : 각 조사단위로부터 측정된 개별적인 속성들
- 상대참조 : 행 이름이나 열 이름만을 사용하여 셀을 참조하는 방법(예: A1, B2, A1:F1 등)

연습문제

Q1. 엑셀에서 B2셀의 값이 60보다 작으면 “불합격”, 60이상이면 “합격”을 D2셀에 표시하고자 한다. 적합한 엑셀함수 사용은?

=(IF(B2<60) "합격“ ELSE "불합격”)
=(IF(B2<60) "불합격“ ELSE "합격”)
=IF(B2<60, "합격“, ”불합격“)
=IF(B2<60, "불합격“, ”합격“)

정답: 4

Q2. B2와 C2 셀에 데이터를 입력한 후 두 값의 평균점수를 구하고자 한다. 적합한 수식입력은?

AVERAGE(B2:C2)
=AVERAGE(B2:C2)
STDEV(B2:C2)
=STDEV(B2:C2)

정답: 2

지문: ※ (3 ~ 5) 학생들 30명에 대한 통계학 점수와 수학 점수 자료를 다음과 같이 입력하였다. 물음에 답하시오. Q3. 데이터를 입력한 후 그림과 같이 각 케이스에 대하여 평균점수를 구하고자 한다. (A) 부분에 적합한 수식입력은?

AVERAGE(B2:C2)

=AVERAGE(B2:C2)

MEDIAN(B2:C2)

=MEDIAN(B2:C2) 정답: 2

지문: ※ (3 ~ 5) 학생들 30명에 대한 통계학 점수와 수학 점수 자료를 다음과 같이 입력하였다. 물음에 답하시오. Q4. D2 셀에 =IF(SUM(B2:C2)>=130, "합격“, ”불합격“)를 입력하였을 때 그 결과는?

140

70

합격

불합격 정답: 3

지문: ※ (3 ~ 5) 학생들 30명에 대한 통계학 점수와 수학 점수 자료를 다음과 같이 입력하였다. 물음에 답하시오. Q5. D2 셀에 =$B$2+$C$2를 입력한 후 드래그&드롭 기능을 이용하여 D11 셀까지 채워 넣었다. 이 때 D3 셀의 결과는?

136

121

오류 발생

알 수 없음 정답: 1

참고자료/링크

이전 강의와 동일

8강. 엑셀을 이용한 그래프 그리기 (1)

학습시간: 40분 / 48분
학습개요: 엑셀로 데이터를 분석할 때 수치로 표현된 분석 결과들을 단순하게 나열하는 것보다 그래프를 함께 제시하는 것이 효과적이다. 그래프를 이용은 데이터가 갖고 있는 정보와 그 의미를 시각적으로 요약해서 나타내어 데이터 분석 결과를 쉽게 이해할 수 있도록 돕는다. 오늘 강의는 실제 데이터 분석과 관련하여 널리 사용되는 있는 원 그래프, 사각형 그래프, 막대 그래프, 꺾은선 그래프 등에 대한 개념과 엑셀을 이용해서 이들 그래프를 작성하는 방법에 대해서 살펴본다.
학습목표:
- 그래프의 역할을 설명할 수 있다.
- 원 그래프와 사각형 그래프를 작성할 수 있다.
- 막대 그래프를 작성할 수 있다.
- 꺾은선 그래프를 이용하여 데이터 분석을 할 수 있다.
- 주요용어
- 정성적 데이터(qualitative data) : 명목형 척도나 순서형 척도로 측정된 데이터
- 정량적 데이터(quantitative data) : 구간척도나 비율척도로 측정된 연속형 데이터
- 원 그래프(pie chart) : 각 항목별 비율을 나타낼 때, 각 항목의 비율과 원 그래프에서 각 항목을 나타내는 면적의 비율이 같게 만든 그래프

연습문제

Q1. 다음과 같은 성별 도수분포를 그래프로 나타내고자 한다. 적합한 그래프끼리 묶인 것은?

막대그래프, 원그래프
히스토그램, 원그래프
막대그래프, 방사형 차트
원그래프, 분산형 차트

정답: 1

Q2. 통계청 홈페이지를 방문하여 최근 5년간의 매월 소비자 물가지수 데이터를 구하여 적합한 그래프를 엑셀로 그려서 전체적인 경향을 파악하고자 한다. 가장 알맞은 차트의 종류는 무엇인가?

원형
히스토그램
방사형
꺾은선형

정답: 4

Q3. 시간의 흐름에 따라 관측된 시계열 데이터의 추세 변화나 경향을 파악하고자 한다. 다음 중 이와 같은 분석 목적에 가장 적합하지 않은 그래프는?

꺾은선 그래프
원 그래프
세로 막대형 그래프
분산형 그래프

정답: 2

지문: 뉴스 : 33.3%, 연속극 : 36.3%, 스포츠 : 9.1%, 오락 : 11.5%, 기타 : 9.9% Q4. 사람들이 즐겨보는 TV 프로그램에 대한 비율을 다음과 같이 조사하였다. 이러한 경우 전체에 대한 항목별 비율을 비교하거나, 특정 항목을 강조하기 하기 위해 가장 적합한 그래프는?

히스토그램

산점도

원 그래프

꺾은선 그래프 정답: 3

Q5. 엑셀을 이용하여 간격이 일정한 시계열 데이터의 경향을 파악하고자 한다. 엑셀 차트 중에서 가장 적합한 차트 유형은?

세로 막대형이나 가로 막대형
영역형
분산형
꺾은선형

정답: 4

참고자료/링크

이전 강의와 동일

9강. 엑셀을 이용한 그래프 그리기 (2)

학습시간: 42분 / 42분
학습개요: 엑셀을 활용하면 그래프를 손쉽게 작성할 수 있고, 이를 통해서 데이터가 갖고 있는 정보를 시각적으로 나타낼 수 있다. 오늘 강의는 제 8강에 이어 히스토그램, 산점도 작성법에 대하여 엑셀 실습과 함께 살펴본다. 아울러 히스토그램을 그리기 위한 기초 작업인 도수분포표 작성법을 공부하고, 상관분석을 통해서 두 변수 사이의 연관성 분석에 대해서 공부한다.
학습목표:
- 도수분포를 작성할 수 있다.
- 엑셀을 이용하여 히스토그램을 작성할 수 있다.
- 산점도를 작성하여 두 변수의 연관성을 설명할 수 있다.
- 상관분석의 개념과 분석 결과를 해석할 수 있다.
- 주요용어
- 도수분포표(frequency table) : 겹치지 않는 몇 개의 범주 즉, 계급에 속한 관측치의 개수를 요약하여 작성한 표. 정성적 데이터뿐만 아니라 정량적 데이터에도 적용할 수 있음
- 히스토그램(histogram) : 연속형 데이터에 대해서 데이터의 특징이나 분포 모양을 살펴볼 때 널리 이용되는 그래프. 수평축 위에 계급구간을 표시하고 그 위로 각 계급의 상대도수에 비례하는 넓이의 직사각형을 그린 것
- 산점도(scatter plot) : 두 연속형 변수 사의 관계를 그래프를 통해서 살펴보고자 할 때 사용되는 그래프. 두 변수 사이의 연관성 정도를 살펴보기 위한 분석의 첫 단계임

연습문제

Q1. 엑셀 함수를 이용하여 구한 시간의 흐름에 따른 전압 값을 다음과 같은 그래프로 표시하였다. 이와 같은 그래프를 얻기 위해서 사용된 엑셀 차트의 유형은 무엇인가?

히스토그램
세로 막대형
원형
분산형

정답: 4

Q2. 두 연속인 변수 X와 Y 사이의 상관계수를 구했더니 0.9가 나왔다. 올바른 해석은?

X값이 커지면 Y값은 직선관계를 가지고 커진다.
X값이 커지면 Y값은 직선관계를 가지고 작아진다.
X값이 커지면 Y값은 곡선관계를 가지고 커진다.
X값이 커져도 Y값은 변화가 없다.

정답: 1

Q3. 두 변수들 사이의 관계를 살펴보기 위해 산점도를 그리고자 한다. 차트마법사의 차트 종류 입력상자에서 선택할 차트 종류는?

세로 막대형이나 가로 막대형
영역형
분산형
꺾은선형

정답: 3

Q4. 도수분포표에 대한 다음 설명 중 옳지 않은 것은?

겹치지 않는 몇 개의 범주 또는 계급에 속한 관측치의 개수를 요약하여 작성한 표이다.
연속형 데이터에 대한 분석에서 도수분포표를 기초로 히스토그램을 그릴 수 있다.
연속형 데이터에 대해 도수분포표를 작성할 때는 계급의 개수와 폭을 결정하는 것이 중요하다.
정성적 데이터에 대한 분석에는 활용할 수 없다.

정답: 4

Q5. 다음의 산점도에 대한 상관계수로 가장 적합할 것으로 생각되는 값은?

r = -0.87
r = 0.25
r = 0.92
r = 1.02

정답: 3

참고자료/링크

이전 강의와 동일

10강. 엑셀 활용 (1)

학습시간: 41분 / 41분
학습개요: 이번 시간에는 엑셀 함수의 기능과 사용법에 대해서 살펴본다. 엑셀 함수의 기본적인 기능, 날짜/시간 함수와 텍스트 함수를 활용한 다양한 사례를 살펴봄으로써 엑셀 활용 능력을 배양하고자 한다.
학습목표:
- 엑셀 함수의 기능을 이용할 수 있다.
- 엑셀 함수의 기능을 활용하여 실제 문제를 해결할 수 있다.
- 날짜/시간 함수를 이용할 수 있다.
- 텍스트 함수 기능을 활용하여 실제 문제에 적용할 수 있다.
- 주요용어
- 채우기 기능 : 연속된 숫자나 일정한 규칙을 갖고 변화하는 숫자들을 쉽게 입력할 수 있게 하는 엑셀 기능을 말함
- SUMPRODUCT 함수 : 두 배열의 대응되는 값끼리 곱해서 합을 구해 주는 기능
- DATE(year, month, day) 함수 : 특정 날짜의 일련번호를 구해주는 엑셀 날짜/시간 함수 중 하나

연습문제

Q1. A2 셀에 “대한민국”이라고 입력되어 있다. "=MID(A2, 2, 2)"의 결과로 알맞은 것은?

대
대한
한민
민국

정답: 3

Q2. G2 셀에 어떤 사람의 생년월일이 “1980-12-5”로 같이 입력되어 있다고 한다. 엑셀 함수 “=YEAR(NOW())-YEAR(G2))"의 결과를 바르게 설명한 것은?

현재 시점의 연도가 표시된다.
현재 시점의 나이를 구한다.
위의 함수식에 NOW()는 인수가 없기 때문에 잘못된 함수이다.
이 사람의 생년월일 중에서 연도에 해당하는 1980이 표시된다.

정답: 2

지문: ※ 학과별 학생의 성적 데이터를 워크시트에 입력하였다. 다음 물음에 답하여라. Q3. 학과코드의 첫 번째 자리 알파벳이 A이면 통계·데이터과학과, B이면 컴퓨터학과 학생이다. 학과 셀에 학과를 표기하고자 한다. C2 셀에 알맞은 함수식은?

=IF(RIGHT(A2,1)=“A”, “통계·데이터과학”, “컴퓨터”)

=IF(RIGHT(A2,1)=“A”, “컴퓨터”, “통계·데이터과학”)

=IF(LEFT(A2,1)=“A”, “통계·데이터과학”, “컴퓨터”)

=IF(LEFT(A2,1)=“A”, “컴퓨터”, “통계·데이터과학”) 정답: 3

지문: ※ 학과별 학생의 성적 데이터를 워크시트에 입력하였다. 다음 물음에 답하여라. Q4. 최종 점수는 시험점수와 과제물, 태도점수의 합계에서 결석일수에 5를 곱한 수를 뺀 것으로 계산하고자 한다. H2 셀에 알맞은 함수식은?

=AVERAGE(D2:F2)-5*G2

=AVERAGE(D2:F2)+5*G2

=SUM(D2:F2)-5*G2

=SUM(D2:F2)+5*G2 정답: 3

Q5. 다음과 같이 워크시트에 값이 입력되어 있을 때 ‘=SUMPRODUCT(A1:A3, B1:B3)’을 D1 셀에 입력하면 얻게 되는 계산값은 얼마인가?

10
12
14
16

정답: 1

참고자료/링크

이전 강의와 동일

11강. 엑셀 활용 (2)

학습시간: 48분 / 48분
학습개요: 엑셀 차트 기능을 활용하면 주어진 함수의 그래프를 그릴 수 있고, 목표값 찾기 기능을 이용하여 주어진 함수가 축과 만나는 점을 찾을 수 있다. 또한 엑셀의 함수 기능을 활용하여 주어진 적분값을 근사적으로 구하는 법을 익힌다. 이번 강의는 엑셀을 활용하여 해결할 수 있는 다양한 예제를 살펴봄으로써 엑셀의 활용 능력을 높이고자 한다.
학습목표:
- 엑셀 함수 기능을 이용하여 원리합계를 계산할 수 있다.
- 엑셀 차트 기능을 이용하여 주어진 함수의 그래프를 그릴 수 있다.
- 목표값 찾기 기능을 활용할 수 있다.
- 엑셀을 활용하여 적분값을 계산할 수 있다.
- 주요용어
- 상대참조 : 행 이름이나 열 이름만을 사용하여 셀을 참조하는 방법(예: A1, B2, A1:F1 등)
- 절대참조 : 참조하는 셀이나 셀 범위를 표시할 때 “$”를 사용하여 참조하는 방법(예: $A$1, $B$2, $A$1:$F$1 등)
- 혼합참조 : 행 이름이나 열 이름의 한 쪽에만 “$”를 사용하여 참조하는 방법(예: $A1, B$2, A$1:F$1 등)

연습문제

Q1. [문제 누락]

함수마법사 기능
꺾은선형 그래프
데이터분석 기능
목표값 찾기 기능

정답: 4

Q2. 다음과 같이 셀 C7에 입력되어 있는 수식을 드래그 & 드롭으로 C11까지 채워서 1월부터 6월까지의 미달러($) 기준의 수출액을 원화(￦) 기준으로 바꾸고자 한다. 셀 C6에 입력할 수식으로 맞는 것은?

=B6*B2
=B$6*B2
=B6*B$2
=B$6*B$2

정답: 3

Q3. [문제 누락]

세로 막대형이나 가로 막대형
영역형
분산형
꺾은선형

정답: 3

Q4. [문제 누락]

=$B$1*(1+B2)^A5
=$B$1*(1+B$2)^$A5
=$B$1*(1+B$2)^A$5
=$B$1*(1+$B2)^$A$5

정답: 2

참고자료/링크

이전 강의와 동일

12강. R을 활용한 자료분석 (1)

학습시간: 60분 / 78분
학습개요: R은 자료처리, 통계분석, 그래픽스 분야 등에 탁월한 기능을 가지고 있는 무료통계시스템이다. 대화형 프로그래밍 언어를 기반으로 다양한 통계분석 함수 및 그래프 함수들을 포함하고 있다. R을 이용하여 데이터를 읽고, 처리하는 방법을 알아보고, 기술통계량을 구하는 법, 히스토그램 등 기본적인 통계그래프를 그리는 방법을 알아보도록 한다.
학습목표:
- R 사용법을 익힐 수 있다.
- 데이터를 읽어 들이는 방법을 이해할 수 있다.
- 행렬연산 방법을 설명할 수 있다.
- 기술통계량을 구할 수 있다.
- 통계그래프를 그릴 수 있다.

연습문제

Q1. 데이터 객체 ex.data의 변수들을 직접 사용하고자 한다. 유용한 명령은 ?

load(ex.data)
detach(ex.data)
unload(data)
attach(ex.data)

정답: 4

Q2. 그룹변수인 성별(sex)의 값에 따라 변수 salary의 평균(mean)을 구하는 명령은 ?

sapply(salary, sex, mean)
sapply(mean, sex, salary)
tapply(salary, sex, mean)
tapply(mean, sex, salary)

정답: 3

Q3. > ( b )(ex.data)

head
list
print
output

정답: 1

지문: 다음과 같은 텍스트파일을 읽어들이는 R 명령은 ? Q4. ex.data = ( a )("c:/data/example.txt", header=T)

scan

read.table

data.frame

read.xlsx 정답: 2

Q5. package xlsx를 인스톨하였다. 이를 가동시키기 위한 명령은 ?

system(xlsx)
use(xlsx)
library(xlsx)
load(xlsx)

정답: 3

참고자료/링크

13강. R을 활용한 자료분석 (2)

학습시간: 53분 / 53분
학습개요: 지난 시간에 우리는 R을 이용하여 데이터를 읽고, 처리하는 방법을 알아보고, 기술통계량을 구하는 법, 히스토그램 등 기본적인 통계그래프를 그리는 방법을 공부하였다. 이번 강의에서는 Function 문, 정규분포, 이산형 및 연속형 그래프 등에 대하여 알아보도록 한다.
학습목표:
- Function 문 사용법을 설명할 수 있다.
- 정규분포를 이해할 수 있다.
- 이산형 그래프를 그릴 수 있다.
- 연속형 그래프를 그릴 수 있다.

연습문제

지문: power.value <- function(x,n1,n2,n3=5) { n1.val = x^n1 n2.val = x^n2 n3.val = x^n3 value = list(v1=n1.val, v2=n2.val, v3=n3.val) return(value) }

aval = powr.value(2, 1/2, 2) aval$v3 Q1. 다음 R 명령 수행결과는 ?

1.414

8

16

32 정답: 4

지문: power.value <- function(x,n1,n2,n3=5) { n1.val = x^n1 n2.val = x^n2 n3.val = x^n3 value = list(v1=n1.val, v2=n2.val, v3=n3.val) return(value) }

aval = powr.value(2, 1/2, 2) aval$v1 Q2. 다음 R 명령 수행결과는 ?

1.414

8

16

32 정답: 1

지문:

sq.value <- (function(x) { x*x } sq.value(2) Q3. 다음 R 명령 수행결과는 ?

1.414

2

4

8 정답: 3

Q4. 상자그림을 그리는 명령은 ?

stem(ex.data)
boxplot(ex.data)
box(data)
box.plot(ex.data)

정답: 2

참고자료/링크

이전 강의와 동일

14강. 파이썬을 활용한 자료분석 (1)

학습시간: 76분 / 77분
학습개요: 파이썬은 객체지향 프로그래밍 언어로 문법이 쉽고, 확장성이 좋아 데이터과학 분야에서 R과 더불어 널리 이용되고 있는 프로그램 언어이다. 이 강에서는 파이썬을 설치하는 방법, 파이썬 프로그래밍에 대하여 공부한다.
학습목표:
- 파이썬을 설치하는 방법을 이해할 수 있다.
- Spyder 및 Jupyter Notebook을 사용할 줄 안다.
- 파이썬 언어를 사용할 수 있다.

연습문제

Q1. 파이썬에서 딕셔너리로 선언하고자 한다. 적합한 것은 ?

me = [‘height’ : 180, ‘weight’: 70 ]
me = {‘height’ : 180, ‘weight’: 70 }
me = {‘height’ = 180, ‘weight’ = 70 }
me = [‘height’ = 180, ‘weight’ = 70 ]

정답: 2

지문: C:\anaconda3>( ) install tensorflow Q2. Python 패키지를 설치하고 관리하는 프로그램이다. Dos 창에서 ( ) 안에 맞는 명령은 ? 정답: pip

Q3. [문제 누락]

정답: www.anaconda.com

지문:

a = [1,2,3,4,5] a[4] Q4. 다음 파이썬 프로그래밍에서 a[4] 의 결과는 ? 정답: 5

지문: def hello2(object): print("Hello " + object + " !") hello2("Jeong") Q5. 다음과 같이 파이썬 함수문을 작성하였다. hello2("Jeong") 의 결과는 ? 정답: Hello Jeong !

참고자료/링크

15강. 파이썬을 활용한 자료분석 (2)

학습시간: 55분 / 55분
학습개요: 파이썬은 객체지향 프로그래밍 언어로 문법이 쉽고, 확장성이 좋아 데이터과학 분야에서 R과 더불어 널리 이용되고 있는 프로그램 언어이다. 이 강에서는 파이썬을 이용하여 데이터를 읽고, 처리하는 방법을 알아보고, 기술통계량을 구하는 법, 히스토그램 등 기본적인 통계그래프를 그리는 방법을 알아본다.
학습목표:
- 파이썬을 이용하여 데이터를 읽을 수 있다.
- 파이썬을 이용하여 기술통계량을 구할 수 있다.
- 파이썬을 이용하여 통계그래프를 그릴 수 있다.

연습문제

지문: nex8.head(3) Out: id sex age edu salary 0 1 1 21 2 150 1 2 2 22 1 100 2 3 1 33 2 200 edu_freq = pd.crosstab(index=nex8["edu"], columns="count") import matplotlib.pyplot as plt ( )(edu_freq.index, edu_freq["count"] ) Q1. 변수 edu 의 막대그림을 그리고자 한다. ( ) 명령은 ? 정답: plt.bar

지문: import pandas as pd nex8 = ( )("c:/data/dataintro/nex8-1.csv", header=0) Q2. 파이썬에서 csv 텍스트 파일을 읽기 위한 명령 ( )는 ? 정답: pd.read_csv

지문: nex8.head(3) Out: id sex age edu salary 0 1 1 21 2 150 1 2 2 22 1 100 2 3 1 33 2 200 ( ) Out: sex age edu salary count 10.000000 10.000000 10.000000 10.000000 mean 1.400000 34.800000 2.200000 243.000000 std 0.516398 10.347302 0.788811 98.211789 min 1.000000 21.000000 1.000000 100.000000 25% 1.000000 29.000000 2.000000 177.500000 50% 1.000000 33.000000 2.000000 220.000000 75% 2.000000 40.500000 3.000000 297.500000 max 2.000000 55.000000 3.000000 410.000000 Q3. 다음 출력결과와 같이 데이터객체 nex8의 각 변수의 기술통계량을 구하고자 한다. ( ) 명령은 ? 정답: nex8.describe()

지문: nex8.head(2) Out: id sex age edu salary 0 1 1 21 2 150 1 2 2 22 1 100 nex8 = ( ) nex8.head(2) Out: sex age edu salary 0 1 21 2 150 1 2 22 1 100 Q4. 파이썬에서 nex8.head( ) 의 결과가 다음과 같다. 여기서 변수 id를 제거하고 나머지 변수를 가져오기 위한 명령 ( )은 ? 정답: nex8.iloc[:, 1:]

지문: import pandas as pd nex8 = ( )("c:/data/dataintro/nex8-1.xlsx, header=0) Q5. 파이썬에서 엑셀 파일을 읽기 위한 명령 ( )는 ? 정답: pd.read_excel

참고자료/링크

이전 강의와 동일

핵심 암기표

주제	외울 문장
분석 절차	- 데이터 분석은 문제 정의 → 수집 → 정리/분석 → 평가/해석 순서다. (순서 암기)
데이터 vs 정보	- 데이터는 관찰·측정된 값이다. (원자료) - 정보는 데이터를 목적에 맞게 처리한 결과다. (의미 부여)
자료 종류	- 범주형 자료는 성별, 지역처럼 분류값이다. (숫자 연산 X) - 양적 자료는 키, 점수처럼 수치값이다. (계산 가능)
모집단 vs 표본	- 모집단은 관심 대상 전체다. (population) - 표본은 모집단에서 뽑은 일부다. (sample)
중심 측도	- 평균은 모든 값을 더해 개수로 나눈 값이다. (이상치 약함) - 중앙값은 정렬했을 때 가운데 값이다. (이상치 강함) - 최빈값은 가장 자주 나타나는 값이다. (여러 개 가능)
산포 측도	- 분산은 평균에서 얼마나 흩어졌는지를 나타낸다. (제곱 단위) - 표준편차는 분산의 제곱근이다. (원 단위)
통계 패키지	- SPSS는 GUI 중심 통계 분석 도구다. (쉬운 조작) - SAS는 대용량 자료 처리에 강하다. (상용) - R은 오픈소스 통계 분석 언어다. (r-project) - Python은 범용 프로그래밍과 데이터 분석에 모두 쓴다. (라이브러리 활용) - Anaconda는 Python/R 데이터 분석 배포판이다. (패키지 포함)
엑셀 함수	- 엑셀 함수 입력은 `=`로 시작한다. (수식 표시)
셀 참조	- 상대참조는 복사 시 위치가 변한다. (기본 참조) - 절대참조는 복사해도 고정된다. (`$` 고정) - 혼합참조는 열 또는 행만 고정한다. (`$` 위치)
그래프 종류	- 막대그래프는 범주별 크기 비교에 쓴다. (category) - 꺾은선그래프는 시간에 따른 변화를 보여준다. (trend) - 원그래프는 전체 대비 구성 비율을 보여준다. - 산점도는 두 변수 관계를 보여준다. (correlation 감각)
pandas 기본	- `pd.read_csv()`는 CSV 파일을 읽는다. (DataFrame) - `describe()`는 요약 통계를 출력한다. (count/mean/std)

키워드 압축 카드

한 줄 공식

데이터 분석 = 문제 정의 → 수집 → 정리/분석 → 평가/해석.
시험은 통계자료 검색 + 엑셀 + R/Python 코드 흐름 중심.

통계/자료

데이터 = 관찰·측정된 값.
정보 = 데이터를 목적에 맞게 처리한 결과.
범주형 = 성별/전공/지역처럼 분류.
양적 = 키/몸무게/점수처럼 수치.
모집단 = 전체, 표본 = 일부.
평균은 이상치에 약함, 중앙값은 이상치에 강함.

통계 패키지

SPSS = GUI 중심, 쉬운 분석.
SAS = 대용량 자료 처리 강점.
R = 오픈소스 통계 분석, 공식 사이트 www.r-project.org.
Python = 범용 프로그래밍 + 데이터 분석 라이브러리.
Anaconda = Python/R 데이터 분석 배포판, www.anaconda.com.

엑셀

함수 입력은 =로 시작.
상대참조 = 복사 시 변함.
절대참조 = $A$1, 복사해도 고정.
혼합참조 = $A1, A$1.
그래프는 데이터 성격에 맞게 선택.
- 막대 = 범주 비교
- 꺾은선 = 시간 변화
- 원 = 구성 비율
- 산점도 = 두 변수 관계

R/Python

pip = Python 패키지 설치.
pd.read_csv() = CSV 읽기.
pd.read_excel() = 엑셀 읽기.
describe() = 요약 통계.
iloc[:, 1:] = 행 전체, 두 번째 열부터.
plt.bar = 막대그래프.

시험 감각

“반드시 프로그램 언어를 알아야 한다” 같은 절대 표현은 보통 틀림.
“전 범위”, “절차”, “그래프 선택 이유”를 같이 묻는 문제 주의.

HTML5웹프로그래밍

우선순위: HTML 의미론·CSS 선택자/박스모델·JS DOM/BOM·Canvas/API를 속성/메서드 단위로 구분

평가/시험 범위

평가유형	평가방법	출제범위	비고
출석수업평가	맞춤형평가	출석수업 담당 교수가 진행한 강의 내에서 직접 출제 및 평가	-
출석수업대체시험	온라인출석시험(객관식)	교재 1~3장, 강의 1~9강	-
형성평가	진도20/연습문제0	학습진도율 및 연습문제	-
기말시험	온라인출석시험(객관식)	교재 1~7장, 강의 1~15강	-

1강. 웹 프로그래밍 개요 & HTML5 요소: 텍스트

학습시간: 5분 / 79분
학습개요: 우선 웹과 웹 프로그래밍에 관련된 기초적인 내용들을 살펴본 후, HTML 문서의 기본적인 구조 및 작성/실행 방법의 학습을 통해 본격적인 웹 프로그래밍의 시작을 준비한다. 또한 이를 바탕으로 HTML에서 문자와 텍스트를 표현하는 요소를 중심으로 텍스트 기반의 HTML 문서를 작성하는 방법에 대해서 학습한다.
학습목표:
- 웹의 개념, 관련 용어, 동작 원리 등을 이해할 수 있다.
- 웹 페이지의 구성 요소 및 웹 프로그래밍의 범위와 과정을 이해할 수 있다.
- HTML 문서의 기본적인 구조 및 이를 위한 다양한 요소들의 기능을 이해하고 활용할 수 있다.
- HTML 텍스트 요소의 종류를 이해하고, 의미에 맞게 선택하여 활용할 수 있다.
- 블록 요소와 인라인 요소의 차이를 이해하고, div와 span을 적절하게 활용할 수 있다.

핵심 정리

웹의 이해
웹 → 인터넷 위에서 동작하는 하이퍼텍스트 서비스. “인터넷 ⊃ 웹”
주요 용어 → 웹 사이트, 웹 문서, 웹 페이지, HTTP, 웹 서버, 웹 클라이언트 등
작동 원리 → 서버(“응답”)-클라이언트(“요청”) 구조
- 순서 → URL 입력 – DNS 조회 – 요청 – 응답 – 렌더
HTTPS가 실무 표준
웹 프로그래밍의 이해
웹 페이지의 구성 요소 → HTML + CSS + JavaScript
- HTML → 구조와 내용 정의 → 제목, 본문, 이미지, 표 등
- CSS → 구조/내용에 시각적 표현과 스타일/디자인 적용 → 색상, 폰트, 정렬, 레이아웃 등
- JavaScript → 웹 페이지의 동작과 상호 작용 담당
- “관심사의 분리” → 구조(내용), 디자인, 기능(동작)은 명확히 구분되어 작성되어야 함
프로그래밍 범위 → 프론트엔드 프로그래밍 + 백엔드 프로그래밍 + 데이터 교환
- 강의는 HTML/CSS/JavaScript만 다뤄서 클라이언트에서 동작하는 기초 문서 및 UI 구성에 한정
프로그래밍 과정 → 기획&설계 – 디자인 – 퍼블리싱 – 프론트엔드 개발 – 백엔드 개발
- 테스트&배포
HTML 기초 문법
HTML 문서 → 요소들의 집합
- 요소 → “시작 태그(<태그명 속성명=“속성값”>) + 내용 + 종료 태그(</태그명>)”
전역 속성 → id (요소의 정체성, 중복 불가), class (CSS 스타일 적용 시 사용), title (툴팁, 말풍선), data-* (숨겨진 데이터), role/aria-* (웹 접근성 관련)
문서 작성 시 주의사항
- 대소문자 구분하지 않음(소문자 표기 권고), 파일 확장자(.html, .htm), 연속된 공백은 하나의 공백을 처리, 요소의 중첩 순서 준수
현업 기준의 HTML 문서의 최소 기본 구조는 아래 템플릿처럼 정리한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="문서 핵심 설명을 1~2문장으로 작성">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>문서 제목</title>
  <!-- CSS: <link>, <style> -->
  <!-- JavaScript: <script> -->
</head>
<body>
  <!-- 본문 -->
</body>
</html>

연습문제

Q1. 서버-클라이언트 구조에서 클라이언트의 역할로 가장 적절한 것은?

데이터를 저장하고 서버 소프트웨어를 실행한다.
HTTP 규약을 정의하는 역할을 한다.
DNS 서버를 직접 운영한다.
요청을 보내고, 받은 HTML 코드를 해석해 화면에 표시한다.

정답: 4 해설: 클라이언트(브라우저)는 요청을 보내고, 서버가 응답한 HTML을 파싱/렌더링하여 화면에 표시한다.

Q2. 다음 중 meta 요소의 설명으로 틀린 것은?

charset="utf-8"은 다국어 깨짐을 방지하기 위한 필수 설정이다.
viewport 설정은 모바일 반응형 웹 환경 대응을 위한 필수 설정이다.
keywords 속성은 현대 검색엔진 최적화(SEO)에서 가장 중요한 요소이다.
og:title 등의 Open Graph는 SNS 공유 시 미리보기 정보를 정의한다.

정답: 3 해설: meta 요소의 keywords 속성은 현대 SEO 관점에서 사실상 사용되지 않고, 대신에 OG가 훨씬 중요하게 사용된다.

Q3. 다음 중 문장의 주제가 전환될 때 의미적 구분선의 역할로 사용되는 요소는?

br
hr
line
border

정답: 2 해설: hr 요소는 단순히 수평선을 그리는 것이 아니라, 주제의 전환이라는 의미적 구분선 기능을 수행한다. 따라서 단순히 시각적인 수평선을 그리는 경우라면 CSS border-bottom 속성을 사용한다.

Q4. 제목 요소(h1~h6)의 사용 규칙으로 옳은 것은?

큰 크기의 제목을 원할 때는 h2/h3보다 h1을 사용하는 것이 권장된다.
h2 다음에 h4로 건너뛰어도 SEO에 유리하다.
h1은 대표 제목으로 페이지당 1개 사용을 원칙으로 한다.
제목 요소의 스타일은 HTML에서만 변경해야 한다.

정답: 3 해설: 헤딩 요소는 사용 규칙(h1은 페이지당 오직 1개 사용, 순서를 건너뛰지 말고 순차적으로 사용, 디자인 용도(글씨를 크게 하는 용도)로 사용 금지)을 준수하여 사용한다. HTML 요소의 스타일 변경은 CSS로 처리하는 것이 기본적인 원칙이다.

Q5. 다음 중 물리적 요소와 이를 대체하는 논리적 요소의 짝이 잘못 연결된 것은?

b - strong
i - em
s - del
span - div

정답: 4 해설: b-strong, i-em, s-del, u-ins는 각각 표현 중심(물리적)과 의미 중심(논리적)의 대응 관계이다. 하지만 span과 div는 인라인 컨테이너와 블록 컨테이너의 차이일 뿐 논리/물리적 관계가 아니다.

지문:

한 줄을 모두 차지한다.(너비 100%)

위아래 줄바꿈이 발생한다.

크기(폭, 높이) 조절이 가능하다. Q6. 위 지문과 같은 특징을 갖는 요소는?

div

span

a

strong 정답: 1 해설: 주어진 특징은 블록 요소에 대한 설명이다. div는 블록 요소이고, 나머지(span, a, strong)는 모두 인라인 요소이다.

2강. HTML 요소: 리스트, 그림, 하이퍼링크, 테이블

학습시간: 0분 / 62분
학습개요: 이번 시간에는 HTML에서 리스트, 이미지, 링크 및 테이블을 표현/활용하는 방법을 중심으로 학습한다. 원하는 형태의 리스트를 구성하고 UI로 활용하는 방법, 접근성과 반응형을 고려해서 이미지를 삽입하고 활용하는 방법, 링크의 다양한 사용 방법, 그리고 원하는 모양의 테이블을 작성하여 표 데이터를 적절하게 표현하는 방법에 대해서 살펴본다.
학습목표:
- 용도에 맞는 리스트를 구성하고 활용할 수 있다.
- 이미지의 삽입과 반응형으로 구성하는 방법을 이해하고 활용할 수 있다.
- 하이퍼링크의 다양한 사용 방식을 이해하고 활용할 수 있다.
- 테이블을 이용하여 표 데이터를 원하는 형태로 표현할 수 있다.

핵심 정리

리스트 표현
ul + li → 순서가 의미 없는 항목의 집합
- 중첩 리스트 → 드롭다운 메뉴, 다단계 목록을 만들 때 필수적
- 구글/네이버 등의 내비게이션 메뉴는 보통 'ul > li > a' 구조를 기본 패턴으로 사용
- li 요소 → 리스트 항목을 표현 → 종료 태그 사용 권장
ol + li → 순서 자체가 의미인 리스트
dl + dt/dd → '용어/정의-설명', '키-값' 구조가 중요한 데이터 표현
- dt (용어/정의/키 표현), dd (dt 요소에 언급한 용어/정의/키에 대한 설명/값을 표현)
이미지 표현
img → 이미지 삽입을 위한 인라인 요소
- src → 필수 속성
- alt → 웹 접근성을 위한 실무 필수 속성 → 단순 장식용 이미지라면 alt="" (빈 값)
- border → 사용 금지. CSS로 처리
- usemap → 비권장. 사용 지양
- loading="lazy" → 로딩 속도 최적화를 위한 실무 필수. 이미지가 뷰포트에 들어올 때 로딩
반응형 이미지
- 화면 크기에 따라 자동으로 크기가 조절되기 위해서는 "max-width: 100%; height: auto;" 사용
- img 요소 안에서 srcset, sizes 속성 → 사용할 파일 크기와 화면에서 차지할 이미지 크기를 나열하면 브라우저가 조건에 맞는 것을 자동으로 선택
- picture 요소 → 다른 그림 또는 다른 파일 포맷들을 보여주고 상황에 따라 선택할 때 사용
하이퍼링크 표현
a → 링크 표현을 위한 인라인 요소 → 내부 이동, 외부 이동, 다운로드, 메일/전화 연동이 가능
- href → 이동 주소/경로 지정. 필수 속성
- target → 링크 내용이 출력될 창 → target="_blank"인 경우에는 보안을 위해 rel="noopener noreferrer" 속성을 반드시 함께 사용
- download → 클릭 시 파일을 여는 대신 강제로 저장/다운로드하는 경우 → 보안 정책 상 동일 출처 URL에 있는 파일에만 적용 가능
앵커 이동 → 긴 페이지에서 특정 위치로 이동하는 경우
- 링크 부분 → href="#위치이름" 또는 href="페이지URL#위치이름"
- 특정 위치 → 목적지 요소에서 id="위치이름" 속성 사용
다양한 링크 지정 → 이메일, 전화/문자, 파일 재생 및 압축 파일 다운로드, 블록 링크
- 자바스크립트 코드 실행은 비권장/사용 금지
- 파일 재생 및 다운로드의 경우 → 파일 형식/용도 등을 안내할 수 있도록 링크 텍스트를 구체적으로 작성
- 블록 링크 → a 요소 안에 div, h1가 같은 블록 요소를 넣어서 클릭 영역 확장 가능 → a 요소 안에 다른 a/button 요소 포함은 절대 금지
이미지맵 → 좌표가 고정되어 반응형 웹에서 좌표 문제가 발생 → 사용 지양
iframe → 현재 페이지 안에 다른 웹 페이지를 삽입할 때 → 실무에서는 유튜브/지도 삽입, 결제창 등 외부 기능을 빌려올 때 사용 → title 속성 사용 중요/권장
테이블 표현

연습문제

Q1. 다음 중 리스트의 불릿(기호)을 없애기 위해 실무에서 가장 많이 사용하는 CSS 속성은?

list-style-type: disc;
list-style: none;
text-decoration: none;
display: none;

정답: 2 해설: 'list-style: none;'을 사용하여 불릿을 제거하는 것이 내비게이션 등을 만들 때 사용하는 기본 패턴이다.

Q2. 정의-설명 리스트에서 "설명/값"에 해당하는 요소는?

dt
dd
ol
caption

정답: 2 해설: dl은 "정의-설명" 구조의 리스트를 만들기 위한 것으로, 자식 요소로 '용어/키'를 표시하는 dd 요소와 '설명/값'을 나타내는 dd를 사용한다.

지문: img { ( 가 ): 100%; height: ( 나 ); } Q3. 위 지문 중 img 요소의 srcset 속성이나 picture 요소를 언급하지 않았을 때, 반응형 환경에서 이미지를 유연하게 만드는 CSS 설정에서 (가)와 (나)에 알맞은 내용은?

(가) width, (나) 100%

(가) max-width, (나) auto

(가) min-width, (나) auto

(가) width, (나) fixed 정답: 2 해설: 'max-width: 100%;'는 이미지가 부모 영역보다 커지는 것을 방지하고, 'height: auto;'는 이미지의 비율이 찌그러지는 것을 방지하기 위한 것이다. 이 속성들을 사용하면 화면 크기에 따라 이미지의 크기가 자동으로 늘어나고/줄어드는 기능을 만들 수 있다.

Q4. a 요소에서 target="_blank" 속성을 사용할 때 실무 보안 규칙으로 가장 적절한 것은?

rel="nofollow"를 반드시 함께 사용한다.
download 속성을 반드시 함께 사용한다.
rel="noopener noreferrer"를 반드시 함께 사용한다.
aria-hidden="true"를 반드시 함께 사용한다.

정답: 3 해설: 새 창 열기(target="_blank")을 사용할 때는 보안 취약점 방지를 위해 rel="noopener noreferrer"를 함께 사용하는 것이 규칙이다.

Q5. 동일한 페이지 내의 특정 위치(id="section1")로 이동하는 앵커 링크의 올바른 표현은?

<a href="section1">이동</a>
<a href="#section1">이동</a>
<a link="#section1">이동</a>
<a target="section1">이동</a>

정답: 2 해설: 내부 앵커로 이동할 때는 href 속성에 #을 붙인 이름("#section1")을 값으로 지정하고, 이를 목적지 요소에서 id 속성값으로 사용한다.

Q6. 표의 '제목 셀'을 생성하며, 기본적으로 굵게 표시되고 가운데 정렬되는 요소는?

th
td
caption
head

정답: 1 해설: th(table header) 요소는 열이나 행의 제목을 나타내는 셀이다. 반면 caption은 표 전체의 제목을 기본적으로 표 상단 중앙에 나타내는 것으로, 표 의미를 요약해 주는 접근성 핵심 요소이다.

Q7. thead, tbody, tfoot 요소의 사용 목적에 대한 올바른 설명은?

시각 효과를 위해 색상을 바꾸는 요소이다.
표의 행을 의미적으로 그룹핑해 구조 이해 및 스타일링과 출력에 도움을 준다,
표를 렌더링하기 위해서 반드시 사용해야 한다.
각 영역으로 구분한 후 영역 제목을 부여하기 위한 요소이다.

정답: 2 해설: thead/tbody/tfoot 요소는 표에서 행 단위 콘텐츠를 각각 머리글, 본문, 바닥글 영역으로 명시적인 구분/그룹핑을 위한 것으로, 시각적인 "장식"이 아니라 구조 구분용이다.

3강. HTML 요소: 미디어, 시멘틱 요소

학습시간: 0분 / 66분
학습개요: 이번 시간에는 다양한 부류의 HTML 요소 중에서 미디어 표현과 시멘틱 요소의 활용 방법에 대해서 학습한다. 우선 HTML 문서에서 오디오와 비디오를 재생하는 방법을 살펴보고, 문서 구조화 및 다양한 유형의 시멘틱 요소를 활용하여 문서를 작성하는 방법에 대해서 다룬다.
학습목표:
- 웹페이지에서 오디오/비디오를 재생하고 제어할 수 있다.
- 문서 구조화를 위한 시멘틱 요소로 의미 있는 구조의 문서를 작성할 수 있다.
- 다양한 시멘틱 요소의 의미와 사용 방법을 이해하고 활용할 수 있다.

핵심 정리

미디어 표현
audio 요소 → 오디오 재생
- 속성 → src, autoplay, controls, loop, muted, preload
- src (source 요소로 대체), controls (항상 사용하는 것이 바람직), autoplay(비권장, 사용하려면 muted와 함께), preload="metadata" (권장)
source 요소 → audio/video 요소의 단일 src 속성을 대신해서 대체 미디어 소스를 정의 → 브라우저 호환성 확보
- 가장 위에 있는 source 요소의 파일부터 재생 시도 → 용량이 적고 호환성이 좋은 파일 유형을 먼저 두는 것이 유리
- 속성 → src, type (명시적인 지정이 바람직)
video 요소 → 비디오 재생
- 속성 → audio 요소의 기본 속성 + (width, height, poster, playsinline)
- poster → 로딩 중 빈 화면을 방지하고 시각적 문맥 제공을 위한 가벼운 이미지 지정
- playsinline → 모바일에서 동영상이 강제로 전체 화면으로 커지는 것을 방지
미디어 콘텐츠의 재생 구간 지정
- 형식 → src="파일명#t=[시:분:초][,시:분:초]"
- 서버/브라우저 등에 따라 동작 편차가 발생 → 제한적 사용(‘데모용/학습용’)
track 요소 → 미디어 요소 안에서 사용되어 자막, 캡션 등과 같은 텍스트 정보를 제공
- 속성 → src, kind, srclang, label, default
- src 속성 → 자막 파일(*.vtt 형식의 텍스트 파일)의 위치
- kind 속성 → 자막의 종류 지정 → subtitles-자막(번역), captions-캡션(청각장애인용), descriptions-화면 해설(시각장애인용)
시멘틱 요소
시멘틱 요소 → "이 부분이 어떤 역할을 하는지" 명확한 의미를 포함/전달하는 요소
- 의미뿐만 아니라 접근성, 검색엔진 최적화, 유지보수 측면에서 중요
문서 구조화를 위한 시멘틱 요소 → 의미 있는 구조의 문서 작성이 가능
- 종류 → header, footer, nav, aside, section, article, main
- header → 로고/사이트명, 검색 폼, 유틸 링크 등을 포함하는 머리말 영역
- footer → 저작권/약관/연락처 및 보조 링크를 포함하는 꼬리말 영역
- nav → 주요 내비게이션 링크 묶음 → 보통 ul + li + a의 조합으로 구성
- aside → 본문과는 직접 관련이 약하지만, 맥락을 돕는 추가적인 정보 영역
- section → 하나의 주제로 이루어진 영역 → 보통 하나의 헤딩 요소를 가짐(페이지당 하나의 h1을 갖고, section 내부에서는 h2, 그 하위는 h3 등과 같이 순차적으로 사용)
- article → 독립적으로 링크/공유가 가능한 콘텐츠
- main → 페이지의 핵심 콘텐츠만을 포함/표시 → 문서에서 단 한 번만 사용이 원칙
figure 요소 → 독립적인 콘텐츠와 캡션의 밀접한 관계를 기계에서 명확히 알려주는 역할
- figcaption 요소 → 캡션 표시. 위치(figure의 첫 번째 또는 맨 마지막 자식 요소로 사용)
details 요소 → 아코디언 메뉴(클릭 여부에 따라 세부 정보를 보여주거나 숨기는 형태의 UI)를 만들 수 있는 기능 제공
- open 속성 → 기본 펼침 상태로 지정

연습문제

Q1. audio 요소에서 자동 재생을 시도할 때의 기본 전제로서 가장 적절한 코드 형태는?(단, src 속성 표현은 생략한다.)

<audio autoplay></audio>
<audio autoplay muted></audio>
<audio autoplay loop></audio>
<audio autoplay preload="auto"></audio>

정답: 2 해설: 최신 브라우저는 브라우저 정책상 미디어의 자동 재생(autoplay)을 강제로 차단한다. 즉 사용자의 조작 없는 자동 재생을 제한한다. 따라서 이를 사용하려면 반드시 muted 속성을 함께 명시해야 한다.

Q2. 미디어 표현에서 source 요소를 사용하는 가장 핵심적인 목적은?

CSS 적용을 쉽게 하려고
autoplay를 강제하기 위해
서로 다른 포맷을 제공해 브라우저 호환성을 확보하기 위해
controls 속성의 UI를 숨기기 위해

정답: 3 해설: 브라우저마다 미디어 파일의 지원 상황이 다를 수 있으므로 audio/video 요소의 단일 src 속성 대신 source 요소로 사용하여 대체 소스를 제공하며, 이는 브라우저 호환성을 확보하기 위한 실무적 접근 방법이다.

Q3. 시멘틱 요소를 사용하는 핵심 목적(실무 중심)으로 가장 적절한 것은?

디자인을 자동으로 예쁘게 만들기 위해
파일 용량을 줄이기 위해
자동 재생을 보장하기 위해
브라우저/검색엔진/개발자에게 역할(의미)을 명확히 전달하기 위해

정답: 4 해설: 시멘틱 요소는 브라우저, 검색엔진, 개발자에게 이 부분이 어떤 역할을 하는지 명확한 의미를 전달하기 위한 것이며, 이는 접근성, 검색엔진 최적화(SEO) 및 유지보수와 밀접하게 연결되어 있다.

Q4. figure 요소의 핵심 역할로 가장 적절한 것은?

독립 콘텐츠와 캡션이 떼려야 뗄 수 없는 관계임을 알린다.
이미지를 크게 보이게 한다.
이미지가 깨지면 자동 복구한다.
alt를 대신한다.

정답: 1 해설: figure는 '독립적인 콘텐츠+캡션'이라는 결합의 의미를 브라우저/검색엔진에 전달한다. 따라서 캡션이 필요 없는 경우에는 현실적으로 figure를 사용하지 않으며, 이미지, 코드 블록, 도표, 인용문 등이 독립적인 콘텐츠에 해당한다.

Q5. time 요소에서 기계가 읽는 값을 나타내기 위한 속성은?

date
datetime
value
content

정답: 2 해설: time은 날짜/시간에 의미를 부여하기 위한 요소로서, 검색엔진이 이를 정확히 인식하게 하여 검색 결과에 날짜를 표시할 때 주로 사용한다. 이때 요소의 텍스트는 단순히 사람의 이해를 돕기 위한 것이고, 속성 datetime="YYYY-MM-DD"를 사용하면 검색엔진이나 캘린더 앱이 날짜를 정확히 인식할 수 있다.

Q6. progress 요소에서 value 속성을 사용하지 않았을 때 나타나는 현상은?

아무것도 표시되지 않아 동작을 비활성화하는 효과를 가진다.
진행률이 기본값인 0%로 표시된다.
파란 막대가 좌우로 움직이는 불확정 상태 애니메이션이 재생된다.
무조건 진행률 100%로 표시되어 작업의 완료를 알려준다.

정답: 3 해설: progress 요소는 진행 중인 작업의 진행률을 표시하기 위한 것으로, 자바스크립트와의 연동을 통해서 value의 지속적인 업데이트가 필수적이다. 만약 요소에서 value 속성을 사용하지 않으면 작업 완료 시간을 예측할 수 없는 '불확정 상태'로 간주하여, 브라우저는 자동으로 파란 막대가 좌우로 왔다 갔다 하는 애니메이션이 재생된다.

4강. HTML 요소: 웹 폼

학습시간: 0분 / 74분
학습개요: HTML은 사용자와의 상호 작용을 위해서, 사용자로부터 필요한 데이터를 입력받아 서버로 전달하는 웹 폼을 제공한다. 이번 강의에서는 웹 폼에서 사용되는 요소 및 관련 속성들을 활용하여 다양한 형태의 데이터를 입력받는 방법에 대해 학습한다.
학습목표:
- form 요소의 기능을 이해하고 활용할 수 있다.
- input 요소의 다양한 입력 타입과 속성의 기능을 이해하고 활용할 수 있다.
- label 및 fieldset 요소의 중요성을 이해하고 활용할 수 있다.
- input, textarea, select, datalist, button, output 요소 등을 종합적으로 활용한 실제적인 입력 폼을 구성할 수 있다.

핵심 정리

form과 input 요소
웹 폼 → 프론트엔드와 백엔드의 접점
- 단순히 데이터를 서버로 보내는 것을 넘어, 사용자가 편하게 입력하도록 돕고(UX), 장애인도 사용할 수 있게 하며(접근성), 해커로부터 안전하게 지키는(보안) 것이 필요
form 요소 → 여러 입력값을 '전송 가능한 데이터'라는 의미 있는 단위로 묶어 서버로 전달하기 위한 컨테이너
- 폼 요소 → input, textarea, select, datalist, label, fieldset, output 등
- 주요 속성 → action, method(값:get/post), enctype, autocomplete, novalidate 등
input 요소 → 다양한 입력 타입을 통해서 여러 유형의 값들을 입력하기 위한 요소
- type 속성 → 입력 타입을 결정하므로 사용자의 의도에 맞는 설정이 중요
- type 속성값의 종류 → 텍스트 및 데이터 입력(text, password, email, tel, url, number, search), 선택 및 체크(checkbox, radio, file, range, color), 날짜 및 시간(date, month, week, time, datetime-local), 버튼 및 기능(submit, reset, button, hidden) → 이 중에서 특히 text, password, email, tel, number, checkbox, radio, date, file, submit 등이 빈도 높게 활용됨
- 주요 속성 → 거의 필수 속성(type, class, value, placeholder, id), 로직과 기능을 담당하는 제어 속성(name, disabled, required, checked, maxlength/minlength, min/max), 디테일한 UX를 위한 보조 속성(autocomplete, readonly, autofocus, accept), inputmode(모바일 기기에서 키보드 모양 결정)
폼 접근성 및 구조화
label 요소 → "웹 접근성의 핵심: 반드시 사용할 것"
- "입력 의미 정의 + 클릭 영역 확장(UX 향상) + 접근성(스크린 리더 지원)" 측면에서 매우 중요
- 사용 방법 → ① (권장) label 요소의 for 속성과 입력 요소의 id 속성으로 연결하는 방법, ② label 요소 안에 입력 요소를 포함하는 방법
fieldset 요소 → form 안에서 관련된 입력 요소들을 하나의 그룹으로 묶고 제목(캡션)을 붙일 때 사용 → 시각적으로 회색 테두리가 표시됨
데이터 입력과 선택(1)
일반 텍스트 입력
- 짧은 한 줄 입력 → <input type="text" …>
- 긴 여러 줄 입력 → textarea 요소 → 주요 속성(rows, cols, wrap 등)
특정 형식의 데이터 입력
- 비밀번호 → <input type="password" …> → 브라우저 저장 기능인 '비밀번호 관리자'와의 연동이 중요(autocomplete="current-password"/"new-password")
- 검색어 → <input type="search" …> → 접근성을 위해 aria-label이나 placeholder 사용
- 전화번호 → <input type="tel" …> → autocomplete="tel" 함께 사용
- URL → <input type="url" …> → 자동 유효성 검사
- 이메일 주소 → <input type="email" …> → 자동 유효성 검사
숫자 입력
- 정확한 값 입력 → <input type="number" …> → 우측에 스피너가 표시됨
- 대략적인 정도를 조절하는 경우 → <input type="range" …> → 슬라이드 형태 → 현재 선택한 값이 숫자로 보이지 않기 때문에 표시값 동기화가 필요(output 요소 활용 또는 자바스크립트로 처리)
- 주요 속성 → min, max, step, value
- output 요소 → 실시간으로 계산된 값을 출력할 수 있는 요소 → 속성(name, for) → form 요소의 input 이벤트를 활용하여 출력할 값을 계산
항목 선택
- (그룹에서) 단 하나만 선택하는 경우 → <input type="radio" …> → 동그라미 모양
- 여러 개의 선택이 가능한 경우 → <input type="checkbox" …> → 네모 모양
- 접근성을 위해 label 요소와 fieldset 요소를 실무적으로 반드시 사용

연습문제

Q1. 다음 중 form 요소의 속성 표현 method="get"을 적용하기에 가장 적합한 상황에 해당하는 것은?

회원가입 처리
로그인 처리
게시글 작성
상품 목록 검색 및 필터링

정답: 4 해설: 검색이나 조회 기능은 URL 공유가 가능해야 하므로 속성값 get이 적합하며, 데이터 변경이나 민감 정보(예: 로그인, 글쓰기, 회원가입, 결제, 대량 데이터 등)는 post 값을 사용한다.

Q2. input 요소의 텍스트 입력 필드에서 사용자가 입력을 시작하면 사라지는 힌트 텍스트를 제공하는 속성은?

title
alt
placeholder
value

정답: 3 해설: placeholder 속성은 입력하기 전에 희미하게 보이는 예시/힌트 텍스트를 제공하지만, 입력 시 사라지므로 label 요소를 대체하는 방법으로 사용하면 안 된다. 참고로 alt 속성은 이미지 버튼(type="image")의 대체 텍스트를 나타낸다. value 속성은 입력창에 미리 채워져 있을 초기값 또는 현재값을 의미하며, 버튼(submit, button 등)에서는 버튼 위에 표시될 글자(‘버튼 이름’)가 된다.

Q3. inputmode 속성의 목적은?

서버 전송 형식을 바꾸는 것
모바일에서 적절한 키보드 레이아웃을 유도하는 것
자동 검증을 끄는 것
텍스트 입력에 사용하려는 언어의 종류를 지정하기 것

정답: 2 해설: inputmode 속성은 모바일 키보드의 모양을 결정하는 속성이다. 즉 모바일 기기(아이폰, 안드로이드)에서 입력창을 눌렀을 때 어떤 모양의 가상 키보드를 띄울지를 브라우저에게 알려준다. 신용카드 번호나 인증 번호처럼 순수 숫자만 필요한 경우, type="number" 대신 type="text"와 inputmode="numeric" 조합을 실무적으로 선호한다.

Q4. fieldset 요소의 역할로 올바른 것은?

입력을 그룹으로 묶는다.
입력을 숨긴다.
전송을 차단한다.
자동완성을 끈다.

정답: 1 해설: 폼 안에서 관련된 입력 요소들을 하나의 그룹으로 묶고, 그 그룹의 제목을 붙여주는 요소이다. 특히 체크박스나 라디오 버튼을 사용할 때는 접근성을 위해 반드시 사용해야 한다. 그룹의 제목 지정은 legend 요소를 사용하며, 이 요소는 fieldset 요소의 첫 번째 자식 요소로 사용해야 한다.

Q5. input 요소에서 radio 입력을 같은 그룹으로 만드는 핵심 조건은?

id가 같아야 한다.
name이 같아야 한다.
pattern이 같아야 한다.
group이 같아야 한다.

정답: 2 해설: radio 버튼은 같은 그룹에서 오직 하나의 항목만 선택("배타적 선택") 가능하며, 그룹이 여러 개이면 그룹마다 하나씩 그룹 수만큼 선택할 수 있다. 이때 동일한 그룹에 속하는 항목들은 동일한 name 속성값으로 지정해야 한다.

Q6. datalist 요소와의 연동을 위해서 input 요소에서 반드시 지정해야 할 속성은?

id
data
list
options

정답: 3 해설: 선택 리스트인 datalist 요소를 사용하기 위해서는 input 요소와의 연동이 필수적이며, 이를 위해서는 input 요소의 list 속성과 datalist 요소의 id 속성을 동일한 값으로 지정한다.

5강. CSS: 개요, 선택자, 색상

학습시간: 0분 / 76분
학습개요: 이번 시간에는 웹 문서의 구조와 표현을 분리("관심사의 분리")하는 원칙을 바탕으로 CSS의 기초를 다룬다. 효율적인 스타일링을 위해 3가지 적용 방식과 명시도 계산을 통한 우선순위 규칙을 이해하고, 다양한 선택자와 결합자의 조합을 활용해 HTML 요소를 정교하게 제어하는 기법을 학습한다. 또한 실무적인 색상 표현 모델과 CSS 변수 활용법을 익힌다.
학습목표:
- CSS의 정의와 필요성을 설명하고, 스타일 충돌 시 명시도 점수를 계산하여 최종 적용 스타일을 판별할 수 있다.
- 기본·가상 선택자와 결합자를 조합하여 HTML 수정 없이 특정 요소나 상태를 정교하게 선택하여 스타일링할 수 있다.
- 다양한 색상 모델과 CSS 변수를 사용하여 효율적으로 색상을 표현하고 관리할 수 있다.

핵심 정리

개요
개념 → HTML(구조)과 분리하여 디자인(표현,외양)을 담당하는 표준 스타일 언어
기본 구문 → '선택자 { 속성: 값; 속성: 값; … }'
적용 방법 → 실무 표준인 외부 파일(.css), 페이지 단위의 내부 스타일, 특정 요소의 인라인 방식
명시도 → 스타일 충돌 시 점수제 적용
- !important → 무조건 승리(사용 지양)
- 인라인 스타일 → 1000점
- id 선택자 → 100점
- class 선택자, 가상 클래스, 속성 선택자 → 10점
- 타입(요소) 선택자, 가상 요소 → 1점
- 전체 선택자(*) → 0점
선택자
기본 선택자 → 전체(*), 요소(타입), 클래스(.), 아이디(#), 속성([ ]) 선택자
클래스 중심의 설계 권장 → 의미 기반 네이밍 및 BEM 방법론 활용
아이디 → 유일성 강조. 스타일보다는 앵커 링크, 폼 라벨 연결, JS 제어용으로 권장
가상 클래스 → 요소의 상태 선택(:hover, :focus, :checked, :nth-child 등)
가상 요소 → 요소의 특정 부분 선택 (::before, ::after, ::placeholder)
최신 선택자 → 코드 그룹화용(:is(), 명시도 0점인 :where()), 특정 자식을 가진 부모를 선택하는 :has()
결합자 → 자손(공백), 자식(>), 인접 형제(+), 일반 형제(~), 그룹(,) 관계로 위치 기반 선택
색상
표현 방식
- 색상명 사용 → 비추천(테스트용/학습용)
- 16진수 → #RRGGBB(AA) 형식. 실무 기본값
- RGB/RGBA → 0~255 숫자나 백분율로 빛의 3원색과 투명도 조절
- HSL/HSLA → 색상환(H), 채도(S), 밝기(L) 기반. 가장 "인간 친화적"이며 테마 구현에 유용
키워드 → 현재 글자색을 따르는 currentColor, 완전 투명한 검은색 transparent
CSS 변수 → :root에 '–변수명'으로 선언하고 var(–변수명)와 같이 호출하여 유지보수성 극대화
색상 관련 속성
- color(요소의 텍스트 색상), background-color(요소의 배경색), border-color(테두리 색상), opacity(요소의 불투명도)
- 주의 사항 → opacity는 자식 요소까지 모두 투명하게 만들므로, 배경만 투명하게 할 때는 rgba( ) 또는 hsla( ) 권장

연습문제

Q1. 인라인 스타일(inline style) 방식의 적용을 실무에서 가급적 지양해야 하는 이유로서 적절하지 못한 것은?

유지보수가 매우 어렵기 때문이다.
스타일의 재사용이 불가능하기 때문이다.
외부 스타일 시트보다 명시도 점수가 낮아 적용이 안 되기 때문이다.
구조(HTML)와 표현(CSS)의 분리 원칙에 어긋나기 때문이다.

정답: 3 해설: 인라인 스타일은 명시도 점수가 1,000점으로 매우 높아 오히려 다른 스타일로 덮어쓰기가 어렵다.

지문:

<style>
.text { color: blue; }
p { color: red; }
</style>
<p class="text">안녕하세요</p>

Q2. 위 지문의 코드에서 화면에 출력될 "안녕하세요"의 글자 색상은?

red
blue
black
red와 blue의 혼합색

정답: 2 해설: 클래스 선택자(.text)와 요소/타입 선택자(p)가 충돌된 경우이다. 이때 명시도 점수를 계산하면 클래스 선택자는 10점, 타입 선택자는 1점이므로 점수가 더 높은 클래스 스타일이 적용된다.

Q3. 다음 중 필수 입력 속성(required)이 있는 input 요소만 골라내어 스타일을 적용하기 위한 올바른 CSS 선택자 표현은?

input:required { … }
input[required] { … }
input.required { … }
input #required { … }

정답: 2 해설: 속성 선택자는 기본적으로 '[ ]'를 사용해서 표현하며, 특정 속성의 존재 여부만으로 선택할 때는 '[속성명]' 문법을 사용한다. 이 밖의 주요 속성 표현 패턴으로는 '[속성="값"]', '[속성*="값"]', '[속성^="값"]', '[속성$="값"]' 등이 있다.

Q4. 다음 코드 중 ul 바로 밑에 있는 li들만 선택하기 위한 결합자의 표현으로 올바른 것은?

ul > li
ul li
ul + li
ul ~ li

정답: 1 해설: ul 바로 밑에 있는 li들만 선택한다는 것은 직계 자식 요소만 골라낸다는 의미이며, 자식 결합자는 > 기호를 사용한다. ② 자손 결합자, ③ 인접 형제 결합자, ④ 일반 형제 결합자에 해당한다.

Q5. 현재 글자 색상(color)을 그대로 가져와서 테두리 등에 사용하게 해주는 키워드는?

inherit
auto
transparent
currentColor

정답: 4 해설: 키워드 currentColor를 사용하면 글자 색상이 바뀔 때 테두리나 아이콘 색도 자동으로 함께 바뀐다. transparent는 완전 투명한 검정색을 나타낸다.

6강. CSS: 글꼴, 텍스트, 리스트, 테이블

학습시간: 0분 / 75분
학습개요: 이번 시간에는 웹 페이지의 시각적 완성도와 가독성을 결정짓는 글꼴(폰트) 및 텍스트 스타일링 기법과 정보를 구조화하는 리스트 및 테이블 디자인을 학습한다. 사용자 기기 환경에 구애받지 않는 웹 폰트 적용법과 반응형 디자인에 필수적인 상대 단위(rem, clamp) 활용법을 익히고, 데이터의 특성에 맞는 레이아웃 최적화 및 모바일 대응 전략 등을 통해 사용자 중심의 인터페이스를 구현하는 방법들을 다룬다.
학습목표:
- 다양한 폰트 속성과 폴백 메커니즘을 이해하고, 반응형 웹에 적합한 상대 단위인 rem 및 웹 폰트를 설정할 수 있다.
- 가독성 향상을 위한 줄 간격, 자간 및 정렬 방식을 조절하고, 말줄임표(…)와 같은 텍스트 제어 기법을 적용할 수 있다.
- 기본 불릿 기호를 제거하거나 가상 요소를 활용하여 내비게이션 메뉴 및 사용자 정의 리스트 스타일을 제작할 수 있다.
- 테두리 병합, 고정 레이아웃, 줄무늬 효과 등을 적용하여 복잡한 데이터를 명확하게 시각화하고 반응형 표를 구현할 수 있다.

핵심 정리

글꼴
폰트 설계 원칙 → 가독성(본문은 sans-serif 선호), 브랜드 정체성, 성능(경량화 및 시스템 폰트 혼용)의 균형이 중요함.
속성 → font-family, font-size, font-style, font-variant, font-weight, font, @font-face
- font-family → 폴백 폰트를 나열하여 호환성 대비
- font-size → px보다는 접근성을 고려한 rem(최상위 요소 비례) 사용 권장 및 clamp( )를 활용한 반응형 크기 조절
- font-weight → 100~900 숫자 값 사용(400: normal, 700: bold)
- font → 단축 속성. 실무 기본 표기법
- 웹 폰트(@font-face) → woff2 포맷 권장 및 로딩 성능 최적화를 위한 font-display: swap 설정 필수
텍스트
속성 → line-height, letter-spacing, word-spacing, text-indent, text-align, text-align-last, vertical-align, text-decoration, text-transform, text-shadow, white-space, word-break, text-overflwo, overflow-wrap(word-wrap)
간격 및 가독성:
- line-height → 단위 없는 숫자(예: 1.5~1.6) 사용을 통해 폰트 크기 변화에 유연하게 대응
- letter-spacing → 한글은 가독성을 위해 약간의 음수 자간(-0.02em) 적용 권장
정렬 및 배치 → text-align, vertical-align(인라인/표 요소 전용), 'text-wrap: balance'(제목 줄바꿈 최적화)
장식 및 변형 → text-decoration(밑줄/형광펜 효과), text-shadow(그림자), text-transform(대소문자 변환)
줄바꿈 제어 → 'white-space: nowrap'과 'text-overflow: ellipsis'를 조합한 한 줄 말줄임 처리
단어 끊기 → 한글은 'word-break: keep-al'l, 긴 URL 등은 'overflow-wrap: break-word'로 박스 터짐 방지
리스트
속성 → list-style-type, list-style-position, list-style-image, list-style(단축 속성)
스타일 초기화 → 메뉴 구현 등을 위해 'list-style: none'과 패딩/마진 제거를 기본적으로 수행
커스텀 마커 → 가상 요소 ::marker로 간단한 스타일링을 하거나, ::before를 사용하여 정교한 아이콘 불릿 구현
테이블
속성 → border-collapse, table-layout, border-spacing, caption-side, empty-cells
구조 및 레이아웃
- 'border-collapse: collapse' → 인접 테두리를 하나로 합치는 실무 필수 설정
- 'table-layout: fixed' → 균등 분할 및 렌더링 속도 향상을 위해 권장하며, colgroup/col 요소를 사용하면 열 너비 세부 조절 가능
시각화 기술 → nth-child(even)를 활용한 줄무늬 배경으로 데이터 가독성 증대
반응형 대응 → overflow-x: auto를 이용한 가로 스크롤 생성 또는 미디어 쿼리를 통한 카드 형태 레이아웃 전환

연습문제

Q1. 다음 중 rem 단위 설명으로 옳은 것은?

루트(html) 기준 상대 단위
부모 요소 기준 상대 단위
색상 단위
화면 너비 기준 상대 단위

정답: 1 해설: rem은 최상위 요소(루트 요소, html) 크기에 비례하는 단위로서, 보통 1rem=16px이다. 반면 em은 부모 요소 크기에 비례하는 단위이며, 이는 버튼 내부의 패딩/마진 같이 컴포넌트 내부 미세 조정에 제한적으로 사용하는 것이 바람직하다.

Q2. 다음 중 한글의 문단 가독성이라는 관점에서 기본적인 설정 조합으로 가장 적절한 것은?

font-size: 12px; line-height: 1;
font-size: 16px; line-height: 1.5;
font-size: 40px; line-height: 0.8;
font-size: 8px; line-height: 1;

정답: 2 해설: 본문을 기준으로 글자 크기 1rem 그리고 줄간격 1.5~1.6(한글 기준)이 가독성 원칙에 가장 부합한다.

Q3. 폰트 단축 속성(font)에 포함될 수 있는 속성은?

letter-spacing
border-collapse
line-height
list-style

정답: 3 해설: font는 글꼴 관련 font-*의 단축 속성으로, "font: [스타일] [변형] [두께] 크기 / 줄간격 서체;" 형식을 사용한다. 이때 폰트와 직접 관련된 속성 이외에 line-height 값이 함께 지정될 수 있으며, 이때에는 반드시 font-size 값 뒤에 슬래시를 사용해서 값을 표현해야 한다.

Q4. 말줄임 표시를 위한 CSS 속성은?

text-align
text-transform
text-decoration
text-overflow

정답: 4 해설: 기본적으로 말줄임(…) 표시를 위한 속성은 text-overflow이다. 실제 한 줄 말줄임을 위해서는 "white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"와 같이 3가지 속성을 하나의 공식처럼 반드시 함께 사용한다.

Q5. 내비게이션 메뉴(GNB) 등을 만들 때 리스트 초기화 코드로 가장 적절한 것은?

ul { list-style: disc; }
ul { list-style: none; padding: 0; margin: 0; }
ul { display: inline; border: 1px solid black; }
ul { vertical-align: middle; }

정답: 2 해설: 리스트의 기본 기호와 들여쓰기를 모두 제거해야 메뉴 디자인을 자유롭게 할 수 있다. 기본 불릿/기호를 없애기 위해서는 "ul, ol { list-style-type: none; }"을 사용한다.

Q6. 테이블에서 열 너비 계산을 단순화해 레이아웃을 안정화할 때 쓰는 속성은?

table-layout: fixed
table-layout: nowrap
table-layout: hidden
table-layout: ellipsis

정답: 1 해설: table-layout 속성은 테이블 각 셀의 너비를 계산하는 방식과 관련된 속성으로, 테이블의 렌더링 속도와 디자인 고정을 위해 매우 중요하게 사용된다. 이때 속성값으로 fixed로 지정(실무 추천)하면 내용물의 길이에 상관없이 지정한 폭을 강제로 유지할 수 있어 테이블의 안정성을 높일 수 있다. 한편 auto로 지정하면 내용물의 길이에 따라 각 칸의 너비가 자동으로 조정된다.

7강. CSS: 박스 모델, 테두리

학습시간: 0분 / 95분
학습개요: 웹 페이지 레이아웃의 핵심인 CSS 박스 모델의 4가지 구성 요소(마진, 테두리, 패딩, 콘텐츠)를 이해하고, box-sizing, display(Flex/Grid), position 속성을 활용해 요소를 안정적으로 배치하는 방법을 다룬다. 더불어 테두리, 둥근 모서리, 그림자 등을 활용한 다양한 시각적 스타일링 기법을 학습한다.
학습목표:
- 마진과 패딩의 차이를 이해하고 활용할 수 있다.
- display 속성과 position 속성을 적절히 조합하여 원하는 형태의 레이아웃을 구축할 수 있다.
- border 속성을 활용하여 요소의 테두리 두께, 스타일 색상을 지정할 수 있다.
- border-radius와 box-shadow를 사용하여 요소를 부드럽게 변형하거나 입체적인 뷰를 디자인할 수 있다.

핵심 정리

박스 모델
박스의 기본 구성
- 4계층 → content, padding, border, margin
- 'box-sizing: border-box;' → 실무에서 의도치 않은 레이아웃 깨짐을 막기 위해서 초기화 코드로 반드시 사용
여백(margin vs padding)
- margin → 투명한 외부 여백. 요소 간 간격 벌리기나 중앙 정렬에 사용되며, 상하 블록 간 병합 현상 발생
- padding → 내부 여백으로 배경색이 칠해지고 병합 현상이 없으며, 클릭 영역을 넓히거나 비율 유지 박스를 만들 때 사용
크기 제어 보완 장치
- width/height 지정 시 내용 넘침을 방지하기 위해 max-width(상한선) 및 min-height(하한선)를 보호 장치로 활용
위치 지정(position)
- 위치 지정 속성값 → static(기본 흐름), relative(자신 기준), absolute(조상 기준, 공중에 뜸), fixed(뷰포트 고정), sticky(스크롤 시 고정) 사용
- z-index → 겹침 순서 제어
레이아웃(display)
- 값 → 요소의 형태를 block, inline, inline-block, none으로 결정
- 현대 레이아웃의 핵심 → 1차원 배치 flex와 2차원 모눈종이 형태의 grid를 통해 유연하고 직관적인 구조를 설계
기타 제어 속성:
- overflow → 내용물이 박스를 넘칠 때의 처리
- visibility → 화면 표시 여부
- float/clear → 텍스트 어울림 처리
- resize → 사용자의 크기 조절 권한 관리
테두리
기본 테두리(border)
- 두께, 스타일(solid, dashed 등), 색상을 지정하는 단축 속성을 가장 많이 사용
- 상하좌우 방향별로 선을 그릴 수 있으며, 투명 색상(transparent)을 활용한 삼각형 만들기 기법이 실무에서 유용
모서리 깎기(border-radius)
- px(고정 크기) 또는 %(비례 비율) 단위로 모서리를 둥글게 만듦
- 'border-radius: 50%;' → 완벽한 원/타원, 'border-radius: 9999px;' → 알약 형태의 버튼을 만들 때 사용
- 슬래시(/)를 사용해 타원형 곡선을 표현할 수도 있음
외곽선(outline)
- border와 달리 공간을 차지하지 않으며 레이아웃에 영향을 주지 않음
- 주로 키보드 접근성(focus) 표출이나 레이아웃 디버깅에 사용
박스 그림자(box-shadow)
- 가로/세로 오프셋, 흐림 정도(blur), 퍼짐(spread), 색상을 조합해 입체감을 부여
- 다중 그림자나 네온사인 효과 구현도 가능

연습문제

지문: .box { width: 200px; padding-left: 10px; padding-right: 10px; border: 1px solid black; } Q1. 브라우저의 기본 box-sizing 설정("box-sizing: content-box;")에서 주어진 스타일이 적용되는 요소의 실제 렌더링 가로 너비는 얼마인가?

200px

202px

220px

222px 정답: 4 해설: 기본값인 content-box에서는 width(200) + 좌우 패딩(20) + 좌우 테두리(2) = 222px이 실제 차지하는 가로 너비가 된다. 한편, 속성값 border-box의 경우에는 지정한 width 값에 콘텐츠, 패딩, 테두리의 크기까지 모두 포함되므로 실제 렌더링 가로 너비는 width의 크기와 같다.

지문: div { ___ : 30px; } Q2. 요소의 왼쪽 바깥쪽 여백을 30px 벌려서 다른 요소를 오른쪽으로 밀어내고 싶을 때 사용하는 속성은?

margin-left

padding-left

border-left

spacing-left 정답: 1 해설: 바깥 여백'은 margin이고, '왼쪽'은 left이므로 margin-left을 사용해야 한다. margin은 요소와 다른 요소 사이의 간격을 벌릴 때 사용하며, padding은 콘텐츠와 테두리 사이의 공간으로, 요소의 배경색이나 테두리 안쪽 공간을 넓힐 때 사용한다.

지문: .container { width: 800px; } .box { width: 400px; _______ } Q3. 특정 블록 요소(.box)를 부모 컨테이너(.container)의 '가로 중앙'에 오도록 정렬할 때 margin 속성을 활용하려고 한다. 이에 알맞은 코드 표현은?

margin: auto 0;

margin: 0 auto;

margin-left: 50%;

padding: 0 auto; 정답: 2 해설: 'margin: 0 auto;'는 위아래 마진을 0으로, 좌우 마진을 브라우저가 남은 공간을 반씩 나누어 갖도록(auto) 해서 블록 요소를 가로 중앙에 배치하는 가장 고전적이고 확실한 방법으로 실무에서 많이 사용된다. 이 방법은 인라인 요소나 width가 없는 요소에서는 동작하지 않는다.

Q4. grid에서 열을 3개로 나누는 가장 명확한 선언은?

grid-template-columns: 1fr 1fr 1fr;
grid-columns: 3;
columns: grid(3);
grid-template-rows: 1fr 1fr 1fr;

정답: 1 해설: 'grid-template-columns: 1fr 1fr 1fr;'는 열의 개수와 크기를 정의한다. 크기를 지정하는 fr 단위는 남은 공간의 비율을 의미하며, '1fr 1fr 1fr'은 남은 공간을 1:1:1 비율로 3등분한다.

Q5. 알약 형태(pill shape)의 둥근 버튼을 만들기 위해, 버튼의 너비가 유동적으로 변해도 양쪽 끝이 항상 완벽한 반원 형태를 유지하도록 실무에서 주로 사용하는 border-radius 속성 값은?

border-radius: 50%;
border-radius: 100%;
border-radius: 9999px; (또는 매우 큰 px 값)
border-radius: auto;

정답: 3 해설: 속성값 50%을 지정하면 완전한 원/타원이 되고, 9999px 처럼 요소의 실제 높이보다 훨씬 큰 px 값을 지정하면 브라우저가 그릴 수 있는 최대치의 반원을 그려 양쪽 끝이 둥근 캡슐/알약 모양이 된다.

Q6. box-shadow 속성에서 그림자를 박스 '바깥쪽'이 아니라 박스 '안쪽'으로 생기게 해서, 버튼이 꾹 눌린 듯한 효과를 낼 때 쓰는 단어(키워드)는?

inside
inset
inner
internal

정답: 2 해설: inset 키워드를 쓰면 안쪽으로 파고드는 내부 그림자가 만들어진다. 참고로, text-shadow 속성은 inset 키워드를 지원하지 않는다.

8강. CSS: 배경, 그라데이션, 변형

학습시간: 0분 / 70분
학습개요: 이번 강의에서는 웹 페이지의 시각적 완성도를 높이는 CSS 배경, 그라데이션, 그리고 변형 속성을 다룬다. 배경 이미지와 색상의 배치부터 선형/원형/원뿔형 그라데이션을 활용한 다채로운 패턴 제작 기법을 학습한다. 또한, 요소를 이동, 회전, 확대, 비틀기하는 변형 기법과 원근감 제어 방법을 통해 역동적이고 입체적인 웹 UI를 구현하는 핵심 원리를 다룬다.
학습목표:
- 배경 속성(개별, 단축)을 이해하고, 반응형 레이아웃에 알맞게 배경 이미지와 색상을 제어할 수 있다.
- 선형, 원형, 원뿔형 그라디언트 함수의 문법을 이해하고, 요소에 자연스러운 색상 전환 효과를 적용할 수 있다.
- 변형 속성과 원근감 제어 속성을 활용하여 다른 요소의 레이아웃에 영향을 주지 않고 요소를 자유롭게 조작할 수 있다.

핵심 정리

배경
기본 4대 속성
- background-color(배경색), background-image(배경 이미지 및 그라데이션), background-repeat(바둑판 모양의 반복 여부), background-position(배경 위치 좌표)
반응형 및 스크롤 제어
- 이미지를 꽉 채우거나 다 보이게 하는 background-size(cover, contain, auto 등)와 스크롤 시 배경의 동작을 제어하는 background-attachment(scroll, fixed, local)
영역 제어 속성
- 배경이 칠해지는 범위를 정하는 background-clip(border-box, padding-box, content-box, text)과 이미지의 시작 기준점을 정하는 background-origin
실무 활용 기법
- background 단축 속성 작성법을 익히고, 여러 레이어를 겹쳐 다중 배경을 만들거나(이미지 위에 반투명 색상 덮기), padding과 조합하여 커스텀 리스트 불릿을 제작하는 원리
그라데이션
선형 그라디언트 (linear-gradient)
- 지정한 각도나 방향(to bottom 등)을 따라 색상이 변함
- 색상 중단점(%)을 조절하여 특정 구간을 강조하거나 색상이 딱 끊기는 하드 스톱을 구현
원형/타원형 그라디언트 (radial-gradient)
- 중심에서 바깥으로 퍼져나가는 형태
- 모양(circle, ellipse)과 끝나는 크기 위치를 지정하여 피사체를 강조하는 비네팅 효과 구현 가능
원뿔 그라디언트 (conic-gradient)
- 중심점을 기준으로 시계 방향으로 회전하며 색상이 변하는 형태
- 각도(deg, turn)를 활용하여 컬러 휠, 파이 차트, 도넛 차트를 쉽게 구현
반복 그라디언트 (repeating-*)
- repeating-linear-gradient( ), repeating-radial-gradient( ), repeating-conic-gradient( )
- 공사 중 사선 패턴, 물결, 과녁, 격자 무늬 등 반복되는 배경 패턴 타일 제작
변형
2D 변형 함수
- 레이아웃 흐름을 깨지 않고 요소를 조작하는 translate(이동), rotate(회전), scale(크기 조절), skew(비틀기) 및 변환 행렬 matrix( )
변형 기준점 (transform-origin)
- 회전이나 크기 조절이 일어나는 축을 center, top left 등의 좌표로 이동하여 시계 바늘과 같은 회전 효과 구현
3D 원근감 (perspective)
- 부모 요소에 px 단위로 눈과 화면 사이의 거리(소실점)를 설정하여 자식 요소에 3D 공간감을 부여하고, perspective-origin으로 시선의 위치(낮은/높은 시점) 조절
뒷면 제어 (backface-visibility)
- 요소를 180도 뒤집었을 때 뒷면의 노출 여부를 hidden으로 설정하여, 앞/뒷면 요소를 겹친 3D 카드 뒤집기 인터랙션 UI 제작

연습문제

Q1. 배경 이미지가 잘려 나가지 않고 온전히 다 보이도록, 요소의 크기에 맞춰 원본 비율을 유지한 채 최대 크기로 이미지를 맞추는 background-size 속성값은?

cover
contain
100% 100%
auto

정답: 2 해설: contain은 이미지가 잘리지 않는 한도 내에서 요소를 꽉 채우도록 비율을 유지하며 늘어난다. 하지만, 빈 여백이 생길 수 있다. cover는 빈틈없이 박스를 꽉 채우지만 이미지가 잘릴 수 있으며, 100% 100%는 박스 크기에 억지로 끼워 맞추기 때문에 찌그러짐이 발생할 수 있다.

Q2. 배경 이미지나 배경색이 테두리(border) 영역에는 칠해지지 않고, '패딩(padding) 영역까지만' 칠해지도록 제한 범위를 설정하는 CSS 속성은?

background-origin
background-attachment
background-clip
box-sizing

정답: 3 해설: background-clip은 배경색이나 이미지가 그려지는(칠해지는) 범위를 지정한다. padding-box로 설정하면 투명한 테두리나 점선 테두리 밑으로 배경이 비치지 않는다.

Q3. linear-gradient(90deg, red, blue)에서 각도 지정 90deg가 의미하는 진행 방향은?

아래쪽에서 위쪽으로 (to top)
왼쪽에서 오른쪽으로 (to right)
오른쪽에서 왼쪽으로 (to left)
위쪽에서 아래쪽으로 (to bottom)

정답: 2 해설: CSS 선형 그라디언트에서 0deg는 위쪽(12시)이며, 시계 방향으로 증가한다. 따라서 90deg는 오른쪽(3시 방향, to right)을 의미하며, 기본값은 180deg(to bottom)이다.

Q4. 피자 조각을 나눈 것처럼 중심점을 기준으로 시계 방향으로 360도 돌아가며 색상이 변하는 CSS 그라디언트 함수로서, '컬러 휠'이나 '파이 차트'를 만들 때 쓰이는 것은?

radial-gradient
rotate-gradient
sweep-gradient
conic-gradient

정답: 4 해설: conic-gradient( )는 원뿔(cone)을 위에서 내려다본 것처럼 각도(deg, turn)를 기준으로 색상이 회전하는 그라디언트 함수입니다. linear-gradient( )는 색상이 한 방향으로 변하며, radial-gradient( )는 중심점에서 바깥쪽으로 퍼저 나가는 원형/타원형의 그라디언트이다.

지문: .modal { position: absolute; top: 50%; left: 50%; transform: (A); } Q5. 위 지문에서 요소를 화면의 정중앙에 완벽하게 배치할 때, 'top: 50%; left: 50%;' 로 밀어낸 후 요소 자기 자신의 크기 절반만큼 다시 위/왼쪽으로 당겨오기 위해 사용하는 (A)에 알맞은 것은?

translate(-50%, -50%)

translate(50%, 50%)

translate(-50vw, -50vh)

margin(-50%, -50%) 정답: 1 해설: translate 내부의 % 값은 부모가 아닌 요소 자기 자신의 너비와 높이를 기준으로 한다. 따라서 각 방향으로 -50%를 주면 자신의 크기 절반만큼 정확히 역이동하여 완벽한 중앙 정렬이 이룰 수 있다.

지문: .card-face { _____: hidden; } Q6. CSS로 카드를 뒤집는 효과(Flip Card)를 만들었을 때, 카드가 180도 회전하여 뒷면을 보이고 있을 때 그 뒷면의 내용(거울처럼 뒤집힌 글자)이 보이지 않게 숨겨주는 속성은?

visibility

opacity

display

backface-visibility 정답: 4 해설: 요소가 3D 회전하여 사용자와 등지게(뒷면이 보이게) 되었을 때, 해당 면을 렌더링하지 않고 투명하게 처리하는 속성 표현은 'backface-visibility: hidden;'이다.

9강. CSS: 전환, 애니메이션, 다단

학습시간: 0분 / 51분
학습개요: 웹 페이지 요소에 생동감을 부여하는 CSS 전환과 애니메이션을 학습한다. 요소의 상태 변화를 부드럽게 제어하는 전환 효과부터, 키프레임을 활용한 다단계 시나리오 애니메이션까지 역동적인 UI 제작 원리를 다룬다. 또한, 긴 텍스트의 가독성을 높여주는 다단 레이아웃을 통해 반응형 웹 환경에 적합한 텍스트 배치 구조를 배운다.
학습목표:
- transition 관련 속성을 활용하여 사용자 상호작용 시 요소의 상태가 부드럽게 변하는 시각적 피드백을 구현할 수 있다.
- @keyframes과 animation 속성을 적용하여, 사용자 개입 없이도 스스로 동작하는 다단계 시각 효과를 구현할 수 있다.
- column-* 속성을 사용하여 긴 텍스트를 읽기 쉬운 다단 레이아웃으로 배치할 수 있다.

핵심 정리

전환
개념 및 목적
- 요소가 상태 A에서 B로 변할 때 즉시 바뀌지 않고 일정 시간에 걸쳐 부드럽게 변화하도록 돕는 상호작용 피드백 도구
- 주로 :hover, :focus 등에 반응하여 동작
핵심 구성 요소
- transition-property → 변화시킬 속성 지정. all 사용을 지양하고 구체적인 속성명을 명시하는 것이 유지보수에 유리
- transition-duration → 전환에 걸리는 시간을 지정 (0으로 지정하면 즉시 전환)
- transition-timing-function → 가속/감속의 속도 곡선을 설정(ease, linear, ease-in, ease-out, steps 등)
- transition-delay → 이벤트 감지 후 실제 전환이 시작되기 전까지의 대기 시간
성능 및 실무 규칙
- 화면 레이아웃 재계산을 유발하는 width, height, margin 등의 속성 변화는 피하고, GPU의 도움을 받는 transform, opacity를 사용하는 것이 권장됨
- transition 코드는 상태 선택자(:hover)가 아닌 원본 요소에 작성해야 자연스러운 양방향 전환이 가능
애니메이션
개념 및 키프레임
- 단순 전환을 넘어 여러 단계를 거치는 복잡한 움직임의 구현 가능
- @keyframes 지시어 → 0%에서 100%까지 시간 흐름에 따른 스타일 변화 시나리오를 정의
세부 제어 속성(animation-*)
- name, duration → 키프레임 이름과 1회 재생 시간 지정
- iteration-count → 반복 횟수(infinite 등)를 설정
- direction → 재생 방향을 제어하며, alternate를 사용하면 뚝 끊김 없이 부드러운 왕복 재생 효과 가능
- fill-mode → 애니메이션 종료 후 초기 상태로 튕겨 돌아가는 것을 막아주며, forwards를 통해 마지막 상태를 그대로 유지 가능
- timing-function, delay, play-state → 진행 속도 곡선, 대기 시간, 재생 중/일시정지의 제어 가능
최적화 기법
- will-change 속성 → 성능 문제가 생길 때만 브라우저에 렌더링 준비를 지시
- CSS 변수(var())와 하나의 키프레임을 조합하면 여러 애니메이션 패턴을 모듈화하여 재사용성을 높일 수 있음
다단
개념 및 분할
- 텍스트가 많은 콘텐츠를 신문처럼 여러 열로 나누어 보여줌
- 열 개수를 고정하는 column-count와 최소 너비를 지정하는 column-width가 있음 → 실무에서는 이 둘을 합친 단축 속성 columns를 사용하여 유연한 반응형 다단 구성
시각 요소 제어
- column-gap → 단 사이의 여백 조정
- column-rule → 레이아웃에 영향을 주지 않는 얇은 구분선을 삽입해 가독성을 높임
레이아웃 흐름 제어
- column-span → all은 중간 제목 등이 다단을 뚫고 전체 너비를 차지하게 만듦

연습문제

지문: .box { _____: background-color; transition-duration: 1s; } Q1. 위 지문에서 요소의 상태가 변할 때, 특정 CSS 속성에만 부드러운 애니메이션 효과를 주고자 할 때 대상을 지정하기 위해 밑줄 친 부분에 들어갈 속성은?

transition-target

transition-type

transition-property

transition-name 정답: 3 해설: 전환 효과를 적용할 CSS 속성(예: width, opacity 등)을 지정할 때는 transition-property를 사용하며, 이와 함께 transition-duration 속성을 0이 아닌 값으로 지정해야 전환 효과를 부여할 수 있다.

Q2. 전환 속도를 처음엔 느리게, 중간엔 빠르게, 끝날 땐 부드럽게 등 속도의 흐름(가감속)을 조절하는 속성은?

transition-timing-function
transition-speed-curve
transition-pace
transition-flow

정답: 1 해설: transition-timing-function은 애니메이션의 속도 변화(가속과 감속)를 제어하는 속성이며, 보기에서 언급한 나머지 것들은 실제로 존재하지 않는다.

지문: .box { animation-direction: ____; } Q3. 위 지문에서 애니메이션이 정방향(0→100)으로 실행된 후, 다시 툭 끊겨 처음으로 돌아가지 않고 역방향(100→0)으로 부드럽게 되돌아오는 '요요 효과'를 주는 속성값은?

reverse

alternate

normal

backwards 정답: 2 해설: 속성값 alternate는 반복 실행될 때 홀수 번째는 정방향, 짝수 번째는 역방향으로 진행하여 매끄러운 왕복 효과를 연출한다.

지문: .box:hover { _____: paused; } Q4. 위 지문에서 진행 중인 애니메이션을 마우스 오버 시 일시 정지하고 싶을 때 사용하는 속성은?

animation-stop

animation-play-state

animation-status

animation-control 정답: 2 해설: animation-play-state은 애니메이션의 재생 상태를 paused(일시 정지) 또는 running(재생)으로 제어하는 속성이다.

Q5. 다단 레이아웃에서 단의 개수를 고정하지 않고, 각 단의 너비가 최소 300px은 되어야 한다라고 브라우저에 최적의 너비를 제시하는 속성은?

column-width: 300px;
min-width: 300px;
column-min: 300px;
column-size: 300px;

정답: 1 해설: column-width는 단의 최적 너비(가이드라인)를 지정하는 속성으로, 공간이 허락하는 한 이 너비 이상을 유지하며 단의 개수를 자동으로 늘리거나 줄여서 반응형 다단을 구성할 수 있다.

Q6. 텍스트의 분량에 따라 단의 높이가 결정될 때, 브라우저가 알아서 모든 단의 높이를 최대한 비슷하게(균등하게) 맞추도록 내용을 재분배하는 속성은?

column-height: auto;
columns: equal;
column-distribute: even;
column-fill: balance;

정답: 4 해설: column-fill 속성의 기본값인 balance는 내용이 부족하더라도 모든 단의 높이를 균형 있게 맞추기 위해 내용을 적절히 쪼갠다.

10강. 자바스크립트 언어

학습시간: 0분 / 107분
학습개요: 웹 페이지의 동적 상호작용과 데이터 처리를 담당하는 자바스크립트의 역할과 선언 방식부터 변수, 자료형, 연산자, 제어문, 함수, 객체, 이벤트까지의 핵심 문법과 활용법을 학습한다. 또한 주요 내장 객체(String, Array, Date, Math, JSON)를 활용한 실무적인 데이터 가공 기법과 이벤트 처리를 위한 다양한 개념과 기법들을 다룬다.
학습목표:
- 웹 페이지에서 자바스크립트의 동적 역할을 이해하고, 외부 파일과 defer 및 type="module" 속성을 상황에 맞게 적용할 수 있다.
- const와 let, 자료형, 연산자와 제어문을 바르게 선택하여 코드를 작성할 수 있다.
- 함수 선언문, 함수 표현식, 콜백 함수, 화살표 함수를 구분하여 목적에 맞게 사용할 수 있다.
- String, Array, Date, Math, JSON과 같은 내장 객체를 활용해 주어진 원시 데이터를 원하는 형태로 가공할 수 있다.
- addEventListener로 요소에 이벤트를 등록하고, 이벤트 버블링의 특성을 파악하여 위임 기법을 적용할 수 있다.

핵심 정리

자바스크립트 개요
역할 및 특징
- 웹의 뼈대(HTML)와 디자인(CSS)을 넘어, 상태 관리와 데이터 통신 등 동적 기능을 책임지는 범용 스크립트 언어
- 자바(Java)와는 실행 방식이나 타입 시스템(동적 타입)이 완전히 다른 언어
스크립트 적용 방식
- 과거의 방식(body 끝부분 삽입)에서 벗어나, < head > 요소 내에 외부 파일(.js)을 < script defer >로 연결하는 방식이 실무 표준 → HTML 파싱과 병렬로 다운로드하지만 실행은 파싱 후 안전하게 이루어짐
변수, 연산자, 제어문, 함수
변수와 자료형
- 원시 타입(값 복사)과 참조 타입(주소 복사)의 차이를 이해해야 함
- 재할당이 불가한 const를 기본값으로 사용해 불변성을 지향하며, 카운터 등 재할당이 꼭 필요한 경우에만 let을 사용 → var 사용 금지
최신 연산자
- 강제 형변환 오류를 막는 엄격한 일치 연산자(===)
- 에러를 방지하는 선택적 체이닝(?.)
- 기본값을 할당하는 널 병합 연산자(??)
- 조건문 대신 활용되는 단축 평가(&&, )
배열 순회와 주요 메서드
- for…of → 배열·문자열 같은 순서 있는 데이터 순회
- for…in → 객체의 키 순회, 배열에는 비권장
- forEach → 단순 실행
- map → 1:1 매핑해서 새 배열 생성
- filter → 조건에 맞는 요소만 추출
- reduce → 합계·통계 등 하나의 값으로 누적
- includes → 존재 여부 확인
함수와 콜백
- 호이스팅의 부작용을 막기 위해 함수 표현식이나 화살표 함수(( ) => { })의 사용을 권장
- 다른 함수에게 실행 권한을 맡기는 '콜백 함수'는 비동기 및 이벤트 처리 로직의 핵심 기반
객체
객체 생성과 조작
- 일회성 데이터는 객체 리터럴({ }), 재사용 가능한 템플릿은 class로 생성
- 속성에 접근할 때 기본적으로 점 표기법(.)을 쓰지만, 변수에 담긴 문자열로 키를 찾아야 할 때는 대괄호 표기법([ ])이 필수
주요 내장 객체
- String → includes, replace/replaceAll, slice, trim, split 등을 체이닝하여 지저분한 사용자의 입력 데이터를 원본 훼손 없이 깔끔하게 정제 가능
- Array (핵심) → 실무 데이터 핸들링의 주축. 새로운 배열을 반환하는 map(1:1 가공), filter(조건 추출)와 단일 값으로 누적하는 reduce가 가장 중요. 원본을 변형하는 splice, sort 대신 사본을 이용하거나 전개 연산자(…)를 사용해 원본을 안전하게 복제해야 하는 것이 중요
- Date → new Date( )를 생성해 getTime으로 디데이 등을 계산하며, toLocaleString, toISOString으로 상황에 맞는 문자열 포맷을 반환

연습문제

지문: ____ score = 100; score = 80; Q1. 위 지문의 자바스크립트에서 값이 중간에 변할 수 있는 일반적인 변수를 선언할 때 사용하는 가장 모던하고 올바른 키워드는?

const

let

var

int 정답: 2 해설: ES6 이후부터는 값이 변할 수 있는 변수를 만들 때 버그가 많은 var 대신 안전한 let을 사용하는 것이 표준이다. 한편 변하지 않는 고정된 값(상수)을 선언할 때는 const 키워드를 사용한다.

지문: const userMsg = ""; const defaultMsg = "환영합니다"; const result = userMsg || defaultMsg; Q2. 위 지문에서 논리 연산자의 단축 평가를 활용한 코드이다. 변수 result에 할당되는 값은?

"" (빈 문자열)

undefined

true

"환영합니다" 정답: 4 해설: 논리합(||) 연산자는 왼쪽 피연산자가 falsy 값("", 0, nul, undefined 등)이면 오른쪽 피연산자를 그대로 반환합니다. 빈 문자열은 falsy이므로 defaultMsg가 변수에 할당된다. 이는 매개변수 기본값 설정에 자주 쓰이는 패턴이다.

지문: console.log(10 == "10"); // (A) console.log(10 === "10"); // (B) Q3. 위 지문에서 자바스크립트의 비교 연산자 '=='와 '==='를 적용하였을 때 (A)와 (B) 문장의 결과값으로 올바른 것은?

(A) true, (B) false

(A) false, (B) false

(A) true, (B) true

(A) false, (B) true 정답: 1 해설: '=='(느슨한 비교)는 브라우저가 값의 타입을 강제로 변환하여 비교하므로 true가 나온다. 하지만 '==='(엄격한 비교)는 타입과 값이 모두 일치해야 하므로 false가 된다. 실무에서는 버그 방지를 위해 항상 ===를 사용한다.

지문: const fruits = ["Apple", "Banana"]; fruits.push("Cherry"); fruits.pop( ); Q4. 위 지문의 배열에 데이터를 추가하고 삭제하는 내장 메서드들의 동작을 바르게 설명한 것은?

push는 배열의 맨 앞에 요소를 추가하고, pop은 맨 앞의 요소를 제거한다.

push는 배열의 맨 뒤에 요소를 추가하고, pop은 맨 뒤의 요소를 제거한다.

위 동작을 마치면 원본 배열은 ["Cherry"]가 된다.

배열의 원본은 유지되며 새로운 배열이 반환된다. 정답: 2 해설: push( )와 pop( )은 햄버거 통(스택)처럼 배열의 맨 마지막 꼬리 부분을 다루는 메서드이며, 맨 앞부분을 다루는 것은 unshift( )와 shift( )이다. 이 메서드들은 원본 배열 자체를 변경한다.

지문: const nums = [1, 2, 3]; const doubled = nums.____(n => n * 2); // [2, 4, 6] Q5. 위 지문의 배열에서 기존 원본을 훼손(수정)하지 않고, 각 요소를 콜백 함수로 가공하여 완전히 새로운 똑같은 길이의 배열을 만들어 반환하는 함수형 메서드는?

forEach( )

filter( )

map( )

reduce( ) 정답: 3 해설: map( )은 배열의 모든 요소를 순회하며 가공한 결괏값들로 꽉 채워진 '새로운 배열'을 반환하는 메서드이다.

지문: form.addEventListener('submit', function(e) { e._________; // 기본 동작 중지 console.log('페이지 이동 없이 JS 로직 실행'); }); Q6. 사용자가 폼 전송 버튼(<button type="submit">)을 눌렀을 때, 페이지가 새로고침되며 서버로 데이터가 넘어가는 브라우저의 '기본 동작'을 강제로 취소시키는 메서드는?

stopPropagation( )

cancelEvent( )

preventDefault( )

stopBubbling( ) 정답: 3 해설: e.preventDefault( )를 호출하면 요소가 가진 원래의 기능(<a>의 링크 이동이나 <form>의 제출 등)이 작동하지 않고 취소하여 JS가 통제권을 쥐게 한다.

11강. 문서 객체 모델과 브라우저 객체 모델

학습시간: 0분 / 81분
학습개요: 이번 강의에서는 웹 페이지의 시각적 요소와 브라우저 자체를 자바스크립트로 제어하는 핵심 원리인 DOM(문서 객체 모델)과 BOM(브라우저 객체 모델)을 학습한다. DOM 트리에 접근하여 요소를 동적으로 선택, 내용/스타일 수정, 추가 및 삭제하는 방법을 익힌다. 아울러 BOM을 통해 주소창(location), 방문 기록(history), 클립보드 제어(navigator), 타이머 기능 등 브라우저 내장 기능을 활용하는 방법을 배운다.
학습목표:
- querySelector()와 classList 등 DOM 제어 메서드/속성을 활용하여, HTML 요소의 텍스트, 속성, 스타일을 보안과 유지보수에 유리한 방식으로 동적 조작할 수 있다.
- createElement( )와 append( )로 새로운 요소를 생성해 화면에 부착하고, DocumentFragment 가상 컨테이너를 사용하여 다량의 DOM 조작 시 발생하는 렌더링 부하를 최적화할 수 있다.
- location, history, navigator 객체를 이용해 브라우저 주소 이동, 뒤로 가기, 클립보드 복사 기능을 구현하고, setTimeout( )과 setInterval( )로 시간 기반 상호작용을 제어할 수 있다.

핵심 정리

DOM ("문서 객체 모델")
개념 및 렌더링
- HTML 문서를 자바스크립트가 조작할 수 있도록 객체 트리로 변환한 인터페이스
- 브라우저는 DOM(구조)과 CSSOM(스타일)을 결합해 최종 화면인 '렌더 트리'를 구성
요소 접근
- CSS 선택자 문법을 그대로 사용하는 querySelector( )를 주로 사용
- 여러 요소를 찾을 때는 배열 메서드(forEach) 사용이 가능한 NodeList를 반환하는 querySelectorAll( ) 활용
내용 및 속성 조작
- 내용 조작 → 악성 스크립트 실행 위험이 있는 innerHTML 속성 대신, 태그까지 순수 텍스트로 안전하게 출력하는 textContent 속성 사용 권장
- 속성 조작 → 점(.) 표기법이나 setAttribute( )로 제어
사용자 정의 속성 (data-* 속성과 dataset 프로퍼티)
- HTML에 data-product-code="CF-001"처럼 숨겨둔 데이터를 JS에서 element.dataset.productCode(낙타체 표기법으로 변환)로 읽어와 서버 통신 및 UI 제어에 활용
스타일 조작
- style 직접 수정은 디자인과 로직이 섞여 유지보수에 어려움을 겪음
- CSS 파일에 디자인을 분리해 두고 JS의 classList(add( )/remove( )/toggle( ))로 클래스만 뗐다 붙였다 하는 방식을 실무 표준으로 사용
삽입, 삭제, 교체
- createElement( )로 요소를 만들고 append( )로 부착하며, remove( )로 삭제
- 자식 요소 전체를 빠르게 비우고 교체할 때는 replaceChildren( )이 성능 측면에서 압도적으로 유리
성능 최적화 (DocumentFragment)
- 수많은 요소를 반복문으로 DOM에 직접 넣으면 화면 렌더링이 계속 발생해 성능이 저하되므로, 대신 메모리상 임시 바구니인 DocumentFragment에 요소들을 모두 담은 뒤, 실제 DOM에 딱 한 번만 부착하여 렌더링 최적화를 달성
BOM ("브라우저 객체 모델")
개념 및 window 객체
- 웹 문서가 아닌 브라우저 창 자체의 기능을 제어하기 위한 API
- 최상위 객체인 window 아래에 document(DOM), location, history, navigator 등이 존재
주요 하위 객체
- location → 주소창 제어 → href는 이동(뒤로 가기 가능), replace는 덮어쓰기(뒤로 가기 불가)를 수행하며, URL 쿼리 파라미터는 URLSearchParams를 통해 쉽게 파싱 가능
- history → 방문 기록 스택을 다룸 → back( )/forward( )/go( )를 이용해 브라우저를 이동시킴
- navigator → 접속 브라우저/기기 정보를 담으며, 실무에서는 주로 clipboard.writeText( )와 readText( ) 비동기 메서드를 활용한 '공유하기(클립보드 복사/붙여넣기)' 기능 구현에 사용
타이머 제어 (setTimeout & setInterval)
- setTimeout( ) → 지정 시간(ms)이 지난 후 콜백 함수를 딱 한 번 실행
- setInterval( ) → 지정 시간 간격으로 무한히 반복 실행하므로 카운트다운이나 스톱워치 등을 구현할 때 필수적
- 메모리 누수 방지 → 쓸모가 없어진 타이머는 반드시 해당 ID를 인자로 넣은 clearTimeout( )이나 clearInterval( )을 호출해 메인 스레드에서 해제해 주어야 함

연습문제

지문: const items = document.______('li'); items.forEach(item => console.log(item)); Q1. 위 지문 중 배열 순회 시 최신 브라우저에서 forEach 메서드를 별도의 변환 없이 바로 사용할 수 있는 DOM 컬렉션은?

getElementsByTagName

getElementById

getElementsByClassName

querySelectorAll 정답: 4 해설: querySelectorAll( )이 반환하는 NodeList는 최신 브라우저에서 forEach 메서드를 자체 지원하여 코드가 훨씬 간결해진다.

Q2. 개별 <input> 요소 100개에 각각 이벤트를 걸지 않고, 부모인 <form> 요소 하나에만 이벤트를 걸어 동적으로 추가되는 자식들의 이벤트까지 모두 처리하는 기법을 일컫는 표현은?

이벤트 버블링 차단
이벤트 위임
콜백 분리
클로저

정답: 2 해설: 부모 요소에 단 하나의 리스너만 등록하여, 새로 추가되는 동적 자식 요소의 이벤트까지 메모리 낭비 없이 한 번에 자동 관리하는 방식을 이벤트 위임(event delegation)이라 한다.

지문: box.classList.____('active'); Q3. 위 지문에서 classList를 사용하여 요소에 특정 클래스가 있으면 제거하고, 없으면 추가하기 위해 사용하는 메서드는?

switch

replace

toggle

contains 정답: 3 해설: classList.toggle('클래스명')은 스위치처럼 클래스의 존재 여부를 파악해 가감(Add/Remove)을 알아서 처리해 주는 핵심 메서드이다.

지문: box.style._______ = "gold"; Q4. 위 지문에서 DOM 요소의 인라인 스타일을 직접 수정할 때, 하이픈이 포함된 CSS 속성명(background-color)은 자바스크립트에서 어떻게 작성해야 하는가?

background-color

background_color

BackgroundColor

backgroundColor 정답: 4 해설: 자바스크립트 객체의 속성으로 CSS 속성을 제어할 때는 마이너스(-) 기호 연산과 헷갈리지 않게 하이픈을 빼고 카멜케이스(낙타체)인 backgroundColor로 작성해야 합니다.

지문: const cart = document.querySelector('#cart'); cart.______; Q5. 위 지문에서 쇼핑 장바구니처럼 <div> 안의 모든 상품(자식 요소)을 한 번에 싹 지워버리려 한다. 성능이 가장 뛰어나고 깔끔한 최신 메서드 호출 방식은?

innerHTML = ""

removeChildren( )

replaceChildren( )

clearAll( ) 정답: 3 해설: element.replaceChildren( ) 메서드에 인자를 넣지 않고 호출하면, 내부의 모든 자식 요소가 가장 빠르고 안전하게 삭제된다.

지문: // 방송대로 페이지 이동 ______ = 'https://www.knou.ac.kr'; Q6. 위 지문에서 현재 웹 페이지의 주소(URL) 정보를 읽거나, 다른 페이지로 강제 이동시킬 때 사용하는 BOM의 핵심 객체와 속성은?

window.navigator.href

window.history.move

location.href

document.move 정답: 3 해설: location 객체의 href 속성에 새로운 URL을 대입하면 해당 주소로 페이지가 이동한다.

12강. 캔버스 (1)

학습시간: 0분 / 70분
학습개요: 이번 강의에서는 웹 브라우저에서 자바스크립트를 이용해 픽셀 기반의 그래픽을 고속으로 렌더링하는 HTML5 canvas의 핵심 원리를 학습한다. 캔버스의 좌표계와 기기 해상도(DPR) 보정 기법을 이해하고, 즉시 실행 방식과 패스(Path) 기반 방식을 통해 사각형, 다각형, 부채꼴 등 다양한 도형을 그리는 방법 및 선, 색상 등의 시각적 스타일링 기법을 다룬다.
학습목표:
- 캔버스의 상태 머신 특성을 이해하여 save( )와 restore( )로 스타일 충돌을 막고, 패스 관련 메서드(beginPath, moveTo, lineTo, arc, closePath) 및 Path2D를 활용해 복잡한 다각형을 조작할 수 있다.
- fillStyle, strokeStyle 및 선 제어 속성을 활용해 도형의 색상과 형태를 꾸미고, setLineDash( )와 lineDashOffset 속성을 조합하여 다양한 점선 효과를 구현할 수 있다.

핵심 정리

캔버스 개요
캔버스의 개념 및 좌표계
- HTML5에 추가된 도화지(컨테이너) 요소로, JS를 이용한 고속 픽셀 드로잉에 최적화되어 있음
- 좌표계는 좌측 상단이 (0,0)이며 우측과 하단으로 갈수록 각각 x, y 좌표값이 증가
해상도와 CSS 크기 분리
- 도화지의 픽셀 개수를 정하는 canvas.width/height와 브라우저에 표시되는 style.width/height가 다르면 그림이 흐려짐
고해상도(DPR) 보정 원리
- 모바일 및 고해상도 모니터의 흐림 현상을 방지하기 위해서는 기기의 물리적 픽셀 비율(window.devicePixelRatio)만큼 내부 캔버스 버퍼를 크게 만들고, ctx.scale( )을 통해 비율을 압축하여 선명도를 높이는 기법을 실무 템플릿으로 사용해야 함
선과 도형 그리기
사각형 그리기 → (즉시 실행 방식) 코드를 호출하자마자 도화지에 즉시 그려짐
- fillRect(x,y,w,h) → 면이 칠해진 사각형
- strokeRect( ) → 테두리만 있는 사각형
- clearRect( ) → 특정 영역의 픽셀을 투명하게 지우는 지우개로, 애니메이션의 매 프레임 화면 초기화에 필수적
상태 머신 (save/restore)
- 캔버스는 한 번 물감을 묻힌 붓의 상태(색상, 두께 등)를 씻어내기 전까지 유지
- 여러 도형을 그릴 때 설정이 꼬이는 부작용을 막기 위해서는 save( )로 현재 상태를 스택에 백업하고, 작업 후 restore( )로 원상 복구하는 방식이 중요
패스 기반 드로잉 (다각형/선 그리기)
- 가상의 연필로 밑그림을 설계한 뒤 나중에 색을 입히는 방식
- beginPath( ) → 이전 설계도와 단절시키고 새로 시작됨을 선언
- moveTo(x,y) → 펜의 위치를 이동시키고, lineTo(x,y)로 선을 그음
- closePath( ) → 시작점과 끝점을 깔끔하게 이어 닫힌 도형을 만듦
- 최종적으로 fill( )(면 칠하기) 또는 stroke( )(선 긋기)를 호출해야 화면에 나타남
원/원호 및 부채꼴 그리기
- arc(x, y, 반지름, 시작각도, 종료각도, 방향) 메서드
- 각도는 도(deg)가 아닌 라디안 단위로 계산
- 반원이나 팩맨처럼 입이 벌어진 형태(부채꼴)를 그리려면 중심점으로 이동(moveTo)한 뒤 원호를 그리고 closePath( )로 닫아주는 원리를 사용하며, 파이 차트 또한 이 방식으로 데이터 비율만큼 각도를 누적하면 그릴 수 있음
Path2D 객체
- 그려둔 밑그림(경로) 데이터를 변수에 별도로 저장해 두고 위치 등을 바꿔 재사용할 수 있게 돕는 도구
스타일 지정하기
색상 및 투명도 지정
- fillStyle, strokeStyle에 색상값(rgba 등)을 넣어 채우기와 테두리 색 지정
- globalAlpha를 사용(0.0~1.0)하면 도화지 전체에 그려지는 모든 요소에 일괄적으로 투명도를 적용할 수 있음
선 스타일 속성
- 디테일한 UI 구현에 필수적인 옵션

연습문제

Q1. ctx.save( ) 메서드를 호출했을 때 스택에 저장되는 대상이 아닌 것은?

좌표계의 이동, 회전, 스케일 변환 상태
filStyle, strokeStyle, globalAlpha 등의 색상 속성
캔버스 도화지에 이미 색칠된 픽셀(그림) 데이터
lineWidth와 lineCap 등의 선 스타일

정답: 3 해설: "캔버스(도화지)에 그려진 그림(픽셀)은 저장되지 않는다. 오직 '붓의 상태'와 '도화지의 상태'만 저장된다." save( )와 restore( )는 Undo 기능이 아니다. 스타일링 설정이 꼬이는 부작용 없이 안전하게 그림을 그리기 위해서는, 그리기 전에 ctx.save( )를 호출하고, 그림을 다 그린 직후 ctx.restore( )로 마무리하는 것이 중요하다.

Q2. 패스(Path) 기반 방식으로 그림을 그릴 때 새로운 밑그림을 시작하겠다는 의미의 선언으로 이전 경로들과의 연결을 끊는 리셋 버튼 역할을 하는 필수 메서드는?

ctx.moveTo( )
ctx.closePath( )
ctx.beginPath( )
ctx.resetPath( )

정답: 3 해설: 패스 기반 방식을 시작할 때 beginPath( )를 생략하면 이전 경로를 계속 기억하여 의도치 않은 그림이 그려지게 된다. 따라서 다른 그림을 그릴 때마다 beginPath( )로 시작하는 것은 새로운 설계도의 시작을 알린다는 의미를 갖는 매우 중요한 선언이다.

Q3. 다각형의 내부 색상(노란색)과 테두리(파란색, 두께 5)를 모두 그릴 때, 테두리 두께가 색상에 덮이지 않고 온전하게 5px 굵기를 유지하기 위한 올바른 메서드 호출 순서는?

ctx.stroke( ); 후 ctx.fill( );
ctx.fill( ); 후 ctx.stroke( );
순서는 전혀 상관없다.
ctx.closePath( );를 생략하면 된다.

정답: 2 해설: 캔버스에서 선은 경로의 중앙을 기준으로 양옆으로 퍼집니다. 테두리를 먼저 그리고(stroke) 면을 채우면(fill), 채우는 색상이 테두리의 안쪽 절반을 덮어버려 선이 얇아 보인다. 따라서 채우기를 먼저 한 뒤 테두리를 그리는 것이 정석이다.

Q4. 원이나 부채꼴을 그리는 ctx.arc( ) 함수에서 기본적으로 각도를 재는 방향과 기준점(0라디안)은 어디인가?

12시 방향 기준, 시계 방향
12시 방향 기준, 시계 반대 방향
3시 방향 기준, 시계 방향
3시 방향 기준, 시계 반대 방향

정답: 3 해설: 캔버스에서 0라디안은 시계의 3시 방향이며, counterclockwise 속성이 기본값 false일 때 각도는 시계 방향(아래쪽)으로 증가한다.

지문: ctx.______ = "round"; Q5. 위 지문에서 굵은 선을 그렸을 때 선의 끝부분 모서리 형태를 지정하는 속성으로, 둥근 버튼 형태 UI를 그릴 때 주로 사용하는 스타일 값은 무엇인가?

lineJoin

lineShape

lineCap

strokeType 정답: 3 해설: 선의 시작점과 끝점 양끝 모양을 결정하는 속성은 lineCap이며, "round"로 설정하면 선의 굵기 반만큼 둥근 반원이 끝에 추가된다.

지문: ctx.setLineDash([10, 5]); ctx._________ = offset; // 패턴 시작 위치를 당기거나 밈 Q6. 위 지문 중 포토샵처럼 점선이 스르륵 흐르는 듯한 애니메이션을 구현할 때, 점선의 패턴 설계도를 왼쪽이나 오른쪽으로 미세하게 밀어주는 역할을 하는 속성은?

lineWidth

lineDashOffset

linePatternStart

strokeOffset 정답: 2 해설: lineDashOffset 속성은 지정된 점선 패턴이 어디서부터 시작할지 오프셋 거리를 지정한다. 애니메이션 함수에서 이 값을 계속 증가/감소시키면 선이 움직이는 듯한 시각적 환상을 줄 수 있다.

13강. 캔버스 (2)

학습시간: 0분 / 79분
학습개요: 이번 강의에서는 HTML5 캔버스의 그라디언트, 패턴, 그림자, 도형 합성을 통해 시각적 입체감과 특수 효과를 부여하는 방법을 익히고, 텍스트 및 외부 이미지를 동적으로 렌더링하는 기술을 다룬다. 나아가 좌표계 자체를 조작하는 도형 변환(이동, 회전, 확대/축소)을 통해 복잡한 애니메이션과 반응형 그래픽을 효율적으로 구현하는 핵심 원리를 배운다.
학습목표:
- 그라디언트, 패턴, 그림자, 도형 합성 모드를 활용하여 캔버스 요소에 입체적인 시각 효과와 질감을 디자인할 수 있다.
- fillText( ), strokeText( )와 drawImage( )를 사용해 텍스트와 외부 이미지를 캔버스의 원하는 좌표에 배치하고, 크기와 형태, 정렬을 동적으로 제어할 수 있다.
- translate( ), rotate( ), scale( ) 메서드를 조합하여 캔버스 좌표계를 변환하고, 요소의 위치 이동, 회전, 대칭(거울 모드) 효과를 부작용 없이 안전하게 구현할 수 있다.

핵심 정리

스타일 지정하기
그라디언트
- 선형 createLinearGradient( ), 원형 createRadialGradient( ), 원뿔형 createConicGradient( ) 객체를 생성하고 addColorStop( )으로 색상 중단점을 지정해 다채로운 빛과 그림자 효과를 구현
- 오프셋을 동일하게 주어 경계를 끊는 '하드 스톱(Hard Stop)' 기법이 실무 UI(파이 차트 등)에 자주 사용됨
패턴 스타일
- 외부 이미지나 임시(Off-screen) 캔버스를 createPattern( )으로 불러와 도장처럼 반복(repeat)시켜 질감이나 도트 무늬 등을 채워넣음
그림자 스타일
- shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY 속성을 사용해 입체감 부여
- 오프셋을 0으로 맞추고 밝은색을 주어 자체 발광하는 네온사인 효과를 만들 수 있음
도형 합성
- globalCompositeOperation 속성 → 기존 그림(destination)과 새 그림(source)을 겹치는 방식 제어
- source-in으로 동그란 프로필 사진 마스킹, destination-out으로 튜토리얼 스포트라이트(지우개) 효과, multiply로 사진 위에 셀로판지 색상 필터 씌우기 등을 구현
텍스트와 이미지 그리기
텍스트 그리기
- 글자 내부를 칠하는 fillText(text,x,y)와 외곽선만 그리는 strokeText(text,x,y)를 사용하며, font, textAlign, textBaseline 속성으로 서체와 기준점을 맞춤
- measureText( ) → 글자의 픽셀 너비를 측정하여 화면 수동 중앙 정렬이나, 캔버스에 없는 '자동 줄바꿈(wrapText)' 기능을 직접 구현할 수 있음
외부 이미지 그리기
- drawImage( ) 메서드 → 반드시 이미지 로딩(onload)이 완료된 후 실행해야 함
- 인자 3개 (원본 얹기) → drawImage(img, dx, dy) → 원본 크기 그대로 지정된 캔버스 좌표에 얹어 그릴 때 사용
- 인자 5개 (크기 조절) → drawImage(img, dx, dy, dw, dh) → 지정한 폭과 높이에 맞춰 이미지를 압축하거나 늘려서 그릴 때 사용
- 인자 9개 (자르고 늘리기) → drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) → 원본 이미지의 특정 영역만 잘라내어 캔버스의 지정 위치에 원하는 크기로 렌더링함
도형 변환
개념 및 원칙
- 도형 자체가 아닌 '캔버스의 좌표계(투명 모눈종이)'를 통째로 움직이는 개념
- 변환이 계속 누적되므로 반드시 작업 전 save( )로 상태를 백업하고 작업 후 restore( )로 원상 복구해야 함
이동 (translate)
- 캔버스의 (0,0) 원점을 화면의 특정 위치로 이동시킴
회전 (rotate)
- 원점을 기준으로 캔버스를 시계 방향(라디안 단위)으로 회전시킴
- 요소가 제자리에서 회전하려면 translate( )으로 원점을 요소의 중앙으로 먼저 옮긴 뒤 돌려야 방식을 적용
확대/축소/반전 (scale)
- 비율 값으로 캔버스를 늘리거나 줄임
- -1을 대입하면 좌표계가 완전히 뒤집혀 좌우/상하 대칭(거울 모드)으로 그림이 그려지는 효과를 낼 수 있음
사용자 정의 변환

연습문제

지문: const grad = ctx.createLinearGradient(0, 0, 200, 0); grad.addColorStop(0, "black"); grad.addColorStop(1, "white"); Q1. 위 지문은 선형 그라디언트를 생성하는 코드의 일부이다. 그라디언트가 그려지는 방향은 어떻게 되는가?

왼쪽에서 오른쪽으로 (수평)

위에서 아래로 (수직)

좌상단에서 우하단으로 (대각선)

중앙에서 바깥쪽으로 (방사형) 정답: 1 해설: createLinearGradient(x0, y0, x1, y1)에서 y좌표는 0으로 고정이고 x좌표만 0에서 200으로 변하므로, 왼쪽에서 오른쪽으로 변하는 수평 그라디언트가 된다.

지문: const pattern = ctx.______(img, 'repeat'); Q2. 위 지문의 캔버스에서 외부 이미지를 불러와 타일처럼 반복되는 패턴 객체를 생성하는 메서드는?

createPattern

makePattern

buildPattern

drawPattern 정답: 1 해설: 이미지를 반복 패턴으로 만들어주는 메서드는 createPattern(이미지변수, 반복방식)이다.

지문: ctx.______ = 10; // 10픽셀만큼 흐려짐 Q3. 위 지문에서 그림자의 경계선을 칼같이 자르지 않고, 뿌옇게 퍼지도록 만드는 속성은 무엇인가?

shadowSpread

shadowOpacity

shadowRadius

shadowBlur 정답: 4 해설: 그림자의 흐림 정도(가우시안 블러 반경)를 설정하는 속성은 shadowBlur이다.

지문: ctx.______ = "center"; ctx.fillText("가운데 정렬", 150, 100); Q4. 위 지문에서 지정된 X 좌표를 기준으로 텍스트를 "가운데 정렬(수평 중앙)" 시키기 위해 사용하는 속성은?

textBaseline

textAlign

horizontalAlign

justifyContent 정답: 2 해설: 텍스트의 수평 정렬(좌, 우, 중앙 등)을 담당하는 속성은 textAlign이다.

지문: ctx.____(img, 0, 0); Q5. 위 지문의 캔버스에 외부에서 가져온 사진이나 이미지를 그려넣는 가장 기본적이고 널리 쓰이는 메서드는 무엇인가?

paintImage( )

insertImage( )

showImage( )

drawImage( ) 정답: 4 해설: 이미지를 캔버스에 렌더링하는 내장 메서드의 이름은 drawImage이다.

Q6. ctx.scale(2,2)를 적용한 후 도형을 그렸다. 도형의 크기가 2배 커지는 것 외에 또 어떤 속성이 2배로 영향을 받아 시각적으로 달라지는가?

도형 내부의 투명도
선의 두께
그림자 반경
채우기 색상

정답: 2 해설: scale( )은 캔버스 그리드 픽셀 자체를 확대하므로, 명시된 선 두께(lineWidth=1)도똑같이 스케일(두 배 확대)이 적용되어 2픽셀 두께로 굵게 렌더링된다.

14강. HTML API (1)

학습시간: 0분 / 64분
학습개요: 이번 강의에서는 자바스크립트를 활용하여 웹 페이지의 비디오와 오디오를 섬세하게 다루는 미디어 제어 API를 학습한다. 사용자 정의 플레이어, 버퍼링 감지, 배속 조절 등의 실무 기능을 구현한다. 또한, 화면 내 요소나 로컬 PC의 파일을 특정 영역으로 마우스로 끌어다 놓는 드래그 앤 드롭 API의 핵심 동작 원리와 dataTransfer 객체를 익혀, 파일 업로드 및 칸반 보드 상호작용 UI를 개발하는 방법을 다룬다.
학습목표:
- video 및 audio 요소의 주요 속성과 이벤트를 자바스크립트로 연동하여, 로딩 스피너 및 진행률 바가 포함된 반응형 사용자 정의 미디어 플레이어를 구현할 수 있다.
- 대상 요소에 draggable 속성을 부여하고 dataTransfer 객체를 활용하여 데이터를 전달하며, dragover 및 drop 이벤트의 기본 동작을 차단하여 안전한 파일 업로드 및 칸반 보드 UI를 제작할 수 있다.

핵심 정리

미디어 제어
기본 속성 및 정책
- <video>와 <audio>는 HTMLMediaElement 인터페이스를 공유하므로 제어 방식이 동일하며, 최신 브라우저 환경에서 자동 재생(autoplay)을 구현하려면 보통 muted(음소거) 속성을 함께 지정해야 함
상태 제어 (속성 및 메서드)
- 속성 → currentTime(현재 재생 위치), duration(전체 길이), volume(음량), playbackRate(배속) 등을 직접 읽거나 지정
- 미디어 제어 메서드 → play( )와 pause( )를 사용. 별도의 stop( ) 메서드가 없기 때문에 정지를 구현할 때는 pause( ) 호출 후 currentTime을 0으로 초기화함
상태 감지 및 UI 동기화 (이벤트)
- timeupdate → 재생되는 동안 지속적으로 발생하여 진행률 바 UI를 업데이트할 때 필수적으로 사용
- loadedmetadata → 미디어의 메타데이터(전체 길이 등) 로딩이 완료되었을 때 발생하며 초기 화면 설정에 사용
- waiting / playing → 네트워크 지연으로 버퍼링이 걸렸을 때 로딩 스피너를 표시하고 재생 재개 시 숨기는 실무 UX 처리에 사용
- volumechange → 다양한 경로로 음량이 변할 때 UI를 동기화하기 위한 가장 안전한 이벤트 거점
드래그 앤 드롭
핵심 3요소
- 드래그될 출발지 요소(반드시 draggable="true" 지정), 데이터를 내려놓을 목적지(드롭 존), 그리고 이동 간 데이터를 담아 나르는 보이지 않는 임시 바구니인 dataTransfer 객체로 구성됨
출발지 이벤트 흐름
- dragstart → 드래그를 시작할 때 1회 발생하며, e.dataTransfer.setData( ) 메서드를 이용해 텍스트 데이터나 요소의 식별자(ID)를 바구니에 담음/저장 → setData( ) 사용
목적지 이벤트 및 제어 규칙 (가장 중요)
- dragover (위에 머무름) 및 drop (내려놓음) 상황에서 브라우저는 기본적으로 드롭을 거부하거나 파일을 새 탭에서 열어버리려 하므로, 반드시 e.preventDefault( )를 호출하여 브라우저의 기본 동작을 차단해야만 정상적인 드롭을 구현할 수 있음
데이터 추출 및 시각적 피드백
- getData( ) → drop 이벤트 발생 시 바구니에서 저장된 데이터를 가져옴
- e.dataTransfer.files → 바탕화면 등에서 웹 브라우저로 직접 끌어다 놓은 파일 목록 정보들을 담고 있으며, 이를 순회하여 파일 업로드 UI 리스트에 출력할 수 있음
- dragenter / dragleave 이벤트 → 사용자가 드롭 가능한 영역을 확실히 인지할 수 있도록 배경색이나 테두리 점선을 바꾸는 시각적 하이라이트(UX 피드백) 제어에 사용

연습문제

지문: <video src="bgm.mp4" autoplay __________________></video> Q1. 위 지문에서 모던 브라우저 정책상 오디오나 비디오를 웹페이지 접속 시 자동으로 재생(autoplay)되게 하려면, 사용자 경험을 위해 반드시 함께 명시해야 하는 속성은 무엇인가?

loop

controls

muted

preload 정답: 3 해설: 사용자 동의 없는 소리 자동 재생은 브라우저가 차단하므로, autoplay는 반드시 소리를 끄는 muted 속성과 함께 사용해야 동작한다.

지문: if (video.____) { console.log("현재 영상이 멈춰있습니다."); } Q2. 위 지문의 자바스크립트에서 비디오나 오디오 객체를 선택하여 현재 '일시정지' 상태인지 아닌지를 확인하기 위해 사용하는 프로퍼티는 무엇인가?

isPaused

paused

stopped

notPlaying 정답: 2 해설: 미디어의 일시정지 상태 여부를 true 또는 false로 반환하는 속성은 paused이다.

지문: function stopVideo( ) { video.pause( ); ______; } Q3. 위 지문의 HTML5 미디어 API에는 stop( ) 메서드가 존재하지 않는다. 자바스크립트로 영상을 완전히 정지시키고 재생 위치를 맨 처음(0초)으로 되돌리는 로직으로 올바른 것은?

video.reset( );

video.time = 0;

video.currentTime = 0;

video.reload( ); 정답: 3 해설: 미디어를 멈추고(pause) 현재 재생 시점을 의미하는 currentTime 속성에 0을 대입하여 재생 헤드를 맨 앞으로 옮기는 것이 정지(stop)의 구현 방식이다.

지문: card.addEventListener('dragstart', (e) => { e._____.setData('text/plain', card.id); }); Q4. 위 지문에서 드래그 앤 드롭 통신의 핵심으로, 드래그가 시작될 때 데이터를 담고 드롭될 때 데이터를 꺼낼 수 있게 해주는 '수레(바구니)' 역할을 하는 이벤트 객체 내부의 프로퍼티 이름은 무엇인가?

dataObject

dataTransfer

dragBasket

payload 정답: 2 해설: 출발지와 목적지 사이에서 데이터를 운반하는 핵심 객체는 이벤트 객체 내의 dataTransfer이다.

지문: column.addEventListener('dragover', (e) => { _________; }); Q5. 위 지문에서 드래그 앤 드롭 구현 시, 목적지 영역에 요소를 내려놓기 위해 타겟의 dragover와 drop 핸들러에서 기본 동작의 차단 목적으로 반드시 사용해야 하는 메서드는?

e.allowDrop( )

e.preventDefault( )

e.stopPropagation( )

e.accept( ) 정답: 2 해설: 브라우저는 기본적으로 다른 요소 위에 데이터를 떨어뜨리는 것을 거부한다. 따라서 dragover 이벤트에서 e.preventDefault( )를 호출해 기본 거부 동작을 취소해야만 drop 이벤트가 정상적으로 발생한다.

Q6. 컴퓨터 바탕화면에 있는 이미지 파일을 끌어다가 브라우저 화면 안으로 떨어뜨렸다. 이때 목적지의 drop 이벤트 내에서 넘어온 파일 데이터를 꺼내보려면 어떤 객체를 확인해야 하는가?

window.droppedFiles
e.dataTransfer.getData('file')
e.target.files
e.dataTransfer.files

정답: 4 해설: 운영체제에서 브라우저로 드롭된 파일들은 텍스트 데이터가 아니므로, dataTransfer 객체의 files 프로퍼티(배열 형태의 FileList)에 고스란히 담겨 들어온다.

15강. HTML API (2)

학습시간: 0분 / 72분
학습개요: 이번 강의에서는 웹 브라우저 자체에 데이터를 안전하고 효율적으로 보관하는 웹 스토리지(Web Storage)의 개념과 사용 방법을 학습한다. 또한 사용자의 현재 위치 좌표를 파악하는 Geolocation API의 보안 규칙과 활용법 및 수집된 좌표 데이터를 외부 지도 라이브러리(Leaflet.js)와 연동해 화면에 렌더링하는 동적 웹 시각화 기법을 다룬다.
학습목표:
- 쿠키의 단점을 보완한 localStorage와 sessionStorage의 생명주기 차이를 명확히 구분하고, 자바스크립트의 JSON 객체 변환을 통해 브라우저에 UI 상태나 임시 데이터를 저장하고 제어할 수 있다.
- navigator.geolocation 객체를 사용하여 안전한 환경(HTTPS)에서 사용자의 위치 좌표를 성공적으로 수집하고, 이를 Leaflet.js 등 외부 지도 라이브러리와 연동하여 화면에 내 위치를 시각적인 지도와 마커로 렌더링할 수 있다.

핵심 정리

웹 스토리지
핵심 개념 및 쿠키와의 차별성
- 브라우저(클라이언트)에 데이터를 '키-값(Key-Value)' 형태로 저장하는 HTML5 API
- 기존 쿠키의 단점(매번 서버로 전송되어 트래픽 유발, 4KB의 적은 용량)을 극복하여, 서버 전송 없이 도메인당 약 5MB의 넉넉한 공간을 제공함
스토리지의 2가지 종류와 생명주기
- localStorage (로컬 스토리지) → 브라우저를 닫아도 데이터가 영구 보존됨. 동일 도메인 내의 여러 탭 간에 데이터가 공유됨 → 활용: 다크 모드 테마 유지, 자동 로그인
- sessionStorage (세션 스토리지) → 브라우저 탭 종료 시 데이터가 즉시 소멸됨. 동일 도메인이라도 탭마다 독립적으로 데이터가 격리됨 → 활용: 일회성 입력 폼 백업
주요 메서드 및 이벤트
- setItem(key, value): 저장 / getItem(key): 읽기 / removeItem(key): 개별 삭제 / clear( ): 전체 삭제
- 기타 메서드 및 속성 → key( ), clear( ), length
- storage 이벤트 → 스토리지 데이터가 변경될 때 발생. 데이터를 변경한 현재 탭이 아닌 같은 스토리지 영역을 사용하는 다른 탭/창에서만 발생 → 탭과 탭 사이의 정보 전달을 위한 이벤트
데이터 직렬화 (JSON 처리 필수)
- 스토리지는 오직 문자열(string)만 저장 가능 → 자바스크립트의 배열이나 객체를 저장할 때는 반드시 JSON.stringify( )로 직렬화하여 넣고, 꺼낼 때는 JSON.parse( )로 복원해야 데이터 구조가 유지됨
위치 정보
핵심 개념 및 보안 정책
- 기기의 GPS, Wi-Fi 등을 이용해 사용자의 현재 위도/경도 좌표 등을 파악하는 API
- 개인정보 보호를 위해 반드시 안전한 통신(HTTPS) 또는 로컬(localhost) 환경에서만 동작하며, 브라우저의 '위치 정보 제공 동의' 승인이 필수적임
위치 데이터 획득 로직
- navigator.geolocation.getCurrentPosition(성공함수, 실패함수, 옵션) → 사용자의 현재 위치 정보를 한 번만 가져옴
- 추적 성공 시 넘어오는 position 객체를 통해 position.coords.latitude(위도)와 position.coords.longitude(경도) 등의 실제 데이터 획득
- watchPosition( ) → 사용자가 이동할 때마다 실시간으로 위치 변화를 추적할 때 사용. 인자의 종류와 사용 방법은 getCurrentPosition( )과 동일. 위치 추적이 끝나면 반드시 clearWatch( ) 수행
지도 서비스 연동 및 그리기 (Leaflet.js 기반 4단계)
- 1단계 (도화지 준비) → HTML 문서에 지도가 그려질 빈 컨테이너(<div id="map">)를 준비하고, 위치를 찾으면 화면에 노출(display: 'block')시킴
- 2단계 (지도 객체 생성 및 카메라 이동) → L.map('map').setView([위도, 경도], 줌레벨)을 호출하여 지도를 초기화하고, 중심점을 획득한 내 위치로 맞춤. (단, 이미 지도가 그려진 상태라면 새로 생성하지 않고 setView만 호출하여 화면만 이동시킴)
- 3단계 (배경 타일 이미지 깔기) → L.tileLayer(…) 메서드를 통해 OpenStreetMap의 오픈 타일 서버에서 실제 지형지물 이미지를 가져와 지도 도화지 위에 격자 타일 형태로 렌더링함
- 4단계 (마커 렌더링 및 팝업 UI) → 내 위치 좌표에 핀을 꽂는 L.marker([위도, 경도]) 객체를 캔버스에 추가(addTo)하고, bindPopup( ).openPopup( )을 연결하여 마커를 클릭했을 때 '현재 위치!'라는 정보창(말풍선)이 뜨도록 인터랙션을 구현함

연습문제

지문: const user = { name: '홍길동' }; (가) // 객체 저장 Q1. 위 지문에서 자바스크립트 객체를 웹 스토리지에 에러 없이 온전하게 보관하기 위한 실무 표준 코드로 (가)에 적합한 것은?

localStorage.setItem('user', user);

localStorage.setItem('user', JSON.parse(user));

localStorage.setItem('user', JSON.stringify(user));

localStorage.setItem('user', user.toString()); 정답: 3 해설: 웹 스토리지는 "오직 문자열로만 저장할 수 있다"라는 데이터 타입의 한계가 존재한다. 따라서 객체나 배열을 문자열로 안전하게 변환하여 스토리지에 넣으려면 무조건 JSON.stringify( )를 사용해야 한다. 반대로 스토리지에서 꺼내와서 자바스크립트 객체로 변환하기 위해서는 JSON.parse( )를 사용한다.

Q2. 웹 스토리지에 저장된 캔버스 환경설정 정보를 가져오려고 한다. 이를 위한 메서드의 올바른 사용은?

const mode = localStorage.getValue('theme');
const mode = localStorage.getItem('theme');
const mode = localStorage.get('theme');
const mode = localStorage.fetchItem('theme');

정답: 2 해설: 웹 스토리지에서 데이터를 읽어오는 표준 메서드는 getItem(key)이다. 물론 내장 메서드가 아닌 객체 속성(점 표기)이나 대괄호( [ ] )를 사용하는 방법도 존재하지만, 스토리지 자체 메서드/속성과 이름이 겹칠 위험이 있으므로 실무에서는 사용하지 않는다.

Q3. window.addEventListener('storage', …) 이벤트가 브라우저에서 발생하는 정확한 시점은 언제인가?

현재 보고 있는 탭에서 데이터가 저장/수정/삭제되었을 때
스토리지 저장 용량 한도를 초과하여 데이터를 저장하려고 할 때
웹 페이지가 로드되어 클라이언트에 스토리지가 생성될 때
같은 스토리지 영역을 사용하는 다른 탭이나 창에서 스토리지가 변경되었을 때

정답: 4 해설: storage 이벤트는 데이터를 변경한 '현재 탭'에서는 절대 발생하지 않고, 오직 같은 도메인을 공유하는 '다른 탭/창'에서만 발생한다. 이는 탭 간의 통신을 위해 만들어졌기 때문이다.

Q4. 배달 라이더 앱에서처럼 사용자가 이동할 때마다 브라우저가 알아서 연속적으로 위치 변화를 감지해서 콜백을 실행해 주는 실시간 위치 추적 메서드는?

navigator.geolocation.getCurrentPosition( )
navigator.geolocation.observeLocation( )
navigator.geolocation.watchPosition( )
navigator.geolocation.liveTracking( )

정답: 3 해설: 사용자의 위치가 변경될 때마다 계속해서 위치를 가져오는 실시간 추적 메서드는 watchPosition( )이며, 목적지에 도착했거나 백그라운드 전환 시에는 반드시 clearWatch( )를 수행하여 추적을 종료한다.

지문: const options = { _________: true }; Q5. 위 지문에서 위치 정보를 얻어올 때 3번째 인자로 옵션(options) 객체를 전달한다. 이 중 배터리 소모가 심해지더라도 기지국 대신 GPS 센서를 강제로 깨워 최대한 오차 없는 정밀한 위치를 원할 때 사용하는 속성은?

enableHighAccuracy

useGPS

highPrecision

maximumAccuracy 정답: 1 해설: 더 많은 배터리가 소모되고 속도가 좀 느리더라도 매우 정확한 위치 측정이 필요한 경우에는 ‘enableHighAccuracy : true’ 옵션을 사용한다.

지문: const lat = position.__.latitude; const lng = position.__.longitude; Q6. 위 지문에서 getCurrentPosition( )이 성공해서 position 객체를 콜백으로 받았고, 여기서 가장 핵심적인 위도와 경도 데이터를 뽑아내려고 한다. 이때 밑줄 친 부분에 들어갈 객체는?

coords

location

data

gps 정답: 1 해설: 성공 콜백으로 반환된 position 객체 내부의 coords (coordinates) 객체를 통해서 위도, 경도, 정확도 등의 실제 정보를 얻을 수 있다. 단 위치가 파악된 시간 정보(1970.1.1.부터 경과된 밀리초 단위 시간)는 position.timestamp를 통해 얻는다.

핵심 암기표

주제	외울 문장
웹 구성 3요소	- HTML은 구조, CSS는 표현, JavaScript는 동작이다. (역할 구분)
문서 기본	- `<!DOCTYPE html>`은 HTML5 문서 선언이다. (태그 아님) - `<meta charset="UTF-8">`은 문자 깨짐을 막는다. (head 안) - viewport는 모바일 화면 크기 대응 설정이다. (CSS 아님)
텍스트 태그	- h1~h6은 제목 구조를 나타낸다. (글자 크기용 X) - `br`은 줄바꿈, `hr`은 주제 전환이다. (br은 빈 요소)
컨테이너	- div는 블록, span은 인라인 컨테이너다. (의미 없음) - 시맨틱 태그는 영역의 의미를 드러낸다. (div와 구분)
목록	- ul은 순서 없음, ol은 순서 있음, dl은 설명 목록이다. (li는 ul/ol 자식)
링크와 이미지	- `a href`는 하이퍼링크를 만든다. (href가 목적지) - `img src alt`는 이미지와 대체 텍스트다. (alt 중요)
표	- table은 표, tr은 행, th는 제목 셀, td는 데이터 셀이다. (행 먼저)
미디어	- audio와 video는 외부 플러그인 없이 미디어를 재생한다. (controls 기억)
폼	- form은 입력 묶음, input은 입력 요소다. (type별 기능) - label은 입력 요소 설명과 접근성을 높인다. (for-id 연결) - required는 입력 필수 검사를 지정한다. (JS 없이 가능)
CSS 선택자 우선순위	- inline > id > class/속성/가상클래스 > 요소. (높은 것 우선)
박스 / 배치	- 박스 모델은 content → padding → border → margin 순서다. (안에서 밖으로) - block은 한 줄 차지, inline은 내용만큼 차지한다. (inline 크기 제한) - position은 요소 배치 방식을 정한다. (absolute 기준 부모)
변형·전환·애니메이션	- transform은 요소 모양/위치를 변형한다. (변화 과정 아님) - transition은 값 변화 과정을 부드럽게 한다. (hover와 자주 사용) - animation은 keyframes 기반 반복 동작이다. (transition과 구분)
DOM / BOM	- DOM은 HTML 문서를 객체로 다루는 모델이다. (요소 조작) - BOM은 브라우저 창/주소/기록 등을 다루는 모델이다. (브라우저 조작)
이벤트	- addEventListener는 이벤트 처리 함수를 등록한다. (onclick 대체 가능)
저장소	- localStorage는 영구, sessionStorage는 세션 동안 저장이다. (객체는 JSON 변환)
Canvas · API	- canvas 2D는 `getContext('2d')`로 얻는다. (그림판) - Geolocation은 위치 정보를 얻는 API다. (권한 필요)

키워드 압축 카드

한 줄 공식

웹 페이지 = HTML 구조 + CSS 표현 + JavaScript 동작.
클라이언트 = 요청 보내고 HTML/CSS/JS를 해석해 화면 표시.
관심사의 분리 = 구조/디자인/동작을 나눔.

HTML 기본

최소 구조 = <!DOCTYPE html>, <html>, <head>, <body>.
meta charset="UTF-8" = 문자 깨짐 방지.
viewport = 모바일 반응형 대응.
h1~h6 = 제목 구조. 디자인 용도 X.
hr = 주제 전환 의미.
br = 줄바꿈.
div = 블록 컨테이너.
span = 인라인 컨테이너.

리스트/링크/표/미디어

ul = 순서 없는 목록.
ol = 순서 있는 목록.
dl/dt/dd = 설명 목록.
a href = 하이퍼링크.
img src alt = 이미지와 대체 텍스트.
table = 표, tr 행, th 제목 셀, td 데이터 셀.
audio, video = 미디어.
시맨틱 = header nav main section article aside footer.

폼

form = 입력 묶음.
input type="text/password/email/tel/radio/checkbox/submit".
label = 입력 요소 설명, 접근성 향상.
required = 필수 입력.
placeholder = 입력 힌트.

CSS

선택자 우선순위 = inline > id > class/속성/가상클래스 > 요소.
박스 모델 = content → padding → border → margin.
display: block = 한 줄 차지.
display: inline = 내용만큼.
display: inline-block = inline처럼 흐르지만 크기 조절 가능.
position: static/relative/absolute/fixed/sticky.
transform = 변형, transition = 변화 과정, animation = 키프레임 반복.

JavaScript/DOM/BOM

DOM = 문서 객체 모델. HTML 요소를 객체처럼 다룸.
BOM = 브라우저 객체 모델. window, location, history, navigator.
getElementById, querySelector, addEventListener 기억.
localStorage = 영구 저장, sessionStorage = 세션 동안 저장.
객체 저장은 JSON.stringify, 복원은 JSON.parse.

Canvas/API

Canvas 2D context = getContext('2d').
선 = beginPath → moveTo → lineTo → stroke.
사각형 = fillRect, strokeRect.
위치 API = Geolocation.
Drag & Drop, Web Storage, Web Worker 개념 구분.

Java프로그래밍

우선순위: 객체지향/상속/인터페이스/제네릭/컬렉션/스트림/JDBC를 구분해서 암기

평가/시험 범위

평가유형	평가방법	출제범위	비고
출석수업평가	맞춤형평가	지역대학별 과제물 제출 일정에 따라 출석수업 담당 교수가 직접 출제	지역별 상이
출석수업대체시험	온라인출석시험(객관식)	교재 1장~7장 및 해당 강의	추후 학보 공고
형성평가	진도20/연습문제0	학습진도율 및 연습문제	-
기말시험	온라인출석시험(객관식)	교재 전체 및 해당 멀티미디어 강의	추후 학보 공고

1강. Java와 객체지향 프로그래밍

학습시간: 63분 / 69분
학습개요: Java 언어의 발전 과정과 Java 언어의 특징을 살펴본다. 바이트코드, Java 플랫폼 등의 새로운 개념을 이해하고 간단한 예제 프로그램을 학습한다. Java 프로그래밍을 위한 개발 환경의 설치에 대해 알아보고 중요한 객체지향 개념인 추상화와 클래스에 관해 정리한다.
학습목표:
- Java 언어의 특징을 나열할 수 있다.
- 바이트 코드, Java 플랫폼에 관해 설명할 수 있다.
- Java 프로그래밍을 위한 개발 환경을 준비할 수 있다.
- 객체와 클래스를 구별할 수 있다.

핵심 정리

Java 프로그램의 기본 구성단위는 클래스이다.
Java에서는 변수의 자료형에 대한 검사가 엄격하다.
Java 프로그래밍을 위해서 JDK를 설치해야 한다.
Java 소스는 컴파일된 후, 바이트코드가 Java 플랫폼에서 실행된다.
Java 플랫폼은 Java VM과 Java API로 구성된다.
main( ) 메서드의 형식은 public static void main(String[ ] args) 이다.
클래스는 동종 객체를 추상화시켜 표현한 틀이며, 데이터와 메서드로 구성된다.
객체는 특정 클래스의 인스턴스이다.

연습문제

지문: 똑같은 바이트코드가 Java 플랫폼이 설치된 다양한 하드웨어와 운영체제에서 수정없이 실행될 수 있다. Q1. Java 언어의 특징 중에 다음 내용이 의미하는 것은?

엄격한 자료형의 검사

플랫폼에 독립적

예외처리 기능의 지원

멀티 스레딩의 지원 정답: 2

지문: public class A { } class B { } Q2. 다음 파일의 이름은 A.java 이다. 이 파일을 컴파일할 때 결과로 만들어지는 것을 정확히 설명한 것은?

A.class만 생성된다.

B.class만 생성된다.

A.class와 B.class가 생성된다.

오류가 있어 컴파일되지 않는다. 정답: 3

Q3. [문제 누락]

정답: 서술형/공식 정답 미제공

참고자료/링크

2강. Java 기본 문법(1)

학습시간: 74분 / 74분
학습개요: Java 언어의 기본 문법과 기본 자료형을 숙지하며 리터럴의 사용 방법을 익힌다. 자료형 변환에서 묵시적 변환과 명시적 변환의 차이를 이해하고 연산자 종류와 각 연산자의 기능을 이해한다. 변수의 종류를 용도별로 구분하고 선택문과 반복문의 사용 방법을 확인한다.
학습목표:
- Java의 기본 자료형을 나열할 수 있다.
- 변수의 종류를 나열하고 용도의 차이를 설명할 수 있다.
- 연산자의 종류를 나열하고 기능을 설명할 수 있다.
- 제어문의 종류와 기능을 설명할 수 있다.

핵심 정리

Java의 기본형을 나타내는 키워드는 byte, short, int, long, float, double, char, boolean의 8가지이다.
변수의 종류로는 인스턴스 변수, 클래스 변수, 지역 변수, 파라미터가 있다.
인스턴스 변수는 객체가 소유하는 변수이며, 클래스 변수는 해당 클래스의 객체들이 공유하는 변수이다.
클래스와 배열은 대표적 참조형으로, 참조형 변수에는 참조값(주소값)이 저장된다.
묵시적 형변환은 자료의 손실이 발생하지 않고, 컴파일러가 자동으로 수행하는 형변환이다.
명령행 매개변수란 main( ) 함수에 전달되는 인자로서, 프로그램을 실행시킬 때 클래스 이름 뒤에 나열하는 인자를 말한다.
break문, continue문, return문은 제어문 중 점프문(분기문)에 해당한다.

연습문제

Q1. 다음 중 클래스 이름에 해당하지 않는 것은?

Integer
String
System
boolean

정답: 4

Q2. 다음 정수 리터럴 중 값이 다른 하나는 무엇인가?

10
00001010
0x0A
0b0000_1010

정답: 2

Q3. 위의 for문을 향상된 for문을 이용해 다시 작성하여라.

정답: (답)

참고자료/링크

3강. Java 기본 문법(2), 클래스와 상속(1)

학습시간: 80분 / 82분
학습개요: 같은 유형의 자료 집단을 표현하기 위한 배열의 사용 방법을 살펴본다. 문자열을 다룰 때 사용하는 String 클래스의 기본 사항을 알아보고 문자열과 관련된 형변환을 학습한다. 프로그램에서 키보드나 파일로부터 데이터를 입력받는 방법을 학습하고, 클래스 정의 문법과 객체의 생성 방법을 확인한다.
학습목표:
- 프로그램에서 배열을 선언하고 사용할 수 있다.
- 문자열의 덧셈 연산과 형변환을 이해할 수 다.
- 간단한 입출력 기능을 프로그램에 추가할 수 있다.
- 클래스를 정의할 수 있다.
- 클래스와 데이터필드의 접근 제어자에 관해 설명할 수 있다.

핵심 정리

배열은 원소의 초기화 과정이나 원소의 생성 과정을 거쳐야만 사용할 수 있다.
‘배열이름.length’을 사용하여 배열의 크기를 표현할 수 있다.
문자열 변수나 리터럴에 대해 + 연산을 적용한 결과는 두 문자열이 연결된 문자열이다.
Scanner 클래스를 이용하면 키보드나 파일로부터 편리하게 문자열(또는 기본형 값)을 입력받을 수 있다.
클래스를 정의할 때, 내부 클래스가 아니라면 클래스의 접근 제어자로서 생략과 public만 지정할 수 있다.
정의 부분에서 접근 제어자가 생략된 클래스나 데이터 필드는 ‘해당 클래스’ 외에 ‘같은 패키지의 다른 클래스’에서만 사용할 수 있다.
생성자를 정의하려면 이름을 클래스 이름과 같게 하고 반환형을 지정하지 않는다.

연습문제

Q1. 다음 중 문법적으로 올바른 문장은 무엇인가?

int a[10] = new int[ ];
int b[ ] = new int(10);
int[ ][ ] c = new int[5][ ];
int[5] d = {1, 2, 3, 4, 5};

정답: 3

Q2. int형 변수 i와 j의 값을 각각 출력하기 위해 적당한 출력문은 무엇인가?

System.out.println( i , j );
System.out.println( i + " " + j );
System.out.println( i + j );
System.out.println( i + ‘=’ + j );

정답: 2

Q3. 퍼블릭 Alpha 클래스에서 protected 데이터 필드가 정의되었다고 가정할 때, 아래 4개의 클래스 중에서 이 데이터 필드를 사용할 수 없는 클래스는 무엇인가?

Alpha
AlphaSub
Beta
Gamma

정답: 4

참고자료/링크

이전 강의와 동일

4강. 클래스와 상속(2)

학습시간: 78분 / 79분
학습개요: 클래스를 정의하고 상속을 통해 클래스를 사용하는 것에 관해 살펴본다. static 필드와 메서드 및 final 필드와 메서드의 의미를 학습한다. 객체의 생성과 초기화 및 메서드의 오버로딩을 학습한다.
학습목표:
- 클래스 정의 문법을 숙지할 수 있다.
- static과 final 키워드의 의미와 사용법을 설명할 수 있다.
- 메서드 오버로딩과 오버라이딩을 구분하고 적용할 수 있다.
- 상속 개념을 활용하여 클래스를 정의할 수 있다.

핵심 정리

클래스를 정의할 때, 클래스의 모든 객체가 공유하는 데이터는 static 데이터 필드로 정의한다.
클래스 정의에 있는 데이터 필드의 선언문, 초기화 블록, 생성자를 통해서 객체 생성 시 필요한 데이터 필드의 초깃값을 지정할 수 있다.
메서드 오버로딩이란 한 클래스에서 이름이 같은 여러 메서드가 존재하는 상황을 말한다. 이때 오버로딩된 메서드끼리는 매개변수 목록이 달라 구별될 수 있다.
부모로부터 상속받은 메서드의 몸체를 자식 클래스에서 다시 정의하는 것을 메서드 오버라이딩이라 한다.
인스턴스 메서드와 생성자에서 숨은 인자인 this를 사용할 수 있다.
this( )는 같은 클래스에 있는 다른 생성자를, super( )는 자식 클래스 생성자에서 부모 클래스의 생성자를 호출하기 위한 것이다.

연습문제

Q1. 키워드 final에 관한 설명으로 틀린 것은?

final 클래스의 자식 클래스를 정의할 수 없다.
부모 클래스의 final 메소드는 자식 클래스로 상속될 때 재정의될 수 없다.
final 변수는 상수로 사용된다.
final 클래스의 객체를 생성할 수 없다.

정답: 4

Q2. Circle 클래스에서 원주율 PI를 상수로 선언하기 위해 ㉠에 들어갈 적당한 내용은 무엇인가?

double PI = 3.14;
final double PI = 3.14;
const double PI = 3.14;
static final double PI = 3.14;

정답: 4

Q3. Circle 클래스의 생성자에서 밑줄 친 ㉡에 들어갈 적당한 내용을 작성하시오

정답: this.radius = radius;

참고자료/링크

이전 강의와 동일

5강. 인터페이스와 다형성

학습시간: 79분 / 80분
학습개요: 객체지향 개념을 적절히 활용하여 클래스를 정의하려면 상속, 메서드 재정의, 메서드 오버로딩, 인터페이스의 구현, 다형성의 활용법 등을 숙지해야 한다. 유사 객체들의 공통 행위 양식을 정의하기 위한 인터페이스 개념을 이해하고 다형성을 활용한 객체지향 프로그래밍 기법을 익히도록 한다.
학습목표:
- 추상 클래스의 의미를 설명할 수 있다.
- 인터페이스의 선언과 사용법을 설명할 수 있다.
- 다형성을 활용하는 프로그램을 작성할 수 있다.
- 열거 자료형과 익명 클래스의 용도를 설명할 수 있다.
- 내부 클래스의 의미를 설명할 수 있다.

핵심 정리

몸체가 없는 메서드를 추상 메서드라고 하며, 추상 클래스 또는 인터페이스에 포함될 수 있다.
인터페이스는 추상 메서드로만 구성된다. 단, default 인스턴스 메서드와 static 메서드는 몸체가 있어야 한다.
의미적으로 유사한 클래스를 묶을 때는 추상 클래스로, 기능적으로 유사한 클래스를 묶을 때는 인터페이스를 사용한다.
다형성은 메서드 오버라이딩과 오버로딩, 클래스 간 상속과 형변환, 인터페이스의 구현과 형변환, 메서드 동적 바인딩을 통해 구현될 수 있다.
열거 자료형은 여러 상수값을 미리 정의하기 위한 자료형이며, 각 상수값은 하나의 객체와 같다.
익명 클래스는 이름이 없는 클래스로, 일회성으로 상속 또는 구현을 통해 자식 객체를 생성하는 용도로만 사용되는 클래스를 의미한다.

연습문제

Q1. 다음 프로그램을 실행했을 때 예상되는 출력은?

A
B
컴파일 오류
실행 오류

정답: 2

Q2. 밑줄 친 ㉠, ㉡에 들어갈 키워드는 순서대로 무엇인가?

extends, extends
extends, implements
implements, implements
implements, extends

정답: 2

Q3. 밑줄 친 부분의 의미를 정확히 설명하시오. 단, CSuper는 클래스 이름이다.

정답: CSuper 클래스를 상속받는 익명 클래스를 정의하고, 동시에 익명 클래스의 객체를 생성한다.

참고자료/링크

이전 강의와 동일

6강. 제네릭과 람다식

학습시간: 70분 / 72분
학습개요: 제네릭은 프로그램의 재사용성을 높여주고 소스 코드를 컴파일할 때 자료형 검사를 보다 엄격하게 수행하여 실행 오류를 최소화하기 위한 기법이다. 람다식은 매개변수를 갖는 코드 블록으로 익명 클래스의 객체를 생성하는 부분을 수식화한 것을 말한다. 제네릭과 람다식을 활용하는 방법을 익히도록 한다.
학습목표:
- 제네릭 클래스를 정의할 수 있다.
- 제네릭 메서드의 정의와 사용법을 설명할 수 있다.
- 정의된 제네릭 타입이나 메서드를 사용할 수 있다.
- 람다식의 활용 방법을 설명할 수 있다.
- 표준 함수형 인터페이스를 활용할 수 있다.

핵심 정리

자료형을 매개변수로 가지는 클래스와 인터페이스를 제네릭 타입이라고 한다.
제네릭 클래스를 사용할 때 제공되는 타입 파라미터는 필드의 자료형, 메서드의 반환형, 메서드에서 인자의 자료형으로 사용될 수 있다.
자료형을 매개변수로 가지는 메서드를 제네릭 메서드라고 한다.
제네릭을 활용하면 컴파일 시점에 명확한 자료형 검사를 수행할 수 있다.
함수형 인터페이스를 구현하는 클래스의 객체를 생성할 때 람다식을 사용하는 것이 효율적이다.
람다식의 결과 타입에 해당하는 인터페이스를 람다식의 타깃 타입이라고 한다.

연습문제

Q1. 다음과 같은 제네릭 클래스가 있다고 가정하자. 보기에서 문법적으로 오류가 있는 것은?

Data d = new Data<>( );
Data d = new Data<>( );
Data d = new Data( );
Data d = new Data( );

정답: 1

Q2. 다음과 같은 인터페이스가 있다고 가정할 때, 보기에서 람다식 사용이 잘못된 것은?

Addable ad = (int a, int b) -> { return (a + b); };
Addable ad = (int a, int b) -> a + b;
Addable ad = (a, b) -> return (a + b);
Addable ad = (a, b) -> (a + b);

정답: 3

Q3. [문제 누락]

정답: T get( )

참고자료/링크

이전 강의와 동일

7강. 패키지와 예외처리

학습시간: 78분 / 78분
학습개요: 패키지는 관련이 있는 클래스나 인터페이스의 묶음으로, 계층구조로 이루어진 클래스나 인터페이스의 라이브러리이다. 예외는 실행 중에 발생하는 경미한 오류이며, 예외 처리를 통해 정상 상황으로 복구될 수 있다. 패키지를 정의하고 사용하는 방법과 예외 처리 개념을 이해하고 활용할 수 방법을 익히도록 한다.
학습목표:
- 사용자 패키지를 정의할 수 있다.
- 정의된 패키지를 활용하는 프로그램을 작성할 수 있다.
- 예외의 종류를 설명할 수 있다.
- 예외 처리 코드를 작성할 수 있다.

핵심 정리

Java의 패키지는 관련이 있는 클래스와 인터페이스의 묶음이며 계층 구조로 구성된다.
다른 패키지에 있는 클래스를 사용할 때는 import 구문을 사용하는 것이 편리하다.
Java 프로그램에서 필요한 클래스나 패키지는 환경 변수 CLASSPATH에 포함되어 있는 경로상에서 찾을 수 있어야 한다.
Java 프로그램의 실행 도중 심각하지는 않지만 정상적 흐름을 벗어난 비정상적 상황이 발생할 수 있으며 이것을 예외라고 한다.
checked Exception에 속하는 예외가 발생할 수 있는 경우, 반드시 예외 처리 구문을 작성해야 한다.
예외의 직접 처리를 위해 try-catch 구문을 사용하고, 예외를 전파하려면 메서드 선언에 ‘throws 예외 유형’을 표시한다.

연습문제

Q1. Client 클래스를 myprogram.game 패키지에 위치시키려고 한다. Client 클래스를 정의하는 소스 파일의 맨 위에 포함시켜야 코드는 무엇인가?

package myprogram.game;
package myprogram.game.Client;
import myprogram.game;
import myprogram.game.Client;

정답: 1

Q2. 밑줄 부분에 들어가야 할 내용은 무엇인가?

throw IOException
throws IOException
throw FileNotFoundException
throws FileNotFoundException

정답: 2

Q3. [문제 누락]

정답: import java.util.Scanner; 또는 import java.util.*;

참고자료/링크

이전 강의와 동일

8강. java.lang 패키지

학습시간: 82분 / 82분
학습개요: java.lang 패키지에 존재하는 기본 클래스에 관해 살펴본다. 모든 클래스의 조상 클래스인 Object 클래스와 문자열을 표현하는 String 클래스를 학습한다. StringBuffer 클래스의 용도와 기본형을 참조형으로 표현하고자 할 때 필요한 포장 클래스, 그리고 표준 입력과 표준 출력 스트림을 제공하는 System 클래스에 관해 학습한다.
학습목표:
- Object 클래스가 제공하는 메서드의 기능을 설명할 수 있다.
- String과 StringBuffer 클래스를 적절히 사용할 수 있다.
- 기본형, String 및 포장 클래스 간의 형 변환 방법을 설명할 수 있다.
- System 클래스를 사용할 수 있다.

핵심 정리

java.lang 패키지의 클래스를 사용할 때는 import 구문을 쓰지 않아도 된다.
String은 문자열 처리를 위한 다양한 메서드를 제공하지만 immutable 클래스로, String 객체는 생성 이후에 내용 변경이 불가능하다.
toString() 메서드와 equals() 메서드는 Object 클래스에서 정의되어 있으며, 몇몇 하위 클래스들에서 적절히 재정의되어 있다.
자주 변경되는 문자열을 다루어야 할 경우에는 String 클래스보다 StringBuffer나 StringBuilder 클래스를 사용하는 것이 보다 효율적이다.
기본형 값을 객체로 다루기 위해, 모든 기본형마다 상응하는 포장 클래스가 존재한다.
System 클래스는 표준 입력과 출력, 표준 오류 출력을 위해 in, out, err 객체를 제공한다.

연습문제

Q1. 다음 프로그램의 출력 결과는 무엇인가?

Jovo
Java
JovoExam
JavaExam

정답: 1

Q2. Object 클래스와 String 클래스에 대한 설명이다. 잘못된 것은 무엇인가?

모든 클래스는 묵시적으로 Object 클래스를 상속받는다.
Object 클래스에 toString()과 equals() 메소드가 정의되어 있다.
String 클래스에 toString()과 equals() 메소드가 재정의되어 있다.
String 클래스는 표준 입출력 스트림을 위한 static 필드를 제공한다.

정답: 4

Q3. [문제 누락]

정답: String 클래스는 immutable 클래스여서 반복이 진행될수록 계속해서 기존 문자열은 버려지고 새로운 문자열이 새롭게 만들어지기 때문이다(버려지거나 만들어지는 문자열의 길이도 점점 커진다). StringBuffer 클래스를 사용한 경우가 StringBuilder 클래스를 사용한 경우보다 시간이 더 걸리는 이유는 동시성 제어를 고려하여 메소드가 구현되었기 때문이다.

참고자료/링크

9강. java.io 패키지와 스트림

학습시간: 78분 / 78분
학습개요: File 클래스는 파일과 디렉터리의 생성과 삭제, 정보의 검색과 변경 기능을 제공하나 입출력 기능은 제공하지 않는다. Java 언어에서 스트림을 통해 입출력을 수행할 수 있다. 입력 스트림과 출력 스트림, 바이트 단위 스트림과 캐릭터 단위 스트림, 기본 스트림과 보조 스트림의 차이를 살펴본다.
학습목표:
- 스트림 개념을 이해하고 종류와 특성을 설명할 수 있다.
- File 클래스의 사용법을 설명할 수 있다.
- RandomAccessFile 클래스를 사용하여 파일 입출력을 할 수 있다.
- 기본 스트림의 종류와 사용법을 설명할 수 있다.
- 보조 스트림 클래스를 사용하여 입출력을 할 수 있다.

핵심 정리

Java 프로그램에서는 스트림을 통해 데이터 생산자(또는 소비자)의 종류와 무관하게 동일한 방법으로 입력(또는 출력)을 수행할 수 있다.
File 클래스는 파일 또는 디렉터리를 표현하는 클래스로 파일이나 디렉터리를 조작할 수 있는 메서드를 제공하나 입출력 메서드는 제공하지 않는다.
RandomAccessFile 클래스는 파일의 읽기/쓰기를 지원하며 파일 포인터가 가리키는 임의의 위치에 읽기/쓰기가 가능하다.
BufferedInputStream(BufferdOutputStream)과 BufferedReader(BufferdWriter)는 보조 스트림으로 버퍼링 기능을 제공하여 입출력 성능을 향상시킨다.
기본 스트림의 객체를 먼저 생성하고, 그 객체를 인자로 하여 보조 스트림 객체를 생성한다.
InputStreamReader는 바이트 단위 입력 스트림을 캐릭터 단위 입력 스트림으로 변환하는 기능을 한다.

연습문제

Q1. 입력 스트림은 기본 스트림과 보조 스트림으로 나뉜다. 다음 중 기본 스트림에 해당하지 않는 것은?

StringReader
FileReader
ByteArrayInputStream
BufferedReader

정답: 4

Q2. BufferedReader 클래스에 관한 설명으로 틀린 것은 무엇인가?

Reader의 자식 클래스이다.
read()와 readLine() 등 다양한 입력 메소드를 제공한다.
바이트 단위의 입력 기능을 제공한다.
입력 과정에 버퍼링 기능을 제공한다.

정답: 3

Q3. 키보드에서 한글을 입력받기 위해서 바이트 단위의 표준 입력 스트림(System.in)을 캐릭터 스트림으로 변환하는 것이 필요하다. 다음 밑줄 부분에 공통으로 들어갈 클래스 이름은 무엇인가?

정답: InputStreamReader

참고자료/링크

이전 강의와 동일

10강. java.nio 패키지의 활용

학습시간: 74분 / 74분
학습개요: java.nio 패키지는 기존 java.io 패키지를 개선한 새로운 입출력 패키지이다. File 클래스를 대체하는 Path 인터페이스, 입출력 기능을 모두 제공하고 버퍼를 사용하게 설계된 FileChannel 클래스, 파일의 읽기·쓰기나 조작을 위한 정적 메서드를 제공하는 Files 클래스 등을 학습한다. WatchService는 디렉터리에 생기는 변화를 감시하는 서비스이다.
학습목표:
- Path 인터페이스의 사용법을 설명할 수 있다.
- Files 클래스를 사용하여 Path 객체를 조작할 수 있다.
- 버퍼와 FileChannel 클래스를 이용하여 파일 입출력을 수행할 수 있다.
- WatchService를 활용하여 디렉터리의 변화를 감시할 수 있다.

핵심 정리

java.nio와 그것의 서브 패키지는 java.io 패키지를 개선한 새로운 입출력 패키지이다.
java.nio.file 패키지의 Path 인터페이스는 java.io 패키지의 File 클래스보다 풍부한 기능을 제공한다.
Files 클래스는 실제 파일(또는 디렉터리) 조작과 읽기·쓰기 기능을 수행하는 static 메서드를 제공한다.
채널 입출력에서 버퍼는 기본형 데이터의 보관소이며, 버퍼 단위로 입출력할 수 있다.
java.nio.file의 FileChannel은 입출력을 모두 제공하고 기본적으로 버퍼링을 사용하며 멀티 스레드 환경에서도 안전하게 동작하도록 설계되어 있다.
java.nio.file 패키지의 WatchService는 디렉터리에 발생하는 이벤트를 감시하는 서비스이다.

연습문제

Q1. Path 인터페이스에 관한 설명이다. 잘못된 것은?

java.io.File 클래스를 대체할 수 있다.
파일시스템에 존재하는 파일 또는 디렉터리의 경로를 표현한다.
경로의 생성, 경로의 조작/비교, 경로의 요소를 조회하는 기능을 제공한다.
파일 내용의 읽기와 쓰기 기능을 제공한다.

정답: 4

Q2. FileChannel 클래스에 관한 설명으로 틀린 것은 무엇인가?

java.io 패키지의 파일 관련 스트림 클래스를 대체하기 위한 클래스이다.
FileChannel.open(path)으로 객체 생성을 하면 해당 파일을 읽기용으로 열게 된다.
파일 입력을 위해 FileChannelReader, 파일 출력을 위해 FileChannelWriter를 사용한다.
멀티 스레드 환경에서도 안전하게 사용할 수 있게 설계되었다.

정답: 3

Q3. [문제 누락]

정답: WatchKey는 등록된 디렉터리에 어떤 관심 이벤트가 등록되어 있으며, 실제 어떤 이벤트가 일어났는지에 관한 상태 정보를 가지고 있다.

참고자료/링크

이전 강의와 동일

11강. 컬렉션

학습시간: 56분 / 56분
학습개요: 컬렉션이란 여러 원소를 저장하고 관리하는 자료구조이다. JCF는 컬렉션을 관리하기 위한 클래스와 인터페이스를 제공하는 통합 프레임워크이다. Collection, Set, List, Queue, Map 등의 인터페이스와 그것을 구현한 HashSet, ArrayList, LinkedList, HashMap 등의 클래스 사용법을 학습한다.
학습목표:
- JCF의 기본 구조를 설명할 수 있다.
- HashSet 클래스를 사용하여 프로그램을 작성할 수 있다.
- ArrayList와 LinkedList 클래스의 차이를 설명할 수 있다.
- HashMap 클래스를 사용하여 복잡한 자료를 관리할 수 있다.

핵심 정리

컬렉션은 여러 원소를 저장하고 관리하는 객체를 통칭하는 용어이며, JCF는 컬렉션을 효율적으로 다루기 위한 API를 제공하는 프레임워크이다.
Set은 원소의 순서에 의미가 없고 중복을 허용하지 않는 컬렉션을 다루기 위한 인터페이스이다.
List와 Queue는 자료의 중복을 허용하고 순서에 의미가 있는 컬렉션을 관리하기 위한 인터페이스이다. 특히 Queue는 FIFO 방식으로 자료를 관리하는 인터페이스이다.
Map 인터페이스는 <키, 값>의 쌍으로 구성되는 자료의 묶음을 관리하는 메서드를 제공한다.
LinkedList 클래스는 List 인터페이스와 Queue 인터페이스를 모두 구현한 클래스이며, 스택 자료구조에서 필요한 메서드도 제공한다.

연습문제

Q1. ArrayList 클래스에 관한 설명으로 적당하지 않은 것은?

List 인터페이스를 구현한 클래스이다.
여러 원소를 저장하기 위해 내부적으로 배열을 사용한다.
원소의 순서가 의미를 가진다.
같은 자료를 중복으로 저장할 수 없다.

정답: 4

Q2. (key, value) 형태의 원소로 구성되는 자료 묶음을 다루기 위한 인터페이스나 클래스가 아닌 것은?

HashMap
HashSet
Hashtable
Map

정답: 2

Q3. [문제 누락]

정답: 추가 시 boolean offer(E), 삭제 시 E poll( )을 사용함 해설: (또는 추가 시 boolean add(E), 삭제 시 E remove( )를 사용할 수 있음)

참고자료/링크

이전 강의와 동일

12강. 컬렉션과 스트림

학습시간: 81분 / 82분
학습개요: 스트림은 컬렉션이나 배열로부터 만들어지는 원소의 시퀀스를 표현하며, 간결하고 효율적인 다양한 처리 방법을 제공하는 인터페이스이다. forEach() 메서드를 사용하고 매개변수로 람다식을 제공하면 컬렉션이나 배열의 내부에서 반복을 처리한다. 스트림이 제공하는 다양한 기능을 활용하여 컬렉션이나 배열의 원소를 처리하는 방법을 학습한다.
학습목표:
- 내부 반복과 외부 반복의 차이점을 설명할 수 있다.
- forEach() 메서드를 활용할 수 있다.
- 스트림을 이용하여 컬렉션/배열의 원소에 대한 병렬처리 방법을 설명할 수 있다.
- 스트림 파이프라인을 이해하고 중간처리과 최종 처리의 차이점을 설명할 수 있다.

핵심 정리

내부 반복은 컬렉션이나 배열의 내부에서 각 원소의 반복 처리를 수행하는 것으로, 처리용 코드만 람다식으로 전달하며 반복 작업을 위한 코드를 작성하지 않는다.
forEach( ) 메서드는 람다식과 함께 사용하여 컬렉션과 배열의 원소들을 외부로 꺼내오지 않고 내부에서 탐색하게 한다.
필터링은 스트림의 원소 중에서 중복을 제거하거나 특정 조건을 만족하는 원소만 걸러 내고 새로운 스트림을 리턴하는 중간 연산이다.
매핑은 스트림의 원소를 다른 원소로 변환한 후 새로운 스트림으로 리턴하는 중간 연산이다.
매칭은 스트림의 원소 중 특정 조건을 만족하는지 확인하는 최종 연산이다.
수집은 스트림의 원소 중 필터링 또는 매핑 작업 후 결과 원소들을 취합하여 새로운 List, Set, 또는 Map 객체를 생성하는 최종 연산이다.

연습문제

Q1. 주어진 배열을 스트림으로 만들려고 한다. 밑줄 부분에 들어갈 적당한 내용은?

IntStream.range(numbers)
Arrays.stream(numbers)
numbers.stream( )
numbers.getStream( )

정답: 2

Q2. 주어진 문자열 배열에서 길이가 6 이상인 단어를 대문자로 변환한 후 정렬하여 출력하려고 한다. 밑줄 부분에 들어갈 메소드는 무엇인가?

peek
map
match
filter

정답: 4

Q3. [문제 누락]

정답: 중간연산은 스트림을 변환하거나 필터링 하는 등의 작업을 수행하며, 다음 단계 처리를 위해 새로운 스트림을 리턴하는데, 체인 형태로 연속해 여러 번 호출될 수 있다. 종료연산은 스트림의 원소를 이용해 최종 결과를 만들어 리턴한다.

참고자료/링크

이전 강의와 동일

13강. 멀티스레드 프로그래밍

학습시간: 68분 / 68분
학습개요: 멀티 스레드 프로그램을 작성하는 방법과 스레드의 실행 과정을 이해한다. 여러 스레드가 동시에 수행될 때 스레드 간의 협업을 위해 스레드를 제어하는 메서드가 필요하다. 스레드 간의 상태 변화와 함께 스레드 제어 메서드를 학습한다. 끝으로 여러 스레드가 동일 자원에 접근할 때 반드시 필요한 동기화 방법을 살펴본다.
학습목표:
- 멀티 스레드 프로그램의 실행 과정을 설명할 수 있다.
- 스레드를 생성하고 시작시키는 프로그램을 작성할 수 있다.
- 스레드의 상태 변화와 상태 제어 메서드를 설명할 수 있다.
- 스레드를 동기화시키는 프로그램을 작성할 수 있다.

핵심 정리

멀티 스레드 프로그래밍이란 하나의 프로세스에서 여러 스레드가 생성되어 동시 실행되게 하는 것을 말한다.
스레드의 실행 코드는, 스레드 생성에 사용되는 Thread를 상속받는 클래스나 Runnable 인터페이스를 구현한 클래스에서 정의되어 있는 public void run( ) 메서드이다.
스레드는 생성되어 소멸할 때까지 Startable, Runnable, Running, Not Running 등의 상태를 거친다.
Thread 클래스에서 스레드의 상태를 제어하는 메서드로 start(), join(), interrupt()가 있으며, static 메서드인 yield()와 sleep()도 있다. 한편 Object 클래스에 정의된 메서드로는 notify()와 wait()가 있다.
스레드 동기화는 데이터의 무결성을 유지하도록 한 번에 한 스레드만이 스레드 간 공유 객체에 접근하도록 하는 것이며, synchronized 메서드는 동기화를 보장한다.

연습문제

Q1. 스레드 동기화와 관련된 다음 설명 중 올바른 것은?

메소드 interrupt()는 현재 스레드가 인터럽트를 받을 적이 있는지 검사한다.
메소드 notify()는 현재 실행 중인 스레드를 정해진 시간 동안 중지시킨다.
메소드 wait()는 대기 상태의 스레드들 가운데 하나를 기다리게 한다.
메소드 join()은 this 스레드가 종료될 때까지 현재 스레드가 기다린다.

정답: 4

Q2. 스레드 동기화의 의미를 가장 잘 설명한 것은?

메인 스레드가 가장 마지막에 종료되는 것을 보장하는 것
공유 객체에 여러 스레드들이 동시 접근할 수 있게 하는 것
한순간에 한 스레드만 공유 객체에 접근할 수 있게 하는 것
여러 개의 스레드들이 순서대로 하나씩 수행되게 하는 것

정답: 3

지문: 여러 스레드가 공유 객체를 사용할 때, 한 스레드가 공유 객체의 메소드를 실행 중이라면 다른 스레드가 동일 객체에 접근할 수 없다. Q3. 밑줄 부분에 들어갈 스레드 동기화를 위한 자바 키워드는 무엇인가? 정답: synchronized

참고자료/링크

이전 강의와 동일

14강. JDBC 프로그래밍

학습시간: 83분 / 83분
학습개요: Java 프로그램에서 데이터베이스 프로그래밍을 위해 JDBC API를 사용한다. JDBC API를 사용하려면 DBMS 별로 존재하는 JDBC 드라이버가 필요하다. JDBC 기술을 사용하여 DBMS에 연결하고 각종 SQL 구문을 실행하며 결과를 받아 처리하는 방법을 학습한다.
학습목표:
- JDBC 기능을 설명하고 드라이버를 설치할 수 있다.
- MariaDB를 설치하고 사용할 수 있다.
- Java 프로그램에서 MariaDB에 연결하여 데이터베이스를 사용할 수 있다.
- 데이터베이스 프로그래밍에 사용되는 여러 인터페이스를 설명할 수 있다.

핵심 정리

MariaDB는 MySQL과 호환되는 오픈 소스 관계형 데이터베이스 관리 시스템이다.
JDBC는 Java 프로그램에서 관계형 데이터베이스와 연동할 수 있게 하는 표준 API이다.
JDBC 프로그래밍을 위해서는 MariaDB용 JDBC 드라이버로 .jar 파일을 다운로드받아 Classpath에 추가해야 한다.
DBMS와 연결을 설정할 때는 java.sql.Connection 객체를 사용한다.
SQL 구문을 실행할 때 Statement 인터페이스의 execute( ), executeQuery( ), executeUpdate( )를 사용할 수 있다.
select 구문을 실행할 때 executeQuery( )를 호출하며, 검색 결과가 ResulteSet 객체로 리턴된다.
같은 SQL 문을 여러 번 실행할 때는 PreparedStatement 객체를 사용하는 것이 효율적이며, SQL 문에 매개변수를 사용하고 실행 전에 값을 지정할 수 있다.

연습문제

Q1. JDBC 프로그래밍에 사용되는 클래스나 인터페이스가 아닌 것은?

Connection
DriverManager
Statement
Runnable

정답: 4

Q2. PreparedStatement 객체에 대한 설명으로 잘못된 것은?

PreparedStatement는 Statement의 부모 인터페이스이다.
객체를 생성할 때 SQL 구문을 지정해야 한다.
같은 SQL 구문을 여러 번 실행할 때 효율적으로 활용될 수 있다.
매개 변수를 가지는 SQL 구문을 저장할 수 있다.

정답: 1

Q3. [문제 누락]

정답: ResultSet

참고자료/링크

이전 강의와 동일

15강. 라이브러리와 모듈

학습시간: 59분 / 59분
학습개요: 라이브러리는 자주 사용되는 공통의 Java 클래스를 묶어 .jar 파일 형태로 압축한 것이다. 모듈 개념은 Java 9부터 도입된 것으로 라이브러리의 발전된 형태이며 패키지별로 접근성을 제어할 수 있다. 이클립스 개발 환경에서 라이브러리 또는 모듈을 제공하는 방법과 이것을 사용하는 방법을 학습한다.
학습목표:
- 라이브러리로 사용될 클래스를 개발하여 배포할 수 있다.
- .jar 형태의 라이브러리를 활용하는 프로그램을 작성할 수 있다.
- 모듈 프로젝트를 만들고, module-info.java 파일에 모듈을 정의할 수 있다.
- 모듈을 개발하여 제공하거나, 제공된 모듈을 사용하여 프로그래밍할 수 있다.
- Java 표준 모듈을 설명할 수 있다.

핵심 정리

자주 사용되는 클래스와 인터페이스를 컴파일된 형태로 제공한 것을 라이브러리라고 한다.
Java의 라이브러리는 .class 파일을 묶어서 만든 .jar 파일의 형태이다.
모듈은 라이브러리의 업그레이드 버전으로 패키지 단위에서 접근성을 설정할 수 있다.
라이브러리를 사용하려면 해당 .jar 파일을 Classpath에 추가하고, 모듈을 사용하려면 Modulepath에 추가한다.
모듈 프로젝트에서 ‘module-info.java’ 파일에 ‘exports 패키지;’ 또는 ‘requires 모듈;’ 형식으로 모듈 간 의존관계를 설정할 수 있다.
JDK의 표준 라이브러리는 모두 모듈화되었으며, java.base는 자바 표준 모듈 중 가장 기본 모듈이다.

연습문제

Q1. .jar 파일 형식으로 배포된 라이브러리를 사용하고자 할 때, 이러한 .jar 파일을 어떤 환경 변수에 추가해야 하는가?

Classpath
Modulepath
Javadoc
Jarpath

정답: 1

Q2. Java의 표준 모듈 중 requires 키워드로 사용 선언을 하지 않아도 사용이 가능한 모듈은 무엇인가?

jdk.base
jdk.lang
java.lang
java.base

정답: 4

Q3. java.sql 모듈에서 제공하는 java.sql 패키지가 있으며, 여기에 포함된 클래스(또는 인터페이스)를 사용하는 모듈 프로젝트가 있을 때, module-info.java 파일에서 아래 밑줄 부분에 들어가야 할 내용은?

정답: requires java.sql;

참고자료/링크

핵심 암기표

주제	외울 문장
Java 기본	- Java는 클래스 기반 객체지향 언어이며 JVM 위에서 바이트코드가 실행된다. (플랫폼 독립) - Java 플랫폼은 JVM + Java API다. (JDK는 개발도구 포함) - Java 프로그래밍을 하려면 JDK가 필요하다. (JRE만으로 개발 X)
클래스와 객체	- Java 프로그램의 기본 구성 단위는 클래스다. (파일명/public class) - 클래스는 데이터와 메서드로 객체를 추상화한 틀이다. (데이터+행위)
변수와 타입	- 변수는 인스턴스 변수, 클래스 변수, 지역 변수, 파라미터로 나뉜다. (위치/소속 구분) - 기본형은 byte, short, int, long, float, double, char, boolean이다. (String은 참조형) - 클래스와 배열은 참조형이고 참조값을 저장한다. (객체 자체 저장 X) - 묵시적 형변환은 손실 없을 때 자동, 명시적 형변환은 캐스팅이다. (큰→작은 강제) - 명령행 매개변수는 main의 String[] args로 전달된다. (실행 시 클래스명 뒤)
접근 제어	- 일반 최상위 클래스 접근 제어자는 public 또는 생략만 가능하다. (private 클래스 X) - 접근 제어자 생략은 같은 패키지에서 접근 가능하다. (package-private)
생성자	- 생성자는 클래스 이름과 같고 반환형이 없다. (void 쓰면 메서드) - this()는 같은 클래스 생성자, super()는 부모 생성자를 호출한다. (생성자 첫 줄)
배열과 문자열 +	- 배열은 생성 후 사용하며 `배열.length`로 크기를 얻는다. (length 메서드 아님) - 문자열에 `+`를 적용하면 문자열 연결이다. (숫자+문자 주의)
static과 초기화	- 모든 객체가 공유하는 데이터는 static 필드로 둔다. (클래스 소속) - 필드 선언문, 초기화 블록, 생성자로 초깃값을 지정한다. (실행 순서 주의)
오버라이딩 vs 오버로딩	- 부모 메서드 몸체를 자식 클래스에서 다시 정의하는 것이다. (상속 필요) - 같은 이름의 메서드를 매개변수 목록으로 구별한다. (반환형만 다르면 X)
this vs super	- this는 현재 객체, super는 부모 객체 쪽을 가리킨다. (생성자 호출도 가능)
인터페이스 vs 추상 클래스	- 인터페이스는 추상 메서드 중심이며 default/static 메서드는 몸체가 있다. (Java 8 이후) - 의미적으로 유사한 클래스 묶음은 추상 클래스를 쓴다. (일부 구현 가능) - 기능적으로 유사한 클래스 묶음은 인터페이스를 쓴다. (다중 구현 가능)
enum	- 열거형 상수값은 하나의 객체처럼 취급된다. (정해진 상수 집합)
다형성	- 다형성은 오버로딩/오버라이딩/상속/형변환/동적 바인딩으로 구현된다. (부모 타입 참조)
익명 클래스	- 익명 클래스는 이름 없이 일회성 상속/구현 객체를 만든다. (한 번 쓰는 클래스)
제네릭	- 제네릭 타입은 자료형을 매개변수로 가지는 클래스/인터페이스다. (컴파일 시 타입검사) - 타입 파라미터는 필드형, 반환형, 인자형으로 쓰일 수 있다. (`<T>`) - 제네릭 메서드는 자료형을 매개변수로 가지는 메서드다. (메서드 자체 T)
람다	- 람다식은 함수형 인터페이스 객체 생성을 간결하게 한다. (추상 메서드 1개) - 람다식의 결과 타입에 해당하는 인터페이스가 타깃 타입이다. (문맥으로 결정)
패키지와 import	- 패키지는 관련 클래스와 인터페이스의 계층적 묶음이다. (디렉터리 구조) - 다른 패키지 클래스를 편하게 쓰려면 import를 사용한다. (java.lang은 예외) - 필요한 클래스/패키지는 CLASSPATH 경로에서 찾을 수 있어야 한다. (실행 환경)
예외 처리	- 예외는 실행 중 정상 흐름을 벗어난 비정상 상황이다. (Error와 구분) - checked Exception은 반드시 처리하거나 throws로 선언해야 한다. (컴파일러 검사) - 직접 처리는 try-catch, 전파는 throws다. (throw는 발생)
Object와 java.lang	- toString()과 equals()는 Object에 정의되어 있고 재정의될 수 있다. (모든 클래스 조상) - java.lang 패키지는 import 없이 사용할 수 있다. (자동 import)
문자열 클래스	- String은 immutable이라 생성 후 내용 변경이 불가능하다. (반복 변경 비효율) - 자주 변경되는 문자열은 StringBuffer나 StringBuilder가 효율적이다. (Buffer 동기화 O) - 기본형 값을 객체로 다루기 위해 포장 클래스가 있다. (int→Integer)
표준 입출력	- System은 in, out, err 표준 입출력 객체를 제공한다. (표준 입력/출력/오류)
스트림 I/O	- 스트림은 생산자/소비자 종류와 무관하게 입출력을 수행하게 한다. (입출력 통로) - Buffered 계열은 보조 스트림으로 버퍼링 성능을 제공한다. (기본 스트림 감쌈) - InputStreamReader는 바이트 입력을 문자 입력으로 변환한다. (bridge stream)
파일 I/O	- File은 파일/디렉터리를 표현하지만 입출력 메서드는 제공하지 않는다. (경로 조작) - RandomAccessFile은 파일 포인터 위치에서 임의 읽기/쓰기가 가능하다. (순차만 아님)
NIO	- java.nio는 java.io를 개선한 새 입출력 패키지다. (New IO) - Path는 File보다 풍부한 파일 경로 기능을 제공한다. (java.nio.file) - Files는 파일/디렉터리 조작과 읽기·쓰기 static 메서드를 제공한다. (유틸 클래스) - 채널 입출력에서 버퍼는 기본형 데이터 보관소다. (버퍼 단위 IO) - FileChannel은 입출력 모두 제공하고 기본 버퍼링을 사용한다. (멀티스레드 안전 설계) - WatchService는 디렉터리 이벤트를 감시한다. (변경 감시)
컬렉션 (JCF)	- JCF는 컬렉션을 효율적으로 다루기 위한 API 프레임워크다. (Java Collections Framework) - 컬렉션은 여러 원소를 저장·관리하는 객체다. (Map은 별도 계열) - Set은 순서 의미가 없고 중복을 허용하지 않는다. (중복 제거) - List는 순서 의미가 있고 중복을 허용한다. (인덱스) - Queue는 순서 의미가 있고 FIFO 방식으로 자료를 관리한다. (offer/poll) - Map은 key-value 쌍을 관리한다. (키 중복 X) - LinkedList는 List와 Queue를 모두 구현하고 스택 메서드도 제공한다. (다용도)
스트림 처리	- 내부 반복은 반복 코드를 직접 쓰지 않고 처리 코드만 람다로 전달한다. (forEach) - forEach는 원소를 외부로 꺼내지 않고 내부에서 탐색한다. (람다와 사용) - 필터링은 중복 제거 또는 조건 만족 원소만 걸러내는 중간 연산이다. (distinct/filter) - 매핑은 원소를 다른 원소로 변환하는 중간 연산이다. (map) - 매칭은 조건 만족 여부를 확인하는 최종 연산이다. (any/all/noneMatch) - 수집은 결과 원소를 List/Set/Map 등으로 취합하는 최종 연산이다. (collect)
스레드	- 스레드 실행 코드는 `public void run()`에 정의한다. (start가 run 호출) - 스레드는 Thread 상속 또는 Runnable 구현으로 만든다. (Runnable 선호) - start()는 새 스레드를 시작하고 run()을 실행하게 한다. (run 직접 호출 X) - start, join, interrupt, yield, sleep, wait, notify를 구분한다. (wait/notify는 Object) - 스레드는 Startable, Runnable, Running, Not Running 등의 상태를 거친다. (상태 전이) - synchronized는 공유 객체 접근을 한 번에 한 스레드로 제한한다. (데이터 무결성)
JDBC	- JDBC는 Java에서 관계형 DB와 연동하는 표준 API다. (java.sql) - MariaDB는 MySQL 호환 오픈소스 RDBMS다. (드라이버 필요) - JDBC 사용에는 DB용 JDBC 드라이버 jar를 Classpath에 추가해야 한다. (.jar) - DBMS 연결은 java.sql.Connection 객체로 표현한다. (연결 객체) - SQL 실행은 execute(), executeQuery(), executeUpdate()를 사용한다. (결과별 구분) - SELECT 실행은 executeQuery()이고 결과는 ResultSet이다. (조회 전용) - INSERT/UPDATE/DELETE는 executeUpdate()를 사용한다. (변경 행 수)
라이브러리 · 모듈	- 라이브러리는 자주 쓰는 클래스/인터페이스를 컴파일된 형태로 제공한 것이다. (재사용 코드) - Java 라이브러리는 .class 파일을 묶은 .jar 형태다. (압축 파일) - 모듈은 라이브러리의 업그레이드로 패키지 단위 접근성을 설정한다. (Java 9) - 라이브러리는 Classpath, 모듈은 Modulepath에 추가한다. (경로 구분) - module-info.java에서 exports와 requires로 의존관계를 설정한다. (모듈 선언) - java.base는 Java 표준 모듈 중 가장 기본 모듈이다. (자동 의존)

키워드 압축 카드

한 줄 공식

Java = 클래스 기반 + 객체지향 + 바이트코드 + JVM + 플랫폼 독립.
Java 플랫폼 = JVM + Java API.
프로그램 기본 단위 = 클래스, 객체 = 클래스의 인스턴스.

문법 핵심

main 형식 = public static void main(String[] args).
기본형 8개 = byte short int long float double char boolean.
참조형 = 클래스, 배열, 인터페이스. 값이 아니라 주소/참조값 저장.
묵시적 형변환 = 손실 없음, 자동. 명시적 형변환 = 캐스팅 필요.
점프문 = break, continue, return.

클래스/상속

생성자 = 클래스 이름과 같음 + 반환형 없음.
오버로딩 = 같은 이름, 매개변수 다름.
오버라이딩 = 상속받은 메서드 재정의.
static = 클래스 소속, 객체 없이 접근 가능.
final = 변경/상속/재정의 제한.
추상 클래스 = 미완성 설계도. 인터페이스 = 구현 약속.

제네릭/람다/컬렉션

제네릭 = 타입을 나중에 지정, 형변환 감소.
람다 = 함수형 인터페이스의 구현을 간결하게 표현.
List = 순서 O, 중복 O.
Set = 중복 X.
Map = key-value.
Queue = offer() 추가, poll() 삭제.

입출력/예외/JDBC

예외처리 = try-catch-finally, 직접 던짐 = throw, 선언 = throws.
바이트 스트림 = InputStream/OutputStream.
문자 스트림 = Reader/Writer.
JDBC 흐름 = Driver → Connection → Statement/PreparedStatement → ResultSet → close.
모듈에서 JDBC 사용 = requires java.sql;.

헷갈리는 짝

String = immutable. 문자열 누적 반복에 불리.
StringBuffer = 동기화 O, 느릴 수 있음.
StringBuilder = 동기화 X, 단일 스레드에서 빠름.
ArrayList = 검색/순차 접근 유리.
LinkedList = 중간 삽입/삭제 유리.

파이썬프로그래밍기초

우선순위: 제어구조/함수/컬렉션/객체/모듈/파일 처리 문법을 코드 결과 예측 중심으로 훈련

평가/시험 범위

평가유형	평가방법	출제범위	비고
출석수업평가	맞춤형평가	추후 학교 홈페이지 공고	-
출석수업대체시험	온라인과제물	멀티미디어 강의 1강~6강	-
형성평가	진도10/연습문제10	학습진도율 및 연습문제	-
기말시험	온라인출석시험(객관식)	멀티미디어 강의 전체	-

1강. 컴퓨터의 이해

학습시간: 80분 / 81분
학습개요: 우리 사회가 데이터를 분석하여 가치 있는 정보로 재생산하는 능력을 요구함에 따라 컴퓨터에 대한 본질적인 이해는 더욱 중요해지고 있다. 특히 AI가 모든 분야의 작업을 자동화하는 시대일수록, AI가 내놓은 결과물의 정확성과 효율성을 판단하고 제어하기 위해서는 컴퓨터의 기초적인 동작 구조를 반드시 알아야 할 필요가 있다. 대량의 데이터 처리를 위해 개발된 컴퓨터를 보다 유용하게 활용하려면 데이터와 정보가 내부에서 어떻게 표현·저장·처리되는지, 그리고 그 과정에 어떠한 논리적 개념들이 적용되는지를 이해해야 한다. 따라서 이번 강의에서는 데이터와 정보의 개념, 디지털과 아날로그의 차이, 디지털 데이터의 표현 방식, 그리고 프로그램과 알고리즘의 기초를 살펴봄으로써 AI 시대에 필요한 컴퓨터에 대한 기본 지식을 다진다.
학습목표:
- 데이터와 정보의 차이점을 설명할 수 있다.
- 데이터의 표현 방식에 대해 설명할 수 있다.
- 프로그램과 알고리즘의 차이점에 대해 설명할 수 있다.
- 주요용어
- 데이터 : 어떤 현상이나 사실에 대한 설명 또는 설명의 집합
- 정보: 문제 또는 질문을 해결하기 위해 사용할 수 있는 데이터와 데이터의 집합
- 프로그램: 컴퓨터가 어떠한 작업을 자동으로 처리할 수 있도록 처리 방법 및 순서를 컴퓨터가 이해할 수 있는 언어 형태로 기술한 것
- 알고리즘: 문제를 풀기 위한 단계별 절차를 체계적 명령의 형태로 기술한 것

핵심 정리

데이터란 관찰이나 측정을 통해 얻은 수치, 문자와 같은 변할 수 있는 질적 또는 양적 값을 뜻한다.
정보란 데이터를 처리하여 실제 문제해결에 도움이 될 수 데이터를 정리한 결과물을 뜻한다. 데이터 처리에는 정렬, 합산, 군집화 등의 작업이 동반된다.
데이터는 현상으로부터 관찰 및 측정을 통해 얻어지며 정보는 데이터를 처리 및 가공하여 추출된다.
컴퓨터란 입력된 데이터를 자동으로 처리하는 기계로, 데이터 처리 과정을 순서화하여 전체 과정을 자동화할 수 있는 장치를 말한다.
컴퓨터는 데이터를 외부로부터 받아들이는 입력기능, 내부 장치를 조정하는 제어기능, 입력된 데이터를 저장하는 저장⦁기억기능, 계산을 수행하는 연산기능, 내부의 데이터를 사용자에게 전달하는 출력기능을 갖추고 있다.
디지털 컴퓨터는 0과 1이라는 신호만으로 동작하기 때문에, 데이터 및 명령문 또한 0과 1로 표현되어야 한다. 즉, 수나 문자, 명령어 모두 0과 1로 표현된다.
프로그램이란 컴퓨터가 어떠한 작업을 자동으로 처리할 수 있도록, 처리 방법 및 순서를 컴퓨터가 이해할 수 있는 언어로 기술해 놓은 것을 뜻한다. 프로그램을 제작하는 사람을 프로그래머라고 하며, 이 제작 과정을 프로그래밍이라 부른다.
알고리즘은 문제를 풀기 위한 단계별 절차를 수학적으로 기술한 것을 뜻한다. 알고리즘에는 입력과 출력이 있어야 하며, 명확성과 유한성, 효율성이 보장되어야 한다.
프로그램은 프로그래밍 언어를 이용하여 알고리즘을 구현한 결과이며 프로그래밍 언어로 작성된 소스코드를 컴파일러나 인터프리터를 통해 컴퓨터에서 실행될 수 있는 프로그램으로 생성된다.

연습문제

Q1. 기계를 바꾸지 않고 처리 방법의 교체만으로 무엇이든 할 수 있도록 다음과 같이 입력, 기억 ·저장, 제어, 연산, 출력 장치로 역할을 구분한 구조는?

폰 노이만 구조
하버드 구조
컴파일러
알고리즘

정답: 1 해설: 해설: 자세한 내용은 강의를 참고하세요

Q2. ‘방송통신대학교 컴퓨터과학과의 파이썬 프로그래밍 기초는 전공 과목이다’라고 할 때, ‘전공’이라는 설명은 어떤 유형의 데이터에 속하는가?

연속적 데이터
범주적 데이터
양적 데이터
반정형 데이터

정답: 2 해설: 해설: 자세한 내용은 강의를 참고하세요

Q3. 해석의 모호성을 제거하고 자연어와 유사한 형태의 문법을 처음으로 도입한 프로그래밍 언어는?

1세대 프로그래밍 언어
2세대 프로그래밍 언어
3세대 프로그래밍 언어
4세대 프로그래밍 언어

정답: 3 해설: 해설: 자세한 내용은 강의를 참고하세요

2강. 파이썬의 이해

학습시간: 57분 / 57분
학습개요: AI와 데이터 분석 분야에서 필수적인 파이썬은 배우기 쉬우면서도 강력한 기능을 갖춘 프로그래밍 언어로 평가받는다. 그러나 파이썬의 탄생 배경과 '단순함'을 지향하는 설계 철학을 이해하지 못하면 언어의 본질과 문법적 특성을 파악하는 데 한계가 있다. 단순히 문법을 외우는 것을 넘어, 파이썬이 왜 플랫폼에 독립적인 구조를 가지며 어떻게 '실행 가능한 의사 코드'라 불릴 만큼 인간 친화적인 문법을 갖추게 되었는지 그 원형을 파악하는 것이 중요하다. 따라서 이번 강의에서는 파이썬의 기원과 인간 친화적인 특징을 알아보고, 소스 코드가 바이트코드를 거쳐 가상 머신에서 실행되는 내부 메커니즘을 구체적으로 학습한다. 또한 IDLE, 주피터 노트북, 구글 코랩 등 실습에 사용할 프로그래밍 환경을 파악하여 파이썬 입문을 위한 체계적인 기반을 마련한다.
학습목표:
- 파이썬의 특징을 설명할 수 있다.
- 파이썬 프로그램의 실행 과정을 설명할 수 있다.
- 파이썬 프로그래밍 환경의 특징을 나열할 수 있다.
- 주요용어
- 프로그래밍 패러다임: 프로그래밍을 생성하는 접근 방식
- 라이브러리: 자주 사용되는 프로그래밍 구성 요소를 미리 작성하여 패키징한 프로그램 모음
- 구글 코랩: 주피터 노트북 기반 오픈소스 웹 기반 대화형 개발 및 실행 환경

핵심 정리

파이썬은 히도 판로쉼에 의해 1991년 분산 운영 체제(아메바)의 시스템 관리를 위한 쉘 스크립팅 언어로 개발되었다.
파이썬은 명령형 프로그래밍, 절차적 프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍 패러다임을 지원한다.
파이썬은 교육적인 목적뿐만 아니라 응용 프로그램과 웹, 백 엔드 개발, 사물 인터넷 등 다양한 분야에 활용된다.
파이썬은 파이썬 확장 제안(PEP)를 통해 새로운 파이썬의 기능, 파이썬 프로세스, 환경에 대해 커뮤니티에 설계 문서나 정보를 제공하는 등 많은 개발자의 의견을 수용하고 토론하며 발전한 언어이다.
파이썬은 플랫폼에 독립적이며 인터프리터식 객체지향적, 동적 타이핑(dynamically typed) 대화형 언어이다.
파이썬 소스 코드는 파이썬 인터프리팅 과정에서 CPython에 의해 바이트 코드로 변환된고 파이썬 가상머신(PVM)이 한 라인씩 기계어 코드로 변환하여 실행된다.
파이썬 개발환경에서는 구문 강조, 자동 완성, 스마트 들여쓰기 등의 기능을 지원하는 IDLE, 주피터 노트북, 구글 코랩 등이 있다.
구글 코랩(Colab)은 주피터 노트북과 구글 드라이브를 결합한 서비스로 데이터 분석 및 딥러닝 연산 등 고성능 컴퓨팅 리소스 활용 가능하다.

연습문제

Q1. 다음 중 파이썬의 장점이라고 할 수 없는 것은?

뛰어난 생산성
빠른 실행 속도
대형 개발자 커뮤니티
직관적 문법

정답: 2 해설: 해설: 강의를 참고하세요

Q2. 파이썬 프로그램이 플랫폼 독립적으로 실행될 수 있도록 아래 그림의 (가)와 같이 파이썬 인터프리터가 동작하는 과정에서 중간 언어로 만드는 것은?

바이트 코드
어셈블러 코드
파이썬 소스 코드
기계어 코드

정답: 1 해설: 해설: 강의를 참고하세요

Q3. 파이썬 프로그래밍 환경 중 오픈소스이며 문서화가 쉽고 전통적인 소스코드-컴파일-실행 방식에서 벗어나 웹 기반 대화형 개발 및 실행 환경을 제공하는 것은?

IDLE
VS Code
주피터 노트북
구글 코랩

정답: 3 해설: 해설: 강의를 참고하세요

3강. 파이썬 시작하기

학습시간: 70분 / 70분
학습개요: 파이썬은 자연어와 유사한 직관적인 문법을 갖추고 있어 학습이 용이하며, 풍부한 표현력과 라이브러리를 갖춘 언어이다. 파이썬의 장점을 효과적으로 프로그래밍에 활용하기 위해서는 기초 문법과 개념에 대한 이해가 선행되어야 한다. 이번 차시에서는 데이터 타입, 표현식, 변수와 할당연산자, 식별자 및 예약어, 연산자 우선순위, 내장 함수, 들여쓰기, 주석 등 파이썬 프로그래밍의 기초가 되는 핵심 개념들을 학습한다.
학습목표:
- 함수의 개념을 바탕으로 함수를 사용할 수 있다.
- 변수에 값을 할당할 수 있다.
- 산술연산자의 종류와 의미를 설명할 수 있다.
- 들여쓰기와 주석의 역할을 설명할 수 있다.
- 주요용어
- 표현식: 데이터(값)와 연산자가 결합되어 하나의 결과값을 만들어내는 코드 조각
- 식별자: 프로그램 내부에 정의된 변수, 함수, 클래스 등을 식별하기 위해 사용자가 부여한 명칭
- 예약어: 파이썬 인터프리터에 의해 문법적인 용도로 이미 사용되고 있어 식별자로 사용할 수 없는 단어

핵심 정리

파이썬은 히도 판로쉼(Guido van Rossum)에 의해 1991년 분산 운영 체제(아메바)의 시스템 관리를 위한 쉘 스크립팅 언어로 개발되었다.
데이터는 값의 종류에 따라 숫자와 문자 타입 등으로 구분하며, 이들이 연산자(+, -, *, /)와 결합한 표현식은 인터프리터에 의해 자동 계산된다.
특정 작업을 수행하는 코드의 집합으로 함수의 이름만으로 실행할 수 있는 단위를 함수라고 한다.
변수는 데이터를 임시 저장하는 컴퓨터의 메모리 공간이며, 할당연산자(=)를 통해 값을 저장한다.
기본 연산 외에 거듭제곱(**), 몫(//), 나머지(%) 연산자가 있으며, 괄호와 연산자 종류에 따른 우선순위가 존재한다.
파이썬은 들여쓰기에 의존적인 언어로, 코드의 논리적 집합인 블록을 표현하기 위해 필수적으로 사용한다.
프로그램의 가독성을 높이기 위해 #를 사용하여 코드의 의미를 설명하는 주석을 작성한다.

연습문제

Q1. 'Our goal is to predict the future'

print("Computer science is the best")

print("Our goal is to predict the future")

print("Computer science is the best")

print("Our goal is to predict the future")

print(Computer science is the best)

print(Our goal is to predict the future)

"Computer science is the best"

"Our goal is to predict the future"

정답: 2 해설: 해설: 강의를 참고하세요

Q2. 다음 중 식별자로 사용할 수 없는 것은?

_pythonic
graudate130
44size
부피

정답: 3 해설: 해설: 강의와 강의록을 참고하세요

Q3. print(detox)

0
1
9
3

정답: 1 해설: 해설: 강의를 참고하세요

4강. 구조적 프로그래밍

학습시간: 53분 / 53분
학습개요: 현실 세계의 문제를 컴퓨터 프로그램을 통해 해결하기 위해서는 현실 세계의 다양한 데이터 처리 방식을 프로그래밍 과정에서 논리적으로 표현할 방법이 요구된다. 이 과정에서 명령의 실행 흐름을 간결하고 작은 규모로 조직화하기 쉬운 구조적 프로그래밍 패러다임에 기초하여 프로그램이 작성된다. 이번 차시에서는 프로그램이 상태를 가지고 이를 단계적으로 바꾸는 과정이라는 배경 지식을 바탕으로 구조적 프로그래밍의 원리를 이해한다. 특히 실행 흐름이 위에서 아래로 직관적으로 흐르는 순차 구조의 정의와 특징을 파악한다. 또한 사용자로부터 데이터를 입력받는 input() 함수와 데이터 타입 변환의 필요성을 배우며, 프로그램 실행 중 발생할 수 있는 다양한 오류의 종류와 print() 함수의 확장 기능을 통해 파이썬 프로그래밍의 기초를 다진다.
학습목표:
- 구조적 프로그래밍 패러다임의 특징을 설명할 수 있다.
- 순차구조의 특징을 설명할 수 있다.
- 프로그래밍 에러의 종류를 설명할 수 있다.
- 주요용어
- 사용자 입력 : input() 내장 함수를 통해 키보드 입력을 문자열 형태로 읽어 반환받는 과정
- 순차구조 : 실행의 흐름을 주어지는 명령의 위치적 흐름에 따라 수행하는 구조
- 데이터 타입 변환 : 한 데이터의 타입을 다른 데이터 타입으로 전환하는 과정
- 프로그램의 오류 : 설계 결함, 논리적 또는 문법 오류로 프로그램이 의도한 대로 결과를 생성하지 못하는 상황

핵심 정리

구조적 프로그래밍 패러다임은 제어 흐름을 블록 단위로 계층화하고 지역화하여 프로그램의 예측 가능성을 보장한다.
파이썬은 구조적 프로그래밍 패러다임을 지원하며 goto 문을 사용하지 않고 프로그램을 구성할 수 있는 순차, 선택, 반복 구조를 제공한다.
순차 구조는 명령 라인이 위에서 아래로 흐르는 직관적인 구조로 사람이 이해하고 오류를 수정하기 용이하다.
사용자의 키보드 입력을 한 줄의 문자열로 읽어 반환하는 내장 함수 input()을 통해 데이터를 입력받을 수 있다.
한 데이터를 다른 데이터 타입으로 변환하는 내장 함수를 통해 문자열을 정수나 소수 타입으로 변경할 수 있다.
프로그램의 설계 결함이나 문법 오류 등으로 의도한 결과를 생성하지 못하는 프로그램 오류에는 구문 오류, 실행 오류, 의미 오류가 있다.
출력 함수의 파라미터로 여러 데이터를 입력할 수 있으며 옵션을 통해 데이터 사이의 공백을 변경할 수 있다.

연습문제

Q1. 특정 영역 내의 명령문에 대한 실행 여부를 프로그램 실행 과정 중 조건에 따라 결정하는 구조

선택 구조
반복 구조
순차 구조
명령 구조

정답: 1

Q2. 올바른 명령문은? (단, n은 number 변수에 저장된 정수를 의미한다.)

정답: 4 해설: 해설: 강의를 참고하세요

Q3. ‘논리적으로 실행 불가능한 명령문 작성 시 발생’ 오류를 무엇이라고 하는가?

의미 오류
실행 오류
구문 오류
구조 오류

정답: 2 해설: 해설: 강의를 참고하세요

5강. 선택 구조

학습시간: 50분 / 69분
학습개요: 파이썬의 선택 구조는 프로그램이 상황에 따라 유연하게 동작할 수 있도록 만드는 지능의 기초가 되는 구조이다. 단순히 동일한 명령을 반복하는 것이 아니라, 특정 조건의 참·거짓 여부에 따라 실행할 명령문을 결정함으로써 프로그램의 안정성을 높이고 예외 상황에 대응할 수 있다. 이번 차시에서는 불리언 타입과 비교 연산자, 논리 연산자를 활용하여 if, else, elif 등 다양한 형태의 선택 구조를 구성하고 제어 흐름을 설계하는 방법에 대해 학습한다.
학습목표:
- 선택 구조를 정의할 수 있다.
- 비교연산자와 논리연산자를 사용하여 불리언식을 작성할 수 있다.
- 이분/다분/중첩 선택 구조를 상황에 따라 적용할 수 있다.
- 주요용어
- 불리언 타입: 논리값인 참(True)과 거짓(False)의 값만 표현할 수 있는 데이터 타입
- 불리언식: 비교연산자를 사용하여 결과가 불리언 타입으로 생성되는 표현식
- 논리연산자: 두 개의 논리값(불리언식)을 연산하여 참 또는 거짓을 결과로 얻는 연산자
- 코드 블록: 동일한 깊이의 들여쓰기로 표현되며, 특정 동작을 수행하는 한 라인 이상의 명령문 집합

핵심 정리

선택구조: 특정 영역 내의 명령문에 대한 실행 여부를 조건에 따라 판단하여 결정하는 구조이며 프로그램의 안정성과 예외 처리를 책임진다.
코드 블록과 들여쓰기: 파이썬은 들여쓰기를 통해 코드 블록을 구분하며, 스페이스 4칸 사용을 권고한다.
비교 연산자: <, <=, >, >=, ==, !=를 사용하여 불리언 결과값을 생성한다.
논리 연산자: and, or, not 연산자를 사용한다.
연산자 우선순위: 괄호 내 수식 → 거듭제곱 → 곱셈/나눗셈 → 덧셈/뺄셈 → 비교 연산자 → 논리 연산자(not > and > or) 순으로 적용된다.
단락 평가: A and B에서 A가 거짓이면 B를 평가하지 않고, A or B에서 A가 참이면 B를 평가하지 않는 기법이다.
이분 선택 구조 : 조건이 참일 때와 거짓일 때 실행할 명령문을 각각 나누어 정의한다.
다분 선택 구조 : 여러 개의 불리언식을 순차적으로 평가하여 해당하는 명령문 집합 하나를 실행한다.
중첩 선택 구조 : 선택 구조 내부에 또 다른 선택 구조를 포함시켜 더욱 세밀한 조건 분기를 수행할 수 있다.

연습문제

Q1. 파이썬에서 명령어의 논리적 집합인 명령 블록을 표현하기 위한 방법은?

불리언식
들여쓰기
콜론(:)
중괄호( { } )

정답: 2 해설: 해설: 자세한 내용은 강의를 참고하세요

Q2. 다음은 온도(temp)가 0 이하일 경우, “겨울입니다.”를 출력하는 프로그램일 일부이다. 밑줄 친 빈 칸에 들어갈 명령문은?

정답: 4 해설: 해설: 자세한 내용은 강의를 참고하세요

Q3. 다음은 사용자가 입력한 수가 3과 5의 공배수일 경우 “3과 5의 공배수입니다”를, 아닐 경우 “3과 5의 공배수가 아닙니다.”를 출력하는 프로그램의 일부이다. 밑줄 친 빈 칸에 들어갈 연산자는?

정답: 1 해설: 해설: 자세한 내용은 강의를 참고하세요

6강. 반복 구조

학습시간: 68분 / 69분
학습개요: 목적을 수행하기 위한 작업처리 과정에 동일한 프로그램 코드를 여러 번 반복해서 작성해야 한다면 프로그래밍 과정은 지루하고 비효율적일 수 밖에 없다. 프로그래밍 언어는 이러한 과정을 추상화하고 반복해야 하는 상황을 표현하여 조건에 일치하는 동안 또는 지정된 횟수 만큼 프로그램 코드를 반복할 수 있는 제어 구조를 제공한다. 파이썬은 현실 세계의 반복적 상황을 보다 세밀하게 표현하기 위한 조건 제어 반복과 계수 제어 반복 방법을 제공한다. 이번 차시에서는 반복 구조의 개념과 필요성에 대한 이해를 바탕으로 조건 제어 및 계수 제어 반복에 사용되는 while 문과 for 문에 대해 학습한다. 또한 반복 구조에 동반되는 리스트 및 시퀀스의 개념에 대해 학습하고 이를 for 문에 적용하는 방법에 대해 알아본다.
학습목표:
- 반복 구조의 개념과 필요성을 설명할 수 있다.
- 반복 구조 설계 전략을 통해 반복문을 작성할 수 있다.
- 리스트와 인덱스 연산자의 개념에 대해 설명할 수 있다.
- 주요용어
- 조건 제어 반복: 참과 거짓 조건에 의해 반복 여부가 결정되는 반복 구조
- 계수 제어 반복: 특정 계수만큼 반복 횟수가 정해진 반복 구조
- 리스트: 여러 개의 데이터를 순서대로 묶어서 저장하는 자료구조
- 인덱스 연산자: 시퀀스 타입의 원소에 접근하는 연산자

핵심 정리

반복 구조란 동일한 명령문에 대해서 사용자가 지정한 횟수만큼 또는 조건을 만족하는 동안 동일한 코드를 반복하여 수행할 때 사용하는 구조이다.
조건 제어 반복은 조건을 평가하여 참일 경우 명령문을 실행하고 거짓일 경우 반복을 종료하며, 계수 제어 반복은 계수 제어 변수에 시퀀스의 원소를 순차적으로 할당하며 명령문을 반복 실행한다.
증감 할당은 변수의 현재 값에 특정 값을 증가 또는 차감한 후 그 결과를 동일한 변수에 재할당하는 연산이다.
whlie문은 조건이 참(True)인 동안 while문 블럭 내부의 명령문을 수행하며 조건이 거짓(False)이 될 때 while문을 빠져나오는 조건 제어 반복 구조이다.
리스트는 여러 데이터를 순서대로 묶어 저장하는 시퀀스 타입으로 데이터가 저장된 순서가 유지된다.
리스트의 각 데이터는 0부터 시작하는 고유한 인덱스가 지정되어 개별 원소에 접근하거나 값을 수정할 수 있다.
for 문은 리스트 등과 같은 시퀀스의 첫 번째 요소부터 마지막 요소까지 하나씩 변수에 대입하여 블럭의 명령문을 수행하며 마지막 요소까지 수행한 후 종료하는 계수 제어 반복이다.
중첩 반복 구조는 하나의 외부 반복 구조에 여러 개의 내부 반복 구조가 중첩되어 사용되는 구조를 말하며 외부 반복 구조가 매 반복될 때마다 내부 반복 구조에 재진입하여 새롭게 실행된다.

연습문제

Q1. 계수 제어 반복 구조에서 특정 반복 횟수와 반복 시 계수의 값을 정하기 위해 사용하는 데이터 타입은?

변수
정수
시퀀스
식별자

정답: 3

Q2. 다음과 같이 반복 구조 내부에 또 다른 반복 구조가 포함되어 실행 흐름을 만드는 구조를 무엇이라고 하는가?

이분 선택 구조
조건 제어 반복 구조
계수 제어 반복 구조
중첩 반복 구조

정답: 4 해설: 해설: 강의 및 강의록을 참고하세요

Q3. 다음 코드의 출력값으로 옳은 것은?

2 3 4 5 6 7 8 9 10 11
2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10 11
1 2 3 4 5 6 7 8 9 10

정답: 4 해설: 해설: 강의 및 강의록을 참고하세요

7강. 함수

학습시간: 85분 / 83분
학습개요: 함수는 특정 작업을 수행하는 명령문의 집합으로, 특정 작업을 이름으로 대체해 유사한 문제를 추상화하고 코드의 재사용성과 가독성을 높이는 도구이다. 반복 구조를 통해 여러 번 반복되는 데이터의 처리 과정을 단순화할 수 있다 하더라도 불규칙적으로 발생하거나 반복되는 과정에 조금씩 변형이 있는 경우 반복 구조를 적용하기가 불가능해지는 한계가 있기 때문이다. 따라서 이번 차시에서는 내장함수와 사용자 정의 함수, 반환값이 없는 함수와 반환값이 있는 함수, 인자와 매개변수의 차이, format 함수를 이용한 결과 형식화, 동시 할당과 교환, 스코프, 기본 매개변수와 가변 매개변수 등 함수와 관련된 다양한 기능 및 활용 방법에 대해 학습한다.
학습목표:
- 함수의 개념에 대해 설명할 수 있다.
- 반환값이 없는 함수와 반환값이 있는 함수의 차이점을 설명할 수 있다.
- 변수가 참조될 수 있는 영역을 파악할 수 있다.
- 주요용어
- 동시 할당: 복수개의 변수에 값을 동시에 할당하는 명령
- 스코프: 프로그램에서 변수가 참조될 수 있는 영역으로 전역변수와 지역변수의 접근 범위
- 반환값: 함수 실행 후 호출한 곳에 전달되는 결과값
- 가변 매개변수: 함수 호출 시 매개변수를 사용자가 원하는 개수 만큼 지정할 수 있는 매개변수

핵심 정리

함수는 특정 작업을 수행하는 명령문의 집합으로, 특정 작업을 함수의 이름으로 대체하여 유사한 문제를 추상화하고 코드 중복을 줄인다.
반환값의 유무에 따라 반환값이 없는 함수와 반환값이 있는 함수로 구분된다.
반환값이 없는 함수는 함수 실행 후 어떤 값도 남기지 않는 함수이다. 반면 반환값이 있는 함수는 함수 내부에서 return 명령어를 통해 값을 남긴다.
함수는 def 함수이름(매개변수 리스트): 형식으로 정의하며 호출할 때 전달하는 값은 인자이고, 매개변수는 함수 내부에서 변수처럼 사용된다.
format 함수는 결과값의 폭·정렬·소수 자릿수를 형식화할 수 있으며, 동시 할당은 복수개의 변수에 값을 동시에 할당하고 교환이나 복수 결과 전달에 활용된다.
동시 할당이란 복수개의 변수에 값을 동시에 할당하는 연산이다. 이를 통해 단일 명령문으로 변수의 값을 맞바꿈이 가능하다.
값의 전달에 의한 호출이란 함수 호출 시 함수 내부에는 매개변수의 값이 전달된다.
변수의 스코프는 프로그램에서 변수가 참조될 수 있는 영역이다. 변수의 스코프에 따라 변수는 전역변수와 지역변수로 구분된다.
기본 매개변수란 함수 호출 시 매개변수가 전달되지 않을 경우 기본값이 전달되는 매개변수를 말한다.
함수 호출 시 매개변수를 사용자가 원하는 개수만큼 지정할 수 있는 매개변수를 가변 매개변수라고 하고 함수 정의 시 매개변수 이름 앞에 *를 사용한다.

연습문제

Q1. 다음 중 반환값에 따른 함수의 종류를 구분할 때, 나머지와 다른 하나는?

print
input
format
int

정답: 1

Q2. print(season)

'summer'
27
season
print

정답: 2

Q3. 다음 코드의 실행 결과는?

1
2
3
오류발생

정답: 1

8강. 콜렉션1

학습시간: 60분 / 72분
학습목표:
- 콜렉션의 개념과 종류를 설명할 수 있다.
- 리스트의 인덱스, 연산자, 내장 함수, 메서드를 이용하여 데이터를 처리할 수 있다.
- 리스트 슬라이싱과 리스트 컴프리헨션을 사용하여 리스트를 생성하고 조작할 수 있다.
- 주요용어
- 콜렉션: 여러 데이터를 묶어 하나의 구조로 다루기 위해 제공되는 자료 구조의 총칭
- 슬라이싱: 리스트의 일부 구간을 잘라 부분 리스트를 생성하는 방법
- 리스트 컴프리헨션: 반복과 조건을 이용하여 리스트를 간결하게 생성·조작하는 구문

핵심 정리

콜렉션은 여러 데이터를 하나의 구조로 묶어 저장·관리하기 위한 자료 구조이며, 저장 방식과 접근 방식에 따라 시퀀스, 비시퀀스, 매핑으로 구분된다.
리스트는 순서가 있는 가변 시퀀스로서 서로 다른 데이터 타입을 함께 저장할 수 있으며, 원소의 추가·삭제·수정이 가능하다.
튜플은 순서가 있는 불변 시퀀스로 생성 후 원소를 변경할 수 없고, 세트는 중복을 허용하지 않으며 순서를 유지하지 않는다. 딕셔너리는 key-value 쌍으로 데이터를 저장하는 매핑 구조이다.
리스트의 각 원소는 인덱스를 통해 접근할 수 있으며, 양수 인덱스는 왼쪽부터, 음수 인덱스는 오른쪽부터 원소를 가리킨다.
리스트에는 in, not in, +, * 등의 연산자를 사용할 수 있고, len(), min(), max(), sum()과 같은 내장 함수를 이용해 리스트의 길이와 값의 특성을 처리할 수 있다.
리스트 메서드는 리스트 객체에 대해 동작하는 기능으로, append(), count(), index(), pop(), insert(), remove(), reverse(), sort() 등을 이용해 리스트를 조작한다.
리스트 슬라이싱은 [시작인덱스:끝인덱스:간격] 형식으로 부분 리스트를 생성하는 방법이며, 시작 위치·끝 위치·간격을 조절하여 다양한 방식의 부분 추출이 가능하다.
리스트 컴프리헨션은 반복과 조건을 결합하여 리스트를 간결하게 생성·변환·필터링하는 방법이다.

연습문제

Q1. 다음 중 key-value의 쌍으로 데이터를 저장하는 매핑 자료형은 무엇인가?

list
tuple
set
dictionary

정답: 4

Q2. print(hei_list[:3])

[1, 5, 14]
[14, 26, 31]
[1, 14, 31]
[31, 26, 14]

정답: 1

Q3. print(hei_even)

[1, 5, 31]
[14, 26]
[1, 14, 31]
[26, 31]

정답: 2

9강. 콜렉션2

학습시간: 85분 / 86분
학습개요: 파이썬은 여러 데이터를 효율적으로 저장하고 처리하기 위해 다양한 콜렉션 자료구조를 지원한다. 이 중 튜플은 순서를 유지하는 불변 시퀀스로서 안정적인 데이터 저장에 적합하며, 문자열 또한 문자로 구성된 불변 시퀀스로서 인덱싱, 슬라이싱, 반복 처리에 활용된다. 또한 세트는 중복을 허용하지 않는 집합형 자료구조로 데이터 정제와 집합 연산에 유용하며, 딕셔너리는 key-value의 쌍으로 데이터를 저장하여 값을 빠르게 검색하고 조작하는 데 적합하다. 이번 차시에서는 튜플과 문자열의 특성, 세트의 연산과 활용, 딕셔너리의 생성과 조작 방법을 학습하고, 이를 다양한 응용 문제에 어떻게 활용되는지 살펴본다.
학습목표:
- 튜플과 문자열의 관계를 설명할 수 있다.
- 세트의 관련 연산 및 메서드를 활용할 수 있다.
- 세트와 딕셔너리 컴프리헨션을 이용하여 데이터를 간결하게 처리할 수 있다.
- 딕셔너리의 생성, 접근, 수정, 메서드 사용 방법을 설명할 수 있다.
- 주요용어
- 문자열: 문자만으로 구성된 불변 시퀀스
- 언패킹: 하나의 튜플에 들어 있는 여러 값을 여러 변수에 나누어 대입하는 방식
- 딕셔너리: key-value의 쌍으로 데이터를 저장하는 매핑 자료형

핵심 정리

튜플은 데이터를 순서 있게 저장하는 불변 시퀀스로, 리스트와 유사하지만 생성 후 원소를 수정할 수 없다.
튜플은 괄호보다 콤마가 본질적인 생성 요소이며, 여러 값을 하나로 묶어 반환하거나 여러 변수에 나누어 대입하는 데 활용된다.
튜플은 인덱싱과 슬라이싱이 가능하지만 sort()나 append()처럼 원소를 바꾸는 메서드는 사용할 수 없으므로, 정렬할 때는 sorted()를 사용하고 원소를 덧붙일 때는 + 연산자를 사용한다.
문자열은 문자로만 이루어진 불변 시퀀스로, 인덱싱, 슬라이싱, 반복 처리, 시퀀스 관련 기능을 적용할 수 있다.
문자열 메서드인 split(), join(), find(), replace(), strip(), upper(), lower(), isdigit(), isalpha(), isalnum() 등을 사용하면 문자열을 다양한 방식으로 처리할 수 있다.
세트는 중복을 허용하지 않고 순서를 유지하지 않는 변경 가능 컬렉션으로, 데이터 중복 제거와 집합 연산에 유용하다. 세트는 슬라이싱할 수 없으며, 합집합, 교집합, 차집합, 부분집합과 상위집합 관계를 다룰 수 있다.
세트 컴프리헨션은 다른 콜렉션에서 조건에 맞는 값을 추출하거나 변환하면서 중복을 제거하는 데 활용된다.
딕셔너리는 key-value 쌍으로 데이터를 저장하는 매핑 자료형이며, 키를 이용해 값에 접근하고 새로운 항목을 추가하거나 기존 값을 수정할 수 있다.
딕셔너리는 슬라이싱할 수 없지만 keys(), values(), items(), get(), pop(), popitem() 등의 메서드와 딕셔너리 컴프리헨션을 이용하여 효율적으로 데이터를 처리할 수 있다.

연습문제

Q1. 다음 중 튜플에 대한 설명으로 옳은 것은?

원소를 자유롭게 수정할 수 있는 가변 시퀀스
중복을 허용하지 않는 비순서 컬렉션
key-value의 쌍으로 데이터를 저장하는 자료형
원소의 순서를 유지하는 불변 시퀀스

정답: 4

Q2. print(msg.split(" "))

"I do love python"
['I', 'do', 'love', 'python']
('I', 'do', 'love', 'python')
['I do love python']

정답: 2

Q3. 다음 중 세트에 사용할 수 없는 연산자는 무엇인가?

in
not in
+
==

정답: 3

10강. 객체지향

학습시간: 5분 / 69분
학습개요: 객체지향 프로그래밍은 프로그램을 단순한 명령문의 나열이 아니라, 데이터와 연산을 포함하고 있는 객체들의 상호작용으로 구성하는 방법이다. 이 방식은 프로그램을 보다 유연하게 만들고, 수정과 확장이 쉬워 대규모 소프트웨어 개발에 널리 활용된다. 이번 차시에서는 객체지향의 기본 개념과 특징을 이해하고, 클래스를 정의하여 객체를 생성하는 방법을 학습한다. 또한 초기자와 메서드, self 매개변수의 역할을 익히고, 클래스와 인스턴스의 관계를 바탕으로 객체를 실제 프로그램에서 활용하는 방법을 살펴본다. 나아가 데이터 은닉의 필요성을 이해하고, private 데이터 필드와 접근자·변경자를 이용하여 객체를 보다 안전하게 설계하는 방법까지 학습한다.
학습목표:
- 객체지향 프로그래밍의 개념을 설명할 수 있다.
- 클래스를 정의하고 인스턴스를 생성할 수 있다.
- 데이터 은닉의 필요성을 설명할 수 있다.
- 주요용어
- 클래스: 객체를 만들기 위한 설계도이며 데이터 필드와 메서드를 정의하는 틀
- 인스턴스: 클래스로부터 실제로 생성된 객체
- self: 메서드 내부에서 객체 자신을 참조하기 위해 사용하는 첫 번째 매개변수
- 초기자: 객체의 상태를 초기화하는 특수 메서드

핵심 정리

객체지향 프로그래밍은 객체와 객체의 상호작용을 중심으로 프로그램을 구성하는 방식이며, 프로그램을 유연하고 변경하기 쉽게 만든다.
객체지향 패러다임의 대표적 특징에는 추상화, 캡슐화, 상속, 다형성이 있다.
객체는 데이터와 연산을 함께 가지는 단위이며, 이러한 객체의 구조와 기능은 클래스에 의해 정의된다.
클래스는 데이터 필드와 메서드를 포함하며, 객체의 상태를 초기화하기 위해 init 초기자를 사용한다.
메서드의 첫 번째 매개변수인 self는 객체 자신을 참조하며, 객체 내부의 데이터 필드와 다른 메서드에 접근할 때 사용된다.
클래스의 이름과 초기자의 매개변수를 이용하여 인스턴스를 생성할 수 있으며, 객체와 인스턴스는 같은 의미로 사용된다.
생성된 객체는 객체 참조변수를 통해 다루며, 멤버 접근 연산자 .를 사용하여 데이터 필드에 접근하거나 메서드를 호출한다.
클래스 설계는 UML 클래스 다이어그램을 통해 데이터 필드, 생성자, 메서드를 체계적으로 표현할 수 있다.
파이썬의 기본 데이터 타입인 int, str 등도 객체이며, type()과 id()를 통해 객체의 타입과 식별 정보를 확인할 수 있다.
데이터 은닉은 데이터 필드의 직접 변경을 방지하기 위한 방법이며, private 데이터 필드는 앞에 두 개의 밑줄을 붙여 정의한다.
private 데이터 필드는 객체 외부에서 직접 접근할 수 없으므로, 접근자와 변경자를 이용해 값을 읽거나 수정한다.

연습문제

Q1. 객체의 상태를 초기화하기 위해 사용하는 특수 메소드는 무엇인가?

main
init
class
return

정답: 2

Q2. print(unitcone.h)

20
30
50
100

정답: 4

Q3. 다음 중 접근자와 변경자에 대한 설명으로 옳은 것은?

접근자는 데이터를 삭제하고, 변경자는 객체를 생성한다.
접근자는 private 데이터 필드를 반환하고, 변경자는 private 데이터 필드를 설정한다.
접근자와 변경자는 모두 클래스 외부에서만 정의된다.
접근자는 객체를 복사하고, 변경자는 객체를 정렬한다.

정답: 2

11강. 모듈

학습시간: 0분 / 79분
학습개요: 파이썬에서 모듈은 함수, 상수, 클래스를 모아 놓은 집합체로, 코드를 하나의 단위로 묶어 재사용할 수 있게 해주는 필수적인 요소이다. 이 방식을 통해 개발자는 기존에 작성된 코드를 쉽게 활용하고, 프로그램의 구조를 체계적으로 관리할 수 있다. 이번 차시에서는 모듈, 패키지, 라이브러리의 개념과 포함 관계를 이해하고, 네임스페이스의 원리를 통해 모듈이 어떻게 등록되고 탐색되는지 학습한다. 또한, 파이썬에서 기본적으로 제공하는 수학(math), 난수(random), 시간(time) 모듈의 주요 멤버와 활용법을 익혀 실제 문제 해결에 적용하는 방법을 살펴본다.
학습목표:
- 모듈, 패키지, 라이브러리의 개념과 차이점을 설명할 수 있다.
- import 구문을 사용하여 모듈을 프로그램에 등록하고 활용할 수 있다.
- 파이썬의 여러 내장 모듈의 주요 함수를 이해하고 사용할 수 있다.
- 주요용어
- 모듈: 함수, 상수 또는 클래스를 모아 놓은 집합체로 재사용을 위해 만든 파이썬(.py) 파일
- 패키지: 하위 패키지 및 여러 모듈을 모아놓은 폴더
- 네임스페이스: 변수, 함수, 클래스 등의 이름이 저장되고 관리되는 공간
- 난수: 특정한 순서나 규칙적인 의미가 없는 임의의 수

핵심 정리

모듈은 함수, 상수, 클래스를 모아 놓은 파이썬 파일이며, 패키지는 이러한 모듈들의 폴더 모음, 라이브러리는 가장 큰 집합체이다.
네임스페이스는 변수와 함수 등의 이름이 구분되고 관리되는 공간이며, 이름 탐색은 지역, 전역, 빌트인 네임스페이스 순으로 이루어진다.
외부 모듈을 사용하기 위해서는 import 구문을 사용하여 네임스페이스에 추가해야 하며, from 구문을 통해 특정 멤버만 불러오거나 as 구문으로 별칭을 지정할 수 있다.
math 모듈은 원주율(pi), 올림(ceil), 내림(floor), 제곱근(sqrt) 등 다양한 수학적 계산 기능과 상수를 제공한다.
random 모듈은 임의의 숫자를 생성하는 난수 발생 기능을 제공하며, randint, choice, shuffle 등의 함수를 통해 게임이나 추첨 프로그램 구현에 활용된다.
time 모듈은 유닉스 에포크를 기준으로 경과 시간을 측정하거나, 시스템의 현재 시각을 확인하고 프로세스의 실행을 지연(sleep)시키는 기능을 지원한다.

연습문제

Q1. 파이썬에서 관련된 함수, 변수, 클래스 등을 하나의 파일로 묶어 재사용성과 유지보수성을 높이는 기본 단위는 무엇인가?

클래스 (Class)
모듈 (Module)
인터페이스 (Interface)
네임스페이스 (Namespace)

정답: 2

Q2. 특정 모듈(math)에서 특정 함수(sqrt)만을 가져오기 위한 올바른 구문 형식은?

import math.sqrt
import sqrt from math
from math import sqrt
math import sqrt

정답: 3

Q3. 코드의 실행을 잠시 3초 동안 멈추고자 할 때 사용하는 time 모듈의 함수는?

time.stop(3)
time.pause(3)
time.wait(3)
time.sleep(3)

정답: 4

12강. 파일

학습시간: 0분 / 85분
학습개요: 프로그램에 데이터를 처리하고, 프로그램이 종료되어도 데이터를 영구적으로 보관하기 위해서는 데이터의 영속성을 보장하는 파일과 파일의 논리적 저장 구조인 파일 시스템에 대한 이해가 필수적이다. 이번 강의에서는 파일과 디렉토리, 절대경로와 상대경로 등 운영체제가 제공하는 파일 시스템의 기본 구조를 이해하고, 파이썬을 활용해 파일을 열고, 읽고/쓰고, 닫는 3단계 파일 입출력 메커니즘을 학습한다. 또한 대규모 데이터를 다루는 실무 환경을 가정하여, 메모리 효율성을 고려한 파일 읽기 방식과 논리적 오류를 방지하기 위한 문자열 정제 등 데이터 파싱 기법을 다루어본다.
학습목표:
- 파일 시스템의 필요성을 설명할 수 있다.
- 목적에 맞는 모드로 파일 객체를 생성할 수 있다.
- 파일의 데이터를 논리적 단위로 분해 및 정제할 수 있다.
- 주요용어
- 절대 경로: 파일 시스템의 최상위 루트 디렉토리부터 목표 파일까지의 전체 폴더 순서를 생략 없이 모두 명시하는 위치 지정 방식
- 상대 경로: 현재 작업 디렉토리를 기준으로 목표 파일의 위치를 상대적으로 지정하는 방식
- 파일 포인터: 파일 내에서 데이터를 읽거나 쓰기 위해 현재 작업 중인 위치를 나타내는 지시자
- 데이터 파싱: 파일에서 읽어온 일련의 문자열을 문법적 규칙에 따라 분해하고, 불필요 문자 문자를 정제하여 의미 있는 데이터 단위로 변환하는 과정

핵심 정리

데이터의 영속성을 위해 비휘발성 보조기억장치가 사용되며, 운영체제는 계층적 트리 구조의 파일 시스템을 통해 데이터를 논리적 단위인 '파일'로 관리한다.
파일의 위치를 지정할 때는 최상위 루트를 기준으로 하는 절대 경로와, 현재 작업 중인 디렉토리를 기준으로 하는 상대 경로 방식을 사용한다.
파일은 데이터의 성격에 따라 텍스트 파일(특정 인코딩 규칙에 따른 문자열)과 바이너리 파일(이미지, 실행 파일 등 이진 데이터)로 구분된다.
파일 입출력은 '열기(open) → 접근(read/write) → 닫기(close)'의 3단계를 거치며, 데이터 무결성 보장 및 시스템 자원 누수 방지를 위해 작업 후 반드시 파일 객체를 닫아주어야(close) 한다.
새로운 파일을 생성하거나 덮어쓸 때는 "w" 모드를, 기존 데이터 끝에 내용을 덧붙일 때는 "a" 모드를 사용한다.
파일에서 데이터를 가져올 때는 파일 포인터를 이동하며 특정 개수만큼 읽는 read( ), 줄 단위로 읽는 readline( ), 전체 줄을 리스트로 반환하는 readlines( ) 등을 사용한다.
기가바이트 단위의 대용량 데이터는 한 줄씩 읽고 처리하는 방식으로 메모리 오버플로우를 예방해야 하며, 정확한 비교 연산 및 처리를 위해 strip() 등을 활용하여 개행 문자와 공백을 제거하는 데이터 파싱 작업이 수행된다.

연습문제

Q1. 현재 작업 디렉토리의 위치가 /var/home/user/docs라고 가정하자. 부모 디렉토리에 있는 lib 폴더 내의 config.txt 파일을 상대 경로로 열고자 할 때, 가장 적절한 경로는?

/var/home/lib/config.txt
./lib/config.txt
../lib/config.txt
~/lib/config.txt

정답: 3

Q2. 프로그램이 데이터가 누적되도록 파일을 다루고자 할 때, open() 함수에 지정해야 할 가장 적절한 모드는?

"r"
"w"
"a"
"x"

정답: 3

Q3. 대용량의 파일 분석 프로그램 작성 시, 다음 중 데이터를 안전하게 처리할 수 있는 방법은?

read() 메소드를 사용하여 파일 전체를 하나의 문자열 변수에 담아 분석한다.
readlines() 메소드를 사용하여 파일의 모든 줄을 메모리에 리스트 구조로 한 번에 적재한다.
한 번에 한 줄(line)씩만 메모리에 읽어 들여 정제 처리를 수행한 후 다음 줄로 넘어가는 반복문(for line in file:)을 구성한다.
데이터를 읽기 전 close() 함수를 선제적으로 호출하여 메모리를 비운다.

정답: 3

13강. 실전 프로그래밍 1

학습시간: 0분 / 61분
학습개요: 단순한 프로그래밍 문법의 나열을 학습하는 것을 넘어, 실제 프로젝트를 수행하는 과정은 단편적인 코딩 지식을 통합하여 현실의 문제를 논리적으로 구조화하고 해결하는 역량을 기르기 위해 필수적이다. 특히 현대 사회는 방대한 원시 데이터가 끊임없이 생성되는 환경이므로, 이 무의미해 보이는 데이터 속에서 패턴을 찾고 가치 있는 정보를 추출해 의사결정에 활용하는 데이터 분석 역량이 반드시 필요하다. 이번 강의에서는 '텍스트 데이터 분석기'를 직접 구현해 보며 데이터 수집부터 전처리, 분석, 시각화로 이어지는 전체 파이프라인을 경험한다. 나아가 GIGO 원칙을 통해 데이터 정제의 중요성을 깨닫고, 딕셔너리와 문자열 함수 등을 텍스트 빈도 분석이라는 실제 문제 해결 과정에 어떻게 응용하는지 학습한다.
학습목표:
- 데이터 분석의 4단계 파이프라인을 설명할 수 있다.
- 데이터를 분석 가능한 형태로 정제할 수 있다.
- 데이터를 정렬하여 시각화 할 수 있다.
- 주요용어
- 데이터 파이프라인: 원시 데이터가 수집, 전처리, 분석, 시각화 단계를 거쳐 최종적인 인사이트가 되기까지의 표준화된 흐름
- GIGO(Garbage in, garbage out): 부정확한 데이터가 입력되면 분석 결과도 무의미해진다는 원칙
- 데이터 전처리: 분석 가능한 형태로 데이터를 정제 및 변환하는 단계
- 데이터 시각화: 복잡한 데이터를 시각적인 형태로 표현하는 과정

핵심 정리

데이터 분석은 원시 데이터에서 유의미한 패턴을 찾고 정보로 변환하는 실질적인 문제 해결 작업과정이다.
데이터 분석의 표준 파이프라인은 데이터를 읽어오는 수집, 분석하기 쉽게 다듬는 전처리, 패턴을 추출하는 분석, 직관적으로 표현하는 시각화 단계로 구성된다.
분석 결과의 품질은 데이터의 품질에 직접적으로 비례한다는 GIGO 원칙에 따라, 텍스트 분석 시 불용어를 필터링하는 전처리 과정이 매우 중요하다.
문자열 정제를 위해 모든 문자를 소문자로 통일하는 lower(), 불필요한 문자를 치환하는 replace(), 공백 등을 기준으로 텍스트를 분리하는 split() 등의 내장 메서드를 적절히 조합하여 활용한다.
프로그램이 실행 중인 현재 작업 위치를 확인하고 외부 텍스트 파일에 접근하기 위해 os 모듈을 활용할 수 있다.
핵심 키워드의 출현 빈도는 Key와 Value 구조를 가진 딕셔너리를 통해 기록하며, get() 메서드로 단어의 등장 횟수를 안전하게 누적할 수 있다.
분석이 완료된 딕셔너리 형태의 데이터는 가장 많이 등장한 순서대로 순위를 시각화하기 위해 값(빈도수)을 기준으로 정렬 가능한 리스트 형태로 자료구조를 변환해야 한다.

연습문제

Q1. 원시 데이터가 가치 있는 정보로 변환되기까지 거치는 표준화된 흐름을 뜻하는 것은?

파이프라인
컴포넌트
인코딩
네임스페이스

정답: 1

Q2. 텍스트 분석 시 문법적으로는 쓰이나 분석적 의미가 없어 제거하는 단어(예: a, the, of)를 무엇이라 하는가?

불용어
예약어
식별자
상수

정답: 1

Q3. 단어와 빈도수를 쌍으로 묶어 카운팅 데이터를 저장하고 관리하기에 가장 적합한 자료구조는?

리스트
튜플
세트
딕셔너리

정답: 4

핵심 암기표

주제	외울 문장
Python 특징	- Python은 인터프리터, 동적 타입, 들여쓰기 블록 언어다. (세미콜론 중심 X)
변수와 자료형	- 변수는 값을 가리키는 이름이다. (타입 선언 없음) - 주요 자료형은 int, float, str, bool, list, tuple, dict, set이다. (컬렉션 구분)
입출력	- input은 문자열을 입력받는다. (숫자 변환 필요) - print는 값을 화면에 출력한다. (sep/end 가능)
대입 vs 비교	- `=`는 대입, `==`는 비교다. (시험 자주 나옴)
문자열	- 문자열 인덱스는 0부터 시작한다. (음수 인덱스 가능) - 슬라이싱은 end를 포함하지 않는다. (끝 미포함)
조건과 반복	- 조건문은 if, elif, else로 분기한다. (elif 오타 주의) - for는 정해진 반복, while은 조건 반복에 주로 쓴다. (무한루프 주의) - range(n)은 0부터 n-1까지다. (끝 미포함) - break는 반복문을 종료한다. (전체 반복 종료) - continue는 이번 반복만 건너뛴다. (다음 반복 진행)
함수	- 함수는 `def name(params):`로 정의한다. (들여쓰기 필수) - return은 값을 반환하고 함수를 끝낸다. (print와 구분) - 지역변수는 함수 안에서만 유효하다. (밖에서 접근 X) - 전역변수 변경은 global 선언이 필요하다. (읽기와 변경 구분)
컬렉션	- list는 순서가 있고 변경 가능하다. (mutable) - tuple은 순서가 있고 변경 불가능하다. (immutable) - dict는 key-value 구조다. (key로 접근) - set은 중복을 허용하지 않는다. (순서 의미 약함)
클래스	- 클래스는 객체의 설계도다. (객체지향) - `__init__`은 객체 생성 시 초기화 메서드다. (언더바 2개) - self는 객체 자기 자신을 가리킨다. (첫 매개변수)
모듈과 파일	- import는 모듈을 가져온다. (별칭 as 가능) - 파일은 `with open(...) as f`로 열면 자동으로 닫힌다. (close 생략 가능)

키워드 압축 카드

한 줄 공식

Python = 인터프리터 + 동적 타입 + 들여쓰기 블록 + 객체지향 지원.
시험은 “이 코드의 결과는?” 감각이 중요.

기초

변수는 값을 가리키는 이름.
자료형 = int, float, str, bool, list, tuple, dict, set.
문자열 인덱스는 0부터.
슬라이싱 = [start:end:step], end는 미포함.
입력 = input(), 출력 = print().

제어구조

조건문 = if / elif / else.
반복문 = for, while.
break = 반복 종료.
continue = 이번 반복 건너뜀.
range(n) = 0부터 n-1.
range(a,b) = a부터 b-1.

함수

함수 정의 = def name(params):.
반환 = return.
기본값 매개변수는 뒤쪽에 둠.
지역변수 = 함수 내부.
전역변수 변경은 global 필요.

컬렉션

list = 순서 O, 변경 O.
tuple = 순서 O, 변경 X.
dict = key-value.
set = 중복 X, 순서 의미 약함.
list append = 끝에 추가.
dict 접근 = d[key], 안전 접근 = d.get(key).

객체/모듈/파일

클래스 = 설계도, 객체 = 인스턴스.
생성자 = __init__.
자기 자신 = self.
모듈 사용 = import.
파일 열기 = open().
파일은 사용 후 닫거나 with open(...) as f 사용.

암기 포인트

들여쓰기 틀리면 문법 오류.
=는 대입, ==는 비교.
문자열 + 숫자는 바로 더할 수 없음. 형변환 필요.
리스트는 mutable이라 원본 변경 문제 주의.

유비쿼터스컴퓨팅개론

우선순위: 핵심 기술 용어·구성요소·장단점·적용 사례를 비교형으로 암기

평가/시험 범위

평가유형	평가방법	출제범위	비고
중간과제물	온라인과제물	추후 학교 홈페이지 공고	-
형성평가	진도10/연습문제10	학습진도율 및 연습문제	-
기말시험	온라인출석시험(객관식)	교재 전체 및 해당 멀티미디어 강의	-

1강. 유비쿼터스 혁명

학습시간: 50분 / 51분
학습개요: 유비쿼터스 컴퓨팅 기술로 구축될 수 있는 유비쿼터스 공간을 기존의 사이버공간(전자 공간)과 구분하여 이해하고, 이를 통해 유비쿼터스 환경에서 ICT가 가지는 역할과 발전 방향에 대해서 공부한다.
학습목표:
- 유비쿼터스 공간을 물리공간과 전자공간의 유기적 공간으로 이해할 수 있다.
- 물리적 속성과 전자적 속성간의 상호 작용이 긴밀한 유비쿼터스 공간의 특성을 이해할 수 있다.
- 유비쿼터스 공간의 구현을 위한 전자공간과 물리공간의 연계를 이해할 수 있다.

핵심 정리

유비쿼터스 환경은 언제, 어디서나, 어떠한 통신 단말기를 가지고, 어느 정보통신망을 통해서든, 원하는 정보통신 서비스를 받을 수 있는 환경을 의미한다.
유비쿼터스 혁명은 서로 이질적인 물리공간(제1공간)과 전자공간(제2공간)이 제3의 가치공간인 유비쿼터스공간으로 통합/진화되는 사회 전반에 걸친 변화이다.
유비쿼터스컴퓨팅 개념을 토대로 하는 접근 방법은
i) 물리공간의 사물 이미지를 해석하여 사용자의 주변을 분석하고 주위의 특정 사물의 존재를 컴퓨터가 인식할 수 있도록 하거나,
ii) 다양한 컴퓨터(칩, 센서, 태그, 구동체등)를 사물 속에 심고 이들을 네트워크로 연결하여 물리공간의 상황을 사물과 사물, 사물과 컴퓨터, 컴퓨터와 사물 간의 상호작용을 통해 유비쿼터스공간(전자공간-물리공간)으로 인식하는 방법이 있다.
유비쿼터스 공간은 만지지 않아도 공간에 존재하거나 공간에 관한 정보를 사용자가 알 수 있는 ‘현실체가 지능적으로 증강된 공간’으로 인식된다.

연습문제

Q1. 물리공간과 전자공간을 유기적으로 융합한 것을 무엇이라고 하는가 ?

전자공간
유비쿼터스 공간
사이버 공간
초현실 공간

정답: 2

Q2. 물리공간과 전자공간의 연계를 위한 관점에 포함되지 않는 것은 무엇인가 ?

사물-컴퓨터-사람의 네트워크 연결
사물의 인식
물리적 속성과 전자적 특성 간의 연계
인공지능 기반의 전자공간

정답: 4

지문: 전자공간과 물리공간의 연계는 “물리공간의 (가), 전자공간의 (나), 양쪽에 존재하는 (다)간의 제한 없는 통신 네트워크를 기반으로 하며, 물리공간에 존재하는 장소, 사물, 사람의 물리적 속성에 대한 인식이 가능하고, 이러한 물리적 속성과 전자공간상의 전자적 속성이 양방향으로 상호작용할 수 있는 기능 중심의 환경”이라고 정의할 수 있으며, 이러한 환경을 유비쿼터스 환경이라고 한다. Q3. 위 내용의 빈칸에 알맞은 것은 무엇인가 ?

사물(센서/칩/태그), 사람, 컴퓨터

사람, 사물(센서/칩/태그), 컴퓨터

사람, 컴퓨터, 사물(센서/칩/태그)

사물(센서/칩/태그), 컴퓨터, 사람 정답: 4

2강. 유비쿼터스 컴퓨팅 개념과 주요 이슈

학습시간: 49분 / 50분
학습개요: 보이지 않는 컴퓨팅, 내재된 컴퓨팅 과 같이 다양한 이름을 가지고 있는 유비쿼터스 컴퓨팅은 ‘Ubiquitous Computing(Ubicomp)’이라 명명되면서 사용되기 시작했으며, 줄여서 ‘Ubiquitous’로 통용되기도 한다. 이에 유비쿼터스 컴퓨팅과 유비쿼터스 환경의 개념과 정의를 공부한다.
학습목표:
- 언제, 어디에 있든지 컴퓨터의 지원을 받을 수 있는 유비쿼터스 컴퓨팅의 정의 및 특징을 이해할 수 있다.
- 정보통신 서비스의 통합화와 다양화의 기술진화 방향이 공존하는 유비쿼터스 컴퓨팅의 개념적 기술 전개 환경을 이해할 수 있다.
- 각국의 유비쿼터스 컴퓨팅의 개념을 비교할 수 있으며, 유비쿼터스 컴퓨팅의 주요 이슈를 이해할 수 있다.

핵심 정리

유비쿼터스 컴퓨팅은 사람을 포함한 현실공간에 존재하는 모든 대상물들을 기능적·공간적으로 연결하여 사용자에게 필요한 정보나 서비스를 즉시에 제공할 수 있는 기반 기술이다. 즉, 사물의 일부가 된 컴퓨터들은 주변 상황을 인식할 수 있고, 지리적으로 떨어진 곳에서도 사용자가대상 사물과 그 주변 환경의 변화를 지각하거나 추적할 수 있도록 한다.
유비쿼터스 컴퓨팅의 특징은 다음과 같다.
- 네트워크에 연결되지 않은 컴퓨터는 유비쿼터스 컴퓨팅이 아니다.
- 인간 중심의 인터페이스로서 눈에 보이지 않아야 한다.
- 현실 세계의 어디서나 컴퓨터의 사용이 가능해야 한다.
유비쿼터스 컴퓨팅의 개념적 기술전개 방향은 다음과 같다.
- 유비쿼터스 네트워크
- 유비쿼터스 기술의 인간 친화
- 사용자에 최적화된 서비스 환경
- 지능화된 사물
유비쿼터스 컴퓨팅 기술 이슈는 다음과 같다.
- 가시성(Visibility) 측면 : 복잡하고 방대한 결과에 대한 시각적 편리성을 지향하며, 정보서비스 제공이 구체화되어야 한다
- 복잡도(complexity) 측면 : 구체화된 컴퓨터의 운영체제, 응용 등에 대한 협력 작업과 분산 작업을 통한 효율적인 협력 시스템과 서로 다른 기능을 갖는 다양한 시스템들의 융합 컴퓨팅 모델이 제시되어야 한다.
- 연결성(connection) 측면 : 인터넷 통신 속도의 고속화, 안정성, 효율성, 광대역 채널의 확보를 통해 데이터나 컴퓨팅 능력면에서 보다 큰 스케일의 컴퓨팅 공간을 구축해야 한다.
- 비가시성(invisivility) 측면 : 인간중심의 사용자 인터페이스를 통해 편리한 인터페이스를 제공하기도 하고, 개인화된 인터페이스를 제공할 수 있는 서비스가 창출해야 한다.

연습문제

Q1. 유비쿼터스 컴퓨팅의 특징으로 틀리는 것은 무엇인가 ?

모든 사물의 컴퓨터 내재화
물리공간을 가상공간으로 이동
모든 사물의 지능화
사물들의 유기적 연결

정답: 2

Q2. 유비쿼터스 컴퓨팅 환경을 구현하기 위한 관심 분야로서 전자공간 사이의 좀 더 개선된 결합의 모습을 추구하는 개념은 무엇인가 ?

가시성
복잡성
추상화
연결성

정답: 4

지문: ( )은 1988년 PARC의 마크 와이저에 의해 “사람을 포함한 현실공간에 존재하는 모든 대상물을 기능적 공간적으로 연결하여 사용자에게 필요한 정보나 서비스를 즉시에 제공할 수 있는 기반 기술”로 정의되었다. Q3. 위 내용의 괄호 안에 알맞은 내용을 넣으시오 정답: 유비쿼터스 컴퓨팅

3강. 가상현실 및 메타버스

학습시간: 58분 / 59분
학습개요: 가상현실(VR), 증강현실(AR), 혼합현실(MR) 기술의 발달로 현실세계와 가상의 세계를 생생하게 시각적으로 표현하고, 이미지화된 객체와 상호작용하는 기술인 메타버스를 공부한다. 그리고 가상현실의 개념 및 주요 기술을 살펴보고, 메타버스의 개념 및 플랫 폼 유형에 대해 살펴본다.
학습목표:
- 가상성의 연속성을 통한 가상현실의 개념과 주요 기술을 이해할 수 있다.
- 메타버스의 개념 및 플랫폼의 유형을 이해할 수 있다.
- 가상성의 연속성을 이해할 수 있다.

핵심 정리

가상현실은 실제로 존재하지 않는 완전히 허구적 환경이나 상황을 가능하게 하는 기술이다.
증강현실은 현실에 가상정보를 추가하는 형태이다.
가상성의 연속성(Virtuality Continuum)은 현실과 가상세계 사이에서 가상성의 정도를 구분하기 위해 제시된 개념이다.
혼합현실은 현실과 가상환경 사이에 존재하는 모든 것을 의미하며, 현실세계와 가상의 대상물이 함께 존재하는 것을 의미한다.
가상현실 콘텐츠 관련 기술 :
① 가상현실 콘텐츠를 개발∙실행하기 위한 개발 엔진
② 가상현실 콘텐츠를 개발∙제작하기 위한 저작도구
③ 가상현실 콘텐츠를 사용자에게 제공하는 서비스 기술
메타버스는 ‘가상, 추상’을 의미하는 메타(Meta)와 ‘현실세계’를 의미하는 유니버스(Universe)의 합성어이다.

연습문제

Q1. 실제로 존재하지 않은 환경이나 상황을 컴퓨터 등으로 구현한 후 인간의 감각을 이용하여 체험하게 하는 기술은 무엇인가 ?

가상현실
혼합현실
메타버스
증강현실

정답: 1

Q2. 미래 가속화 연구재단(ASF; Acceleration Studies Foundation)에서 정의한 메타버스 구성의 네 가지 시나리오가 아닌 것은 무엇인가 ?

가상세계
일상기록
혼합현실
증강현실

정답: 3

Q3. 소셜 미디어가 모임, 쇼핑, 게임 등이 가능한 메타버스로 발전한 형태인 소셜 기반 메타버스가 아닌 것은 무엇인가 ?

제페토(Zepeto)
게더타운(Gather.town)
호라이즌 월드(Horizon World)
로블록스(Roblox)

정답: 4

4강. 디바이스 기술 – SoC / MEMS

학습시간: 60분 / 60분
학습개요: 인간과 사물이 지능화되고 고도화되는 과정에서 여러 가지 세부 기술들이 결합되어 새로운 유비쿼터스 세상으로 발전하게 된다. 이러한 유비쿼터스 컴퓨팅 환경의 디바이스에 가장 큰 영향을 주고 디바이스를 구성하는 주요 기술 요소인 SoC(System on Chip), 미세 전자기계 시스템(Micro Electro Mechanical Systems; MEMS) 기술 등을 공부한다.
학습목표:
- 소형화 지능화가 요구되는 미래 환경에 대응하기 위한 핵심 기술인 MEMS 기술의 개념과 MEMS 기술의 발달과정을 이해할 수 다.
- 반도체 기술과 비교하여 MEMS 기술의 특징을 이해할 수 다.
- MEMS 기술의 다양한 응용 분야를 이해할 수 있다.
- SoC 기술의 장담점과 기술개발 현황을 이해할 수 있다.

핵심 정리

SoC 기술 :
칩 자체가 하나의 시스템으로 기능할 수 있도록정보통신기기의핵심기능을담당하는메모리, 디지털 회로, 아날로그 회로, CPU, 센서, 안테나, 수동소자 등을 하나의 반도체 칩에 집적하는 기술
SoC의 장점 :
- 급속한 정보통신 기술의 변화와 경쟁에 대응하기 유리함
- 비용과 부피 및 크기의 소형화 가능
- 전력 소모 등의 효과
미세 전자기계 시스템(MEMS) :
유비쿼터스 네트워크나 초소형 휴먼 인터페이스 분야의 핵심요소인 3차원 미소 구조물, 센서 및 구동 장치 등을 소형화 및 고정밀화하고 복합화를 가능
MEMS 기술의 특징
- 입출력 대상의 다양성
- 효율적인 소형화
- 제작의 융합화
- 생산공정의 복잡화
- 광범위한 산업분야와 연계
- 센서 기술과의 융합

연습문제

Q1. SoC의 특징이 아닌 것은 무엇인가 ?

칩 자체가 하나의 시스템으로 기능을 수행할 수 있다.
마이크로프로세서, 디지털 신호 처리장치, 메모리 등을 직접시킨 칩이다.
기능마다 별개의 칩으로 구성된다.
부품의 개수와 부피를 줄일 수 있다.

정답: 3

Q2. SoC 제작과정중에서 펌웨어등의 개발이 관여되는 과정은 무엇인가 ?

시스템 명세 단계
전문가에 의한 구조 결정 단계
시제품 제작 및 테스트 단계
SoC 제품 생산 단계

정답: 3

Q3. 다음 중 MEMS 기술의 특징이 아닌 것은 무엇인가 ?

입출력 대상의 다양성
효율적인 소형화
제작의 융합화
생산공정의 단순화

정답: 4

5강. 디바이스 기술 - 나노 기술 및 차세대 전지

학습시간: 55분 / 55분
학습개요: 유비쿼터스 환경에서는 다양한 응용서비스 개발이 가능한데, 각 응용의 요구사항에 따라 다양한 장비가 사용되어야 한다. 이러한 장비를 개발하기 위해서는 여러 세부 기술들이 개발되고 적용되어야 하는데, 본 장에서는 이 중 나노 기술 및 전지 기술에 대하여 공부한다.
학습목표:
- 미래 산업혁명을 이끌어갈 주요 분야로 인식되는 나노 기술의 개념을 이해할 수 있다.
- 사회 전반에 영향을 미칠 나노 기술의 산업적 · 경제적 중요성을 이해할 수 있다.
- 나노 기술의 발전 과정과 학제간 연구가 필요한 나노 기술의 특징을 이해할 수 있다.
- 전지의 원리와 차세대 전지의 발전 방향에 대해 이해할 수 있다.

핵심 정리

나노 기술의 정의
: 원자나 분자를 적절하게 결합시켜 새로운 미세한 구조를 만들어내어 기존 물질을 변형하거나 새로운 물질을 창출하는 것을 가능하게 하는 초미세기술
나노 기술의 특징
: 나노 수준의 새로운 원천 기술의 개발과 신물질합성을 통한 산업적 적용이 가능하며, 학문 간, 기술 간 급격한 융합화를 유도함
나노 기술의 활용 분야
: 나노 소재, 나노 소자, 나노 바이오, 나노 에너지·환경, 나노 공정·측정·장비, 나노 안전성
전지의 분류
: 화학 반응을 통해 전기를 발생시키는 화학전지와 물리적 반응을 통해 전기를 발생시키는 물리전지
초고용량 커패시터
: 기존의 2차 전지보다는 콘덴서 부품에서 기술적 근원을 가지고 있으며, 초고용량 커패시터로넘어오면서 기존 콘덴서 부품과 비교해 볼 때 사용처 등에서 유사한 흐름을 유지하였으므로 2차 전지와 구분됨
연료 전지
: 수소와 산소의 반응을 통해 전기와 열, 물을 생산하는 고효율 무공해 전기화학장치로서 반응물을 공급하는 한 지속적인 전력 생산이 가능한 일종의 발전기

연습문제

Q1. 나노 기술의 특징이 아닌 것은 무엇인가 ?

물질의 특성을 나노 스케일에서 규명하고 제어하는 기술
원자나 분자를 적절하게 결합시켜 새로운 미세한 구조를 만들어내어 기존 물질을 변형하거나 새로운 물질을 창출하는 것을 가능하게 하는 초미세기술
기술의 핵심은 기존의 구조물들을 융합하여 구조물을 만드는 기술
입자의 질량이 너무 작아서 중력의 영향은 덜 받고, 상대적으로 넓은 표면적으로 인하여 흡착력이 커지게 됨

정답: 3

Q2. 화학전지에 속하지 않는 것은 ?

Ni-Cd 전지
Ni-MH 전지
태양 전지
리튬이온 전지

정답: 3

Q3. 나노미터 수준의 가공을 통해 나노미터 크기의 구조체를 인공적으로 형성하는 나노 기술의 접근 기술은 ?

하향식 접근 방식
상향식 접근 방식
다측면 접근 방식
입체 접근 방식

정답: 1

6강. 유비쿼터스 네트워크

학습시간: 65분 / 65분
학습개요: 정보화 사회에서 네트워크는 원활한 정보전달이 이루어지기 위한 핵심 기반기술에 해당되며, 유비쿼터스 사회에서도 당연히 네트워크는 중요한 역할을 수행한다. 인간과 컴퓨터 간의 통신이 주를 이루던 정보화 사회에도 네트워크의 역할이 매우 중요하였지만, 사물까지 연결해야 하는 유비쿼터스 시대에 네트워크는 없어서는 안 되는 매우 중요한 기술 요소가 된다. 이를 이해하기 위해 유비쿼터스 네트워크의 개념 및 구조를 익히고, 향후 발전 방향에 대해 공부한다.
학습목표:
- 유비쿼터스 사회에서 어떤 네트워크 기술 요소가 필요한 이유를 유비쿼터스 사회의 전체적인 시스템을 통해서 이해한다.
- 유비쿼터스 컴퓨팅과 유비쿼터스 네트워크 개념의 차이를 명확히 이해한다.
- 유비쿼터스 시대에 다양한 서비스를 제공하기 위한 네트워크 기술의 진화 방향을 이해한다.

핵심 정리

유비쿼터스 네트워크 기술
: PC 뿐만 아니라 모든 단말기가 네트워크에 항상 접속되어, 누구든지 시간과 장소의 제약 없이 네트워크를 활용한 다양한 서비스를 제공받을 수 있는 환경 또는 이를 가능하게 하는 기술
유비쿼터스 네트워킹을 위한 구조적 모델
- 유비쿼터스 네트워크 최종 사용자(End-User) 기능 : 최종 사용자 기능은 연결과 협력을 위한 최종 사용자 측면의 기능
- 유비쿼터스 네트워크 차세대 네트워크 전송층(NGN Transport Stratum) : 전송 계층에 각 단말의 다양한 통신 방식과 독립적인 방식으로 정보를 주고받을 수 있는 기능
- 유비쿼터스 네트워크 차세대 네트워크 서비스층(NGN Service Stratum) : 서비스층은 전송층과 상호작용 중에도 현재 상황을 파악하기 위한 모니터링 기능
- 유비쿼터스 네트워크 응용 프로그램 : 유비쿼터스 네트워킹 응용프로그램은 수집한 데이터를 이용하고 가공하여 의미 있는 정보를 생성하는 역할
광대역 통합망 (BcN)
: 유선사업자들이 주도하는 차세대 기반 망과 무선 사업자들이 주축이 되는 통합 인터넷 프로토콜 망의 구축을 통하여 처음부터 융합된 망으로 시작한 후 단계적인 고도화를 통해 차세대 네트워크로 발전함
사물인터넷에서의 사물 유형
- 고정 사물(Fixed Objects) :이동이 없는 사물
- 이동 사물(Mobile Objects) : 한 장소에서 다른 장소로 이동 중인 사물
- 논리적 사물(Logical Objects) : 서버상의 콘텐츠 같은 객체로 연결성 제공 및 서비스를 위한 객체
사물 인터넷 (IoT ; Internet of Things) :
- 각종 사물에 컴퓨터(프로세서와 통신 모듈)를 내장하여 인터넷에 연결할 수 있는 기술
- 모든 종류의 사물들이 서로 연결되어 통신이 가능함을 의미
- IoT는 사물(센서), 네트워크, 데이터, 서비스의 융합

연습문제

Q1. 유비쿼터스 네트워킹을 위한 구조적 모델에서 사물의 수행 환경과 상황정보는 통신하는 단말이나 사용자의 이동, 실행 환경의 변화 등 여러 통신 환경 변화에 따라 영향을 받기 때문에 각 사물은 예측할 수 없는 실행 상황에도 대처하는 계층은 무엇인가?

차세대 네트워크 서비스층
차세대 네트워크 전송층
최종 사용자
유비쿼터스 네트워킹 응용 프로그램

정답: 1

Q2. 사물인터넷에서 서버상의 콘텐츠 같은 객체의 사물 유형은 무엇인가?

고정 사물
이동 사물
체 사물
논리적 사물

정답: 4

지문: 하부에 위치한 다양한 목적의 ( )들은 주변 환경으로부터 데이터를 수집하여 전달하고 있으며, 이러한 사물들로부터 데이터를 전달받아서 효율적으로 처리하기 위한 ( ), 그리고 수집된 데이터를 이용하여 서비스를 제공하는 ( )으로 구분할 수 있다. Q3. 위 지문의 빈칸에 알맞은 것은 무엇인가?

사물, 플랫폼, 응용 프로그램

플랫폼, 사물, 응용 프로그램

플랫폼, 응용 프로그램, 사물

사물, 응용 프로그램, 플랫폼 정답: 1

7강. 블록체인과 핀테크

학습시간: 62분 / 62분
학습개요: 블록체인을 기반으로 하는 가상화폐 및 전자결제 서비스는 가장 대표적인 분산 데이터 처리 사례이며, 기존 산업의 제품 및 서비스의 생산 · 소비 · 유통 · 관리 측면에서 다양한 변화를 가능하게 해 주고 있다. 특히 금융 부문의 블록체인 플랫폼은 피할 수 없는 미래 서비스 기술로 인정받고 있다. 이 장에서는 블록체인의 개념과 정의, 블록체인 플랫폼의 형태 및 합의 알고리즘를 알아본다. 그리고, 블록체인의 구조에 대해서 이해한다.
학습목표:
- 분산형 디지털 장부 기술을 대표하는 블록체인의 정의 및 특징을 이해할 수 있다.
- 다양한 블록체인 플랫폼을 이해하고 장단점을 설명할 수 있다.
- 블록체인의 기술적 구조와 처리 기법(합의 알고리즘)을 이해할 수 있다.

핵심 정리

블록체인
- 블록체인은 일정 시간마다 새로운 거래 내역을 담은 신규 블록이 생성되고 이에 대한 합의가 이루어지면 기존 블록에 연결되는 데이터 구조
- 계속적으로 이루어지는 개인과 개인 사이의 거래 정보를 블록 단위로 저장하고, 구성원들에게 전송된 해당 블록의 유효성이 검증되면 기존 블록체인에 추가되는 방식으로 관리됨
네트워크 참여자
-채굴자(miner) : 네트워크 내에서 보상을 얻는 참여자 노드
-일반 참여자 : 블록체인 일부분의 데이터만 저장하는 라이트 노드
블록체인 플랫폼의 특징
- 분산형 장부 관리
- 불변성
- 가용성
- 투명성
블록체인은 블록체인의 블록은 데이터를 저장하며, 헤더(header)와 몸체 부분(body)으로구성됨
- 각각의 블록은 선행 블록에 대한 해시값을통해 블록체인의 링크 구조를 유지함
- 블록의 식별자는 블록 해시값(블록 헤더를 암호화 알고리즘인 SHA-256 알고리즘을 이용하여 얻어 낸 해시값)과 블록 높이값(블록체인에서 블록의 위치)으로 정의됨
블록체인은 참여자의 특성과 권한 범위, 참여자들의 네트워크 참여 방식과 활용에 따라 분류됨
- 퍼블릭블록체인
- 프라이빗블록체인
- 하이브리드 블록체인
- 컨소시엄 블록체인
블록체인에서 사용하는 일반적인 합의 알고리즘
- 작업증명 합의 알고리즘
- 지분증명 합의 알고리즘
- 프랙티컬비잔틴 장애 허용 합의 알고리즘

연습문제

Q1. 블록체인의 특징이 아닌 것은 무엇인가?

분산형 장부관리
투명성
자동성
가용성

정답: 3

Q2. 승인된참여자만 참여할 수 있는 폐쇄형 블록체인 플랫폼은 무엇인가?

비트코인 블록체인
동적 블록체인
퍼블릭 블록체인
프라이빗 블록체인

정답: 4

Q3. 블록체인 플랫폼에서 특정 블록을 찾기 위해서는 식별자가 필요하며, 블록의 식별자는 ( )과 ( )으로 정의된다.

블록 해시값, 블록 높이값
블록 높이값, 블록 해시값
논스, 블록 해시값
블록 높이값, 난이도

정답: 1

8강. 클라우드 컴퓨팅

학습시간: 63분 / 63분
학습개요: 클라우드 컴퓨팅은 인터넷을 통해 액세스할 수 있는 IT 서비스로서 사용자가 신청하여 즉시 사용할 수 있고, 사용한 만큼 비용을 지불하는 컴퓨팅 서비스이다. 클라우드 서비스는 우리 주변에서 쉽게 찾아볼 수 있고 개인적인 업무뿐만 아니라 기업체의 전산 시스템과 서비스의 기반 플 랫폼이 되었다. 특히 우리나라에서는 민간 클라우드를 공공기관의 업무에 활용하기 위하여 정부 규정 및 지침에 맞춰 G 클라우드 시스템을 구축하고 클라우드 서비스의 활성화를 꾀하고 있다. 이 장에서는 4차 산업혁명의 기반 시스템인 클라우드 컴퓨팅 의 개념과 정의, 그리고 데이터 클라우드에 관해서 살펴본다.
학습목표:
- 클라우드 컴퓨팅의 정의 및 특징을 이해한다.
- 클라우드 컴퓨팅 배포 모델과 클라우드 컴퓨팅 서비스 모델에 대해서 살펴본다.
- 데이터 클라우드의 개념과 특징을 알아본다.

핵심 정리

클라우드 컴퓨팅
-인터넷을 통해 액세스할 수 있는 IT 서비스로서 사용자가 신청하여 즉시 사용할 수 있고, 사용한 만큼 비용을 지불하는 컴퓨팅 서비스
- 컴퓨팅 리소스에 언제, 어디서나 필요에 따라 편리하게 네트워크를 통해 접근하는 기능을 제공하는 컴퓨팅 모델
- 확장 가능하고 탄력적인 IT 기능이 인터넷을 사용하는 외부 고객들에게 서비스 형태로 제공되는 컴퓨팅 방식
- 집적 · 공유된 정보통신기기, 정보통신 설비, 소프트웨어 등 정보통신자원을 이용자의 요구나 수요 변화에 따라 정보 통신망을 통하여 신축적으로 이용할 수 있도록 하는 정보처리체계
클라우드 아키텍처
- 물리적 시스템 계층 : 가장 기본적인 계층으로 클라우드 인프라를 구성하는 물리적인 하드웨어 영역이며, 일반적으로 컴퓨팅 자원 포함
- 가상화 계층 : 클라우드에서 제공되는 가상 인프라를 제공하는 영역으모 다양한 사용자의 요구사항과 클라우드 서비스 요구 계약사항(SLA)에 따라 가상화 수행함
- 프로비저닝계층 : 사용자의 서비스 요청에 따라 가상 인프라를 가상화 계층에 생성(프로비저닝)하고 관리하는 영역
- 클라우드 컴퓨팅 서비스 관리 체계 계층 : 클라우드 인프라를 관리하고 서비스 요청에 따라 하위 계층에 필요한 자원의 생성과 삭제 관리 수행
- 클라우드 서비스 계층 : 클라우드 서비스인 IaaS(InfrastructureasaService), PaaS(PlatformasaService), SaaS(SoftwareasaService)가 제공됨
클라우드 배포 모델
- 프라이빗 클라우드(Private Cloud) : 단일 조직이나 특정 기관에 의해 독립적이고 배타적으로 운영되는 형태의 클라우드 배포 모델이며, 단일 조직이나 특정 기관이 컴퓨팅 자원의 제어권과 운영권을 가지기 때문에 다른 배포 모델에 비하여 상대적으로 보안 측면에서 강점을 갖는다.
- 퍼블릭 클라우드(Public Cloud) : 일반에게개방된 형태의 클라우드 서비스가 제공되며,불특정 다수의 사용자가 접근가능하며, 클라우드 컴퓨팅에서 제공하는 서버 및 데이터 저장소, 소프트웨어와 같은 컴퓨팅 자원을 불특정 다수의 사용자가 공유하는 서비스를 제공하는 클라우드 배포 모델이다.
- 하이브리드 클라우드(Hybrid Cloud) : 두 개 이상의 클라우드 배포 모델의 조합으로 구성된 형태이며, 데이터 보안이 중요하거나 컴퓨팅 자원에 대한 독자적인 제어가 필요한 서비스에 대해서는 사설(프라이빗)클라우드 및 커뮤니티 클라우드를 이용하고 추가적인 컴퓨팅 자원에 대해서는 퍼블릭 클라우드의 컴퓨팅 자원을 할당 받아 사용하는 형태가 대표적이다.
클라우드 컴퓨팅 서비스 모델
- SaaS 모델 : 클라우드 사용자에게 통신 네트워크를 통해 소프트웨어를 가상화하여제공하는 모델
- IaaS 모델 : 사용자가 운영하고자 하는 서비스에 필요한 프로세서·스토리지·메모리 등의 하드웨어를 상세하게 명시하면, 클라우드 제공자가 이에 대한 컴퓨팅 자원을 가상화하여사용자에게 제공하는 모델
- PaaS 모델 : 클라우드 사용자가 특정 소프트웨어나 자체 개발한 소프트웨어를 운영할 수 있는 플랫폼을 제공하는 모델

연습문제

Q1. 클라우드 서비스에 대한 설명으로 옳지 않은 것은 무엇인가?

인터넷을 통해 액세스할 수 있는 IT 서비스
사용자가 신청하여 즉시 사용할 수 있고, 사용한 만큼 비용을 지불하는 컴퓨팅
사용자의 필요 용도에 따라 클라우드 컴퓨팅에서 제공하는 서비스의 성능도 가변적으로 변경 가능한 서비스
고정적인 컴퓨팅 리소스에 대한 포털을 제공하는 서비스

정답: 4

Q2. 클라우드에서 제공되는 가상 인프라를 제공하는 영역은 클라우드 아키텍처의 어느 부분인가?

프로비저닝계층
물리적 시스템 계층
가상화 계층
클라우드 컴퓨팅 서비스 관리 체계 계층

정답: 3

Q3. 클라우드 사용자에게 통신 네트워크를 통해 소프트웨어를 가상화하여 제공하는 클라우드 서비스 모델은 무엇인가?

SaaS 모델
IaaS 모델
PaaS 모델
DaaS 모델

정답: 1

9강. 유비쿼터스 센서 네트워크

학습시간: 63분 / 63분
학습개요: 여러 센서들이 수집한 데이터를 실시간으로 전송하기 위해 네트워크 형태로 발전시킨 것이 유비쿼터스 센서 네트워크(Ubiquitous Sensor Network; USN)을 공부한다. 즉 유비쿼터스 센서 네트워크에는 주변 환경 데이터를 수집하고 처리하는 센서, 이 데이터를 전달하기 위한 유・무선 네트워크, 이 데이터를 받아서 저장・가공・통합하는 서버들로 구성된 유비쿼터스 센서 네트워크에 대해서 이해한다. 즉, 이번에는 USN을 구성하는 주요 구성 요소들의 기능 및 관련 기술을 공부한다.
학습목표:
- 주변 상황에 대한 데이터를 수집하고 처리한 후 전달하는 기능을 갖춘 센서의 개념 및 특징을 이해할 수 있다.
- 유비쿼터스 센서 네트워크의 구조 및 유비쿼터스 센서 네트워크의 미들웨어 기능을 이해하고 향후 기술 발전 방향을 논의한다.

핵심 정리

유비쿼터스 네트워크는 여러 센서들이 수집한 데이터를 실시간으로 전송하기 위한 목적의 네트워크이다.
센서는 일반적으로 측정 대상물을 감지 또는 측정하거나 전파의 강도를 감지/측정하여 유용한 신호로 변환하고, 그 측정량을 전기신호로 변환하는 장치이다. 즉, 물리량이나 화학량의 절대치와 변화, 혹은 소리, 빛 등을 감지한다.
유비쿼터스 센서 네트워크는 여러 개의 센서 네트워크 영역이 게이트웨이를 통해 외부 네트워크에 연결되는 구조이며, 센서 노드는 집적된 데이터를 가까운 싱크 노드를 거쳐 게이트웨이로 전송한다.
센서 네트워크는 기본적으로 센서 노드(Sensor node)와 싱크 노드(Sink node)로 구성된다.
싱크 노드는 센서 네트워크 내의 센서 노드들을 관리하고 제어하며, 센서 노드들이 수집한 데이터를 모아서 외부 네트워크로 전송하는 게이트웨이 역할을 수행한다.
USN 미들웨어는 물리적으로 USN 응용 서비스 시스템과 센서 네트워크의 중간에 위치하며, USN 응용 서비스 시스템과 센서 네트워크의 통합이 유연하게 이루어지도록 하는 역할을 수행한다.
대부분의 USN 미들웨어는 응용 서비스 지원을 위하여 서버 시스템에 설치되거나 노드들의 원활한 동작과 성능 향상을 위하여 센서 노드와 싱크 노드에도 설치된다.
USN 미들웨어는 다양한 질의 유형 지원, 센싱 정보 관리, 메타 정보 관리, 서로 다른 기종의 센서 네트워크 통합 지원, 상황정보 생성 및 관리, QoS 보장, 센싱 정보의 보안센서 노드의 위치 인식 등의 기능을 수행한다.

연습문제

Q1. 일반적으로 측정 대상물을 감지 또는 측정하거나 전파의 강도를 감지/측정하여 유용한 신호로 변환하고, 그 측정량을 전기신호로 변환하는 장치는 무엇인가?

센서
사물
USN 미들웨어
USN 응용 프로그램

정답: 1

Q2. 센서 네트워크의 센서 네트워크 프로토콜 아키텍처의 기능 측면에 해당되지 않는 것은 무엇인가?

전력 관리 측면
이동성 관리 측면
업무 관리 측면
자원 분배 측면

정답: 4

Q3. USN 미들웨어의 기능이 아닌 것은 무엇인가?

센서들의 센싱를 모아서 외부 네트워크로 전송
다양한 질의 유형 지원
센싱 정보 관리
서로 다른 기종의 센서 네트워크 통합 지원

정답: 1

10강. 상황 인식 기술

학습시간: 59분 / 59분
학습개요: 상황인식 컴퓨팅 기술은 여러 센서들로부터 얻은 상황정보를 응용서비스에 적합하게 처리하고, 사용자의 현재 상황에 가장 적합한 서비스를 찾아내어 이를 동적으로 재구성하여 사용자에게 제공한다. 사용자에게 필요한 서비스를 주변에 편재된 컴퓨터들이 제공해주기 위해서 사용자 및 환경에 대한 동적인 모델을 수용하고 센서를 통해 상황정보를 인식할 수 있는 기술을 공부한다. 또한 환경 정보를 지능적으로 판단하고, 가공한 후에 적절한 서비스로 제공해주는 과정을 이해한다. 마지막으로 상황을 정보로 모델링하는 상황정보 표현 기술을 공부한다.
학습목표:
- 상황정보를 수집 기술을 이용하여 상황인식 서비스를 제공하기 위해 필요한 요소 기술에 대하여 이해한다.
- 상황정보를 정의하고 이를 표현하는 다양한 방식에 대하여 배우고 익힌다.

핵심 정리

상황인식 컴퓨팅(Context-Aware Computing)
: 실세계에서 획득한 상황정보를 추상화하고 연계하여 상황정보를 지식으로 만들고, 응용 분야에 적합한 지식 표현을 기반으로 사용자와 서비스를 연계하는 응용 기술
상황인식 기술의 효율적인 이용을 위한 요구사항 :
- 상황에 대한 이해 : 상황정보의 선택/활용 방법/상황 인식 행위의 결정을 지원해줌
- 상황과 관련된 기술 구조에 대한 이해 : 응용 서비스의 구축을 지원해줌
상황(또는 상황정보, Context)의 정의 :
- 상황인식을 하기 위해 필요한 기본 정보
- 실세계에 존재하는 실체의 상태를 특징화하여 정의한 정보
- 사용자의 상황을 특징지을 수 있는 정보
상황의 분류 :
- 컴퓨팅 상황(Computing Context)
- 사용자 상황(User Context)
- 물리적 상황(Physical Context)
상황인식 시스템의 구성 :
- 클라이언트 기기
- 상황인식 시스템
- 상황인식 모델
상황인식 응용 개발 도구 기술 :
- 상황정보의 추상화(Abstraction) 기술
- 상황정보의 해석(Interpretation) 기술
- 유사한 상황정보의 수집(Aggregation)기술
상황인식 서비스 요소 기술 :
- 상황정보 수집 기술
- 상황정보 모델링 기술
- 상황정보 추론 기술
- 상황정보 관리 기술

연습문제

Q1. 상황의 분류에 포함되지 않는 것은 무엇인가?

지식적 상황
컴퓨팅 상황
사용자 상황
물리적 상황

정답: 1

Q2. 상황(또는 상황정보, Context)의 정의에 포함되지 않는 것은 무엇인가?

상황인식을 하기 위해 필요한 기본 정보
실세계에 존재하는 실체의 상태를 특징화하여 정의한 정보
사용자의 상황을 특징지을 수 있는 정보
사용자의 주변을 구성하는 가상화된 자원 정보

정답: 4

Q3. 상황인식 서비스 요소 기술이 아닌 것은 무엇인가?

상황정보 연계 기술
상황정보 모델링 기술
상황정보 추론 기술
상황정보 관리 기술

정답: 1

11강. 인간과 컴퓨터/ 인간과 로봇 상호작용 기술

학습시간: 72분 / 72분
학습개요: 인간과 컴퓨터 상호작용을 초기에는 인간과 컴퓨터, 인간과 가상환경의 상호작용에서 발생하는 기술적 · 사회적 · 심리적 문제를 주로 다루었다. 그러나 정보통신 기술의 발전으로 인해 컴퓨터, 자연환경, 인공환경 등으로 이루어진 복잡한 기술 융합 특징을 지닌 유비쿼터스 컴퓨팅 환경으로 진화하면서 기존 학문, 기술, 서비스 부문에 이르는 광범위한 영역에서 변화를 주도하고 있다. 마우스를 사용한 그래픽 사용자 인터페이스(GUI; Graphic User Interface)가 대중화되면서 상호작용에 대한 편이성이 증가하였지만, 완전한 인간 중심적인 컴퓨팅 환경을 구축하기 위해서는 인간과 컴퓨터의 상호작용(HCI; Human Computer Interaction) 관련 기술이 지속적으로 발전해야 한다. 또한, 최근에 지능형 서비스 로봇이 생활의 필수품으로 발전하며, 로봇을 초고속 인터넷과 연결함으로써 저렴한 가격으로 다양한 정보와 서비스를 제공할 수 있는 URC 기반 서비스 로봇으로 발전하고 있다. 사람의 말과 몸짓, 표정, 목소리 등으로 사람의 의도를 종합적으로 판단하고, 그에 맞는 행동을 하기 위한 인간과 로봇 상호작용(HRI) 기술에 관한 연구도 활발하게 진행되고 있다. 즉, 점차 사용자의 사용 편리성을 고려하여 이를 구현하려는 노력과 인간이 어떻게 생각하고 행동하는지에 대한 연구들에 대해서 공부한다. 그리고, 인간과 컴퓨터/인간과 로봇과의 상호작용 개념과 그 중요성을 다루고 이와 관련된 주요 기술들을 공부한다.
학습목표:
- 인간의 음성인식, 음성합성, 자연어 처리 기술을 기반으로 인간과 컴퓨터 상호작용 기술을 이해한다.
- 인간과 컴퓨터와의 상호작용의 정의 및 특징을 이해하고, 실제 상호작용할 수 있는 인터페이스 기술에 대하여 이해할 수 있다.
- 인간과 로봇과의 상호작용의 정의 및 특징을 이해하고, 실제 상호작용할 수 있는 인터페이스 기술에 대하여 이해할 수 있다.

핵심 정리

인간과 컴퓨터의 상호작용(HCI)
- 사람과 컴퓨터 시스템이 쉽고 편하게 상호작용하는 방법을 연구
- 간과 컴퓨터 사이의 상호작용 뿐만 아니라 컴퓨터를 중간 매개로 사용하여 인간과 인간 사이에서 발생하는 상호작용도 포함함
- 주요 구성 요소 : 인간, 컴퓨터, 상호작용, 태스크(Task), 상황(환경 정황)
음성인식 기술
- 사람의 기본적인 의사소통 수단인 ‘말(언어)’을 통해 보다 편리하고 인간적인 방식의 컴퓨팅 환경을 구축하기 위한 기반 기술
음성 합성 기술
- 글을 말로 바꾸는 기술
자연어 처리 기술
- 컴퓨터가 사람의 일상 언어를 이해하고 생성할 수 있도록 함으로써 인간의 지적 활동의 보조자 및 지원 도구로 활용하고자 하는 기술
착용형(인간과 컴퓨터의)상호작용 기술
-(인간과 컴퓨터의)착용형상호작용 기술(Wearable HCI)은 인간 중심 기술의 중심에 있는 HCI 기술과 착용 컴퓨팅 기술의 융합 결과

연습문제

Q1. HCI(Human-Computer Interactio)의 구성요소에 포함되지 않는 것은 무엇인가?

사물
인간
컴퓨터
상호작용

정답: 1

Q2. 음성을 통한 HCI에 포함되지 않는 것은 무엇인가?

음성 인식
음성 합성
자연어처리
상황인식

정답: 4

Q3. 착용 컴퓨팅 기반의 HCI에서 운영체제, 미들웨어, 장치 관리/보안, 음성인식, 응용 프로그램 등의 기술 분류는 무엇에 해당하는가?

기반 기술
디바이스 / 컴포넌트 기술
소프트웨어 기술
착용 솔루션 기술

정답: 3

12강. 유비쿼터스 시대의 정보보호 필요성과 요구사항

학습시간: 66분 / 66분
학습개요: 유비쿼터스 컴퓨팅 환경에서는 다양한 정보기기들이 생활의 곳곳에 널리 퍼져 있고, 이러한 정보기기를 통해서 어느 곳에서나 다양한 정보에 대한 접근과 이동이 이루어지고 있다. 이러한 유비쿼터스 컴퓨팅 환경에서는 모든 서비스와 정보가 통신망을 통해 제공되므로 오작동과 해킹의 우려가 많아지고, 웜·바이러스에 의한 피해도 걷잡을 수 없이 확산될 수 있다. 따라서 개인이나 기업과 국가의 정보보호를 뛰어넘어 전 세계적이고 광범위한 공간에 대한 보호가 요구된다. 우리는 유비쿼터스 환경에 적합한 정보보호 기술의 필요성과 인간생활을 편리하게 변화시키고 있는 유비쿼터스 환경의 역기능 중 하나인 각종 정보보호 침해 유형에 대해서 공부한다.
학습목표:
- 유비쿼터스 환경에 적합한 정보보호 기술의 필요성을 이해할 수 있다.
- 유비쿼터스 환경에서 잠재적인 보안 문제가 무엇이고, 개인정보 침해 유형, 예상되는 보안상의 위협이 무엇인지 이해할 수 있다.

핵심 정리

유비쿼터스 컴퓨팅 환경은 스마트폰, 태블릿 PC 등과 같은 다양한 단말기기들과 서비스 객체로 구성됨
⇨ 서로 다른 운영체제나 통신 프로토콜을 갖는 단말기기가 독립적인 서비스 객체를 지원함
⇨ 서비스 객체의 상호작용 과정에서 상호인증 작업이 필요함
⇨ 유비쿼터스 환경의 다양한 단말기기들은 기존의 인증 시스템을 그대로 적용하기엔 부적절함
부인방지(Non-repudiation)
메시지의 송‧수신이나 교환 후, 또는 통신이나 처리가 실행된 후에 그 사실을 사후에 증명함으로써 사실 부인을 방지하는 보안 기술
개인정보 침해의 유형
- 개인정보의 부적절한 접근과 수집
- 개인정보의 부적절한 분석
- 부적절한 모니터링
- 부적절한 개인정보 유통
- 원하지 않는 영업행위
- 부적절한 저장
유비쿼터스 시대의 정보보호 요구사항
- 유비쿼터스 장치의 절도 및 분실에 대한 대처
- 신원정보 및 위치정보 노출에 대한 대처
- 불법 접근하는 비인증접근점에 대한 대처
- IP 위장하기(IP Spoofing)에 대한 대처
- 서비스 거부 공격(DoS)에 대한 대처
- 배터리 소진 공격에 대한 대처
- 패킷 엿보기(Packet Sniffing)에 대한 대처
- 트로이 목마형 백도어프로그램에 대한 대처

연습문제

Q1. 유비쿼터스 시대의 정보보호 요구사항에 포함되지 않는 것은 무엇인가?

유비쿼터스 장치의 절도 및 분실에 대한 대처
신원정보 및 위치정보 노출에 대한 대처
IP 위장하기(IP Spoofing)에 대한 대처
사용자 익명 사용에 대한 대처

정답: 4

Q2. 메시지의 송‧수신이나 교환 후, 또는 통신이나 처리가 실행된 후에 그 사실을 사후에 증명함으로써 사실 부인을 방지하는 보안 기술은 무엇인가?

서비스 거부 공격(DoS)
패킷 엿보기(Packet Sniffing)
부적절한 개인정보 유통
부인방지(Non-repudiation)

정답: 4

Q3. 정상적인 기능을 하는 시스템으로 가장하여 프로그램 내에 숨어서 의도하지 않은 기능을 수행하는 백도어(backdoor) 프로그램 코드는 무엇인가?

패킷 엿보기 (Packet Sniffing) 코드
페러데이케이지(Faraday Cage) 코드
트로이 목마(Trojan Horse) 코드
킬 태그(Kill Tag) 코드

정답: 3

13강. 스마트 자동차

학습시간: 89분 / 54분
학습개요: 각 자동차 제조사는 인포테인먼트, 자율주행, 첨단 운전자 보조 시스템(ADAS) 등 특정 기능을 차량에 접목하고 있으며, 궁극적인 스마트 자동차는 이런 모든 기능을 갖춘 형태로 발전하고 있다. 음성인식 기술도 애플의 시리(Siri)처럼 대화형 방식으로 발전함에 따라 운전자와 자동차가 더욱 자연스럽게 상호 소통이 가능하게 된다. 자 율주행은 첨단 운전자 보조 시스템의 발전을 통해 안정성을 높여 가고 있다. 자동차-IT 기술 융합의 주요 경향은 연결성, 운전자의 안정성 및 편의성 향상, 친환경, 자율주행, 차량용 앱과 자체 앱스토어, 자동차 운영체제 기술 등으로 요 약할 수 있다. 이 장에서는 스마트 자동차의 개념과 주요 기술에 대해 살펴본다.
학습목표:
- 고도의 안전과 편의를 제공하는 스마트 자동차의 개념을 이해한다.
- 운전자의 안전성과 편의성을 위한 기술과 조작성과 접근성을 높이는 자율주행 기술을 이해한다.

핵심 정리

스마트 자동차(Smart Car)는 ‘첨단 컴퓨터 · 통신 · 측정 기술 등을 이용하여 자동으로 운행할 수 있는 차량’이다. 즉, 자동차의 내외부 상황을 실시간 인식하여 도로 위의 위험에 대처할 수 있는 안전성과 탑승자의 만족을 극대화시키는 편의 기능을 갖춘 인간 친화적인 자동차이다.
안전성 기술은 차량 결함, 사고 예방 및 회피, 충돌 등 위험 상황으로부터 운전자 및 탑승자를 보호하고 교통사고로 인한 피해를 경감하는 기술이다. 편의성 기술은 자동차에 흥미를 부여하고 운전자 편의를 극대화하여 자동차를 가정, 사무실에 이은 제3의 주거 공간으로 활용하는 기술이다.
자율주행 기술은 운전자의 조작 없이 자동차 스스로 주행 환경을 인식하면서 목표 지점까지 운행하여, 운전자의 부주의로 인한 교통사고를 미연에 방지하고 편리한 운전 환경을 제공한다.

연습문제

Q1. 일부 기능을 제외하면 정상적인 주행 혹은 사고나 충돌 임박 상황에서 자동차 제어권을 운전자가 소유하는 자동차의 자동화 단계는 무엇인가?

비자동화
조합 기능 자동화
제한된 자율주행
특정 기능 자동화

정답: 4

Q2. 차량 상태의 위험 상황과 운전자 상태를 감지하여 사고 발생 가능성이 있는 경우, 사고를 회피시키는 차량 제어 기술은 무엇인가?

운전지원
사고피해경감
사고예방
사고회피

정답: 4

Q3. 차량과 주변 인프라망이 유무선 통신에 의해 접속되는 단말과 서버 간에 이루어지는 무선통신. 차량에 인터넷 프로토콜(IP) 기반의 교통정보 및 안전운행 정보를 내려받을 수 있는 서비스는 무엇인가?

전자제어 장치(ECU; Electronic Control Unit)
협력 · 지능형 교통 체계(C-ITS; Cooperative Intelligent Transport Systems)
차량 인프라 간 통신(V2I; Vehicle to Infrastructure communication)
차선 유지 보조 시스템(LKAS; Lane Keeping Assistance System)

정답: 3

14강. 빅데이터

학습시간: 61분 / 61분
학습개요: 빅데이터는 세 가지 특징인 볼륨, 속도, 다양성을 가지고 있다. 이를 활용하기 위해 빅데이터 수집, 적재, 처리, 분석 과정을 거치게 되며, 각 단계별로 여러 세부 기술이 필요하다. 현재 다방면에서 정형/비정형 데이터를 수집, 저장하고 분석함으로써 의 미 있는 결과를 도출할 수 있는 빅데이터 시스템이 널리 활용되고 있다. 이 장에서는 빅데이터의 특징, 주요 세부기술, 응용 분야에 대해 살펴본다.
학습목표:
- 빅데이터의 특징을 이해하고, 이를 활용할 수 있는 기술을 살펴본다.
- 빅데이터의 주요한 응용 분야를 살펴보고, 향후 어떻게 발전해 나갈 것인지 생각 해 본다.

핵심 정리

대용량의 정형/비정형 데이터 집합을 빅데이터라고 하며, 이를 수집 · 저장 · 분석하여 의미 있는 결과를 도출하기 위해 사용한다.
빅데이터는 대개 3V(볼륨, 속도, 다양성) 혹은 5V(3V + 정확성, 가치)의 특징을 지닌다.
빅데이터를 활용하기 위해 빅데이터 수집 → 빅데이터 적재 → 빅데이터 처리 → 빅데이터 분석 과정을 수행하며, 각 단계별로 여러 세부 기술이 필요하다.
향후 빅데이터는 여러 산업에서 비용 절감, 문제 해결, 트렌드 분석 등의 목적으로 활용될 것으로 예상되며, 그에 따라 해결해야 할 기술적인 요소도 많아지고 있다.

연습문제

Q1. 저장될 데이터에 대하여 미리 정해진 규칙(혹은 스키마)을 정의한 후, 그에 따라 저장된 데이터는 무엇인가?

정형 데이터
비정형 데이터
반정형 데이터
추상형 데이터

정답: 1

지문: 빅데이터 적재 기술은 수집한 데이터를 분산 저장장치에 영구 또는 임시로 저장하는 기술이다. 수집된 빅데이터는 이전 정형 데이터를 주로 다루는 관계형 데이터베이스와는 다른 방식으로 저장되어야 한다. 이를 위해 빅데이터 분산 저장소는 대개 HDFS(Hadoop Distributed File System)이나 NoSQL을 활용한다. HDFS는 대용량 파일 적재에 주로 활용하지만, 실시간 발생하는 대용량 데이터 적재를 위해서는 NoSQL을 사용한다. Q2. 위 지문은 무엇에 대한 설명인가?

빅데이터 적재

빅데이터 수집

빅데이터 처리

빅데이터 분석 정답: 1

Q3. 여러 서버를 연결하여 대용량 빅데이터를 분산처리할 수 있도록 지원하는 자바(Java) 기반의 오픈소스 프레임워크는 무엇인가?

아파치 스파크(Spark)
네임노드(NameNode)
하둡(Hadoop)
맵리듀스(MapReduce)

정답: 3

15강. 인공지능

학습시간: 68분 / 68분
학습개요: 현대적인 의미의 컴퓨터가 등장한 이후 1950년대에 이미 인공지능이란 용어가 사용되었다. 하지만 당시에는 컴퓨팅 인프라도 부족했고, 인공지능을 위한 대용량 데이터 뿐만 아니라 이 데이터를 효과적으로 학습할 수 있는 알고리즘도 없었다. 이후 인공지능 암흑기를 거친 후, 여러 실증 연구에서 성과가 보이기 시작했다. 인공지능 연구는 패턴 인식, 예측, 강화 학습 등 우수한 연구 성과를 기반으로 현재까지 활발하게 진행되고 있다. 인공지능은 인간처럼 생각하고 행동할 수 있는 기계를 만드는 기술을 의미한다. 이 는 일반 프로그래밍과 달리 컴퓨터가 입력 데이터를 이용하여 스스로 알고리즘을 찾아내는 것으로, 여러 산업 영역에서 인공지능 기술을 적용하면서 많은 성과를 내고 있다. 이 장에서는 이러한 인공지능의 동작 원리를 이해하고, 향후 발전 방향에 대하여 살펴본다.
학습목표:
- 인공지능의 장점과 단점, 향후 전망에 대해 설명할 수 있다.
- 인공지능의 정의와 역사를 살펴보고, 그 과정에서 어떤 사건들이 있었는지 이해할 수 있다.

핵심 정리

인공신경망은 인간의 뇌에 있는 뉴런 구조를 흉내 낸 모델로 인공지능에서 활용하는 기술 중 하나이다. 즉, 뇌에 있는 뉴런은 여러 계층으로 나열되어 있고, 인접한 계층의 뉴런들이 서로 연결되어 있다. 외부의 입력은 입력층으로 전달되고, 각 뉴런은 입력 신호들에 대하여 내부에 저장된 가중치(weight)를 이용하여 적절한 출력을 계산하여 다음 계층으로 보내게 된다.
머신러닝(Machine Learning, 기계학습)은 인공지능 기술 중 하나이며, 관련 분야의 데이터를 바탕으로 지식을 자동으로 습득하여 스스로 성능을 향상시키는 기술이다.
딥러닝은 머신러닝의한 종류이며, 인공신경망(Artificial Neural Network)의 은닉층(hidden layer)을 여러 계층 쌓아서 만든 깊은 신경망(Deep Neural Network) 구조를 가진다.
강화학습은 컴퓨터가 주어진 상황에 대해 적절한 행동을 수행한 후 적절한 보상을 수행하는 방식이며, 지도학습은 모든 학습 데이터(x)에 적당한 레이블(y)을 부여한 후에 기계가 입력집합 x를 모델에 넣어 결과에 해당하는 y값과 비교함으로써 모델의 성능을 높이는 학습을 진행한다. 그리고, 비지도학습은 주어진 데이터에 대한 어떤 지식이나 레이블도 없는 데이터를 다룬다.
강화학습은 행동을 수행할 에이전트가 현재 상태를 기반으로 하여 행동을 선택하고, 가능한 행동 중에서 가장 큰 보상을 받을 수 있는 행동이 무엇인지 스스로 학습하도록 한다.

연습문제

Q1. 모든 학습 데이터(x)에 적당한 레이블(y)을 부여한 후, 기계가 입력집합 x를 모델에 넣어 결과에 해당하는 y값과 비교함으로써 모델의 성능을 높이는 학습 방식은 무엇인가?

지도학습(Supervised Learning)
비지도학습(Unsupervised Learning)
강화학습(Reinforcement Learning)
반지도학습(Semi-supervised Learning)

정답: 1

지문: 인공신경망(Artificial Neural Network)에서 은닉층(hidden layer)을 여러 계층 쌓아서 만든 깊은 신경망(Deep Neural Network)이며, 뇌의 신경망 구조와 유사한 방식으로 동작하도록 계층적인 인공신경망을 기반으로 설계된다. Q2. 위 지문은 무엇에 대한 설명인가?

인공지능

머신러닝

딥러닝

튜링 테스트 정답: 3

Q3. 출력되는 값이 분류 문제처럼 N개의 값 중 하나를 예측하는 것이 아니라, 연속된 값 중 하나를 출력하는 것은 무엇인가?

회귀 모델
분류 모델
군집화 모델
마르코프 의사결정 과정 모델

정답: 1

핵심 암기표

주제	외울 문장
기본 개념	- 유비쿼터스는 언제 어디서나 자연스럽게 컴퓨팅을 이용하는 환경이다. (ubiquitous) - 유비쿼터스 공간은 물리공간과 전자공간의 융합이다. (핵심 문장) - 상황인식은 사용자, 위치, 시간, 환경 정보를 바탕으로 서비스한다. (맥락 기반)
HCI / HRI	- HCI는 인간과 컴퓨터의 상호작용이다. (computer) - HRI는 인간과 로봇의 상호작용이다. (robot)
하드웨어 요소	- SoC는 여러 기능을 하나의 칩에 통합한 것이다. (System on Chip) - MEMS는 초소형 기계·전자 시스템이다. (센서/구동) - RFID는 무선 주파수로 대상을 식별한다. (태그/리더) - USN은 유비쿼터스 센서 네트워크다. (센서+네트워크) - 나노기술은 초미세 단위 물질 조작 기술이다. (10^-9) - 차세대 전지는 모바일/센서 기기의 지속성을 높인다. (에너지)
유비쿼터스 네트워크	- 유비쿼터스 네트워크는 언제 어디서나 연결되는 네트워크다. (anytime)
클라우드	- 클라우드는 컴퓨팅 자원을 네트워크로 제공한다. (소유보다 이용) - 클라우드 장점은 확장성, 비용 효율, 접근성이다. - 클라우드 단점은 보안, 장애 의존성, 개인정보 문제다.
블록체인 · 핀테크	- 블록체인은 분산 원장으로 위변조가 어렵다. (탈중앙) - 핀테크는 금융과 IT의 결합이다. (finance+tech)
가상/현실 기술	- VR은 완전한 가상현실이다. (현실 차단) - AR은 현실 위에 정보를 덧붙인다. (현실 기반) - MR은 현실과 가상을 상호작용하게 섞는다. (혼합) - 메타버스는 지속적 가상 세계와 사회적 상호작용이다. (사회성)
응용 분야	- 스마트 자동차는 센서, 통신, AI, 자율주행을 결합한다. (자동차+ICT) - 빅데이터 3V는 Volume, Velocity, Variety다. (크기/속도/다양성) - AI는 학습, 추론, 인식 등 지능형 처리를 수행한다. (머신러닝 포함)
정보보호	- 정보보호 3요소는 기밀성, 무결성, 가용성이다. - 인증은 사용자가 누구인지 확인하는 것이다. (Authentication) - 접근통제는 허가된 자원만 사용하게 제한한다. (Authorization)

키워드 압축 카드

한 줄 공식

유비쿼터스 = 언제 어디서나 자연스럽게 컴퓨팅을 이용하는 환경.
핵심 = 물리공간 + 전자공간 융합.

기본 개념

유비쿼터스 공간 = 물리공간과 전자공간의 유기적 융합.
상황인식 = 사용자/환경/시간/위치 정보를 바탕으로 서비스 제공.
HCI = 인간-컴퓨터 상호작용.
HRI = 인간-로봇 상호작용.

디바이스/센서

SoC = 여러 기능을 하나의 칩에 통합.
MEMS = 초소형 기계·전자 시스템.
RFID = 무선 주파수 기반 식별.
USN = 유비쿼터스 센서 네트워크.
나노기술 = 초미세 단위 조작.
차세대 전지 = 모바일/센서 지속성 핵심.

네트워크/클라우드

유비쿼터스 네트워크 = 언제 어디서나 연결.
클라우드 = 컴퓨팅 자원을 네트워크로 제공.
장점 = 확장성, 비용 효율, 접근성.
단점 = 보안, 장애 의존성, 개인정보 이슈.

블록체인/핀테크

블록체인 = 분산 원장, 위변조 어려움.
특징 = 탈중앙화, 투명성, 무결성.
핀테크 = 금융 + IT.

VR/메타버스/스마트카

VR = 가상현실.
AR = 현실 위 정보 증강.
MR = 현실+가상 혼합.
메타버스 = 지속적 가상 세계/사회적 상호작용.
스마트 자동차 = 센서, 통신, 인공지능, 자율주행.

빅데이터/AI/보안

빅데이터 3V = Volume, Velocity, Variety.
AI = 학습/추론/인식 등 지능형 처리.
정보보호 3요소 = 기밀성, 무결성, 가용성.
개인정보보호와 인증/접근통제 중요.