saiff2026winter

## 개요 2026년 2월 15일 개최 예정인 이벤트 「삿포로 스고이 AI 마츠리」의 공식 랜딩 페이지입니다. HTML, CSS, JavaScript만으로 구성된 정적 사이트로, 빌드 도구나 프레임워크에 의존하지 않습니다. ## 디자인 특징 - 불을 모티브로 한 파티클 애니메이션, 그라데이션, 전용 컬러 팔레트 - 모던한 다크 테마 - 모바일, 태블릿, 데스크톱에 대응하는 반응형 설계 - 스크롤 애니메이션과 패럴랙스 효과 등의 인터랙션 컬러 팔레트는 CSS 변수(`:root`)로 정의되어 있으며, `--flame-red`, `--flame-orange`, `--flame-yellow`, `--flame-bright`, `--dark-bg`, `--dark-surface`, `--dark-elevated` 등을 변경하여 배색을 조정할 수 있습니다. ## 콘텐츠 구성 3개의 프로그램을 소개합니다. 1. AI 비즈니스 콘테스트 — 시민이 비즈니스 아이디어를 발표 2. AI 예술제 — AI와 함께 만드는 아트, 음악, 영상 라이브 쇼 3. AI 전시·체험회 — 전시 부스에서의 AI 작품 전시와 체험 이들을 뒷받침하는 기초 지식을 제공하는 무료 e-learning 사이트 「스고이 AI 도장」이 독립 섹션으로 게재되어 있으며, 외부 링크(dojo.sugoiai.org)로 안내됩니다. 크라우드 펀딩 링크와 Discord 초대 링크를 기재할 수 있는 칸도 있습니다. ## 파일 구성 - `index.html` — 랜딩 페이지 본체 - `style.css` — 스타일시트 - `script.js` — 애니메이션과 인터랙션 - `requirements.md` — 요구사항 정의 - `todo.md` — 작업 내역 및 체크리스트 - `README.md` — 설명 ## 사용 방법 브라우저에서 `index.html`을 직접 열거나, Python 3의 `python3 -m http.server 8000` 또는 `npx http-server` 등 로컬 서버로 표시합니다. 정적 사이트이므로 Netlify(드래그&드롭), Vercel(Git 리포지토리 연동), GitHub Pages, Firebase Hosting 등에 그대로 배포할 수 있습니다. ## 사용자 정의 - 텍스트는 `index.html`을 편집 - 배색과 간격은 `style.css`의 CSS 변수로 조정 - 스크롤 애니메이션 타이밍, 패럴랙스 효과 강도, 호버 효과는 `script.js`로 조정 이미지는 현재 플레이스홀더이며, `images/` 폴더에 이미지를 배치하고 `.image-placeholder` 요소를 img 태그로 교체하는 절차가 설명되어 있습니다. ## 성능 측면의 구현 CSS Grid/Flexbox를 활용한 레이아웃, Intersection Observer를 활용한 지연 애니메이션, requestAnimationFrame을 활용한 스크롤 처리, CSS transforms를 활용한 하드웨어 가속 등이 언급되어 있습니다. ## 배포 전 체크리스트 Discord 초대 링크를 실제 URL로 변경, 이미지 플레이스홀더 교체, OGP 이미지와 파비콘 설정, 접속 분석 설정, 모든 링크 동작 확인, 각 화면 폭에서의 표시 확인이 언급되어 있습니다. ## 운영 정보 주최는 삿포로 스고이 AI 회입니다. 문의처로 X(Twitter) 계정 @ykishimotoy와 해시태그 #さっぽろすごいAIまつり가 기재되어 있습니다.