수제 셀룰러 오토마타
Source: Dev.to
번역할 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다. (코드 블록이나 URL은 그대로 유지됩니다.)
Introduction
이 튜토리얼은 첫 번째 computational sandbox을 만들고 배포하는 과정을 단계별로 안내합니다—시뮬레이션 규칙을 정의하고 결과를 탐색할 수 있는 환경이죠. 멘토와 함께 진행하도록 설계되었습니다.
이는 “바이브 코딩(vibe coding)”과는 정반대입니다. 이러한 시뮬레이션을 사용해 세상을 생각하고 배우려면, 그 작동 원리를 모두 알아야 합니다. 그래서 우리는 모든 과정을 수작업으로 진행합니다. 최소한으로 필요한 설정을 다음과 같이 다룰 것입니다:
- 스스로 컴퓨터에서 실행할 수 있도록 하기.
- 협업자가 편집하고 확장할 수 있도록 공유하기.
영감
- Permacomputing
- Derek Sivers의 “tech independence” 철학
- 또한 보기:
- Rosano’s Zero Data Apps
- The Kosmos network
- Casey Muratori의 “Handmade Hero” 시리즈
- Explorable Explanations
- 사회학에 관한 시뮬레이션인 Parable of Polygons와 같이
- Cameras & Lenses, 카메라, 빛, 시각에 관한 시뮬레이션
- 인터넷 아트 실험:
- Nolan – eieio.games
- Neal – neal.fun
- Nolan’s newsletter를 보세요
- 간단한 연구 프로토타입 예시 (몇 줄의 코드와 단일 HTML 파일):
시리즈 개요
- (this article) 컴퓨터에서 일반 HTML 파일에 코드를 실행하고, CodePen을 이용해 인터넷에 배포하는 방법.
- GitHub Pages에 무료 정적 웹사이트 또는 앱 배포하기, 예시:
- 매우 기본적인 백엔드:
- 무료 백엔드로 Google Sheets 사용.
- remoteStorage 로 “내 서버 가져오기(BYO server)”.
- 무료 Cloudflare 객체 스토리지.
- OAuth(트위터/구글 로그인)를 이용한 기본 사용자 관리.
- 기본 컴퓨터 그래픽 시각화(원시 픽셀 렌더링, PixiJS 또는 ThreeJS 사용).
- 기본 데이터 분석(Jupyter 노트북 & Google Colab):
- 오픈소스 코드베이스 탐색, 포크, 편집 및 풀 리퀘스트 기여 팁.
이번 레슨에서는 컴퓨터에 단일 HTML 파일로 셀룰러 오토마타 시뮬레이션을 설정한 뒤, 이를 CodePen에 복사·붙여넣어 인터넷에 공유합니다.
1. Install VS Studio Code
우리는 코드를 편집하기 위한 IDE로 VS Code를 사용할 것입니다. 코드를 실행하는 것은 웹 브라우저입니다.
VS Code는 어떤 프로그래밍 언어든 편집할 수 있습니다—코드를 편집기 외부에서 실행하거나, 실행을 대신해 주는 플러그인을 설치함으로써 가능합니다.
Source: …
2. HTML 파일 만들기
HTML 파일은 .html 확장자를 가진 텍스트 파일에 불과합니다. HTML 안에 실행하고 싶은 JavaScript를 삽입합니다.
- VS Code(컴퓨터 어디든)로
vanilla.html이라는 파일을 만듭니다. - 다음 코드를 파일에 붙여넣습니다:
<!DOCTYPE html>
<html>
<head>
<title>Vanilla JS</title>
</head>
<body>
Hello!
<script>
// This is how you embed JavaScript inside of HTML
console.log("Hello world!");
</script>
</body>
</html>Note: 이 시리즈에서는 JavaScript 문법 기본을 다루지 않습니다. 보조 자료가 있거나 이미 알고 있다고 가정합니다. 저는 **Eloquent JavaScript**와 **Codecademy JavaScript interactive lessons**를 추천합니다.
vanilla.html을 브라우저에서 열어 코드를 실행합니다.- 브라우저 콘솔을 엽니다(보통
F12→ Console) 그리고Hello world!가 로그에 찍혔는지 확인합니다.
Challenge
웹 페이지에 현재 시간을 표시해 보세요.
- JavaScript로 현재 시간을 가져옵니다.
document.querySelector()를 사용해 “ 요소를 선택하고, 그 내용을 현재 시간으로 교체합니다.setInterval을 사용해 표시를 자동으로 업데이트합니다.
Solution:
Tip: 브라우저 콘솔을 REPL처럼 사용할 수 있습니다!
window.myVar = myVar와 같이 코드를 통해 변수를 노출시키면 앱에서 실시간으로 해당 변수를 편집할 수 있습니다.
3. 코드를 인터넷에 배포하기
이 방법은 코드를 수백만 대의 기기에서 가장 빠르게 실행할 수 있게 해줍니다. 코드는 중앙 서버가 아니라 사용자의 컴퓨터에서 실행되기 때문에 “무한히” 확장 가능합니다. CodePen을 이용하면 정적 HTML/JS를 매우 저렴하게(무료로) 호스팅할 수 있습니다.
- CodePen.io 로 이동하여 새 Pen을 만들세요.
vanilla.html파일의 전체 내용을 HTML 패널에 붙여넣으세요 (<script>태그는 자동으로 JS 패널에 들어갑니다).- Pen을 저장하고, 다른 사람들이 볼 수 있도록 Public 설정을 활성화하세요.
- URL을 협업자와 공유하거나 블로그 글에 Pen을 삽입하세요.
이제 서버 없이도 누구든 브라우저에서 열 수 있는 실시간 공유 시뮬레이션이 준비되었습니다!
다음 단계는?
- 간단한 백엔드 추가하기 (Google Sheets, remoteStorage, 혹은 Cloudflare).
- OAuth 로그인 구현하기 (Twitter/Google).
- 그래픽 라이브러리 탐색하기 (PixiJS, ThreeJS).
- Jupyter/Colab 으로 데이터 분석에 뛰어들기.
행복한 해킹 되세요! 🚀
코드 배포하기
코드는 파일만 제공하므로 (대역폭은 사용하지만 CPU는 사용하지 않음) 정적 호스트라면 어디든 호스팅할 수 있습니다.
- CodePen 계정을 만들기 – 사이트에 접속하여 회원가입하세요.
- 새 “pen” 만들기.
- 코드를 붙여넣기를 편집기의 HTML 섹션에 넣으세요.
- 오른쪽 상단의 Save 버튼을 클릭하세요.
- 공유하려면 오른쪽 하단( Share / Export / Embed 와 같은 행에 있는) share 아이콘(상자 밖으로 나가는 화살표)을 클릭하세요.
공유된 링크는 다음과 같은 형태가 됩니다: (예시 생략)
CodePen에서 계속 편집하거나 로컬의 VS Code에서 편집할 수 있습니다.
Source: …
4. 애니메이션 사각형
우리는 사각형이 앞뒤로 움직이는 것처럼 보이게 그릴 것입니다. 실제로는 매 프레임마다 캔버스를 지우고 사각형을 새로운 위치에 다시 그립니다.
현재 코드를 다음 템플릿으로 교체하세요:
<!DOCTYPE html>
<html>
<head>
<title>Vanilla JS</title>
<style>
html, body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// Full‑screen canvas
const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
let positionX = 25;
function loop() {
// Clear the screen
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw a rectangle: x, y, width, height
ctx.fillRect(positionX, 25, 20, 20);
// Move the rectangle for the next frame
positionX += 1;
// Schedule the next frame
requestAnimationFrame(loop);
}
// Start the animation
loop();
</script>
</body>
</html>- 전체 화면 모드 진입 – 미리보기에서 전체 화면 버튼을 클릭합니다.
- 전체 화면 모드 종료 – 같은 버튼을 다시 클릭합니다.
도전 과제
- 상자를 더 빠르게 움직이게 만들기.
- 상자를 오른쪽 가장자리에서 시작해 왼쪽으로 이동시키기.
- 상자를 앞뒤로 움직이게 만들기.
세 번째 도전 과제에서는 카운터 변수의 사인값을 X‑위치에 설정합니다. sin()은 [-1, 1] 범위의 값을 반환하므로 원하는 범위에 맞게 스케일링합니다.
솔루션 예시: (구현은 생략)
Source: …
5. 셀룰러 오토마타 그리드
우리는 각 픽셀에 무작위 색을 할당한 격자를 시작점으로 사용할 것입니다. 이는 Conway의 Game of Life와 같은 셀룰러 오토마타 시뮬레이션의 기반이 됩니다.
현재 코드를 다음으로 교체하세요:
<!DOCTYPE html>
<html>
<head>
<title>Vanilla JS</title>
<style>
html, body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
const grid = {};
const gridSize = 5; // 이 값을 바꿔 보세요
initGrid();
function loop() {
requestAnimationFrame(loop);
updateGrid();
drawGrid();
}
loop();
function initGrid() {
// 초기 무작위 색으로 격자를 채웁니다
for (let x = 0; x
}
// 추가 함수들 (updateGrid, drawGrid 등)은 여기서 정의됩니다
</script>
</body>
</html>- 전체 화면 모드 진입 – 미리보기에서 전체 화면 버튼을 클릭합니다.
- 전체 화면 모드 종료 – 같은 버튼을 다시 클릭합니다.
도전 과제
grid를 브라우저 콘솔에 노출시켜 실시간으로 편집할 수 있게 합니다.
힌트:window.grid = grid;
그런 다음 콘솔에서Object.keys(grid).forEach(k => grid[k] = 0);와 같은 한 줄 코드를 실행할 수 있습니다.updateGrid를 수정하여 매 프레임마다 색이 변하도록 만드세요.- 각 픽셀의 색을 왼쪽 이웃 픽셀의 색으로 설정합니다 (오류를 방지하기 위해 왼쪽 가장자리 경계를 처리하세요).
gridSize, 색 계산, 이웃 규칙 등을 자유롭게 실험하여 흥미로운 셀룰러 오토마타 동작을 만들어 보세요!