N-coding

킹-오브-네트워킹(피터 전)으로 공부한 내용을 정리했습니다.

OSI(Open Systems Interconnection) 참조 모델

ISO에서 만든 컴퓨터 간 통신 단계: 컴퓨터 네트워크 프로토콜 디자인과 통신을 일곱 계층으로 나눈 것

1. Physical layer

역할: 인접 장비와의 연결을 위한 물리적 사양

주요 프로토콜: 100Base-TX, V.35

한쪽에서 전송하는 0과 1로 구성된 비트 단위 신호를 수신하고 구분

직접 연결된 두 장비 간의 통신 신호 송수신

2. Data link layer

역할: 인접 장비와의 연결을 위한 논리적 사양

주요 프로토콜: 이더넷, PPP, ARP

라우터로 구분된 구간에서 프레임이라는 데이터의 묶음을 전달함

물리 계층을 통해 수신한 0과 1로 이루어진 신호를 조합하여 프레임 단위의 묶음으로 해석

프레임(Frame): 이더넷에서 주고받는 데이터의 최소 단위

MAC(Media Access Control) 주소(물리적 주소): 네트워크 인터페이스에 할당된 고유 식별자
네트워크 상에서 서로를 구분하기 위해 Device마다 할당된 물리적인 주소로 영구적이고 고유함
LAN이나 Ethernet이라 불리는 망에서 통신을 하기 위해 사용하며 자신이 속한 네트워크 안에서만 통신 가능

이더넷(Ethernet): 네트워크에 연결된 기기들이 MAC 주소를 가지고 호스트 간 데이터를 주고받도록 하는 프로토콜

스위치(Switch): 네트위크 단위를 연결하는 통신 장비
MAC 주소 기반, 브로드캐스팅 X

3. Network layer

역할: 종단 장비 간의 데이터 전달

주요 프로토콜: IP, ICMP

통신 종단 장비 간 패킷이라는 데이터의 묶음을 전달함

라우터(Router): 각기 독립된 네트워크들을 연결하는 장치로 패킷을 전송하는 역할
서로 다른 네트워크를 중계함
IP 주소 기반

패킷(Packet): 네트워크를 오가는 데이터의 최소 단위

참고: 스위치와 라우터의 차이

4. Transport layer

역할: 종단 프로그램 간의 데이터 전달

주요 프로토콜: TCP, UDP

종단 장비에서 동작 중인 응용 계층 간 세그먼트라는 데이터의 묶음을 전달

TCP(Transmission Control Protocol): 전송 제어 프로토콜
패킷을 추적, 관리함

UDP(User Datagram Protocol): 사용자 데이터그램 프로토콜
데이터를 데이터그램(독립적인 관계를 지니는 패킷) 단위로 처리- IP 기반
비연결형 프로토콜
속도가 빠르고 네트워크의 부하가 적음 신뢰성이 낮아서 연속성이 중요한 서비스에 사용

5. Session layer

역할: 세션의 시작 및 종료 제어

주요 프로토콜: TCP session setup

종단 장비 간 세션(통신)의 시작, 종료 및 관리 절차 등 정의

메시지(Message): 송수신하는 데이터의 단위

6. Presentation layer

역할: 데이터의 표현 및 암호화 방식

주요 프로토콜: ASCII, MPEG, SSL

7. 응용 계층

역할: 응용 프로그램과 통신 프로그램간 인터페이스 제공

주요 프로토콜: HTTP, FTP, DNS

HTTP: 웹 브라우저에 필요한 데이터를 송수신할 때 사용

FTP: 파일 전송

DNS: 도메인 이름을 IP주소로 변환

SMTP: 메일 전송

TCP/IP

인터넷에서 사용되는 여러 가지 프로토콜을 통틀어 칭하는 것

물리 계층에 대한 언급 없음

2. Link layer

ARP(Address Resolution Protocol): LAN에서 상대 장비의 MAC 주소를 알아내기 위해 사용하는 프로토콜

3. Internet layer

ICMP(Internet Control Message Protocol): IP 네트워크 동작 확인을 위한 Ping, 트레이스 루트 등의 프로그램이 사용하는 프로토콜

IP: 패킷을 목적지 장비까지 전송하기 위한 용도

4. Transport layer

TCP, UDP: IP가 목적지 장비까지 전송한 패킷을 상위의 특정 응용 계층 프로토콜에게 전달

차이점: 세그먼트 전달의 신뢰성

TCP는 수신한 세그먼트에 에러 발생시 재전송을 요구하여 에러 복구함 - 처리 속도가 느리지만 신뢰성

UDP는 에러가 발생한 세그먼트를 폐기 - 처리 속도가 빠름

5. Application layer

HTTP

FTP

텔넷

SMTP

DNS

개인 공부 용도로 아무렇게나 정리함...

1. 서버 가상화 개요

1.1 가상화 기술 도입 배경

시스템은 피크 타임 기준으로 설계되어 있어서, 해당 기간이 지나면 나머지 리소스가 낭비됨

시스템에서 낭비되는 리소스를 효율적으로 활용하기 위함

1.2 가상화 기술 주요 특징

1. 파티셔닝: 하나 물리 시스템에서 여러 OS 실행, VM간 시스템 리소스 분배

2. 격리: HW 수준에서 결함 및 보안 격리, 고급 리소스 제어로 성능 유지

3. 캡슐화: 가상 머신 전체 상태를 파일에 저장 가능, 간편하게 VM 이동 및 복사

4. 하드웨어 독립성: 다른 물리 서버로 VM을 Provisioning 또는 Migration

* Provisioning: 시스템/서비스가 사용 가능하도록 준비하는 절차

* Migration: 다른 운영 환경으로 옮기는 작업

1.3 Hypervisor

호스트 컴퓨터(물리 시스템)에서 다수의 OS를 동시에 실행하기 위한 논리적 플랫폼

* VMware에서 나온 Hypervisor는 EXSi

* EXSi가 설치된 다수 VM을 통합 관리하는 것은 vCenter

* vSphere는 SW들을 전부 통합하고 있는 SW 패키지

1.4 Virtual Machine

하이퍼바이저가 설치된 호스트 위에 가상의 컴퓨터를 만들고, OS를 설치 및 운영할 수 있는 시스템

2. VMware vSphere 주요 특징

2.1 vSphere HA

가상머신이 상주하는 호스트(하이퍼바이저)를 클러스터로 구성하여 물리적 장애 발생 시 가성머신에 대한 고가용성을 제공함

장애 발생 시 vSphere HA 기능은 장애가 발생한 호스트의 가상머신을 클러스터 내의 다른 호스트에서 재시작

* HA(High Availability): 고가용성, 어떤 장치에 문제가 생겨도 다른 장치에서 문제가 생긴 장비의 작업을 이어받아 서비스의 다운 타임을 최소화하여 끊임 없는 작업 가능

* 클러스터(Cluster): 각기 다른 서버들을 하나로 묶어서 하나의 시스템처럼 동작하게 함

* VM을 클러스터로 묶으면 하이퍼바이저 안에서 마이그레이션 가능하기 때문에 어떤 서버에 문제가 생기면 다른 서버에서 서비스가 가능하다

* 물리적인 호스트에 장애가 발생해도 스토리지는 공유하기 때문에 다른 호스트에서 다시 시작할 수 있다

* 물론 리부트 타임 정도의 다운 타임은 발생한다

* legacy 환경에서는 HA를 위해 클러스터 소프트웨어를 설치한다

2.2 vSphere vMotion (Migration)

Host vMotion: 호스트 환경에서 동작하는 VM을 다른 호스트로 이동

Storage vMotion: VM이 저장되어 있는 데이터스토어 위치를 변경

* 호스트만 이동, 스토리지만 이동, 둘 다 이동도 가능

Live Migration: 호스트 환경에서 동작하는 VM을 서비스 다운 타임 없이 이동

2.3 VMware DRS

Distributed Resource Scheduler

여러 개의 호스트(하이퍼바이저)를 통해 구성한 클러스터 환경에 대해 리소스 균형을 자동으로 유지해 주는 기능

리소스 사용률이 높은 호스트의 VM을 자동으로 다른 호스트로 이동시켜 리소스 사용률 최적화

* 스케쥴 자동 계산

2.4 vSphere Thin-Provisioning

Thin Provisining은 실제로 사용한 공간 만큼만 VM에 물리적으로 할당하는 기술

* 80G 용량을 스토리지에 할당했을 때, 실제로 40G만 사용하고 있다면 그 VM은 40G만 사용하고 있는 것처럼 보인다

Thick Provisining은 논리적으로 할당한 공간 전체를 VM에 물리적으로 할당

* 80G 용량을 스토리지에 할당했을 때, 실제로 40G만 사용하고 있어도 남은 40G을 합해 80G 모두 해당 VM이 사용하고 있는 것처럼 보인다

Thin 방식은 보다 효율적으로 스토리지 공간을 활용할 수 있으나, Database처럼 중요한 시스템은 Thick 방식으로 사용

3. VMware vSphere 관리 솔루션

3.1 vCenter Server

여러 대의 호스트(하이퍼바이저) 설치 후 단일 환경에서 중앙 집중적으로 운영 및 모니터링 기능 제공

하이퍼바이저를 통합 관리해 줌

* OS 환경 영향을 받지 않는 단일 사용자 인터페이스 GUI 제공

* 이를 통해 VM 운영 및 관리 기능 제공

* 물리 시스템(호스트, 스토리지 등) 및 VM에 대한 중앙 관리, 모니터링 기능 제공

3.2 vSphere Web Client

VMware vSphere 6.x 버전부터 사용하고 있는 사용자 접근 프로그램

웹 브라우저를 통해 하이퍼바이저에 접근 가능

4. 시스템 운영

4.1 가상머신 관리 - 신규 가상 시스템 생성

OS 종류 지정하는 것은 이후 사용할 OS를 선택하는 것

4.2 가상머신 관리 - 게스트 운영체제 설치

4.3 가상머신 관리 - 가상 시스템 전원 관리

4.4 가상머신 관리 - 템플릿 가상 시스템 생성 및 배포

동일한 환경의 VM을 추가 생성하기 위한 배포 용도

4.5 가상머신 관리 - 가상시스템 복제(Clone)

특정 VM의 현재 상태를 그대로 가지는 새로운 VM을 생성하는 기능

* 하나는 보통 다운시켜 두고 문제가 생겼을 때 서비스

* 모든 설정값이 같기 때문에 충돌함

4.6 가상머신 관리 - 가상시스템 스냅샷(Snapshot) 생성 및 관리

VM 현재 시점에 대한 정보를 저장하여 추후 원하는 시점으로 복귀할 수 있도록 해 주는 기능

4.7 가상머신 관리 - 디스크 추가

VM 환경에 디스크를 추가할 경우 기본적으로는 ‘느리게 비워지는 Thick’ 타입으로 추가됨

스토리지 공간을 조금 더 효율적으로 사용하고자 할 경우 ’Thin’ 타입으로 변경

(첫 구성 권장은 빠르게 비워지는 Thick)

* VM디스크 추가 후 OS 내부에서도 디스크 및 파티션 추가 작업을 별도로 실행

4.8 가상머신 관리 - 디스크 제거

4.9 가상머신 이동 - vMotion

4.10 알람 및 경고 - 호스트 및 가상머신

4.11 작업 및 이벤트 - 호스트 및 가상머신

4.12 성능 그래프 - 호스트 및 가상머신

4.13 라이센스 - 설정 위치, 할당

4.14 계정 만들기 - 위치, 설정

4.15 그룹 만들기 - 위치, 설정

4.16 역할 권한 추가 - 위치, 설정, 권한 부여하기

4.17 글로벌 권한 추가 - 위치, 권한 부여하기

4.18 데이터 센터 생성

호스트는 한 데이터 센터에 소속되어야만 한다 (두 개 이상 센터에 소속 불가)

4.19 호스트 연결

4.20 Cluster 생성

클러스터로 호스트가 묶여야 vMotion(Migration) 가능

4.21 호스트를 Cluster로 이동

5. 기대효과

5.1 인프라 통합관리 체계 구축

1. Legacy한 개별 서버 관리 체계에서 클라우드 환경으로 전환하여 전체 가상화 인프라 모니터링 및 자원 할당 등 중앙 집중 관리

2. H/W 점검 및 파트 교환 시 다운 타임, 서비스 영향 없이 작업 가능

3. 장애 대비 고가용성 확보 (모든 구성 요소 이중화 HA etc)

4. 신규 시스템 공급, 증설 요청에 대한 빠른 대응 가능

6. 참고 자료

6.1 소프트웨어 정의 데이터센터(SDDC)

컴퓨터, 네트워크, 스토리지를 가상화하고 소프트웨어 컨트롤러를 통하여 통합 제어

데이터 센터 안에 vCenter 등이 있음

6.2 NSX가 제공하는 네트워크 기능 구성 요소

네트워크 가상화 솔루션 NSX는 Legacy 네트워크에 오버레이된 가상화 네트워크 환경 제공

논리적 스위치, 논리적 라우터, 논리적 방화벽, 로드 밸런서 및 VPN, 가상화 물리적 연결 제공

* 물리적 장비 없이 네트워크 가상화 불가능

* 가상화된 호스트 내 ip가 다른 app끼리 통신할 때에는 스위치에서 라우터를 거쳐 스위치를 통하는 불편한 통신을 해야 하는데 네트워크 가상화가 이루어지면 스위치를 거치지 않고 호스트 내에서 통신 가능

6.3 Virtual SAN

스토리지 가상화 솔루션 vSAN 데이터스토어에서는 VM별로 스토리지 서비스 수준을 지정하여 관리 가능

6.4 Cload 관리

사용자가 필요로 하는 자원 및 서비스를 자동화를 통해 시·공간에 제약받지 않고 Self-Service로 제공

클라우드 시스템에서 관리가 자동화

6.5 Docker 컨테이너

APP 단일 규격화

배경 이미지에 블러 효과를 적용하면 콘텐츠에 집중하기가 더 쉬워집니다.

주기적으로 배경 이미지를 바꿔야 한다면, 이미지 자체에 블러 효과를 넣어 편집하기보다는 코딩으로 처리하는 게 더 간편하겠죠. 하지만 단순하게 body에 배경 이미지를 적용하고 필터를 넣는 것만으로는 배경에 블러 처리가 되지 않습니다. 아래 코드는 그 예로, 블러 효과가 적용되지 않습니다.

body {
    background-image: url(bg.jpg);
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px);
}

위 소스를 적용해 보면 원본 그대로의 이미지가 적용되어 있어요. body나 html에 설정된 배경 이미지에는 필터가 적용되지 않습니다. 그래서 꼼수를 써야 합니다. body나 html에 적용하는 것 대신, 배경인 척하는 요소를 뒤에 깔면 됩니다.

예를 들면, 이미지 태그를 넣고 이미지 자체에 필터 효과를 넣는 거예요. 그리고 이미지에 position:fixed를 주고 화면 전체를 덮도록 위치시키는 거지요. 또는 화면 전체를 감싸는 div를 만들어서, 이 div의 배경 이미지로 설정하고 div에 필터 효과를 주면 됩니다.

그렇지만 고작 배경 이미지를 만드는 데에 html 요소를 넣기는 좀 부담스럽습니다. 그럴 땐 가상 선택자를 이용합니다. 이를 이용하는 방법은 간단합니다. body에 가상 선택자를 넣고 배경 이미지를 설정한 다음, 화면 전체를 덮도록 위치시킵니다. 필터 효과를 주고, z-index 값을 -1로 해 제일 뒤로 가게 설정하면 됩니다. 코드는 다음과 같습니다.

body::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(bg.jpg);
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px);
    z-index: -1; 
    content: "";
}

여기에서 배경 이미지가 이용자 모니터의 해상도보다 작을 경우, background-size: cover를 이용해 배경 이미지가 화면에 가득 차도록 크기를 조절할 수 있습니다. 억지로 늘리며 이미지가 깨지더라도 블러 효과가 적용되어 있으면 큰 결함이 되지 않습니다. 모바일 기기에 따라 뷰가 달라지지도 않고요. 일반적으로 body에 background-image를 적용하면 패턴 이미지가 아닌 이상 모바일 기기에 따라 배경 이미지가 다르게 보여서 맞추기 까다롭거든요.

다만 이렇게 적용한다면, 블러 필터를 넣은 것 때문에 배경 가장자리에 흐릿한 테두리가 생기게 됩니다. 아래 이미지의 테두리를 비교해 보세요.

우측 이미지처럼 테두리를 지우려면 어떻게 해야 할까요?

일단, transform: scale(1.02) 태그를 이용해 이미지 크기를 조금 키웁니다. 희미한 테두리는 블러 필터를 적용할 때 주는 수치 값만큼 생깁니다. 위에서는 filter: blur(5px) 태그로 테두리의 길이는 5px입니다. 만약 테두리의 길이가 길다면 배경도 그만큼 확대해 주어야 합니다.

그리고, html에 overflow: hidden 으로 배경 이미지를 확대하여 넘치게 된 부분(=희미한 테두리)을 보이지 않도록 설정합니다.

마지막으로 body에는 overflow: auto 값을 넣어서 스크롤이 생기게 합니다. body에 overflow: auto 를 설정해 주지 않으면 페이지에 스크롤 바가 생기지 않아요.

모두 합하면 아래 코드처럼 됩니다.

html	{ overflow: hidden; }
body	{ overflow: auto; }
body::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(bg.jpg);
    background-size: cover;
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px);
    transform: scale(1.02);
    z-index: -1; 
    content: "";
}

이와 관련하여 읽어 볼 만한 글입니다. https://css-tricks.com/apply-a-filter-to-a-background-image

저는 블러 필터에 한하여 설명하였지만, 다른 필터를 여러 개 사용하는 법에 대해서도 소개되어 있어요. 레이어를 이용해 이미지 편집 없이 코드만으로 이미지에 여러 효과를 줄 수 있으니, 필요하신 분은 읽어 보시는 게 좋을 것 같습니다.

직접 작성한 글이므로 스크랩 하실 때에는 출처를 남겨 주세요:)

2021년 9월 16일 수정

이 글을 처음 작성할 때에는 아래의 속성이 없었습니다. 해당 속성이 생긴 지 꽤 오래되었음에도 이 포스트를 열람하시는 분이 꽤 되어 첨언해 둡니다.

backdrop-filter: blur(5px);

지금은 해당 속성으로 편하게 백그라운드 이미지에 블러 처리가 가능하니 참고하세요!

background image를 설정한 곳에 해당 속성을 추가하기만 하면 됩니다.

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter