79 lines
4.8 KiB
Markdown
79 lines
4.8 KiB
Markdown
# NO NAME COMPANY.
|
||
|
||
30가지 인터랙티브 아트워크를 보여주는 정적 웹사이트입니다. 서버, 데이터베이스, 별도의 빌드 과정 없이 HTML과 JavaScript로 동작합니다.
|
||
|
||
## 파일 구성
|
||
|
||
| 파일 / 폴더 | 역할 |
|
||
| --- | --- |
|
||
| `index.html` | 페이지 구조, 반응형 스타일, 푸터와 개발자 패널 |
|
||
| `artwork.js` | 아트워크 30종의 캔버스 렌더링, 커서·터치 반응, 개발자 패널 조작 |
|
||
| `artwork-schedule.js` | 시간 슬롯 계산, Seed 기반 난수 생성과 셔플 |
|
||
| `favicon.png` | 브라우저 아이콘과 헤더 identity 영역의 로고 |
|
||
| `tests/` | 렌더링과 동작을 확인하는 자동 테스트. 웹사이트 실행에 사용되지 않음 |
|
||
|
||
## 로컬 실행
|
||
|
||
프로젝트 폴더에서 아래 명령을 실행하고 `http://localhost:8080`에 접속합니다. Python 3가 필요합니다.
|
||
|
||
```sh
|
||
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분마다 작품 자체는 전환됩니다.
|
||
|
||
## 개발자 모드
|
||
|
||
개발용 플로팅 패널은 기본적으로 숨겨져 있습니다.
|
||
|
||
1. 푸터의 **`zenn`을 5초간 길게 누릅니다.** PC 마우스와 모바일 터치를 지원합니다.
|
||
2. 드롭다운에서 작품 번호와 이름을 확인하고, 직접 선택합니다.
|
||
3. 이전·다음·랜덤 버튼으로 작품을 미리 볼 수 있습니다.
|
||
4. 패널 우측 상단의 **X**를 누르면 숨겨지고, 현재 시간에 맞는 작품으로 돌아갑니다.
|
||
|
||
5초 전에 손을 떼거나 12px보다 크게 움직이면 롱프레스가 취소됩니다. 터치 취소, 포커스 이탈, 탭 숨김도 취소 조건입니다. 키보드로 `zenn`에 포커스를 둔 뒤 Enter 또는 Space를 5초간 눌러 열 수 있으며, 패널에서 Escape로 닫을 수 있습니다.
|
||
|
||
직접 고른 작품은 임시 미리보기입니다. 다음 시간 슬롯에 진입해도 예정된 작품으로 돌아갑니다. 새로고침하면 패널은 다시 숨겨집니다.
|
||
|
||
## 자동 테스트 (`tests/`)
|
||
|
||
`tests/`는 사이트 기능을 검사하기 위해 만든 개발용 코드입니다. 삭제해도 사이트 동작에는 영향이 없지만, 이후 수정 사항을 검증하려면 유지하는 편이 좋습니다. 테스트 실행에는 Node.js가 필요하며, 별도 패키지 설치는 필요하지 않습니다.
|
||
|
||
```sh
|
||
node --test tests/artwork-schedule.test.cjs tests/artwork.test.cjs
|
||
```
|
||
|
||
| 테스트 파일 | 확인하는 내용 |
|
||
| --- | --- |
|
||
| `artwork-schedule.test.cjs` | 137분 경계, Seed 재현성, 한 루프의 순열, 1만 개 루프의 경계 중복 방지, 첫 두 항목 교환 |
|
||
| `artwork.test.cjs` | 패널 기본 숨김, 마우스·터치의 5초 롱프레스, 입력 취소, 닫기, 슬롯 자동 전환, 기본 배치 재현, 30개 작품 미리보기 |
|
||
|
||
테스트는 가상 시간과 브라우저 모의 객체를 사용합니다. 실제 브라우저의 시각적 품질이나 실제 모바일 기기의 터치 동작까지 검증하지는 않습니다. 디자인이나 입력 처리를 변경했다면 실제 브라우저에서도 확인해 주세요.
|
||
|
||
## Git 작업 규칙
|
||
|
||
- 커밋 메시지는 **항상 한국어**로 작성합니다.
|
||
- 이 저장소의 작성자는 `zenn <zenn.message@gmail.com>`을 사용합니다.
|
||
- 작성자 설정은 저장소에만 적용하고, 다른 프로젝트의 전역 설정은 변경하지 않습니다.
|
||
|
||
```sh
|
||
git config --local user.name zenn
|
||
git config --local user.email zenn.message@gmail.com
|
||
```
|
||
|
||
원격 저장소: `https://git.sori.studio/noname.company/root.git`
|