AI 홈페이지, 2026년 뉴욕 스타일로 — 프롬프트 전체

가게 이름: [이름] 하는 일: [무엇을 파는지, 어떤 가게인지] 분위기: [한두 단어] 위 가게의 홈페이지를 2026년 뉴욕 웹 에이전시가 만든 것처럼 만들어 줘. 조용하고 얌전한 페이지가 아니다. 첫 화면부터 세게 나간다. 이름은 화면 끝까지 크고, 색은 한 면을 통째로 칠하고, 글꼴은 일부러 부딪치고, 스크롤은 사진 사이를 지나간다. 결과는 index.html 파일 하나(CSS·JS 포함)와 사진목록.md 다. 먼저 세 가지를 정해서 짧게 적어라. - 한 문장: 이 가게를 말하는 짧고 단정적인 문장. 감성 문구가 아니라 선언이다. - 색 하나: 채도가 아주 높은 색을 딱 하나 고른다. CSS 변수 --c 에 넣는다. 빨강 #E6002D, 파랑 #1A2BFF, 주황 #FF4A00, 초록 #00A05A, 형광 연두 #C8FF00, 분홍 #FF3EA5 중에서 가게와 뜻밖에 어울리는 것. 뻔한 색(꽃집 분홍, 가죽 갈색)은 고르지 않는다. 그 위의 글자는 흰색이나 검정 중 잘 보이는 하나다. 사진을 담는 .px 와 figure 에는 class="duo" 를 붙인다. 형광 연두만 class="duo lite" 로 쓴다. - 사진 5장: img/1.jpg ~ img/5.jpg. 휴대폰으로 찍어도 된다. 페이지가 흑백으로 바꾸고 고른 색을 입혀 사진들의 색을 맞춘다. 어두운 곳은 고른 색, 밝은 곳은 흰색이 된다. 그러니 한 장에 물건이나 손 하나만 크게, 밝고 명암이 강하게 찍는다. 사진마다 영어 프롬프트를 사진목록.md에 표로 적는다(| 파일 | 쓰는 곳과 비율 | 영어 프롬프트 |). 비율은 16:9, 4:3, 3:4 중 하나. 글자·로고 없음. 화면 순서 (이 순서를 지킨다) 0. 로딩: 검은 화면 오른쪽 아래에 거대한 숫자가 0에서 100까지 1.2초 만에 오르고 위로 사라진다. 1. 첫 화면 (바탕 흰색, 글자 검정): 위에 이름이 화면 폭 끝에서 끝까지 찬다. 이름은 한글(고딕 900)과 로마자 표기(명조 200)를 나란히 쓴다. 예: 결 GYEOL. 맨 아래에 한 문장을 글꼴을 섞어 크게 놓고, 그 아래 코드 글씨로 좌표·서울 현재 시각(초 단위)·작은 메뉴를 넣는다. 가운데 빈 곳은 그대로 둔다. 2. 색 면 (바탕이 고른 색으로 통째로 바뀐다, 위 여백 120px): 양끝 정렬한 거대 문장 + 사진 1이 픽셀 덩어리에서 선명해진다. 3. 깊이 갤러리 (색 면과 같은 바탕): 화면이 멈추고, 스크롤하면 사진 2~5 사이를 앞으로 지나간다. 사진 위에 거대한 고딕 번호(02, 03…)를 겹치고, 옆에 코드 글씨 설명을 붙인다. 4. 목록 (바탕 흰색): 얇은 선으로 나눈 상품·서비스 목록. 왼쪽에 거대한 명조 이름, 오른쪽에 코드 글씨 설명. 마우스를 올리면 원래 색의 사진이 커서를 따라다닌다. 5. 끝 (바탕을 다시 고른 색으로 통째로): 이름을 다시 화면 끝까지 크게. 주소·시간·문의는 코드 글씨. 모르는 정보는 [여기에 입력]. 글자: 세 글꼴을 일부러 부딪친다. 이것이 2026년 느낌의 절반이다. - 고딕: Pretendard 800~900. 이름과 문장의 핵심 낱말. - 명조: Hahmlet 200. 아주 가늘게. 문장의 나머지 낱말. 같은 줄에서 고딕 굵은 낱말과 나란히 놓는다. - 코드 글씨: JetBrains Mono 12px 대문자. 모든 작은 표시. [01] 처럼 대괄호를 쓴다. - 문장: font-size clamp(40px,8vw,132px), line-height 1, letter-spacing -0.04em, word-break keep-all. 양끝 정렬은 text-align:justify; text-align-last:justify. ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@200;300&family=JetBrains+Mono:wght@400&display=swap"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lenis@1.1.20/dist/lenis.min.js"></script> ``` 움직임은 아래 코드를 그대로 뼈대로 쓴다. 뺄 수 없다. 파일을 더블클릭해서 열어도 돌아가야 하니 WebGL로 사진을 읽지 않는다. ```css :root{--bg:#fff;--fg:#000} html.lenis,html.lenis body{height:auto} body{background:var(--bg);color:var(--fg);margin:0;overflow-x:hidden} .mark{position:fixed;top:12px;left:16px;z-index:50;transform-origin:0 0;font-family:'Pretendard Variable';font-weight:900;line-height:.86;letter-spacing:-.05em;white-space:nowrap;color:var(--fg)} /* 작아진 이름 뒤로 글자가 지나가도 겹쳐 보이지 않게 가린다 (<div class="bar"></div>) */ .bar{position:fixed;top:0;left:0;right:0;height:48px;background:var(--bg);z-index:49} .hero{height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;padding:16px} .line{overflow:hidden}.line>span{display:block} .depth{height:100vh;overflow:hidden;perspective:900px;position:relative} .stage{position:absolute;inset:0;transform-style:preserve-3d} .stage figure{position:absolute;left:50%;top:50%;width:min(80vw,640px);margin:0;translate:-50% -50%} .stage img{width:100%;display:block} /* 어떤 사진이든 색을 맞춘다: 어두운 곳은 고른 색, 밝은 곳은 흰색 */ .duo{background:var(--c);isolation:isolate} .duo img,.duo canvas{filter:grayscale(1) brightness(1.1) contrast(1.25);mix-blend-mode:screen} /* 형광 연두처럼 밝은 색은 어두운 곳을 검정으로 둬야 사진이 보인다 */ .duo.lite img,.duo.lite canvas{mix-blend-mode:multiply} .px{position:relative;overflow:hidden}.px canvas{width:100%;height:100%;display:block} .float{position:fixed;left:0;top:0;width:280px;z-index:40;pointer-events:none;opacity:0;translate:-50% -50%} @media (hover:none){.float{display:none}} ``` ```js gsap.registerPlugin(ScrollTrigger); // 부드러운 스크롤 const lenis=new Lenis({duration:1.2}); lenis.on('scroll',ScrollTrigger.update); gsap.ticker.add(t=>lenis.raf(t*1000));gsap.ticker.lagSmoothing(0); // 1. 이름을 화면 끝까지 맞추고, 스크롤하면 줄어들어 왼쪽 위 로고가 된다 (.mark>span 안에 이름) const mark=document.querySelector('.mark'),word=mark.querySelector('span'); function fit(){mark.style.fontSize='100px';mark.style.fontSize=Math.min(100*(innerWidth-32)/word.offsetWidth,innerHeight*.42)+'px'} fit();addEventListener('resize',()=>{fit();ScrollTrigger.refresh()}); gsap.to(mark,{scale:()=>22/parseFloat(mark.style.fontSize),ease:'none', scrollTrigger:{start:0,end:()=>innerHeight*.8,scrub:true,invalidateOnRefresh:true}}); // 3. 글자는 줄마다 가려진 곳에서 올라온다 document.querySelectorAll('.line>span').forEach(el=>gsap.from(el,{yPercent:110,duration:1.1,ease:'expo.out', scrollTrigger:{trigger:el.parentNode,start:'top 92%'}})); // 4. 사진 사이를 앞으로 지나간다 (.depth>.stage>figure>img) const figs=gsap.utils.toArray('.stage figure'),GAP=1000; figs.forEach((f,i)=>gsap.set(f,{z:-i*GAP,x:(i%2?1:-1)*innerWidth*.15,rotateY:(i%2?-1:1)*12})); gsap.to('.stage',{z:(figs.length-1)*GAP,ease:'none', scrollTrigger:{trigger:'.depth',start:'top top',end:'+='+(figs.length-1)*90+'%',scrub:1,pin:true}}); // 2. 구역마다 바탕색이 통째로 바뀐다 (<section data-bg="#E6002D" data-fg="#fff">). 화면을 멈추는 4번 다음에 둔다. 순서를 바꾸면 색이 엉뚱한 곳에서 바뀐다 document.querySelectorAll('[data-bg]').forEach(s=>ScrollTrigger.create({trigger:s,start:'top 55%',end:'bottom 55%', onToggle:v=>v.isActive&&gsap.to(document.documentElement,{'--bg':s.dataset.bg,'--fg':s.dataset.fg,duration:.45,ease:'power2.out'})})); // 5. 사진이 픽셀 덩어리에서 선명해진다 (<div class="px" data-src="img/1.jpg" style="aspect-ratio:16/9"><canvas></canvas></div>) document.querySelectorAll('.px').forEach(box=>{ const c=box.querySelector('canvas'),x=c.getContext('2d'),img=new Image(),s=document.createElement('canvas'),st={p:64}; function draw(){ const W=c.width=box.clientWidth,H=c.height=box.clientHeight,k=Math.max(W/img.width,H/img.height); const sw=W/k,sh=H/k,sx=(img.width-sw)/2,sy=(img.height-sh)/2,p=Math.max(1,Math.round(st.p)); s.width=Math.ceil(W/p);s.height=Math.ceil(H/p);s.getContext('2d').drawImage(img,sx,sy,sw,sh,0,0,s.width,s.height); x.imageSmoothingEnabled=false;x.drawImage(s,0,0,s.width,s.height,0,0,W,H); } img.onload=()=>{draw();gsap.to(st,{p:1,ease:'none',onUpdate:draw, scrollTrigger:{trigger:box,start:'top 85%',end:'top 25%',scrub:true}});addEventListener('resize',draw)}; img.src=box.dataset.src; }); // 6. 목록에 마우스를 올리면 사진이 커서를 따라다닌다 (<a class="row" data-img="img/2.jpg">, <img class="float">) const fl=document.querySelector('.float'),fx=gsap.quickTo(fl,'x',{duration:.5,ease:'power3'}),fy=gsap.quickTo(fl,'y',{duration:.5,ease:'power3'}); addEventListener('mousemove',e=>{fx(e.clientX);fy(e.clientY)}); document.querySelectorAll('.row').forEach(r=>{ r.addEventListener('mouseenter',()=>{fl.src=r.dataset.img;gsap.to(fl,{opacity:1,scale:1,rotate:-4,duration:.35})}); r.addEventListener('mouseleave',()=>gsap.to(fl,{opacity:0,scale:.8,duration:.25})); }); ``` 쓰지 않는 것 - 크림색·베이지·갈색 바탕, 가운데 정렬 첫 화면, 카드 세 개 나열, 둥근 모서리, 그림자, 그라데이션, 아이콘, 이모지, 색 입힌 둥근 버튼, 후기 카드, 흐릿한 감성 문구, 영문 필기체. - 움직임 없는 구역. 조건 - 휴대폰에서도 같은 격이다. 가로 스크롤이 없어야 한다. .hero 의 윗여백은 이름 높이에 맞춰 조절한다. - 사진 파일이 없어도 레이아웃이 깨지지 않게 비율을 지정한다. - 글자는 움직임 전에도 내용이 있어야 한다. - 모든 구역에 data-bg·data-fg 를 단다. 깊이 갤러리도 빠뜨리지 않는다. 다 만들기 전에 스스로 점검한다: 이름이 화면 끝까지 찼는가, 한 줄 안에 굵은 고딕과 가는 명조가 부딪치는가, 색이 한 면을 통째로 칠했는가, 스크롤로 사진 사이를 지나가는가. 넷 중 하나라도 아니면 고친다.