테마
02. 데이터 표현 - 색상, 이미지, 용량
학습 목표
- 컴퓨터가 문자를 표현하는 원리(문자 부호 체계)를 이해한다.
- RGB 색상 체계와 알파 채널의 개념을 설명할 수 있다.
- CSS에서 색상을 16진수로 표기하는 방법을 익힌다.
- 화소(Pixel)와 해상도의 관계를 이해한다.
- 비트맵 이미지의 구조와 용량 계산 방법을 익힌다.
- 이미지 압축의 필요성과 기본 원리를 파악한다.
- 데이터 용량 단위 체계(B ~ YB)를 정리하고, 비트 수와 주소 공간의 관계를 이해한다.
전체 구조
세부 내용
1. 컴퓨터가 문자를 다루는 방법
컴퓨터 내부에는 오직 **숫자(0과 1)**만 존재한다. 그렇다면 우리가 화면에서 보는 글자 A, 가, @ 같은 것들은 어디서 오는 것일까?
답은 **문자 부호 체계(Character Encoding)**에 있다. 이것은 일종의 "약속된 변환표"다.
실생활 비유: 전화기가 없던 시절, 깃발 신호로 의사소통하던 해군을 생각해 보자. "빨간 깃발 두 번 = 전진", "파란 깃발 한 번 = 정지"처럼 신호와 의미를 대응시킨 약속표가 있었다. 문자 부호 체계도 정확히 같은 원리다. 숫자 65를 보면 A로 표시하자는 약속이다.
ASCII (American Standard Code for Information Interchange)
- 영문 알파벳, 숫자, 특수문자를 표현하는 가장 기본적인 부호 체계
- 1개 문자 = 1바이트(8비트), 0~127 범위의 숫자에 문자를 대응
- 예시:
A= 65,B= 66,a= 97,0= 48,(공백) = 32
한글 인코딩
ASCII는 영문만 다루기 때문에 한글을 위한 별도의 약속이 필요하다.
| 인코딩 방식 | 한글 1글자 크기 | 특징 |
|---|---|---|
| EUC-KR | 2바이트 | 한국에서 오래 사용한 방식. 표현 가능한 글자 수에 한계가 있음 |
| UTF-8 | 3바이트 | 전 세계 문자를 포괄하는 유니코드 기반. 현재 웹 표준 |
핵심 원리
컴퓨터는 숫자만 안다. 우리가 미리 약속한 변환표(부호 체계)에 따라 숫자를 문자로 보여주는 것일 뿐이다. 같은 숫자라도 어떤 부호 체계를 쓰느냐에 따라 다른 글자가 화면에 나타난다. 한글이 깨지는 현상은 대부분 "보내는 쪽과 받는 쪽이 서로 다른 변환표를 사용하기 때문"이다.
2. RGB 색상 체계
우리가 화면에서 보는 모든 색은 빛의 3원색인 Red(빨강), Green(초록), Blue(파랑)를 섞어서 만든다.
실생활 비유: 무대 조명을 떠올려 보자. 빨간 조명, 초록 조명, 파란 조명 세 개가 있다. 각 조명의 밝기 다이얼을 0(꺼짐)부터 255(최대 밝기)까지 조절할 수 있다. 이 세 개의 다이얼 조합으로 거의 모든 색을 무대 위에 만들어낼 수 있다.
각 채널의 구조
- R (Red): 8비트, 0~255 (256단계)
- G (Green): 8비트, 0~255 (256단계)
- B (Blue): 8비트, 0~255 (256단계)
대표 색상 예시
| RGB 값 | 결과 색상 | 설명 |
|---|---|---|
| (255, 0, 0) | 순수 빨강 | R만 최대, 나머지 0 |
| (0, 255, 0) | 순수 초록 | G만 최대, 나머지 0 |
| (0, 0, 255) | 순수 파랑 | B만 최대, 나머지 0 |
| (255, 255, 0) | 노랑 | R+G 최대, B 0 |
| (0, 0, 0) | 검정 | 모든 빛이 꺼짐 |
| (255, 255, 255) | 흰색 | 모든 빛이 최대 |
| (128, 128, 128) | 회색 | 모든 빛이 중간 |
24비트 컬러
R(8비트) + G(8비트) + B(8비트) = 24비트로 하나의 색을 표현한다. 이론상 표현 가능한 색의 수는 256 x 256 x 256 = 약 1,677만 색이다.
3. 알파 채널과 32비트 True Color
알파 채널이란?
RGB만으로는 투명도를 표현할 수 없다. 포토샵이나 웹에서 반투명한 이미지를 다루려면 "이 픽셀이 얼마나 투명한가"라는 정보가 추가로 필요하다. 이것이 알파(Alpha) 채널이다.
실생활 비유: 선글라스를 생각해 보자. 진한 선글라스(알파 값 높음)를 쓰면 뒤의 풍경이 거의 안 보인다. 옅은 선글라스(알파 값 낮음)를 쓰면 뒤가 비쳐 보인다. 알파 채널은 각 픽셀마다 이런 "선글라스 농도"를 지정하는 것이다.
RGBA 구조
| 채널 | 비트 수 | 범위 | 의미 |
|---|---|---|---|
| R (Red) | 8비트 | 0~255 | 빨강 강도 |
| G (Green) | 8비트 | 0~255 | 초록 강도 |
| B (Blue) | 8비트 | 0~255 | 파랑 강도 |
| A (Alpha) | 8비트 | 0~255 | 투명도 |
- Alpha 0 = 완전 투명 (해당 픽셀이 아예 안 보임)
- Alpha 255 = 완전 불투명 (해당 픽셀이 온전히 보임)
- Alpha 128 = 반투명 (뒤에 있는 레이어가 절반쯤 비쳐 보임)
R(8) + G(8) + B(8) + A(8) = 32비트, 이것이 32비트 True Color이다.
여러 레이어를 겹칠 때 각 픽셀의 알파 값에 따라 색상이 합성된다. 예를 들어 빨간 반투명 레이어 위에 파란 반투명 레이어를 올리면 보라색 계열이 된다.
4. CSS에서의 색상 표기
웹 개발에서 색상을 지정할 때 가장 많이 쓰는 방식이 #RRGGBB 형식이다.
읽는 방법
#B71C1C를 예시로 분해해 보자.
| 위치 | 16진수 값 | 10진수 변환 | 채널 |
|---|---|---|---|
| 앞 두 글자 | B7 | 11 x 16 + 7 = 183 | R (빨강) |
| 중간 두 글자 | 1C | 1 x 16 + 12 = 28 | G (초록) |
| 마지막 두 글자 | 1C | 1 x 16 + 12 = 28 | B (파랑) |
따라서 #B71C1C는 빨강이 강하고 초록과 파랑이 약한 **진한 빨간색(다크 레드)**이다.
왜 16진수 두 글자인가?
- 16진수 한 글자 = 4비트 (0~F = 0~15)
- 16진수 두 글자 = 8비트 (00~FF = 0~255)
- 즉, **두 글자가 정확히 한 채널(8비트)**을 표현한다.
자주 쓰는 CSS 색상
| 코드 | 색상 | 설명 |
|---|---|---|
#000000 | 검정 | 모든 채널 0 |
#FFFFFF | 흰색 | 모든 채널 255 |
#FF0000 | 빨강 | R=255, G=0, B=0 |
#00FF00 | 초록 | R=0, G=255, B=0 |
#0000FF | 파랑 | R=0, G=0, B=255 |
#808080 | 회색 | 모든 채널 128 |
실전 활용
운영체제의 그림판이나 색상 선택기에서 RGB 값을 직접 입력해 볼 수 있다. CSS에서 #B71C1C로 지정한 색상과 그림판에서 R=183, G=28, B=28로 입력한 색상은 완전히 동일하다. 이 원리를 알면 디자이너가 전달한 색상 코드를 즉시 해석할 수 있다.
5. 화소(Pixel)와 해상도
화소(Pixel)란?
화면을 구성하는 가장 작은 점 하나를 화소(Pixel, Picture Element)라고 한다.
실생활 비유: 욕실 타일 벽을 생각해 보자. 멀리서 보면 하나의 큰 그림이지만, 가까이 가면 작은 타일 하나하나가 각각의 색을 가지고 있다. 화면의 화소도 마찬가지다. 각 화소는 자기만의 RGB(A) 색상 정보를 가지고 있고, 수십만 개의 화소가 모여 하나의 이미지를 이룬다.
화소의 속성
- 각 화소는 고유한 RGB(A) 값을 가진다.
- 화소 하나의 크기가 작을수록 같은 면적에 더 많은 화소가 들어간다.
- 화소가 충분히 작으면 사람의 눈으로 개별 점을 구분할 수 없다.
해상도(Resolution)
해상도는 화면의 가로 화소 수 x 세로 화소 수로 표현한다.
| 해상도 명칭 | 가로 x 세로 | 총 화소 수 |
|---|---|---|
| HD | 1280 x 720 | 약 92만 |
| Full HD | 1920 x 1080 | 약 207만 |
| 2K (QHD) | 2560 x 1440 | 약 368만 |
| 4K (UHD) | 3840 x 2160 | 약 829만 |
레티나 디스플레이
Apple의 레티나(Retina) 디스플레이는 같은 물리적 크기에 훨씬 더 많은 화소를 밀어 넣어서, 사람의 눈이 일반적인 시청 거리에서 개별 화소를 구분할 수 없는 수준을 달성한 디스플레이다. 같은 면적에 화소가 2~3배 많으므로 글자와 이미지가 매우 선명하게 보인다.
6. 비트맵(Bitmap) 이미지
비트맵이란?
비트맵은 각 화소의 색상 정보를 하나하나 모두 나열한 이미지 형식이다.
실생활 비유: 색칠 공부 책에서 각 칸에 지정된 번호대로 색을 칠하는 것과 비슷하다. 1행 1열은 빨강, 1행 2열은 파랑... 이런 식으로 모든 칸의 색을 일일이 지정한다.
비트맵의 구조
- 32비트 비트맵: 화소 1개 = 4바이트 (R 1바이트 + G 1바이트 + B 1바이트 + A 1바이트)
- 24비트 비트맵: 화소 1개 = 3바이트 (R + G + B, 알파 없음)
용량 계산 실습
문제: 해상도 1024 x 768, 32비트 비트맵의 용량은?
총 화소 수 = 1024 x 768 = 786,432개
화소당 크기 = 32비트 = 4바이트
총 용량 = 786,432 x 4 = 3,145,728 바이트
= 3,145,728 / 1024 = 3,072 KB
= 3,072 / 1024 = 3 MB (약 3MB)비트맵의 장단점
| 장점 | 단점 |
|---|---|
| 각 화소의 색상을 정확하게 표현 | 용량이 매우 큼 |
| 구조가 단순하여 처리가 직관적 | 해상도가 높아질수록 용량이 급격히 증가 |
| 사진처럼 복잡한 색상의 이미지에 적합 | 네트워크 전송이나 저장에 비효율적 |
7. 이미지 압축의 원리
왜 압축이 필요한가?
앞에서 계산했듯이 1024x768 비트맵 하나가 약 3MB다. Full HD(1920x1080) 32비트 비트맵이라면 약 8MB, 4K(3840x2160)라면 약 33MB에 달한다. 웹페이지에 이런 이미지를 여러 장 넣으면 로딩이 극도로 느려진다.
실생활 비유: 이사할 때를 생각해 보자. 옷을 하나하나 펼쳐서 상자에 넣으면 상자가 수십 개 필요하다. 하지만 "흰 셔츠 5벌, 청바지 3벌, 검정 양말 10켤레"처럼 묶어서 적으면 목록 한 장이면 된다. 이미지 압축도 같은 발상이다.
런-길이 인코딩(Run-Length Encoding) 비유
비트맵이 색상 정보를 하나하나 나열한다면, 압축은 패턴을 찾아 짧게 기술한다.
압축 전 (비트맵 방식):
1행 1열: 빨강
1행 2열: 빨강
1행 3열: 빨강
1행 4열: 파랑
1행 5열: 파랑압축 후 (패턴 기술 방식):
1행 1열부터 3칸: 빨강
1행 4열부터 2칸: 파랑5개의 정보가 2개의 정보로 줄었다. 같은 색이 연속되는 영역이 많을수록 압축 효율이 높아진다.
대표 압축 포맷
| 포맷 | 압축 방식 | 특징 | 주요 용도 |
|---|---|---|---|
| JPEG | 손실 압축 | 사람 눈에 덜 민감한 정보를 버려서 크기를 줄임. 압축률이 높음 | 사진, 실사 이미지 |
| PNG | 무손실 압축 | 원본 품질 그대로 유지하면서 크기를 줄임. 투명도(알파) 지원 | 아이콘, UI 요소, 투명 이미지 |
| GIF | 무손실 압축 | 최대 256색만 사용. 애니메이션 지원 | 간단한 애니메이션, 로고 |
참고: JPEG는 압축할 때마다 품질이 조금씩 떨어진다(손실 압축). 따라서 원본은 PNG 등 무손실 포맷으로 보관하고, 배포용으로만 JPEG를 사용하는 것이 좋다.
8. 데이터 용량 단위 체계
기본 원리
- 컴퓨터의 가장 작은 데이터 단위는 비트(bit), 0 또는 1
- 8비트 = 1바이트(Byte, B)
- 바이트 위의 단위는 1024(= 2^10) 배씩 증가한다
실생활 비유: 화폐 단위를 생각해 보자. 10원짜리 100개 = 1,000원, 1,000원짜리 1,000장 = 100만 원. 데이터 단위도 마찬가지로 일정한 배수(1024배)로 단위가 올라간다.
용량 단위 계층
| 단위 | 영문 | 환산 | 실생활 예시 |
|---|---|---|---|
| 바이트 (B) | Byte | 8비트 | 영문자 1글자 |
| 킬로바이트 (KB) | Kilobyte | 1,024 B | 짧은 텍스트 파일, 이메일 본문 |
| 메가바이트 (MB) | Megabyte | 1,024 KB | 고화질 사진 1장 (3~10MB), MP3 노래 1곡 (3~5MB) |
| 기가바이트 (GB) | Gigabyte | 1,024 MB | 컴퓨터 RAM 용량 (8~32GB), 영화 1편 (1~4GB) |
| 테라바이트 (TB) | Terabyte | 1,024 GB | HDD/SSD 용량 (1~4TB), 대학 도서관 전체 장서 디지털화 |
| 페타바이트 (PB) | Petabyte | 1,024 TB | 대형 데이터센터 (네이버 IDC 약 900PB, 2016년 기준) |
| 엑사바이트 (EB) | Exabyte | 1,024 PB | 64비트 주소공간 최대 16EB |
| 제타바이트 (ZB) | Zettabyte | 1,024 EB | 전 세계 연간 인터넷 트래픽 |
| 요타바이트 (YB) | Yottabyte | 1,024 ZB | 이론적 단위, 현재 실사용 사례 거의 없음 |
9. 비트 수와 주소 공간
컴퓨터의 비트 수는 한 번에 처리할 수 있는 데이터 폭을 의미하며, 이것이 관리할 수 있는 메모리(주소 공간)의 최대 크기를 결정한다.
실생활 비유: 우편번호가 4자리인 나라와 6자리인 나라를 비교해 보자. 4자리면 최대 10,000개의 우편번호를 부여할 수 있지만, 6자리면 1,000,000개를 부여할 수 있다. 마찬가지로 비트 수가 많을수록 더 많은 메모리 주소를 지정할 수 있다.
32비트 vs 64비트
| 구분 | 32비트 | 64비트 |
|---|---|---|
| 주소 가능 범위 | 2^32 = 4,294,967,296 | 2^64 = 18,446,744,073,709,551,616 |
| 최대 메모리 | 약 4GB | 약 16EB (엑사바이트) |
| 실생활 영향 | RAM 4GB 이상 사용 불가 | 사실상 무한한 메모리 지원 |
- 32비트 운영체제: 2^32 = 약 42억 개의 메모리 주소를 관리할 수 있다. 1바이트씩 주소를 매기면 약 4GB가 한계다. 그래서 32비트 Windows에서 RAM을 8GB 장착해도 약 4GB만 인식했다.
- 64비트 운영체제: 2^64 = 약 1,844경 개의 메모리 주소를 관리할 수 있다. 이론상 약 **16EB(엑사바이트)**까지 지원하므로 현실적으로 메모리 한계가 없다고 볼 수 있다.
이것이 현재 대부분의 컴퓨터와 스마트폰이 64비트 운영체제를 사용하는 이유다.
핵심 암기 포인트
| 항목 | 핵심 내용 |
|---|---|
| 문자 표현 | 컴퓨터는 숫자만 알고, 부호 체계(ASCII, UTF-8 등)에 따라 문자로 보여줌 |
| RGB | 각 채널 8비트 (0~255), 합계 24비트 = 약 1,677만 색 |
| RGBA | RGB + 알파(투명도) 8비트 = 32비트 True Color |
| CSS 색상 | #RRGGBB에서 각 두 글자 = 16진수 = 8비트 = 한 채널 |
| 비트맵 | 화소별 색 정보를 모두 나열, 용량이 큼 |
| 비트맵 용량 | 가로 x 세로 x (비트 수 / 8) 바이트 |
| 이미지 압축 | JPEG(손실, 사진), PNG(무손실, 투명), GIF(256색, 애니메이션) |
| 용량 단위 | 1024 단위로 B - KB - MB - GB - TB - PB - EB - ZB - YB |
| 32비트 | 최대 관리 메모리 약 4GB (2^32) |
| 64비트 | 최대 관리 메모리 약 16EB (2^64) |
확인 질문
질문 1
RGB에서 (0, 255, 0)은 무슨 색인가?
정답 보기
**순수 초록색(Green)**이다. R=0(빨강 없음), G=255(초록 최대), B=0(파랑 없음)이므로 초록 조명만 최대 밝기로 켠 것과 같다.
질문 2
1024x768 해상도, 24비트 컬러 비트맵의 용량은 약 얼마인가?
정답 보기
24비트 = 3바이트이므로:
1024 x 768 x 3 = 2,359,296 바이트
= 2,359,296 / 1024 = 2,304 KB
= 2,304 / 1024 = 2.25 MB (약 2.25MB)질문 3
#FF0000은 무슨 색이고, 10진수로 R값은 얼마인가?
정답 보기
순수 빨간색이다. FF = 15 x 16 + 15 = 255, 즉 R=255, G=0, B=0이다.
질문 4
1TB는 약 몇 GB인가?
정답 보기
1,024GB이다. 1TB = 1,024GB (2^10 = 1,024 단위로 환산).
질문 5
32비트 운영체제가 관리할 수 있는 최대 메모리 용량은?
정답 보기
약 4GB이다. 2^32 = 4,294,967,296 바이트 = 4GB. 그래서 32비트 OS에서는 RAM을 아무리 많이 달아도 4GB 이상은 인식하지 못했다.