학습 0번인데 버튼과 창이 움직인다? Handwired 직접 뜯어봤습니다

URL: https://www.youtube.com/watch?v=iZI4g9TGDEE
게시일: 2026-10-19 · 채널: 단테 · 영상 길이: 13분 6초

---

📌 핵심 질문 / 영상의 핵심 주장

학습 데이터로 패턴을 익히는 대신, 사람이 원하는 프로그램의 계산을 신경망의 연결과 숫자로 직접 구성하면 버튼·창 배치·검색 같은 동작을 표현할 수 있을까? 영상은 Handwired의 데모와 테스트를 직접 확인하며, 이 방식이 기존 UI 개발을 대체하기보다는 명시적인 계산을 네트워크로 옮기고 일부 계수를 학습·검증하는 실험적 도구임을 보여준다.

• Handwired는 JavaScript를 자동 변환하는 도구가 아니다. 개발자가 TypeScript 빌더 API로 계산 그래프를 손으로 구성한다.
• 신경망은 화면의 모든 것을 생성하지 않는다. 위치·상태·배치처럼 지정된 숫자 계산을 담당하고, 브라우저 JavaScript가 HTML에 반영한다.
• 동작을 보통 코드와 대조하는 테스트가 함께 있어 출력의 정확성과 입력 범위 조건을 확인할 수 있다.
• 데모에서는 계산을 미리 정해 실행하는 방식과 일부 가중치를 실제로 학습시키는 방식을 모두 보여준다.

1. Handwired의 개념과 계산 방식

1.1. ‘학습하지 않는 신경망’이 의미하는 것

1. 익숙한 AI 학습 방식과 다르다

   1. 일반적인 AI는 많은 예시를 학습해 입력에 대한 출력을 추정하는 것으로 소개된다.
   2. 이 영상의 Handwired는 화면 동작을 정의한 프로그램을 신경망 계산으로 표현한다. 기본 토글 데모는 학습 데이터를 넣지 않고 지정된 계산을 실행한다.
   3. 따라서 여기서 신경망은 대규모 언어 모델이나 대화형 생성 AI를 뜻하지 않는다.

2. 기존 소스의 자동 변환기가 아니다

   1. 공식 문서에는 기존 JavaScript 코드를 가져와 자동으로 변환해 주는 도구가 없다고 명시돼 있다.
   2. 개발자는 TypeScript 빌더 API로 계산 순서·계수·입력값의 자료형과 범위 등을 직접 표현한다.
   3. 실행기는 정의된 계산을 반복하며, ‘handwired’라는 이름은 연결을 손으로 구성한다는 방식과 맞닿아 있다.

3. 계산과 화면 표시의 역할을 분리한다

   1. 창의 좌표·버튼 상태처럼 숫자로 표현할 수 있는 동작은 Handwired가 계산한다.
   2. 브라우저의 일반 JavaScript가 계산 결과를 HTML 요소에 적용한다. 글자 입력도 기본 브라우저 입력창을 쓴다.
   3. 즉 화면 전체를 신경망이 그리거나 메모의 문장을 생성하는 구조가 아니다.

1.2. ReLU 조합으로 조건문 흉내 내기

1. 정수 입력에서 조건을 0/1 스위치로 만든다

   1. 영상은 “a가 4보다 크면 10, 아니면 12”를 반환하는 조건문을 예로 든다.
   2. ReLU(a−4)−ReLU(a−5)는 정수 입력에서 a가 4 이하일 때 0, 5 이상일 때 1이 된다.
   3. 이 값을 한쪽 출력에, 반대 스위치를 다른 출력에 곱해 더하면 두 후보 중 하나를 선택할 수 있다.

2. 입력 영역과 간격을 선언해야 한다

   1. a=3 또는 4에서는 두 ReLU 출력이 모두 0이고, a=5 또는 6에서는 차이가 1이 된다.
   2. 그러나 a=4.5처럼 소수를 넣으면 스위치가 0.5가 되어 결과가 11이 된다. 원래 조건문의 10/12 결과와 달라진다.
   3. 그러므로 이 예시는 정수 입력이라는 약속에서만 정확하다. 실제 구현에서는 값의 범위·간격을 선언하고 그 영역에 맞는 비교 계산을 설계한다.

3. 핵심은 답을 추측하는 것이 아니라 계산을 설계하는 것

   1. Handwired는 정의되지 않은 행동을 데이터에서 추론하지 않고, 사람이 정한 숫자 규칙을 실행한다.
   2. 일부 계수는 이후 학습으로 조정할 수 있지만, 학습 가능한 부분과 고정된 프로그램 부분을 구분해야 한다.

2. 작은 토글 데모: 코드·상태·검증

2.1. 프로젝트 구성과 실행 흐름

1. 비교 가능한 작은 예제

   1. 저장소의 템플릿에는 토글 프로그램, 같은 동작을 적은 일반 JavaScript 레퍼런스, 비교 테스트, 브라우저 페이지가 포함돼 있다.
   2. 영상은 Bun으로 의존성을 설치하고 시작 템플릿 명령을 실행한다. 별도의 모델 다운로드나 학습 시작 단계 없이 버튼이 작동한다.
   3. 영상 중간에는 실습 코드·자료 안내와 함께 강의 소개도 짧게 들어간다.

2. 토글 동작에 필요한 상태

   1. 화면 크기, 포인터가 눌렸는지·놓였는지, 현재 켜짐 상태 등이 입력 또는 상태값으로 들어간다.
   2. 값은 Float32Array 계열로 저장되고, 각 값의 허용 범위와 간격도 설정한다.
   3. 화면 너비와 트랙 너비로 버튼 손잡이의 중앙 좌표를 계산하고, 포인터가 트랙 경계 안에 있는지 검사한다.

3. 포인터 상호작용과 애니메이션

   1. 트랙 안에서 누르고 놓으면 상태가 바뀌고 손잡이는 목표 위치로 부드럽게 움직인다.
   2. 안에서 눌렀더라도 바깥에서 놓으면 토글되지 않도록 눌림·놓임 이벤트를 구분한다.
   3. 브라우저가 입력 숫자를 채우고 Handwired 계산을 실행한 뒤, 화면에 상태와 좌표를 기록한다. 애니메이션에서는 위치와 속도 일부가 다음 계산의 입력이 된다.
   4. 이벤트 수집·시간 관리·HTML 반영은 주변의 호스트 JavaScript가 담당한다.

2.2. 테스트와 입력 제약

1. 일반 코드와 같은 입력을 비교한다

   1. 토글 컴파일 결과는 입력 20개와 실제 연산 67개로 소개된다. 층 수는 자막에서 정확한 숫자를 확인하기 어려워 따로 단정하지 않는다.
   2. 공식 토글 테스트 3개가 통과했고, 총 306개 확인이 수행됐다고 설명한다.
   3. 상태와 트랙 위치는 일반 JavaScript 결과와 비교하고, 스프링 애니메이션은 부동소수점 정밀도 차이를 고려해 작은 허용 오차로 검사한다.

2. 입력 범위도 계약의 일부다

   1. 포인터 좌표를 64픽셀 간격으로 선언했다면 그 간격에 맞지 않는 입력은 검사기가 거절한다.
   2. 출력이 우연히 맞아 보이는지보다, 선언한 입력 영역에서 계산이 약속대로 동작하는지를 확인하는 방식이다.

3. 더 큰 데모: 데스크톱·갤러리·문서 검색

3.1. Handwired OS 데스크톱

1. 창·사진·메모를 포함한 UI
   1. 데스크톱 데모에서는 사진을 열고 창을 옮기며 메모를 입력할 수 있다.
   2. 좌측 모니터에는 계산 구조와 상태가 표시되며, 영상에서 소개한 규모는 연산 4,646개, 층 130개, 저장 가중치 9,909개다.
   3. 창을 끌면 위치값이 바뀌고 사진 확대 동작에는 관련 숫자값이 쓰인다. 메모 텍스트 입력 자체는 브라우저 기본 기능이다.

3.2. 목표 배치를 따라 학습하는 사진 갤러리

1. 사진이 아니라 배치 변수를 학습한다

   1. 화면 왼쪽에서 목표 사각형을 그리고 오른쪽에서 신경망이 계산한 사진 배치를 확인한다.
   2. 목표 위치나 크기를 바꾸면 사진 배치가 따라가며, 손실값과 학습 횟수가 화면에 표시된다.
   3. 프리셋 변경 또는 재학습은 초기 가중치부터 다시 맞춘다. 사진을 생성하는 것이 아니라 사진의 위치와 크기를 학습하는 예다.

2. 고정 계산과 학습 계수의 공존

   1. 일부 계산은 사람이 정한 값으로 실행한다.
   2. 선택한 계수를 풀면 목표 배치에 맞도록 그 부분을 학습시킬 수도 있다.

3.3. JSON 문서 10만 건 검색

1. 동일 패턴을 대량 데이터에 적용한다

   1. 예제로 만든 JSON 문서 10만 건 중 검색어에 맞는 항목을 점으로 표시하고 내용을 보여준다.
   2. 영상의 예시에서 error 검색은 1,559건, 이메일 패턴은 14,481건, id로 끝나는 키 검색은 23,795건을 찾았다.
   3. 검색 입력과 범위를 바꾸면 결과와 실행 시간이 갱신된다.

2. GPU 병렬 계산의 사례

   1. 이 데모는 UI 데모와 달리 WebGPU를 사용해 정규식 검사와 JSON 처리를 여러 문서에 병렬 적용한다.
   2. 검색어는 입력 데이터이며, 키를 누를 때마다 GPU 프로그램 자체를 새로 만드는 구조는 아니라고 설명한다.
   3. 화면에는 Handwired와 기본 정규식 검색의 시간도 함께 비교된다.

4. 직접 만든 갤러리로 확인한 재사용성

4.1. 레이아웃·필터·클릭 판정

1. 여섯 개 에셋으로 화면 동작 구성

   1. 영상 제작에 사용한 텀블러·가족 이미지와 생성 영상에서 가져온 장면 등 여섯 개 이미지로 갤러리를 만든다.
   2. Handwired가 위치·크기·표시 여부·클릭 판정을 계산하도록 연결한다.
   3. 3열을 2열로 바꾸거나 간격을 16픽셀에서 32픽셀로 바꾸면 출력 좌표와 너비가 갱신된다.

2. 필터와 선택 결과 비교

   1. 제품 필터에서는 텀블러만 남고 나머지는 흐려지며, 텀블러 클릭은 첫 번째 에셋 선택으로 판정된다.
   2. 스토리 필터로 바꾸면 가족·영화 장면이 활성화된다.
   3. Handwired 출력 좌표와 보통 JavaScript의 계산 결과를 화면에서 나란히 비교한다.

4.2. 입력 조합을 늘려 테스트

1. 동일한 행동을 수만 개 출력값으로 대조한다
   1. 화면 너비 4종, 간격 3종, 열 배치 2종과 필터 조합을 바꾼다.
   2. 사진 중앙·경계 안팎을 포함해 약 2,300개 입력 사례를 구성하고, 82,944개 출력값을 일반 코드와 비교한다.
   3. 이 비교가 배치·클릭 결과가 의도한 계산과 일치하는지 확인하는 근거로 제시된다.

5. 적응형 카드 배치 실험과 활용 한계

5.1. 카드 폭을 정하는 공유 규칙

1. 여러 맥락을 입력으로 받는다

   1. 공식 저장소의 공유 배치 실험은 화면 폭, 사진 비율, 설명 길이, 중요도 등을 포함한 8개 숫자를 입력받아 카드 너비를 계산한다.
   2. 학습된 계수는 121개이며, 너비 계산 다음 줄바꿈과 화면 렌더링은 JavaScript가 맡는다.
   3. 텀블러 중요도를 높이자 폭이 약 207픽셀에서 293픽셀로 커진다. 중요 상품에 더 많은 면적을 배정하는 동작이다.

2. 화면 폭과 설명 길이에 반응한다

   1. 설명을 길게 하고 화면 폭을 620픽셀에서 420픽셀로 줄이면 카드 폭과 줄 배치가 다시 정해진다.
   2. 예시는 이미지를 잘라 빈칸을 채우기보다 전체 이미지를 유지하고 설명을 끝까지 표시하도록 설계됐다.

5.2. 배치 점수와 실패 조건

1. 고정 폭·탐색 방식과 비교한다

   1. 화면 폭 4종, 중요도·설명 길이 조합 16개 조건에서 고정폭, 공유 규칙, 후보 탐색 방식을 비교해 총 48개 배치 사례를 본다.
   2. 총 288개 카드에서 누락·설명 넘침·가로 넘침·겹침은 없었다.
   3. 공유 규칙은 16개 조건 중 12개에서 고정폭보다 점수가 높았고, 중요도는 낮으면서 설명이 긴 조건에서는 오히려 낮았다.

2. 점수는 서비스 목표에 따라 달라진다

   1. 점수에는 중요한 이미지에 주는 면적, 설명이 세 줄을 넘는지, 행에 남는 빈 공간 등이 반영된다.
   2. 실패 조건을 학습 사례로 보강하고 배치 기준을 조정해야 실제 제품에 적합해진다.
   3. JSON으로 위치·크기·줄바꿈 정보를 저장하고 PNG 에셋 목록도 내보내는 흐름을 보여준다.

5.3. 언제 쓸 만한가

1. 규칙을 반복 실행·테스트해야 할 때

   1. 쇼핑몰 상품 카드처럼 중요도·설명량·화면 크기에 따라 작은 배치 함수를 재사용하는 사례가 가능하다.
   2. 대량 문서 검색처럼 같은 조건을 많은 데이터에 반복 적용하는 계산도 데모로 제시된다.
   3. 영상은 공개 가능한 영상·파일이나 특정 크기 이미지 등 메타데이터 조건을 조합하는 미디어 관리 활용을 아이디어로 든다.

2. 기존 웹 앱이나 일반 코드를 자동 대체하는 도구는 아니다

   1. 원하는 규칙을 빌더 API로 직접 표현해야 하고, 호스트 코드와 화면 렌더링도 필요하다.
   2. 계수 학습이 가능한 지점과 고정 규칙으로 둘 지점을 선택하며 테스트 데이터를 마련해야 한다.
   3. 따라서 영상에서 확인한 가치는 ‘모든 UI를 AI로 만든다’가 아니라 숫자 계산을 명시적이고 비교 가능한 네트워크로 표현한다는 데 있다.

주요 발언의 취지

• Handwired는 예시를 많이 외운 다음 답을 추측하기보다, 원하는 동작을 계산으로 연결한다.
• 일부 계수는 학습시킬 수 있지만 입력 범위와 기대 동작을 먼저 명확히 해야 한다.
• RASP는 트랜스포머 계산을 표현하는 프로그래밍 언어로 소개되고, Tracr는 읽을 수 있는 프로그램을 실제 트랜스포머로 컴파일하는 연구로 언급된다.

핵심 데이터 & 수치

• 공식 소개글 조회수: 영상 확인 당시 136만 회 이상.
• 토글 예제: 입력 20개, 연산 67개, 테스트 3개 통과·306회 검사.
• Handwired OS: 연산 4,646개·층 130개·가중치 9,909개.
• JSON 데모: 문서 10만 건, 예시 검색 결과 1,559 / 14,481 / 23,795건.
• 직접 만든 갤러리: 에셋 6개, 약 2,300개 입력, 82,944개 출력 비교.
• 공유 배치: 입력 특성 8개·계수 121개·16조건 평가, 288개 카드에서 누락·넘침·겹침 0건, 12/16 조건에서 고정폭보다 높은 점수.

결론 및 시사점

1. Handwired는 일반 신경망 학습의 대체품이 아니라 계산 그래프를 사람이 직접 구성하는 실험적 프로그래밍 방식이다.
2. UI 작업 중 명확한 수식이나 상태 규칙으로 표현할 수 있고, 일부 값을 데이터에 맞춰 조정할 필요가 있다면 탐색 가치가 있다.
3. 입력 범위·간격을 지키지 않으면 조건 계산이 달라질 수 있으므로, 수치 제약과 테스트가 구현의 일부다.
4. 브라우저 이벤트·HTML 입력·화면 렌더링은 여전히 호스트 코드가 맡는다. 데모를 실제 제품에 적용할 때는 이 경계를 고려해야 한다.
5. 이 방식의 설득력은 ‘신경망이니까 맞다’가 아니라 일반 코드와 나란히 비교한 출력 테스트와 실제 실패 조건을 공개하는 데서 나온다.