[혼공얄코] 다양한 IT 용어 학습하기 (3주 차)

💾 혼공학습단 12기

챕터 2. 개발자 따라가기: 인공지능 기술 알기

02-3 생성형 인공지능 서비스 둘러보기

1. 대표적인 대화형 인공지능 서비스

OpenAI - 챗GPT, 마이크로소프트 - 코파일럿, 구글 - 제미나이 등은 채팅을 하듯 텍스트로 문답을 주고받을 수 있는 대화형 인공지능임
- 챗GPT: 창의성을 바탕으로 한 생성 작업에 특화되어 있음
- 코파일럿: MS의 검색 엔진인 빙의 데이터와 정보를 기반으로 하여 보다 정확하고 신뢰할 수 있는 답변 제시
- 제미나이: 구글의 실시간 검색 데이터를 기반으로 역시 신뢰성 있는 답변을 제공
대화형 인공지능의 코딩 기능
- 코딩 기능 제공함

2. 생성형 인공지능 서비스

달리: OpenAI에서 개발한 이미지 생성형 인공지능 서비스, 텍스트 설명을 보고 그에 맞는 이미지를 만드는 인공지능
미드저니: 미드저니라는 연구실에서 개발한 인공지능 기반 이미지 생성 도구로, 주로 디스코드를 통해 사용됨. 사용자들은 디스코드의 특정 채널에서 직접 텍스트 명령으로 이미지를 요청하고 생성할 수 있음
드래그 겐: 사용자가 이미지의 특정 포인트를 마우스로 드래그하여 자세, 형태, 표정, 레이아웃 등을 정밀하게 조정할 수 있음

3. 기타 생성형 인공지능 서비스

동영상 관련 서비스
- 런웨이 젠2: 미국의 런웨이 리서치에서 개발함. 텍스트 입력이나 주어진 이미지를 바탕으로 동영상을 생성하고 편집하는 서비스임
- 신시시아: 주어진 대본으로 사람이 말하는 것 같은 동영상을 만들어 내는 서비스
작곡 서비스
- 뮤즈넷: OpenAI. 다양한 악기와 스타일로 음악을 작곡
- 마젠타 프로젝트: 구글. 인공지능을 통한 음악과 예술 창작에 중점을 둠. MIDI 생성을 용이하게 함
- Soundraw: 사용자가 원하는 장르, 기분, 템포에 따라 고유한 음악을 생성해 냄
- Soundful: 인공지능으로 비디오, 스트림, 팟캐스트 등을 위한 로열티 프리 배경 음악을 만들어 냄
설치형 코딩 지원 서비스
- 개발자들이 IDE 및 코드 에디터에서 사용할 수 있는 플러그인 형태의 인공지능 코딩 지원 서비스
- 마이크로소프트 - 깃허브 코파일럿, AWS - 위스퍼러, 탭나인, 코디움
코딩하지 않고 개발하기
- 노크드(No code)
- 이마지카 인공지능

프롬프트

우리가 인공지능에게 말을 걸 때 쓰는 특별한 종류의 '시작 신호'

형태
- 텍스트 프롬프트: 질문, 설명, 배경지식, 제약 조건 또는 명령의 형태일 수 있음
- 이미지 프롬프트: 이미지를 사용하여 시각적인 정보 제공
- 오디오 프롬프트: 음성 인식, 음악 생성 등 오디오 관련 작업을 위해 사용
효과적인 프롬프트 작성 방법
- 명확하고 간결하게
- 구체적인 정보 제공
- 목적을 분명히 하기
- 반복과 수정을 통해 개선하기

챕터 3. 개발자와 소통하기: IT 업계 용어 알기

03-1 서버는 뭐고 AWS는 뭔가요

1. 서버와 클라이언트

서버: 서비스를 저장하고 있다가 필요한 경우 네트워크를 이용해 사용자의 컴퓨터 혹은 스마트폰으로 전달해 줌
클라이언트: 정보를 서버 컴퓨터로부터 받아 오는 역할

2. 데이터 센터

서버는 역할에 적합한 하드웨어 성능을 갖춰야 하고, 언제 어디서든 접속할 수 있는 안정적인 네트워크는 물론 해킹으로부터 안전해야 함. 그리고 적절한 온도나 습도를 유지해야 할 뿐만 아니라 정전이 나거나 기기에 물을 쏟거나 화재가 나는 등의 사고를 미연에 방지하고 혹여 사고가 났을 때 빠르게 대처할 수 있어야 함
위와 같은 조근을 갖춘 전문 시설을 데이터 센터, 또는 IDC라고 함
서버 호스팅: 서버용 컴퓨터를 임대해 주는 서비스
- 온프레미스의 한계로 인해 발생하는 비용을 절감할 수 있음
- 유출되어서는 안 되는 정보를 외부 컴퓨터에 둔다는 리스크 있음
온프레미스: 회사에서 자체적으로 서버를 갖추고 관리하는 것
- 서버에 관한 모든 것을 직접 구성하고 통제할 수 있다는 장점이 있음
- 다만 그만큼 서버에 대한 해박한 지식과 경험이 있는 인력을 필요로 함
- 자체 서버를 두기 위한 물리적 공간과 환경 또한 갖춰야 함
단순 서버 호스팅 단점
- 사용 가능한 용량이 한정적
- 서버에 대한 많은 지식 필요

3. 클라우드 컴퓨팅

서버, 저장소, 데이터 베이스, 네트워킹, 소프트웨어 등과 같은 컴퓨팅 서비스를 인터넷(클라우드)으로 제공하는 방식
아마존 AWS, 마이크로소프트 애저, 구글의 GCP, 네이버의 NCP 등
가상화 기술을 사용하여 수많은 컴퓨터를 클라우드 형태로 합친 다음 사용자들에게 필요한 만큼 작은 조각들로 떼어서 임대함
필요에 따라 사용량을 탄력적으로 조절할 수 있음
서버 사용에 필요한 어려운 기술적 요소들을 제공받을 수 있음

4. 인프라 vs 플랫폼 vs소프트웨어

IasS(이아스, 아이아스)
- 클라우드를 이용해서 서버용 인프라, 즉 가상화된 서버 컴퓨터를 대여해 주는 서비스
- 서버에 보안, 네트워크 등 각종 설정부터 소프트웨어 설치, 서비스 실행 및 관리까지 직접 수행
- AWS의 EC2
Paas(파스)
- 애플리케이션을 개발하고 서비스하기 위해 필요한 서버, 운영체제, 개발 환경 등을 자동으로 설치하고 제공함으로써 사용자가 애플리케이션 개발에만 집중할 수 있도록 프랫폼을 제공함
- 소프트웨어에만 개발하면 손쉽게 애플리케이션을 실행, 배포할 수 있음
- AWS의 일래스틱 빈스토크나 헤로쿠 등
SaaS(싸스)
- 소프트웨어가 이미 완성된 형태로 제공됨
- 초기 구축 비용을 줄일 수 있는 장점이 있음
- 제공 업체가 만들어 놓은 서비스를 그대로 사용해야 하기 때문에 불필요한 기능이 비용에 포함되어 있기도 함
- 구글 드라이브, 네이버 MYBOX, 드롭박스, MS 오피스 365 등

03-2 웹사이트는 어떻게 만들어지나요?

1. 웹 브라우저

웹 사이트를 열어 인터넷 서핑을 하는데 사용되는 소프트웨어를 웹 브라우저, 흔히 줄여서 브라우저라고 부름
웹 페이지는 HTML 을 읽어서 브라우저 화면에 나타난 결과임. HTML과 함께 웹사이트를 구성하는 다른 핵심 요소가 있는데, 바로 CSS와 자바스크립트임
HTML이 웹 페이지의 각 요소들을 배치하는(가져다 놓는) 역할은 한다면, CSS는 요소를 디자인하는(꾸미는) 역할을 하고, 자바스크립트는 요소에 프로그램으로 기능들을 넣어주는(시키는) 역할을 함

2. HTML

요소를 가져다 놓는 마크업 언어

<body>
  <div>
    <h1> 버튼 클릭 수 표시 </h1>
    <span> 0 </span>
    <button> 클릭! </button>
  </div>
</body>

`<>` 안에 글자가 들어간 body, div, h1 같은 요소를 태그라고 부름. 태그는 시작 태그와 끝 태그로 구성되어 있음
시작 태그와 끝 태그 사이에 또 다른 태그가 들어갈 수 있음
각 태그는 웹 페이지 화면에 놓일 요소를 뜻함

3. CSS

요소를 꾸미는 스타일 언어

body {
  margin: 24px;
}
div {
  display: inline-block;
  padding: 12px 32px 24px 32px;
  border: 2px solid #b6d4fe;
  background-color: #cfe2ff;
  border-radius: 12px;
  text-align: center;
}
...

4. 자바스크립트

일을 시키는 프로그래밍 언어
동적인 기능을 구현하는 데 사용
- 사용자의 클릭에 따라 각종 기능을 수행하고, 화려한 그래픽 애니메이션을 보여주고, 드래그로 조작 가능한 지도를 화면에 넣는 등 풍성한 기능을 제공함

    let count = 0;
    document.querySelector("button")
    .addEventListener("click", () => {
      document.querySelector("span")
      .innerText = ++count;
    })

5. 웹 표준

브라우저마다 HTML, CSS, 자바스크립트 코드를 실행하는 방식에 유의미한 차이가 없도록 해서 개발자들이 브라우저 문제로부터 자유롭게 웹사이트를 프로그래밍할 수 있도록 한 것

6. 반응형 vs 적응형

반응형 웹사이트 (반응형 웹)
- 페이지 내 요소들을 신축성 있게 만들어 기기나 화면 크기에 맞게 너비나 높이, 위치 등을 자동으로 조절하는 웹사이트
- 각 웹 페이지를 하나씩만 만들되, 메뉴나 본문 영역, 메인 이미지 등과 같은 콘텐츠들의 모습을 화면 크기에 따라 어떻게 바꿀지 CSS와 자바스크립트로 프로그래밍함
- PC와 태블릿, 모바일 전용 웹 페이지를 따로 만들 필요 없음
적응형 웹사이트 (적응형 웹)
- 화면 크기에 따라 PC용과 모바일용 웹사이트를 따로 만드는 것
- 스마트폰의 브라우저로 접속했을 때 'm.naver.com'과 같이 앞에 m이 붙는 것처럼 pc와는 다른 주소로 열리는 웹 페이지가 적응형 웹사이트임
- 복잡한 사이트일 경우에는 반응형보다 경제적인 선택일 수 있음

03-3 쿠키, 토큰, 캐시는 일상에서 쓰는 그 단어인가요?

1. 쿠키

브라우저에 저장되는 정보
크롬이나 사파리 같은 브라우저에 저장되는 작은 텍스트 조각
사용자는 브라우저의 설정 화면이나 개발자 도구에서 쿠키를 확인하고 수정, 삭제할 수 있음
다만 쿠키는 당사자뿐만 아니라 제삼자가 조회하는 것도 가능하기 때문에 개인 정보를 담은 내용이나 보안상 민감한 정보를 저장하는 데에는 적합하지 않음

2. 세션

서버거 나를 알아보는 방법
사용자가 사이트에 한 번 로그인하면 유효기간이 끝날 때까지 더 이상 아이디와 비밀번호를 입력하지 않아도 되도록 사용자가 이미 서버로부터 인증받았음을 증명해 주는 세션이라는 증서가 필요함
사용자가 서버에 올바른 아이디와 비밀번호로 로그인에 성공하면 서버는 세션 아이디라는 데이터를 만듦
`2sd98dbawix4`와 같은 식으로 알파벳과 숫자가 혼합된 형식
장점: 메모리에 올려둔 데이터를 빠르게 확인할 수 있음
단점: 공간이 한정되어 있음. 서버에 동시에 접속하는 사용자가 많아지면 메모리 공간이 부족해져 서버에 부하가 걸리고 화면이 움직이지 않는 등의 문제가 발생할 수 있음

3. 토큰

세션과는 또 다른 로그인 유지 방식
토큰에는 특수한 수학적 원리가 적용되어 있어서 마치 위조 방지 장치가 있는 지폐처럼 서버만이 유효한 토큰을 발행할 수 있음
해당 서버만이 만들 수 있는 토큰을 발급함으로써 상태를 저장하지 않고도 사용자의 로그인 여부를 파악할 수 있도록 함
한 번 발행한 토큰은 유효기간이 끝나기 전까지 따로 통제할 수 없기 때문에 세션에 비해 토큰 정보를 탈취당할 가능성이 높음
쿠키처럼 만료 기간을 정할 수 있어서 만료 시간을 짧게 지정해 피해를 줄일 수 있음

4. 캐시

한 번 전송받은 데이터를 저장해 놨다가 다시 시용할 때 꺼내 써서, 반복적으로 서버에 데이터 전송을 요청할 필요가 없음
반복적으로 사용하는 콘텐츠를 빠르게 이용할 수도 있고, 데이터 사용량도 줄일 수 있음

5. CDN

CND (콘텐츠 전송 네트워크)
지리적으로 분산된 여러 개의 서버를 이용해 웹 콘텐츠를 사용자와 가까운 서버에서 전송함으로써 전송 속도를 높임

03-4 스마트폰 앱인데 웹사이트라고요?

1. 네이티브 앱

각 운영체제에 맞는 앱을 개발하는 방법
안드로이드 vs iOS
각 스마트폰의 모든 기능을 사용할 수 있고 성능 또한 최대치로 활용할 수 있음
단점
- 안드로이드 개발자와 iOS 개발자. 또는 이 둘을 능숙하게 프로그래밍할 줄 아는 개발자 필요
- 앱을 공개하거나 업데이트하는 데 있어서도 까다로움이 있음

2. 크로스 플랫폼

하나의 모바일 앱을 두 개의 운영체제로 개발해야 하는 번거로움을 해소하기 위한 고민과 노력이 있었고, 그 결과로 크로스 플랫폼 프레임워크가 만들어짐
같은 소스 코드로 안드로이드 버전과 iOS 버전에서 모두 작동할 수 있는 앱을 만드는 개발 도구
구글 - 플러터, 페이스북 - 리액트 네이티브, 마이크로소프트 - 닷넷 마우이(구 자마린)
크로스 플랫폼 앱: 에어비앤비, 페이스북, 인스타그램
한계
- 각 운영체제에 특화된 방식으로 제작된 '순정' 프로그램은 아니기 때문에 프레임워크마다 정도의 차이는 있지만, 네이티브 앱에 비해 성능을 100% 끌어올릴 수 없고 기기의 활용도 떨어짐
- 앱의 주요 기능을 업데이트할 때마다 양쪽 앱 마켓의 심사를 거쳐야 한다는 단점 역시 여전히 존재함

3. 웹 앱

스마트폰의 기종이나 기기에 상관없이 모든 단말기에서 같은 콘텐츠를 볼 수 있는 웹사이트임. 반응형 혹은 적응형 방식을 사용해서 모바일 기기에서 사용하기 적합한 형태로 만든 웹사이트
앱 마켓에서 다운로드해 설치하는 응용 프로그램이 아니라 크롬이나 사파리 등의 브라우저 앱에 접속해서 이용할 수 있는 애플리케이션
모바일 앱과 비슷한 UI/UX를 지원하는 웹사이트
새 기능을 추가할 때마다 앱 마켓의 심사 과정을 거치는 앱과 달리, 웹 앱은 서버에 파일을 업로드해서 사이트 내용만 바꿔주면 업데이트되므로 언제나 최신 버전으로 유지할 수 있음
단점: 스마트폰에서 설치된 브라우저에서 동작하는 웹사이트이기 때문에 웹 앱으로 할 수 있는 일은 '브라우저로 할 수 있는' 기능에 한정되어 있음

4. 하이브리드 앱

네이티브 앱과 웹 앱의 장점을 합침
앱의 대다수 콘텐츠를 웹사이트로 제공하면서 추가로 네이티브 앱에서 사용 가능한 기능까지 제공하는 앱
네이티브 또는 크로스 플랫폼 방식으로 앱을 만들되 화면 안에 요소를 직접 만들지 않고, 브라우저 역할을 하는 웹 뷰라는 요소를 만들어 대신 웹 화면을 띄움
웹 뷰는 지정된 주소로 접속해서 웹 앱 형태로 만들어진 웹사이트를 화면에 보여줌
사용자는 이 웹 뷰를 통해 웹사이트로 만들어진 기능을 앱 기능처럼 사용함
그리고 웹 사이트에서 제공할 수 없는 하드웨어 기능인 카메라나 푸시 알림 같은 기능은 네이티브 단에서 자체적으로 수행하도록 하는 것임

5. PWA

PWA (Progressive Web Apps, 프로그레시브 웹 앱)
기본적으로 앱이 아닌 모바일 웹사이트임
웹 앱이지만 스마트폰과 PC의 바탕 화면에 아이콘 설치가 가능하고, 푸시 알림을 보낼 수 있는 등 기존의 웹 앱이 갖추지 못했던 접근성과 편의성을 제공함
한계: 브라우저마다 사용할 수 있는 기능의 차이가 있음

03-5 웹의 보이는 곳과 보이지 않는 곳

1. 프론트엔드

웹사이트를 구성하는 부분 중 브라우저에서 동작하는 쪽을 말함
브라우저에서 자바스크립트로 동작하는 부분은 점점 늘어났고, 이를 프로그래밍하는 일도 복잡해지고, 고도화되었음
클라이언트 컴퓨터에서 동작하는 부분이므로 프론트엔드 개발자를 클라이언트 개발자라고 부르기도 함

2. 백엔드

브라우저가 요청하는 부분, 즉 서버에서 작동하는 부분을 말함
백엔드 개발자를 서버 개발자라고 함
데이터 처리같이 눈에 직접 보이지 않는 웹사이트의 요소들은 백엔드에서 수행됨
자바, 파이썬, 자바스크립트, C#, PHP, 루비 등

3. 프레임워크

백엔드 개발자들이 보다 수월하게 개발할 수 있도록 도와주는 프로그램 제작 키트
라이브러리
- 특정 기능을 수행하는 소프트웨어 조각이자 여러 프로그램에 들어갈 수 있는 부품
프레임워크
- 라이브러리와 자체 코드를 엮어 필요한 소스 코드를 추가하는 것만으로 원하는 프로그램을 개발할 수 있도록 만들어진 키트
백엔드: 자바 - 스프링, PHP - 라라벨, 파이썬 - 장고 | 플라스크, 자바스크립트 - 익스프레스, C# - 닷넷
프론트엔드: 앵귤러, 뷰, 리액트 (리액트는 라이브러리로 구분)

4. API

어떤 주제에 대한 프로그램 간의 소통을 위해 만들어진 신호 체계
REST API (Representational State Transfer API): 보편적으로 공유되는 API 설계 방식
한 주체가 다수의 타 주체에게 특정 기능을 개방할 때도 사용됨 (공공 데이터 포털 -> 날씨, 행정, 법률 등)

5. XML, JSON, YAML, AJAX

XML
- HTML처럼 마크업 언어임
- HTML과 같은 원리이며, XML에도 동일한 태그가 사용됨
- 각 항목은 해당 이름의 태그 사이에 정보가 들어 있는 형태로 구성됨
- 플랫폼 간 데이터를 주고받는 데 사용하는 언어임
JSON
- XML보다 구문이 간단하고 높은 가독성을 가지고 있음
- 각 항목마다 따옴표가 붙고 그 뒤에 대괄호[]로 둘러싸인 배열과 중괄호{}로 둘러싸인 또 다른 객체가 오는 식으로 정보가 작성됨
- 단점: 문법 오류에 취약해서 따옴표나 괄호가 하나만 빠져도 문서 전체를 읽을 수 없음
YAML (야믈)
- 정보 인식을 위해 줄바꿈과 들여쓰기가 필수 문법 요소임
- 프로그램 설정 파일과 같이 개발자가 편리하게 읽고 작성하기 우한 용도로 사용됨
AJAX
- 자바스크립트를 이용해 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능을 함
- Asynchronous Javascript And Xml의 약자
- 비동기 방식이란 여러 기능이 순차적으로 실행을 기다리는 것이 아니라 각자 독립적으로 작업을 수행하며 결과를 제출하는 방식임

기본 숙제(필수)

Ch.03(03-5) 확인 문제 풀고 인증하기 (p.202~203)

03-5 확인 문제

1. 다음 중 문장에 들어갈 알맞은 단어를 보기에서 찾아 작성해 보세요.

1. 프론트엔드 / 2. 백엔드 / 3. 클라이언트 / 4. 서버

프론트엔드 개발자는 다른 말로 (클라이언트) 개발자, 백엔드 개발자는 (서버) 개발자라고도 합니다.
웹사이트 화면에 애니메이션처럼 작동하는 작업은 (프론트엔드)에서, 로그인한 사용자를 위해 세션을 설정하는 작업은 (백엔드)에서 진행합니다.

2. 다음 중 틀린 것을 고르세요.

프레임워크에는 라이브러리가 포함될 수 없습니다.
국가에서 공개적으로 제공하는 API로 세금 알림 앱을 만들 수 있습니다.
프로그램 간 주고받을 데이터의 용량을 줄이려면 XML보다 JSON이 유리합니다.
프론트엔드 개발자와 백엔드 개발자 사이에는 긴밀한 협업과 원활한 소통이 필요합니다.

3. 다음 중 나머지 넷과 성격이 다른 하나를 고르세요.

스프링
라라벨
REST API
닷넷
장고

4. 다음 문장 중 괄호 안에 알맞은 내용을 작성해 보세요.

JSON은 XML과 비교할 때 간결하고 가독성이 좋은 대신 (주석)(을)를 달 수 없다는 단점이 있습니다.

5. 다음 중 틀린 것을 고르세요.

돔은 API입니다.
프레임워크는 프론트엔드와 백엔드 모두에서 사용될 수 있습니다.
YAML은 네트워크상의 주체 간 정보 전달을 목적으로 사용됩니다.
AJAX의 등장은 프론트엔드와 백엔드 분리에 기여했습니다.
프론트엔드와 백엔드의 개념은 모바일에서도 적용될 수 있습니다.

추가 숙제(선택)

Ch.02(02-3) 생성형 인공지능 서비스 둘러보고 직접 사용해보기(뤼튼에서 챗GTP4를 무료로 사용해 보세요: https://wrtn.ai/)

wrtn

Gemini

ChatGPT

3주 차 후기

이번 기회에 다양한 생성형 인공지능 서비스가 있다는 것을 알게 되었다.

현재는 사용하는 것만 사용을 하지만, 나중에 이미지나 동영상과 관련된 인공지능 서비스도 사용해 봐야겠다.

그리고!

챕터 3을 통해 다양한 IT 용어를 알 수 있었다.

단어를 어디선가 들어본 것 같은데? 하는 것들이 있다.

그렇게 들어본 것 같은 단어들에 대한 개념을 잡을 수 있는 시간이었다.

아마 실무를 한다면, 이 파트가 정말 많이 도움이 되지 않을까 생각한다.

왜냐하면!

이전에 개정 전에 읽었던 책 덕분에 나 또한 IT 용어를 알게 되었고, 실무에서 써먹고 있기 때문이다.

아무튼 3주 차 끝!

한빛미디어 <혼자 공부하는 얄팍한 코딩 지식> 책 참고

'ETC > LEARN' 카테고리의 다른 글

[혼공얄코] 프로그래밍 용어 습득하기 (5주 차) (0)	2024.08.06
[혼공얄코] 요청 메소드와 응답코드, 리눅스에 대한 학습 (4주 차) (0)	2024.07.23
[혼공얄코] 가깝지만 먼 AI에 대해 알아가기 (2주 차) (0)	2024.07.11
[혼공얄코] 혼자 공부하는 얄팍한 코딩 지식 시작! 다시 혼공학습단! (0)	2024.07.02
SQL 실습 따라하기 01 (0)	2024.05.06