친구들과 함께하는 수학 전시용 픽셀 행렬 시각화 웹앱
Matrix Pixel Lab은 수학 전시용으로 개발된 픽셀 행렬 시각화 웹앱입니다. 친구들의 얼굴이 실시간으로 픽셀 행렬로 변환되고, 각 픽셀의 RGB 값이 숫자로 표시됩니다. 손가락 하나만 펼쳐도 화면이 빨갛게 변하고, 다섯 개를 펼치면 원래대로 돌아옵니다. 픽셀을 밝게 하거나 흐리게 만드는 행렬 연산도 직접 체험할 수 있습니다.
| 기능 | 설명 |
|---|---|
| 📷 친구들 얼굴을 픽셀로 | 친구들의 얼굴이 실시간으로 픽셀 행렬로 변환됩니다 |
| 🎨 RGB/채널/흑백 모드 | 색상을 빨강/초록/파랑 채널별로 분리하거나 흑백으로 확인 |
| 🔢 16진수 표시 | 픽셀 값을 10진수 대신 16진수(FF, 80, 00)로 표시 |
| ✋ 손가락 인식 모드 전환 | 손가락 개수로 색상 모드를 자동 전환 (0개=흑백, 1개=빨강, 2개=초록, 3개=파랑) |
| ➕ 행렬 연산 체험 | 밝기 올리기/내리기/흐리게 연산을 실시간으로 적용 |
| 😊 스마일 행렬 애니메이션 | 9x9 픽셀로 만든 스마일 이모티콘이 연산에 따라 변하는 모습 |
- Python 3.11 이상이 설치되어 있어야 합니다
- uv라는 Python 패키지 관리 도구를 사용합니다
Windows (PowerShell):
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"Mac/Linux:
curl -LsSf https://astral.sh/uv/install.sh | sh💡 설치 후 터미널을 새로 열거나
source ~/.bashrc(또는~/.zshrc)를 실행해주세요.
# 1. 프로젝트 폴더로 이동
cd /Users/hwansi/Project/prototype2
# 2. 필요한 패키지 설치 (한 번만)
uv sync
# 3. 서버 실행
uv run uvicorn main:app --host 0.0.0.0 --port 7777 --reload웹 브라우저를 열고 다음 주소로 접속하세요:
http://localhost:7777
matrix_vision/
├── main.py # FastAPI 서버 메인 파일
├── pyproject.toml # 프로젝트 설정 및 의존성
├── uv.lock # 패키지 버전 고정 파일
├── templates/
│ └── index.html # 웹 페이지 템플릿
├── static/
│ ├── app.js # 프론트엔드 JavaScript
│ └── styles.css # 스타일시트
├── DEVLOG.md # 개발 일지
├── EXPERIENCE.md # 체험 안내 문서
└── README.md # 이 파일
- 친구들 얼굴을 픽셀로 버튼 클릭
- 브라우저에서 친구들 얼굴 접근 허용
- 픽셀 크기 조절 (8px ~ 32px)
- 표기 모드 변경 (RGB / Red / Green / Blue / Grayscale)
- 손 인식 버튼 클릭
- 친구들 얼굴 앞에서 손을 보여주세요
- 손가락 개수에 따라 자동으로 모드 전환:
- 0개: Grayscale (흑백)
- 1개: Red 채널
- 2개: Green 채널
- 3개: Blue 채널
- 5개: RGB (원래대로)
오른쪽 패널에서 연산을 선택하면 실시간으로 적용됩니다:
- 원본: 원래 이미지
- 밝기 올리기: 모든 픽셀 값을 높여 밝게
- 밝기 내리기: 모든 픽셀 값을 낮춰 어둡게
- 흐리게: 주변 픽셀과 평균을 내어 블러 효과
| 기술 | 용도 |
|---|---|
| FastAPI | Python 웹 프레임워크 |
| Jinja2 | HTML 템플릿 엔진 |
| Uvicorn | ASGI 서버 |
| MediaPipe Hands | 손가락 인식 (Google) |
| Vanilla JS | 프론트엔드 로직 |
| CSS Grid/Flexbox | 반응형 레이아웃 |
- 브라우저에서 친구들 얼굴 접근 권한을 허용했는지 확인하세요
- HTTPS가 아닌 로컬 환경(
localhost)에서는 정상 작동합니다 - 다른 프로그램이 친구들 얼굴을 사용 중인지 확인하세요
- 손 인식 버튼이 켜져 있는지 확인하세요
- 손이 화면 중앙에 잘 보이도록 하세요
- 밝은 곳에서 사용하면 인식률이 높아집니다
- MediaPipe CDN이 차단되지 않았는지 확인하세요
# 포트 7777이 이미 사용 중인 경우
uv run uvicorn main:app --host 0.0.0.0 --port 8888 --reload# uv 캐시 초기화 후 재시도
uv cache clean
uv sync- DEVLOG.md - 개발 과정과 기술적 결정사항
- EXPERIENCE.md - 전시 체험 안내 및 활용 팁
이 프로젝트는 친구들과 함께 수학 전시를 만들어가는 과정에서 탄생했습니다. 아이디어가 있거나 버그를 발견하면 자유롭게 이슈를 남겨주세요!
MIT License
픽셀 하나하나가 수학이 되는 신기한 경험을 즐겨보세요! 🎉