NO NAME COMPANY.

30가지 인터랙티브 아트워크를 보여주는 정적 웹사이트입니다. 서버, 데이터베이스, 별도의 빌드 과정 없이 HTML과 JavaScript로 동작합니다.

파일 구성

파일 / 폴더	역할
`index.html`	페이지 구조, 반응형 스타일, 푸터와 개발자 패널
`artwork.js`	아트워크 30종의 캔버스 렌더링, 커서·터치 반응, 개발자 패널 조작
`artwork-schedule.js`	시간 슬롯 계산, Seed 기반 난수 생성과 셔플
`favicon.png`	사이트 아이콘
`tests/`	렌더링과 동작을 확인하는 자동 테스트. 웹사이트 실행에 사용되지 않음

프로젝트 폴더에서 아래 명령을 실행하고 http://localhost:8080에 접속합니다. Python 3가 필요합니다.

python3 -m http.server 8080

정적 호스팅에는 index.html, artwork.js, artwork-schedule.js, favicon.png를 함께 올리면 됩니다. tests/는 배포하지 않아도 됩니다.

브라우저의 Date.now()로 현재 시간을 계산합니다.
Unix 시간 기준 **137분(2시간 17분)**을 하나의 슬롯으로 사용합니다.
같은 슬롯에서는 새로고침하거나 다른 브라우저로 접속해도 같은 작품을 선택합니다. 기기의 시계가 일치해야 합니다.
30개 슬롯을 하나의 루프로 묶습니다. 한 루프는 68시간 30분입니다.
루프 번호를 Seed로 사용한 Mulberry32 난수와 Fisher–Yates 셔플로 순서를 생성합니다. 한 루프에서 30개 작품을 각각 한 번씩 보여줍니다.
다음 루프의 첫 작품이 이전 루프의 마지막 작품과 같으면 첫 번째와 두 번째 항목을 교환합니다.
순서나 현재 작품을 서버, 쿠키, 브라우저 저장소에 저장하지 않습니다.
페이지를 열어둔 상태에서도 다음 슬롯에 진입하면 작품이 바뀝니다. 탭에 다시 돌아오거나 창이 활성화될 때도 현재 시간을 확인합니다.
점을 사용하는 작품의 기본 배치 역시 슬롯과 작품 번호로 재현합니다.

다크 모드와 움직임 줄이기 설정을 지원합니다. 움직임 줄이기가 켜져 있어도 137분마다 작품 자체는 전환됩니다.

개발용 플로팅 패널은 기본적으로 숨겨져 있습니다.

5초 전에 손을 떼거나 12px보다 크게 움직이면 롱프레스가 취소됩니다. 터치 취소, 포커스 이탈, 탭 숨김도 취소 조건입니다. 키보드로 zenn에 포커스를 둔 뒤 Enter 또는 Space를 5초간 눌러 열 수 있으며, 패널에서 Escape로 닫을 수 있습니다.

직접 고른 작품은 임시 미리보기입니다. 다음 시간 슬롯에 진입해도 예정된 작품으로 돌아갑니다. 새로고침하면 패널은 다시 숨겨집니다.

tests/는 사이트 기능을 검사하기 위해 만든 개발용 코드입니다. 삭제해도 사이트 동작에는 영향이 없지만, 이후 수정 사항을 검증하려면 유지하는 편이 좋습니다. 테스트 실행에는 Node.js가 필요하며, 별도 패키지 설치는 필요하지 않습니다.

node --test tests/artwork-schedule.test.cjs tests/artwork.test.cjs

테스트 파일	확인하는 내용
`artwork-schedule.test.cjs`	137분 경계, Seed 재현성, 한 루프의 순열, 1만 개 루프의 경계 중복 방지, 첫 두 항목 교환
`artwork.test.cjs`	패널 기본 숨김, 마우스·터치의 5초 롱프레스, 입력 취소, 닫기, 슬롯 자동 전환, 기본 배치 재현, 30개 작품 미리보기

테스트는 가상 시간과 브라우저 모의 객체를 사용합니다. 실제 브라우저의 시각적 품질이나 실제 모바일 기기의 터치 동작까지 검증하지는 않습니다. 디자인이나 입력 처리를 변경했다면 실제 브라우저에서도 확인해 주세요.

git config --local user.name zenn
git config --local user.email zenn.message@gmail.com

원격 저장소: https://git.sori.studio/noname.company/root.git