수학 전시물 프로토타입으로 카메라 영상을 픽셀 행렬로 분해하고 각 셀의 수치를 표시하는 웹앱을 FastAPI로 구현했다. RGB/채널/흑백 모드, 16진수 표기, 행렬 연산(밝기/어둡게/흐리게) 시각화, 손가락 인식 기반 모드 전환까지 포함했다.
- FastAPI + Jinja2 + 정적 파일 구성으로 웹앱 기본 뼈대 구축
- 카메라 입력을 픽셀 행렬로 샘플링 후 숫자 오버레이 표시
- RGB/채널/흑백 모드 및 16진수 표기 전환
- 터치스크린 친화 버튼 UI로 조작 방식 개선
- 행렬 연산 패널과 예시(9x9 스마일) 애니메이션 구현
- 손 인식(손가락 개수)으로 모드 자동 전환 및 오버레이 표시
- 체험 안내 문서 작성
- FastAPI 라우팅과 템플릿 연결
- 캔버스 2개(픽셀/숫자 오버레이)로 픽셀화 및 수치 표시
- 픽셀 셀 크기 조절, RGB/채널/흑백 모드 구현
- 숫자 굵기 및 가운데 정렬로 가독성 개선
- 전시 톤에 맞는 레이아웃/폰트/컬러 적용
- 버튼 기반 컨트롤로 터치스크린 친화성 강화
- 숫자 표시/16진수 표기를 버튼 토글로 변경
- 밝기 올리기/내리기/흐리게 연산 추가
- 연산 수식 설명을 쉬운 문장으로 표현
- 9x9 고정 스마일 행렬 예시를 생성하고 연산이 서서히 적용되는 모습 구현
- 스마일은 흑백(0/100) 값으로 단순화하고 형태를 키움
- MediaPipe Hands로 손가락 개수 추정
- 손가락 수에 따라 모드 자동 전환
- 0개: Grayscale(Black)
- 1개: Red
- 2개: Green
- 3개: Blue
- 손 인식 결과를 카메라 화면 위에 오버레이로 표시
- uv 기반 실행:
uv run uvicorn main:app --host 0.0.0.0 --port 7777 --reload - 전시 환경에서는 16~24px 픽셀 크기가 가독성에 유리
- 앱 코드:
main.py,templates/index.html,static/app.js,static/styles.css - 체험 안내:
EXPERIENCE.md - 개발일지:
DEVLOG.md
- 손 인식 on/off 상태를 관람객에게 더 명확히 안내하는 UI 추가
- 연산 강도(밝기 배수, 블러 커널 크기) 슬라이더 제공
- 예시 패널에 입력/출력 행렬을 나란히 표시