0007

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 레트로 퓨처리즘 디자인 랩 웹사이트를 만들어줘. 스튜디오 이름은 "PRISM"이고, 한국어 + 영어 혼용 사이트야. 전체적으로 사이버펑크/레트로 퓨처 감성의 다크 테마에 네온 컬러를 포인트로 써줘.

프로그램 개요 총 10개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.
(1) Hero (전체화면 인트로) (2) Marquee (무한 흐르는 키워드 띠) (3) About (스튜디오 소개) (4) Services (서비스 모듈 카드 6개) (5) Portfolio (포트폴리오 갤러리) (6) Break (전체화면 명언 인용 구간) (7) Case Study (대표 프로젝트 상세) (8) Team (팀 크루 소개) (9) Reviews (클라이언트 수신 기록) (10) Contact (문의 채널)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 부팅 스타일 로딩 화면도 있어야 해.

기능
2-1. 로딩 화면 (부팅 시퀀스) 페이지 처음 열리면 검정 배경에 터미널/컴퓨터 부팅 느낌의 로딩을 보여줘. "PRISM SYSTEM v7.1.0 / INITIALIZING DESIGN CORE... / LOADING MODULES_" 같은 텍스트를 Press Start 2P 픽셀 폰트로 작게 보여주고, 마지막 글자 뒤에 밑줄(_)이 깜빡이게 해줘. 텍스트 아래에 네온 그린 테두리의 가로 프로그레스 바가 0%에서 100%까지 랜덤 속도로 차오르게 해줘. 퍼센트 숫자도 실시간으로 표시해줘. 100% 도달 후 0.5초 뒤에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바(높이 60px)를 만들어줘. 왼쪽에 "[PRISM]" 로고(Press Start 2P 폰트, 네온 그린, 글로우 효과), 가운데에 메뉴 링크들(About, Services, Works, Project, Crew, Contact), 오른쪽에 "● ONLINE" 상태 표시(네온 그린 점 깜빡임 + 텍스트) 배치해줘. 스크롤 50px 이상 내려가면 네비게이션 배경이 반투명 검정 + blur(10px)로 바뀌게 해줘. 768px 이하 모바일에서는 메뉴와 상태 표시를 숨기고 햄버거 버튼(네온 그린 가로선 3개, 1px 보더 박스)을 보여줘. 햄버거 누르면 전체화면 모바일 메뉴가 페이드인 되면서 나타나고, 메뉴 항목 클릭하면 닫히게 해줘. 햄버거 활성화 시 위아래 선이 X자로 회전하고 가운데 선은 사라지게 해줘. 모든 앵커 링크 클릭 시 부드러운 스크롤로 이동하게 해줘.

2-3. CRT / 레트로 오버레이 효과 화면 전체에 고정된 스캔라인 오버레이를 깔아줘. 3px 간격의 가로 반복 라인(네온 그린 극미세 투명도)으로 CRT 모니터 느낌을 내줘. 또한 화면 전체에 고정된 그리드 배경(60px 간격, 네온 그린 극미세 투명도)을 깔아서 사이버 그리드 느낌을 내줘. 둘 다 pointer-events:none으로 인터랙션에 영향 없게 해줘.

2-4. 스크롤 애니메이션 (Reveal) 각 섹션의 주요 요소들에 스크롤 시 아래에서 위로 25px 이동하면서 페이드인 되는 애니메이션 넣어줘. IntersectionObserver 사용하고, threshold 0.08, rootMargin "0px 0px -30px 0px"으로 설정해줘. 같은 섹션 안에서도 요소마다 0.1초~0.5초씩 딜레이를 줘서 순차적으로 나타나게 해줘.

2-5. 포트폴리오 필터 포트폴리오 섹션 상단에 필터 버튼들(ALL, BRAND, DIGITAL, PHOTO) 넣어줘. 활성 필터 버튼은 네온 그린 테두리 + 네온 그린 텍스트 + 은은한 글로우로 강조해줘. (필터 클릭 시 버튼 활성 상태만 전환하는 간단한 처리로 해줘.)

2-6. 문의 폼 Name(필수), Email(필수), Project Type, Message(필수) 4개 필드로 만들어줘. 제출하면 실제 전송 없이, 버튼 텍스트가 "TRANSMITTED ✓"로 바뀌면서 테두리와 텍스트 색이 네온 블루로 변하게 해줘. 3초 후 원래대로 복구되면서 폼 리셋해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 검정) 보조 배경: #111 (진한 다크) 카드/폼 배경: #1a1a1a 네온 그린 (메인 포인트): #39ff14 네온 핑크 (보조 포인트): #ff2d95 네온 블루 (보조 포인트): #00f0ff 네온 옐로: #ffe600 흰색: #f5f5f5 회색 텍스트: #888 진한 회색: #444 아주 진한 회색(보더): #222 그리드 선: rgba(57,255,20,.06)

3-2. 서체 Google Fonts에서 아래 3개 불러와줘. Press Start 2P → 라벨, 태그, 시스템 텍스트, 로고, 작은 장식 텍스트용 (레트로 픽셀 폰트) Outfit (300~900) → 본문, 제목, UI용 (모던 산세리프) Noto Sans KR (300~900) → 한글 본문용 기본 body 서체는 'Outfit', 'Noto Sans KR', sans-serif 로 해줘.

3-3. 전체 톤앤무드 사이버펑크 + 레트로 퓨처리즘. 80~90년대 아케이드, CRT 모니터, VHS, 네온사인 감성이야. 섹션 제목 위에는 항상 작은 라벨(Press Start 2P, 매우 작은 사이즈, 네온 그린 + 글로우, letter-spacing 넓게)을 넣고, 앞에 ">" 기호를 네온 핑크로 붙여줘. 주요 요소에 네온 보더 (1px 실선 + 은은한 바깥/안쪽 글로우 box-shadow) 스타일을 반복 적용해줘. 색상별(그린, 핑크, 블루) 변형을 만들어줘. 텍스트에 네온 글로우 효과(text-shadow로 해당 색 0 0 10px + 투명 30% 0 0 30px)를 포인트 색상별로 적용해줘. 이미지에 코너 장식(작은 ㄱ자 모양 네온 그린 보더)을 사방에 넣어서 기술적/HUD 느낌을 내줘. selection(드래그) 색상은 네온 그린 배경 + 검정 텍스트로 해줘.

3-4. 각 섹션 디자인 상세 
(1) Hero 전체 화면(100vh), 2컬럼 그리드(텍스트 / 이미지)로 구성해줘. 왼쪽: "// DESIGN LAB — EST.2018" 작은 프리텍스트(Press Start 2P, 회색), 큰 타이틀 "RETRO (stroke 텍스트) / FUTURE (네온 그린 글로우) / DESIGN", 한글 설명문, 2개 버튼("EXPLORE ▸" 핑크 채움 버튼, "TRANSMIT" 네온 그린 테두리 버튼) 배치해줘. 오른쪽: 이미지에 글리치 프레임 효과(이미지 뒤에 핑크/블루 테두리가 약간 어긋나며 미세하게 떨리는 애니메이션), 사방 코너 장식, 좌상단에 "FEATURED_01" 태그(핑크 배경) 넣어줘. 

(2) Marquee 1rem 높이 패딩의 얇은 띠(상하 보더). 안에 서비스 키워드들(BRANDING, WEB DESIGN, MOTION, 3D ART, UI/UX, PHOTOGRAPHY, ART DIRECTION, SPATIAL)이 네온 그린 작은 점과 함께 무한 수평 스크롤하게 해줘. Press Start 2P 폰트, 진한 회색, 25초 루프. 

(3) About 2컬럼 그리드(이미지 / 텍스트)로 구성해줘. 왼쪽: 2개 이미지를 2열 그리드로 배치하고, 각각 네온 보더(그린/핑크)와 코너 장식 넣어줘. 호버 시 hue-rotate + saturate 필터 변화 효과 넣어줘. 오른쪽: 라벨, 제목(일부 핑크 네온), 한글 설명 2단락, 통계 3개(200+ PROJECTS / 8 YEARS / 35 AWARDS) 3컬럼 박스 배치. 각 숫자는 색상별(그린/핑크/블루) 네온 텍스트, 라벨은 Press Start 2P 초소형. 박스 호버 시 보더 색과 글로우 활성화. 

(4) Services 배경 #111, 중앙 정렬 헤더 + 3컬럼 그리드로 카드 6개 배치해줘. 각 카드: 배경 #0a0a0a, 보더 #222, 안에 큰 번호(01~06, Press Start 2P, 매우 진한 회색), 서비스 제목, 한글 설명 배치해줘. 호버 시 보더 네온 그린 + 글로우, 카드 상단에 그린→블루 그라디언트 2px 라인이 왼쪽에서 오른쪽으로 펼쳐지는 효과 넣어줘. 서비스 6개: Brand Identity, Web & Digital, Motion & 3D, Space Design, Photography, Art Direction 이고, 각각 한글 설명 1~2줄 넣어줘. 

(5) Portfolio 헤더(라벨+제목 왼쪽, 필터 버튼들 오른쪽) + 4컬럼 그리드(row 높이 220px) 갤러리. 일부 아이템은 가로 2칸(pc2) 또는 세로 2칸(pr2) 차지하게 해줘. 6개 프로젝트(Neon District/BRANDING/pc2, Chrome Wave/3D ART/pr2, Signal Fade/PHOTO, Arcade Shrine/SPACE, Tape Loop/MOTION, Retro Grid/DIGITAL/pc2) 넣어줘. 각 아이템: 이미지 기본 grayscale 40% + contrast, 호버 시 컬러 복원 + 1.04배 확대. 하단에서 올라오는 어두운 그라디언트 오버레이 위에 카테고리(Press Start 2P, 핑크)와 프로젝트명 표시. 좌상단에 프로젝트 ID(#047~#052, Press Start 2P, 진한 회색). 

(6) Break 높이 70vh, 전체 배경 이미지에 상→하 그라디언트 오버레이(30%→80% 어둡게). 중앙에 라벨(TRANSMISSION), 한글 명언(큰 타이틀 크기) "미래는 이미 여기에 있다. 단지 고르게 퍼지지 않았을 뿐이다.", 아래에 "— WILLIAM GIBSON" (Press Start 2P, 회색) 배치. 

(7) Case Study 배경 #111, 2컬럼 그리드(이미지 1.3fr / 텍스트 1fr). 이미지에 사방 코너 장식, 하단에 HUD 스타일 정보("REC ● 00:04:27 | PROJECT_#047 | 1920×1080", Press Start 2P, 네온 그린 + 글로우) 오버레이. 텍스트: 라벨, 제목 "Neon District" (일부 핑크), 한글 설명, 메타 정보 테이블(CLIENT/YEAR/SCOPE/AWARD 4줄, 하단 보더로 구분, 라벨은 회색 + 값은 볼드). 

(8) Team 4컬럼 그리드로 팀원 4명 배치해줘. 각 카드: 1:1 비율 사진(기본 grayscale 40%, 호버 시 컬러 복원), 사진 위에 스캔라인 오버레이(4px 간격), 아래에 이름(한글)과 역할(Press Start 2P, 네온 그린). 카드 호버 시 보더 핑크 + 은은한 핑크 글로우. 팀원: 강지수/CREATIVE_DIR, 박현우/ART_DIR, 이서연/LEAD_DESIGN, 최동건/MOTION_3D 

(9) Reviews 배경 #111, 3컬럼 그리드로 후기 카드 3개 배치해줘. 각 카드: 배경 #0a0a0a, 우상단에 "//" 장식(Press Start 2P, 매우 진한 회색), 후기 텍스트(회색, 가벼운 서체), 구분선, 작성자 이름(볼드), 소속/직함(Press Start 2P, 네온 블루). 호버 시 보더 네온 블루 + 글로우. 3개 후기 내용 한글로 넣어줘 (레트로 감성 관련, 뮤직비디오 관련, 웹사이트 관련). 

(10) Contact 2컬럼 그리드(이미지 / 폼). 왼쪽: 이미지에 사방 코너 장식, 좌하단에 "● ONLINE" 뱃지(네온 그린 보더, 깜빡이는 점 + 텍스트). 오른쪽: 라벨, 제목 "신호를 보내주세요" (일부 네온 그린), 한글 안내문, 연락처 정보 3개(EMAIL/PHONE/STUDIO, 각 라벨은 Press Start 2P 핑크), 그 아래 폼(Name+Email 2열, Project Type, Message 텍스트에리어). 입력 필드는 #111 배경 + #222 보더, 포커스 시 네온 그린 보더 + 글로우. 제출 버튼은 전체 너비, 네온 그린 테두리, 호버 시 배경 채움 + 글로우. Footer 4컬럼(브랜드+설명 2fr / NAV 1fr / MODULES 1fr / SOCIAL 1fr). 브랜드는 [PRISM] 로고(Press Start 2P, 네온 그린 글로우) + 한글 소개문(진한 회색). 각 컬럼 제목은 Press Start 2P 핑크. 링크는 진한 회색, 호버 시 네온 그린. 하단에 저작권(© 2026 PRISM LAB. ALL RIGHTS RESERVED.)과 시스템 버전(SYS_v7.1.0 // SEOUL_KR) 좌우 배치.

3-5. 이미지 실제 이미지는 placeholder로 넣어줘. 적절한 무료 이미지 URL이 없으면 빈 이미지 태그로 두거나, 그라디언트 배경으로 대체해줘.

기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 이징 커브 등 관리해줘. 반응형은 1024px, 768px 두 구간으로 미디어쿼리 작성해줘. 1024px 이하: Hero 1컬럼, About 1컬럼, Services 2컬럼, Portfolio 2컬럼(span 해제), Case Study 1컬럼, Team 2컬럼, Reviews 1컬럼, Contact 1컬럼, Footer 2컬럼 768px 이하: 햄버거 메뉴 활성화, Services 1컬럼, Portfolio 1컬럼, About 이미지 1컬럼, About 통계 1컬럼, Footer 1컬럼, 섹션 패딩 축소, Break 높이 50vh

4-3. JavaScript 관련 IntersectionObserver로 스크롤 애니메이션 처리해줘. querySelectorAll 등 기본 DOM API만 사용해줘. 별도의 번들러나 모듈 시스템 없이 전역 스코프에서 동작하게 해줘.

추가 조건 언어는 한국어 위주, 섹션 라벨/태그/메뉴/버튼/역할 텍스트 등은 영어로 해줘. HTML lang="ko"로 설정해줘. 전체적으로 콘텐츠 최대 너비는 1300px, 섹션 좌우 패딩 2.5rem 기본으로 해줘. 모든 transition에 0.3~0.5초 부드럽게 적용하고, 호버 효과 일관되게 해줘. 코드에 영역별로 주석 구분 넣어서 가독성 좋게 해줘. (예: /* ===== HERO ===== */ 형태) 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.