0003

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 감성 비주얼 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "DDALGI"이고, 한국어로 '딸기'라는 뜻이야. 한국어 전용 사이트이고, 전체적으로 따뜻한 핑크-퍼플 그라데이션 테마에 파스텔 톤 포인트를 활용한 귀엽고 감성적인 디자인으로 만들어줘.

프로그램 개요
총 10개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.

(1) Hero (전체화면 인트로) (2) Marquee (서비스 키워드 무한 흐름 띠) (3) About (스튜디오 소개) (4) Services (서비스 카드 그리드) (5) Portfolio (벤토 그리드 포트폴리오) (6) Showcase Banner (대표 프로젝트 풀스크린 배너) (7) Process (작업 프로세스 단계) (8) Team (팀 멤버 소개) (9) Reviews (고객 후기) (10) Contact (문의 폼 + 이미지)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 하고, 스크롤 시 나타나는 Back to Top 버튼도 포함해줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 핑크-퍼플-블루 그라데이션 배경에 딸기 이모지(🍓)가 통통 튀는 바운스 애니메이션과 함께 "DDALGI STUDIO" 텍스트, 그 아래 "로딩중..." 텍스트를 보여줘. 약 1.5초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "🍓 DDALGI" 로고(핑크-퍼플 그라데이션 텍스트), 가운데에 메뉴 링크들(소개, 서비스, 포트폴리오, 프로세스, 팀), 오른쪽에 "문의하기" CTA 버튼(핑크-퍼플 그라데이션 배경, pill 모양)을 배치해줘. 스크롤 60px 이상 내려가면 네비게이션 배경이 반투명 크림색 + backdrop-filter blur로 바뀌면서 부드러운 그림자가 생기는 효과 넣어줘. 768px 이하 모바일에서는 메뉴 링크와 CTA 숨기고 햄버거 버튼(☰) 보여줘. 햄버거 누르면 전체화면 모바일 메뉴가 나타나고 버튼이 ✕로 바뀌어줘. 메뉴 클릭하면 닫히게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-3. 스크롤 애니메이션 (Reveal) 두 가지 종류의 reveal 애니메이션을 만들어줘: 아래에서 위로 페이드인(fade-up)과 작아졌다가 커지는 스케일인(scale-in). IntersectionObserver 사용하고, 같은 섹션 안에서도 요소마다 0.1초~0.6초씩 딜레이를 줘서 순차적으로 나타나게 해줘.

2-4. 마키 (Marquee) 서비스 키워드들(브랜딩, 웹디자인, 일러스트, 포토그래피, 모션그래픽, 공간디자인, 패키지, 아트디렉션)이 가로로 무한 반복 스크롤되는 띠 배너를 만들어줘. 배경은 핑크-퍼플-블루 그라데이션이고, 각 키워드 사이에 작은 원형 도트 구분자를 넣어줘. 키워드를 2세트 이어붙여서 끊김 없이 루프되게 해줘.

2-5. 포트폴리오 탭 필터 포트폴리오 섹션에 "전체 / 브랜딩 / 디지털 / 포토" 필터 탭 버튼을 만들어줘. pill 모양이고 호버 및 활성 상태에서 핑크-퍼플 그라데이션 배경 + 흰 글씨로 변하게 해줘. (실제 필터링 동작은 없어도 되고 탭 활성 토글만 해줘.)

2-6. 문의 폼 이름(필수), 이메일(필수), 프로젝트 유형, 메시지(필수) 4개 필드로 만들어줘. 이름과 이메일은 한 행에 나란히 배치해줘. 입력 필드는 둥근 모서리 + 연한 퍼플 보더 스타일이고, 포커스 시 보더가 진한 퍼플로 변하게 해줘. 제출하면 버튼 텍스트가 "보냈어요! ✅"로 바뀌면서 배경이 민트색으로 변하고, 3초 후 원래대로 복구되면서 폼 리셋해줘.

2-7. Back to Top 버튼 화면 우하단에 고정된 원형 버튼(↑ 화살표)을 만들어줘. 핑크-퍼플 그라데이션 배경에 흰 글씨. 스크롤 500px 이상 내려가면 페이드인으로 나타나고, 이전에는 숨겨줘. 클릭하면 페이지 최상단으로 부드럽게 스크롤해줘.

디자인
3-1. 컬러 팔레트 메인 핑크: #ff6b9d / 연한 핑크: #ffa0c4 / 페일 핑크: #fff0f5 / 퍼플: #a855f7 / 딥 퍼플: #7c3aed / 블루: #60a5fa / 민트: #34d399 / 옐로우: #fbbf24 / 오렌지: #fb923c / 코랄: #ff7979 / 메인 배경: #fffbfe (따뜻한 거의 흰색) / 텍스트: #2d2033 (짙은 보라빛 다크) / 연한 텍스트: #6b5f73 / 순백: #ffffff. 그라데이션은 주로 핑크→퍼플 또는 핑크→퍼플→블루 135도 방향으로 사용해줘.

3-2. 서체 Google Fonts에서 'Jua' (한글 둥글둥글 귀여운 서체) 하나만 불러와서 전체에 적용해줘.

3-3. 전체 톤앤무드 딸기처럼 달콤하고 사랑스러운 감성 스튜디오 느낌. 둥근 모서리(24px 기본, 카드 16px, 버튼 pill형 9999px)를 넉넉하게 쓰고, 그림자는 핑크빛이나 퍼플빛이 살짝 비치는 컬러 쉐도우를 사용해줘. 섹션 제목 위에는 항상 작은 뱃지 태그(이모지 + 영문, 핑크페일-퍼플 그라데이션 배경, pill 모양)를 넣어줘. ::selection 색상은 핑크 배경 + 흰 글씨로 해줘. 배경에는 큰 원형 도형 4개가 고정 위치에서 매우 연하게(opacity 0.07) 천천히 떠다니는 장식 효과를 넣어줘. 색상은 핑크, 퍼플, 블루, 옐로우 각각 하나씩.

3-4. 각 섹션 디자인 상세

(1) Hero 전체 화면(100vh), 메인 배경, 2컬럼 그리드(텍스트 / 비주얼). 왼쪽에 "👋 안녕하세요, 우리는" 인사말, 큰 2줄 타이틀("감성을 디자인하는" 1줄은 기본색, "비주얼 스튜디오" 2줄은 핑크-퍼플-블루 그라데이션), 한글 설명, 버튼 2개(채운 버튼 "작업 보러가기 →" + 테두리 버튼 "문의하기") 배치해줘. 오른쪽에 둥근 모서리 메인 이미지, 그 위에 떠다니는 작은 플로팅 카드 2개(흰 배경 + 컬러 쉐도우, 이모지 + 라벨 + 수치 조합 — 예: 🎨 완성 프로젝트 200+, ⭐ 고객 만족도 99.2%) 배치해줘. 플로팅 카드는 위아래로 천천히 떠다니는 애니메이션 적용. 이미지에 호버 시 살짝 확대 + 회전하는 효과 넣어줘.

(2) Marquee 2-4에서 설명한 대로 핑크-퍼플-블루 그라데이션 배경 위에 흰 키워드 무한 흐름.

(3) About 2컬럼 그리드(비주얼 / 텍스트). 왼쪽에 큰 이미지와 작은 이미지가 겹쳐지는 레이아웃(큰 이미지 좌상단 60%, 작은 이미지 우하단 55% — 배경색 테두리 적용), 그리고 중앙에 그라데이션 원형 안에 ✨ 이모지가 떠다니는 장식. 오른쪽에 뱃지, 제목("따뜻한 감성으로" + "세상을 물들이다" 그라데이션), 설명 2단락, 그 아래 3칸 통계 카드 그리드(200+ 완성 프로젝트 / 8년 경력 / 42 수상 이력). 각 통계 카드는 흰 배경 + 연한 보더, 호버 시 위로 살짝 뜨면서 컬러 쉐도우.

(4) Services 페일 핑크에서 메인 배경으로 그라데이션되는 배경. 중앙 정렬 헤더(뱃지 + 제목 + 설명). 아래에 3×2 그리드로 서비스 카드 6개 배치. 각 카드는 흰 배경 + 연한 보더 + 둥근 모서리, 상단에 이모지 아이콘(색상 배경 원형), 서비스명, 한글 설명. 호버 시 위로 뜨면서 그림자 + 상단 4px 두께의 핑크-퍼플-블루 그라데이션 보더가 나타나는 효과. 서비스: 🎨 브랜드 아이덴티티, 💻 웹 & 앱 디자인, 📸 포토그래피, 🏠 공간 디자인, ✏️ 일러스트레이션, 🎬 모션 & 영상.

(5) Portfolio (벤토 그리드) 메인 배경, 좌우 정렬 헤더(왼쪽 뱃지+제목, 오른쪽 탭 필터 버튼). 4컬럼 × 4행 비정형 벤토 그리드로 7개 프로젝트를 다양한 크기로 배치해줘. 각 아이템은 둥근 모서리, 호버 시 이미지 1.08배 확대 + 하단에서 올라오는 어두운 그라디언트 오버레이 위에 프로젝트명 + 카테고리 표시. 각 항목에 프로젝트 이름과 카테고리/연도를 넣어줘.

(6) Showcase Banner 높이 80vh, 배경 이미지 위에 핑크-퍼플-블루 반투명(70%) 그라데이션 오버레이. 중앙에 뱃지(🏆 Featured Project), 큰 타이틀("올해의 베스트 프로젝트"), 한글 설명, 흰색 버튼("자세히 보기 →") 배치. 모든 텍스트 흰색.

(7) Process 다크 배경(텍스트 색상 기반) + 퍼플/핑크 빛이 은은하게 비치는 방사형 그라데이션 장식. 크림/흰색 텍스트. 중앙 정렬 헤더. 4컬럼 그리드로 스텝 카드 4개 배치. 각 카드는 반투명 흰 배경 + 미세한 보더, 상단에 그라데이션 원형 번호(1~4), 제목, 설명. 카드 사이에 그라데이션 가로 커넥터 라인 장식(마지막 카드 제외). 호버 시 배경 밝아지며 위로 뜨는 효과. 단계: 만남 & 이해 → 아이디어 발전 → 디자인 제작 → 전달 & 관리.

(8) Team 메인 배경, 중앙 정렬 헤더, 4컬럼 그리드. 각 카드에 원형 사진(그라데이션 보더 트릭 — background로 그라데이션 보더 구현), 이름(한글), 역할(한글), 소셜 아이콘 버튼 2개(이모지 사용, 원형, 호버 시 그라데이션 배경). 사진 호버 시 살짝 확대. 팀원 4명: 김하늘/크리에이티브 디렉터, 박서진/아트 디렉터, 이수민/리드 디자이너, 최유진/UX 전략가.

(9) Reviews 페일 핑크에서 메인 배경으로 그라데이션되는 배경. 중앙 정렬 헤더. 3컬럼 그리드로 후기 카드 3개. 각 카드에 별 5개(⭐ 이모지), 후기 텍스트, 작성자 정보(이모지 아바타 원형 + 이름 + 직함). 카드는 흰 배경 + 연한 보더, 호버 시 위로 뜨면서 컬러 쉐도우. 1024px 이하에서 1컬럼으로 변경.

(10) Contact 메인 배경, 2컬럼(이미지 / 폼). 왼쪽에 둥근 모서리 이미지 + 좌하단에 흰 배경 플로팅 뱃지(초록 점 깜빡이는 펄스 애니메이션 + "지금 상담 가능해요" 텍스트). 오른쪽에 뱃지, 제목("이야기를 들려주세요", 일부 그라데이션), 설명, 폼 필드 4개, 제출 버튼(그라데이션 배경, 호버 시 위로 뜨며 그림자).

Footer 다크 배경(텍스트 색상), 4컬럼(브랜드+설명 2fr / 메뉴 1fr / 서비스 1fr / 연락처 1fr). 로고는 핑크-퍼플 그라데이션 텍스트. 링크는 연한 흰색, 호버 시 핑크빛. 하단에 미세한 보더 구분선, 저작권("© 2026 DDALGI Studio. Made with 💜") 왼쪽, 소셜 아이콘 버튼(이모지, 원형, 호버 시 그라데이션 배경 + 위로 뜨는 효과) 오른쪽.

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/About/Contact 1컬럼, Services 2컬럼, 벤토 그리드 2컬럼 균등, Process 2컬럼, Team 2컬럼, Reviews 1컬럼, Footer 2컬럼, Hero 플로팅 카드 숨김, 프로세스 커넥터 숨김. 768px 이하: 햄버거 메뉴 활성화, Services/벤토/Process 1컬럼, Team 2컬럼, About 통계 1컬럼, 폼 행 1컬럼, Footer 1컬럼.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션, scroll 이벤트로 네비게이션 상태 변화 및 Back to Top 버튼 표시 제어. 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 언어는 한국어 전용이고, 뱃지 태그 안의 영문 라벨만 영어로 해줘 (예: "🍓 About Us", "🎯 Services"). HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 1300px, 섹션 좌우 패딩 2rem 기본. 모든 transition에 일관된 부드러운 이징 적용하고 호버 효과는 0.3~0.4초 사이로. 코드에 영역별로 주석 넣어줘 (예: /* ===== HERO ===== */). 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.