2진수와 16진수: 0xFF는 왜 255일까

글자는 저장되거나 네트워크로 갈 때 UTF-8이라는 규칙에 따라 바이트로 바뀐다. 그 변환 코드를 보자(『한입 CS』 1장에서 한 줄씩 따라가는 코드다). 유니코드가 글자마다 붙인 번호인 코드 포인트(code point)를 2진수로 놓고, 오른쪽에서 6비트씩 떼어 바이트를 하나씩 만드는 코드다. rest는 아직 바이트로 옮기지 않은 코드 포인트의 남은 비트, encoded는 만든 바이트를 앞에 끼워 모으는 목록이다. 그 코드 가운데 이런 줄이 있다.

encoded.unshift(0x80 | (rest & 0x3F))
rest = rest >> 6

CSS에서 늘 보던 #ff8800도, 해시 값 2cf24dba…도 같은 종류의 글자로 적혀 있다. 0x80은 얼마이고, &와 |는 &&·||와 무엇이 다르며, 왜 하필 6만큼 미는 걸까? 이 줄을 읽으려면 세 가지가 필요하다. 수를 2진수(binary)와 16진수(hexadecimal)로 읽는 법, 2를 거듭 곱한 수의 크기 감각, 그리고 수를 2진수 자리 단위로 계산하는 비트 연산(bitwise operation)이다. 이 Unit은 이 세 가지를 차례로 푼다.

자릿값: 10진수와 2진수

먼저 말 두 개를 정한다. 같은 수를 여러 번 곱한 것을 거듭제곱(power)이라 하고, 몇 번 곱했는지를 위에 작게 쓴 수를 지수(exponent)라 한다. $2^5 = 2 \times 2 \times 2 \times 2 \times 2 = 32$. "2의 5제곱은 32"라고 읽고, 2를 다섯 번 곱했다는 뜻이다. 위의 5가 지수다. $2^0 = 1$도 기억해 두자. 2를 한 번도 곱하지 않았으니 처음 값 1 그대로다. $2^3 = 8$에서 지수를 하나 줄일 때마다 2로 나누면 4, 2, 1이 되는 것과 같다.

우리가 쓰는 10진수(decimal)는 한 자리에 0~9 열 개의 숫자를 쓴다. 자리마다 정해진 값을 자릿값(place value)이라 한다. 오른쪽부터 1, 10, 100, 곧 10의 거듭제곱이다. $305 = 3 \times 10^2 + 0 \times 10^1 + 5 \times 10^0$. 305는 100이 3개, 10이 0개, 1이 5개라는 뜻이다.

2진수는 한 자리에 0과 1 두 개만 쓴다. 2진수 한 자리, 곧 0 또는 1 하나를 비트(bit)라 한다. 규칙은 같고 자릿값만 2의 거듭제곱이 된다. 오른쪽부터 1, 2, 4, 8, 16이다. 한 자리 왼쪽으로 갈 때마다 자릿값이 두 배가 된다.

1const s = '1101'2let total = 03let place = 14for (let i = s.length - 1; i >= 0; i--) {5  const digit = Number(s[i])6  total += digit * place7  place *= 28}9console.log(total)

13

거꾸로 10진수를 2진수로 바꿀 때는 2로 나눈 나머지를 모은다. 10진수에서 305를 10으로 나누면 나머지가 5, 곧 맨 끝 자리이고, 몫 30은 끝 자리를 떼어 낸 수다. 2진수도 같다. 2로 나눈 나머지(0 또는 1)가 맨 끝 자리이고, 몫은 끝 자리를 떼어 낸 수다. 몫이 0이 될 때까지 되풀이하고, 나온 나머지를 아래에서 위로 읽는다.

나머지를 아래에서 위로 읽으면 1101이다. 앞에서 1101이 13이었으니 맞게 돌아왔다. 코드에서는 직접 나누지 않고 내장 함수를 쓴다.

(13).toString(2)        // '1101'
parseInt('1101', 2)     // 13
0b1101                  // 13 (앞에 0b를 붙이면 2진수로 적은 수)
(5).toString(2).padStart(8, '0') // '00000101'

bin(13)            # '0b1101'
int('1101', 2)     # 13
0b1101             # 13
format(5, '08b')   # '00000101'

toString(2)는 앞에 0b를 붙이지 않고, Python의 bin은 붙인다(MDN: Number.prototype.toString, MDN: parseInt, Python 문서: bin, Python 문서: int). 자리 수를 맞춰 보여 주려면 padStart나 format으로 앞을 0으로 채운다.

2의 거듭제곱 감각표: 비트 n개로 2ⁿ가지

비트 8개를 묶은 것을 바이트(byte)라 한다. 비트 n개로는 값을 $2^n$가지 나타낼 수 있다. "2의 n제곱 가지"라고 읽는다. 비트 하나는 0, 1 두 가지다. 비트를 하나 더 붙이면 기존 경우마다 0을 붙인 것과 1을 붙인 것이 생기니 가짓수가 두 배가 된다. 비트 2개면 00, 01, 10, 11 네 가지, 3개면 여덟 가지다.

자주 나오는 2의 거듭제곱은 값만 외우기보다 어디서 보는지와 묶어 기억해 두면 오래 남는다.

JavaScript number는 정수를 2⁵³까지는 정확히 담지만 2⁵³ + 1은 담을 수 없어 2⁵³으로 반올림된다. 그래서 바로 옆 정수와 구별된다고 보장되는 안전한 정수(safe integer, Number.MAX_SAFE_INTEGER)는 2⁵³ − 1까지다. 2⁵³을 넘는다고 모든 수가 근삿값이 되는 것은 아니다. 2⁵³ 위에서는 담을 수 있는 수 사이 간격이 2, 4, …로 벌어질 뿐, 그 간격 위에 놓인 수(2⁵³ + 2처럼)는 정확히 저장된다.

표준 단위에서 킬로(k)는 1,000이라, 1,024바이트를 구별해 적을 때는 IEC가 정한 1KiB(키비바이트)를 쓴다(NIST: 이진 접두어).

표를 읽는 요령이 하나 있다. $2^{10} \approx 1000$이므로 지수가 10 늘 때마다 값이 약 1,000배가 된다. ≈는 "거의 같다"는 뜻이다. 그래서 2²⁰은 약 100만, 2³⁰은 약 10억이고, 2³²는 2³⁰에 4를 곱해 약 43억이다.

음수 지수와 2진 소수

1절에서 2³ = 8의 지수를 하나 줄일 때마다 2로 나누면 4, 2, 1이 됐다. 거기서 멈추지 않고 계속 줄이면 어떻게 될까? 1을 2로 또 나누면 1/2, 다시 나누면 1/4이다. 지수가 음수라는 것은 바로 이것, "곱하는 대신 나눈다"는 뜻이다.

$2^{-4} = \frac{1}{2^4} = \frac{1}{16} = 0.0625$

"2의 −4제곱은 1을 2로 네 번 나눈 값, 곧 1/16"이라고 읽는다. 2⁻¹ = 1/2, 2⁻² = 1/4, 2⁻³ = 1/8이다. 10진수도 같아서 10⁻² = 1/100 = 0.01이다.

소수점 아래 자리도 자릿값으로 읽는다. 10진수 0.25는 1/10이 2개, 1/100이 5개다. 2진수에서는 소수점 오른쪽 첫째 자리가 1/2, 그다음이 1/4, 1/8, 1/16으로 자리마다 절반이 된다.

1인 자리의 자릿값만 더하면 2진수 0.011은 1/4 + 1/8 = 0.375다. 정수 부분과 규칙이 같고, 자릿값이 2배씩 커지는 대신 절반씩 작아질 뿐이다.

여기서 『한입 CS』 0장이 0.1 + 0.2가 0.30000000000000004인 이유로 든 "0.1은 2진수로 끝나지 않는다"가 풀린다. 10진수에서 1/3을 소수로 쓰면 0.333…으로 끝나지 않는다. 1/3을 1/10, 1/100, 1/1000의 합으로 딱 맞게 쓸 수 없기 때문이다. 2진수에서는 0.1 = 1/10이 그런 수다. 1/10을 1/2, 1/4, 1/8, …의 합으로 딱 맞게 쓸 수 없어서 0.0001100110011…처럼 같은 자리가 끝없이 되풀이되고, 컴퓨터는 어딘가에서 잘라 저장한다. 『한입 CS』 0장의 식 0.1 = 1.6 × 2⁻⁴는 "1.6을 2로 네 번 나눈 값, 곧 1.6 ÷ 16 = 0.1"이라고 읽는다.

16진수: 한 자리 = 비트 4개

2진수는 길다. 255도 11111111 여덟 자리다. 그래서 비트를 사람에게 보여 줄 때는 16진수를 쓴다. 16진수는 한 자리에 16가지를 쓴다. 0~9 다음에 a~f를 이어 써서 a는 10, f는 15다. 자릿값은 오른쪽부터 1, 16, 256, 곧 16의 거듭제곱이다. 코드에서는 앞에 0x를 붙여 16진수임을 밝힌다.

16진수가 비트를 적기에 좋은 까닭은 $2^4 = 16$이라서다. 비트 4개가 나타내는 16가지가 16진수 한 자리 16가지와 딱 맞는다. 그래서 2진수를 오른쪽부터 4자리씩 끊으면 묶음 하나가 16진수 한 자리가 된다.

이제 제목의 답을 식으로 쓸 수 있다. $\text{0xFF} = 15 \times 16^1 + 15 \times 16^0 = 240 + 15 = 255$. f가 15이니 "16이 15개, 1이 15개"라고 읽는다. 2진수로 놓고 보면 1111 1111, 비트 8개가 모두 1인 수다. 바이트 하나는 비트 8개 = 4비트 묶음 두 개이므로 16진수로 꼭 두 자리다. 0x00부터 0xff까지가 바이트 하나가 담는 0~255다.

255, 0xff, 0b11111111은 같은 수를 다르게 적은 것이다. 코드가 실행되면 셋 다 비트 1111 1111 하나가 되고, 어느 진법으로 적었는지는 남지 않는다(255 === 0xff는 true). 10진수로도 같은 값을 적을 수 있지만, 240만 보고 1111 0000이 바로 떠오르지는 않는다. 16진수는 4비트씩 끊어 읽기만 하면 되니 계산 없이 비트 모양이 보인다.

CSS 색 #ff8800은 바이트 세 개를 16진수 두 자리씩 이어 적은 것이다. 앞에서부터 빨강 ff = 255, 초록 88 = 8 × 16 + 8 = 136, 파랑 00 = 0이다. rgb(255 136 0)과 같은 색이다. 『한입 CS』 1장의 0x80은 $8 \times 16 = 128$, 2진수로 1000 0000이고 0x3F는 3 × 16 + 15 = 63, 2진수로 0011 1111이다. 모양을 기억해 두자. 5절에서 쓴다.

(255).toString(16)   // 'ff'
parseInt('ff', 16)   // 255
0xff                 // 255
(8).toString(16).padStart(2, '0') // '08'

hex(255)          # '0xff'
int('ff', 16)     # 255
0xff              # 255
format(8, '02x')  # '08'

마지막 줄처럼 바이트 하나는 두 자리로 맞춰 적는다. 8을 그냥 toString(16)하면 '8' 한 자리가 나온다. 색이나 해시처럼 여러 바이트를 이어 적을 때 한 자리짜리가 끼면 뒤 바이트가 앞으로 당겨져 다른 값이 된다(Python 문서: hex, Python 문서: format).

비트 연산: 자리마다 따로 계산한다

비트 연산은 두 수를 2진수로 나란히 놓고 자리마다 따로 계산한다. 덧셈처럼 옆 자리로 올림이 넘어가지 않는다. 연산은 여섯 가지만 알면 된다.

시프트가 2배·반이 되는 까닭은 1절의 자릿값에 있다. 모든 자리가 한 칸 왼쪽으로 가면 각 자리의 자릿값이 두 배가 되니 수 전체가 두 배다. 10진수에서 뒤에 0을 붙이면 10배가 되는 것과 같다. 오른쪽으로 밀면 맨 끝 자리가 떨어져 나가므로 2로 나눈 몫만 남는다. 13은 1101이고 13 >> 1은 110, 곧 6이다. ~만 두 수가 아니라 수 하나를 받는다. 뒤집을 자리를 고르는 XOR와 달리 모든 자리를 한꺼번에 뒤집는다.

비트 연산이 쓸모 있는 까닭은 수 하나에 여러 값을 칸칸이 나눠 담기 때문이다. CSS 색 0xff8800은 수 하나에 빨강·초록·파랑 8비트 칸 세 개를 담았고(4절), 아래에서 볼 권한 값은 읽기·쓰기·실행 1비트 칸 세 개를 담는다. 그중 한 칸만 보려면 나머지 칸을 지워야 한다. 이때 남길 자리만 1로 채운 수를 마스크(mask)라 하고, 그 수와 AND한다.

결과를 매번 진리표로 계산하지 않고 바로 떠올리려면, 연산하는 두 수 중 한쪽을 "자리마다의 지시"로 읽는다.

>>로 원하는 칸을 맨 아래로 내리고 &로 그 칸만 남기는 것, 이 두 동작이 칸 하나를 꺼내는 방법이다. 4비트 단위로 끊기는 수는 16진수 그대로 풀린다. 16진수 한 자리가 비트 4개이니 >> 8은 16진수 두 자리를 버리는 것이고, & 0xff는 마지막 두 자리만 남기는 것이다. 그래서 (0xff8800 >> 8) & 0xff는 0xff8800 → 0xff88 → 0x88, 곧 초록 136이다.

이제 이 Unit 첫머리에 적은 『한입 CS』 1장의 줄로 돌아간다. 코드 포인트(유니코드가 글자마다 붙인 번호)를 오른쪽에서 6비트씩 떼어 UTF-8 바이트를 하나씩 만드는 반복문의 두 줄이다.

encoded.unshift(0x80 | (rest & 0x3F))
rest = rest >> 6

여기서 칸은 6비트다. 이어지는 바이트는 8비트 중 앞 2자리를 10이 차지하니 담을 수 있는 건 8 − 2 = 6비트, 그래서 코드 포인트를 6비트씩 떼고 rest를 6씩 민다. 6비트 칸은 16진수 자리와 맞지 않는다. 2진수로 펼쳐 위아래로 맞춰 본다. 한의 코드 포인트 U+D55C(1101 0101 0101 1100)로 첫 바퀴를 돌리면 이렇다.

① rest & 0x3F : 0x3F = 0011 1111, 아래 6자리만 남긴다
  rest    1101 0101 01|01 1100
  0x3F    0000 0000 00|11 1111
  결과                 01 1100   = 0x1C

② 0x80 | 0x1C : 0x80 = 1000 0000, 맨 위 자리를 켠다
  0x1C    0001 1100   ← ①에서 위 2자리가 00으로 비었다
  0x80    1000 0000
  결과    1001 1100   = 0x9C   (10xxxxxx 모양)

③ rest >> 6 : 방금 쓴 6자리를 버리고 다음 6자리를 아래로 내린다
  1101 0101 01|01 1100  →  11 0101 0101   = 0x355

②는 10을 앞에 덧붙이는 것이 아니다. ①의 마스크가 바이트의 위 2자리를 00으로 비워 두었기 때문에, OR로 그 빈자리를 10으로 채울 수 있다. 이어지는 바이트가 10으로 시작하는 것은 UTF-8의 규칙이다(『한입 CS』 1장). 둘째 바퀴도 같아서 0x355의 아래 6자리 010101이 0x95가 된다. 반복문이 끝나면 남은 1101은 3바이트 글자의 첫 바이트 모양 1110xxxx에 들어가 0xED가 되고, 한은 ED 95 9C 세 바이트가 된다.

비트 하나에 켜짐·꺼짐 하나를 담는 값을 플래그(flag)라 한다. Unix 파일 권한처럼 읽기 = 4, 쓰기 = 2, 실행 = 1로 정하면 세 값이 서로 다른 자리 하나씩(100, 010, 001)을 차지해서 한 수에 세 권한을 함께 담을 수 있다. rwx를 왼쪽부터 한 자리씩 놓은 것이라, chmod 755의 7은 111(읽기·쓰기·실행), 5는 101(읽기·실행)이다.

1const READ = 42const WRITE = 23const EXEC = 14let perm = READ | EXEC5perm = perm | WRITE6perm = perm & ~EXEC7perm = perm ^ READ8const flags = [['READ', READ], ['WRITE', WRITE], ['EXEC', EXEC]]9for (const [name, bit] of flags) {10  const on = (perm & bit) !== 011  console.log(name, on ? '켜짐' : '꺼짐')12}

READ 꺼짐
WRITE 켜짐
EXEC 꺼짐

JavaScript의 32비트 함정과 Python

여기까지는 두 언어가 같다. 수가 커지면 갈라진다. JavaScript의 비트 연산은 계산하기 전에 연산하는 두 수(피연산자)를 32비트 부호 있는 정수(signed integer)로 바꾼다. 32비트 밖의 자리는 버리고, 맨 위 2³¹ 자리는 부호로 읽는다(MDN: 왼쪽 시프트, ECMAScript 명세: ToInt32). 부호로 읽는다는 것은 맨 위 자리의 자릿값을 $+2^{31}$이 아니라 $-2^{31}$로 센다는 뜻이다. 2³¹ = 2,147,483,648이니 맨 위 자리 하나만 켜지면 −2,147,483,648이다. 그래서 32비트 부호 있는 정수가 담는 범위는 −2³¹ ~ 2³¹ − 1이다. 같은 규칙을 4비트로 줄여 보면 이렇다.

맨 위 자리만 −8로 세면 0~15 열여섯 가지가 −8~7로 바뀐다. 32비트는 맨 위 자릿값이 −2³¹일 뿐 같은 규칙이다. Python의 정수는 크기 제한이 없고, 비트 연산도 그 값 그대로 계산한다(Python 문서: 정수형, Python 문서: 정수의 비트 연산). 값이 커지면 메모리를 더 써서 자릿수를 이어 붙이는 임의 정밀도(arbitrary precision) 정수라서, 한계는 메모리뿐이다. 음수의 비트 연산은 맨 위 자리 왼쪽으로 1이 끝없이 이어진 2진수처럼 계산한다. 다만 자리 수가 정해진 곳과 만나면 Python도 자른다. 32비트 정수를 쓰는 C 함수에 값을 넘기는 ctypes에서 ctypes.c_int32(1 << 31).value는 JavaScript와 같은 −2147483648이고(Python 문서: ctypes 기본 자료형), NumPy의 int32 배열도 32비트 안에서 계산한다.

1let x = 2 ** 292for (let i = 30; i <= 33; i++) {3  x = x << 14  console.log(i, x)5}6const y = 2 ** 32 + 57console.log(y | 0)

30 1073741824
31 -2147483648
32 0
33 0
5

정리하면 이렇다.

~4는 두 언어가 같다. 둘 다 ~x를 −x − 1로 계산하기 때문이다. ~(NOT)는 5절 표의 모든 자리 뒤집기다. 어떤 수와 그 수를 뒤집은 수를 자리마다 더하면 올림 없이 모든 자리가 1인 수가 된다(0111 + 1000 = 1111). 맨 위 자리를 −8로 읽으면 1111은 −8 + 4 + 2 + 1 = −1이다. 그래서 x + ~x = −1이고, 옮기면 ~x = −x − 1이다. 위의 4비트 표로 보면 ~0111(7)은 모든 자리를 뒤집은 1000, 곧 −8 = −7 − 1이다. 32비트에서도 모든 자리가 1인 수는 −1이라 같은 식이 선다. JavaScript에서 부호 없이 0 ~ 2³² − 1로 읽고 싶으면 부호 없는 오른쪽 시프트 >>> 0을 붙인다. -1 >>> 0은 4294967295다. 실무에서 기억할 것은 하나다. JavaScript에서 2³¹ 이상이 될 수 있는 수(타임스탬프, 큰 id, 바이트 수)에는 |·&·<<·>>를 쓰지 않는다. 소수점을 버리려면 x | 0 대신 Math.trunc(x), 반으로 나누려면 x >> 1 대신 Math.floor(x / 2)를 쓴다(MDN: Math.trunc). 정말 큰 정수를 비트로 다뤄야 하면 BigInt를 쓴다. BigInt끼리의 비트 연산은 32비트로 자르지 않는다. 다만 BigInt에는 >>>가 없다(MDN: BigInt).

이 Unit이 쓰이는 곳

• 『한입 CS』 0장: 숫자는 비트다: 2진 소수의 자릿값(1/2, 1/4, 1/8)으로 0.1이 왜 끝나지 않는지 보고, 64비트를 부호·지수·가수로 나눈다. 안전한 정수가 2⁵³ − 1까지인 이유(2⁵³까지는 정확하지만 2⁵³ + 1은 2⁵³으로 반올림되어 옆 정수와 구별이 안 된다)도 "비트 n개로 2ⁿ가지"에서 나온다. 개념 정리는 부동소수점 노트에 있다.
• 『한입 CS』 1장: 문자는 바이트다: 코드 포인트를 U+D55C처럼 16진수로 적고, UTF-8 코드 추적이 rest & 0x3F로 6비트를 꺼내 0x80 |로 10xxxxxx 바이트를 만든 뒤 rest >> 6으로 다음 6비트를 내린다. 바이트는 16진수 두 자리로 보여 준다.
• 『한입 CS』 10장: 해시, 암호화, 인코딩: Base64가 바이트 3개(24비트)를 6비트씩(2⁶ = 64가지) 잘라 글자 4개로 바꾸고, SHA-256 해시 값 256비트를 16진수 64글자로 적는다.
• 『한입 알고리즘』 6장: 이분 탐색: (lo + hi) >> 1이 반으로 나누는 시프트이고, >>가 32비트 정수로 바꿔 계산해서 2³¹ 이상이면 음수가 된다는 함정을 다룬다.

n = 8  → 8 & 7  = ?
n = 12 → 12 & 11 = ?
n = 0  → 0 & -1 = ?