두 이진 이미지가 얼마나 다른지를 세어 숫자를 분류하는 원리를 탐구해보자

📍 지금 배우는 것 해밍 거리 서로 다른 픽셀의 개수 — 값이 작을수록 더 닮음
  1. 1 해밍 개념
  2. 2 해밍 체험
  3. 3 퍼셉트론 개념
  4. 4 퍼셉트론 체험

해밍 거리란? — 배타적 논리합(XOR)으로 세기

두 비트를 비교해 다르면 1, 같으면 0을 내는 연산이 배타적 논리합(XOR, 기호 ⊕)입니다.

00=0
같음
01=1
다름
10=1
다름
11=0
같음

해밍 거리는 두 이진 행렬을 XOR 한 결과에서 1의 개수 — 즉 값이 서로 다른 위치의 수입니다.

H(A, B) = Σ (AiBi) = (AB 결과에서 1의 개수)
해밍 거리 시각화 예제

두 이미지 X와 A를 이진 행렬로 변환하고 H(X, A)를 구해봅시다.
빨간 셀 = 두 값이 달라 XOR 결과가 1인 위치이고, 그 개수가 곧 해밍 거리입니다.

직접 해보기 — 셀을 클릭해서 비트를 바꿔보세요

가운데 X 행렬의 셀을 클릭해 0↔1을 바꿔 보세요. 해밍 거리가 더 짧은 쪽으로 분류되고, 진 숫자는 회색으로 흐려집니다.

A (숫자 0)
X (미지수) ← 클릭!
B (숫자 6)

분류된(이긴) 숫자 격자의 빨간 칸 = X와 값이 다른 위치(해밍 거리만큼)

H(X,A) = —
?
H(X,B) = —
두 가지 유사도 측정법
📏 해밍 거리 (지금 배우는 중)
두 이미지를 XOR 해서 서로 다른 픽셀(=1)의 개수를 셉니다.
값이 작을수록 닮음
🧠 퍼셉트론 (다음 단계)
기준 이미지 A의 픽셀 중 X가 겹친 비율을 봅니다.
값이 클수록 닮음

개념을 이해했다면 직접 숫자를 그려서 해밍 거리를 확인하거나, 퍼셉트론 분류를 탐구해보세요!

STEP 1 기준 이미지 확인

숫자 0~9 각 클래스에서 랜덤으로 선택된 기준 이미지입니다. 이 이미지들과 내가 그린 숫자의 해밍 거리를 비교합니다.

STEP 2 숫자 그리기

여기에 숫자를 그려보세요

🔳 이진화 해상도 14 × 14
붓 두께

이진화 결과 (14×14)

숫자를 그리고 "이진화 변환"을 클릭하세요

STEP 3 해밍 거리 계산

STEP 1과 STEP 2를 모두 완료한 후 계산하세요

각 숫자와의 해밍 거리
단계별 비교 시각화

해밍 거리가 가장 작은 두 후보와의 비교입니다. 빨간 셀 = 두 행렬에서 값이 다른 위치

가중치 행렬 W와 퍼셉트론

기준 이미지 A(이진 행렬)의 켜진 칸 개수를 |A|라 하면, 가중치 행렬은 WA = (1/|A|) × A — A의 켜진 칸마다 1/|A|씩 나눠 준 것입니다.

퍼셉트론 PA의 출력값은 입력 XWA의 내적(성분별 곱의 합)입니다:

PA(X) = X · WA = Σ(Xi × Ai) / |A|
💡 쉽게 말하면PA(X)는 A와 X가 함께 켜진 칸 수 ÷ A의 켜진 칸 수 |A|, 즉 “A를 이루는 픽셀 중 X가 덮은 비율”입니다.
완전히 겹치면 1(100%), 전혀 안 겹치면 0 — 값이 클수록 더 닮았고, 출력값이 가장 큰 퍼셉트론의 숫자로 분류합니다.
겹침으로 보는 퍼셉트론 출력값

A와 X를 겹쳐 보고, ‘A의 픽셀 중 X가 덮은 비율’로 출력값 P(X, A) = Σ(X·A) / |A|를 계산해봅시다.

직접 해보기 — X 셀을 클릭해보세요

가운데 X 행렬의 셀을 클릭해 0↔1을 바꿔 보세요. 양옆 A·B 그림이 파랑(겹침)·주황(A만 켬)으로 물들고, P가 더 큰 쪽으로 분류되며 진 쪽은 회색으로 비활성화됩니다.

A (숫자 0)
|A| =
X (미지수) ← 클릭!
B (숫자 6)
|B| =
겹침 (X·A 모두 1) — 분자 A만 켬 (X=0) — 분모 X만 켬 (A=0) — 무관
P(X,A) = —
?
P(X,B) = —

개념을 이해했다면 직접 숫자를 그려서 퍼셉트론 분류를 체험해보세요!

STEP 1 기준 이미지 확인

숫자 0~9 각 클래스에서 랜덤으로 선택된 기준 이미지입니다. 이 이미지들과 내가 그린 숫자의 퍼셉트론 출력값을 비교합니다.

STEP 2 숫자 그리기

여기에 숫자를 그려보세요

🔳 이진화 해상도 14 × 14
붓 두께

이진화 결과 (14×14)

숫자를 그리고 "이진화 변환"을 클릭하세요

STEP 3 퍼셉트론 출력값 계산

STEP 1과 STEP 2를 모두 완료한 후 계산하세요

각 숫자와의 퍼셉트론 출력값
단계별 비교 시각화

퍼셉트론 출력값이 가장 큰 두 후보와의 비교입니다. 블렌딩 시 분수 시각화가 표시됩니다.  X=1, A=1 (기여)  X=0, A=1 (미기여)