작은 실험에 각자의 주소를 주는 방법

홈페이지가 모든 코드를 품을 필요는 없다

개인 사이트에서 게임이나 작은 도구를 소개한다고 해서, 그 프로젝트의 코드가 모두 홈페이지 저장소 안에 있어야 하는 것은 아닙니다.

각 프로젝트를 따로 개발하고 배포한 뒤 홈페이지에는 설명과 실행 링크를 올릴 수 있습니다. 별도로 구매한 도메인의 서브도메인을 연결하면 같은 공간의 일부처럼 안내할 수도 있습니다.

세 가지를 분리하기

1. 저장소는 코드를 관리하는 곳입니다.
2. 배포 프로젝트는 그 코드를 실행하거나 웹 파일을 제공하는 곳입니다.
3. 도메인은 방문자가 찾아오는 주소입니다.

가령 메인 사이트와 퍼즐 게임이 서로 다른 GitHub 저장소에 있어도 각각 독립적으로 배포할 수 있습니다. 메인에는 대표 주소를, 게임에는 puzzle.example.com 같은 주소를 연결하는 방식입니다.

전시 목록에는 무엇을 남길까

프로젝트마다 제목, 짧은 설명, 대표 이미지, 실행 주소, 공개 소스 주소를 남겨두면 좋습니다. 아직 개발 중이라면 그 상태와 제작 기록도 함께 표시합니다.

{
  "title": "나의 작은 실험",
  "url": "https://experiment.example.com",
  "kind": "미디어아트",
  "status": "실험 중"
}

프로젝트가 바뀌어도 본체 전체를 다시 고칠 필요가 줄어듭니다. 서버가 필요한 앱은 서버가 있는 곳에, 정적 웹 게임은 정적 호스팅에 올려둘 수 있습니다.

먼저 작은 것부터

이 사이트의 첫 실험인 생각의 궤도와 작은 짝맞추기는 본체에 포함되어 있습니다. 현재는 모노레포를 사용합니다. 독립적인 서버가 필요한 실습은 apps/<slug>/에 만들고 앱별로 배포합니다. 이미 다른 저장소에서 만든 앱도 옮길 필요 없이 실행 주소와 설명 글로 연결합니다.

공식 문서: Cloudflare 사용자 도메인, Git 연동.

지금 선택한 모노레포 구조

apps/site는 공개 홈페이지, apps/studio는 본인만 접근하는 기록 검토·발행 공간입니다. 공통 글 형식과 화면 스타일은 packages/에 두었습니다.

앞으로 만들 챗봇이나 대기열 실습은 목적에 따라 별도 앱으로 추가합니다. 같은 종류라도 서로 다른 실험이면 각자의 이름과 실행 주소를 가질 수 있습니다. 구현 설명에서 차이를 비교하고, 실행 화면은 독립적으로 연결합니다.

Orbit

직접 해보기

브라우저의 Canvas에 입자를 그리고, 마우스 위치와 속도·밀도 입력에 따라 움직임을 바꿉니다. 서버에 상태를 저장하지 않아 로그인 없이 사용할 수 있습니다. 색 조합을 바꾸고 현재 장면을 이미지로 내려받을 수 있습니다.

페이지가 보이지 않을 때는 움직임을 멈추고, 움직임 줄이기 설정에서는 일시정지 상태로 시작합니다. 시각 효과와 사용자의 제어를 함께 고려한 작은 실험입니다. 현재 시각화는 AI 추론이나 물리 실험 결과가 아닌 브라우저 그래픽입니다.

Pairs

직접 해보기

열여섯 장의 카드에서 같은 모양을 찾는 브라우저 게임입니다. 뒤집은 카드, 시도 횟수, 맞춘 쌍과 경과 시간을 화면 상태로 관리합니다.

이미 열린 카드를 다시 누르거나, 다른 두 카드가 닫히기 전에 세 번째 카드를 누르는 경우를 구분합니다. 새 게임을 시작하면 진행 중인 타이머와 카드 처리를 초기화합니다. 키보드로도 카드를 선택하고 뒤집을 수 있습니다.

현재 기록은 브라우저 화면 안에서만 유지하며 순위표나 회원 계정은 없습니다. 작은 게임에서도 입력 순서와 초기화 시점을 분명히 하는 것이 중요하다는 것을 살펴볼 수 있습니다.