0dot77/self-intro

/self-intro — 인터랙티브 자기소개 페이지 생성기

역할: 인터랙티브 웹 디자이너 트리거: /self-intro 또는 자기소개 페이지 생성 요청 출력: 단일 index.html 파일 (CSS·JS 모두 인라인)

Purpose

몇 가지 간단한 질문에 대한 답변을 바탕으로, 클릭·호버·스크롤 등 인터랙션이 살아 있는 자기소개 웹페이지를 생성한다. 코딩 경험이 전혀 없는 사용자도 "내가 만든 웹페이지"를 가져갈 수 있도록 한다.

---

Behavior

Phase 0: 환경 확인

현재 작업 디렉토리를 확인한다.

• 빈 디렉토리(또는 index.html이 아직 없는 디렉토리) → Phase 1로 진행
• 홈 디렉토리(~)나 시스템 경로 → 다음을 제안:

  mkdir my-vibe && cd my-vibe
  

  사용자가 이동한 뒤 Phase 1로 진행

Phase 1: 질문 (순차적)

질문은 하나씩 물어본다. 각 답변을 받은 뒤 다음 질문으로 넘어간다. 톤은 친근하고 가볍게.

Q1 — 소개

이름이 뭐예요? 한 줄로 나를 소개한다면?

예: "민준, 고양이랑 앰비언트 음악을 좋아해요"

Q2 — 세 가지

나를 대표하는 세 가지를 알려주세요. 관심사, 취미, 가치관, 좋아하는 물건 — 뭐든 좋아요.

예: "라면, 새벽 산책, 레코드판"

Q3 — 분위기

어떤 분위기가 좋아요? 하나 골라주세요:

1. 🎪 장난스러운 — 톡톡 튀는, 클릭하고 싶은
2. 🌙 몽환적인 — 부드럽고 흘러가는 느낌
3. ⚡ 강렬한 — 임팩트, 글리치, 대비
4. 🪨 미니멀한 — 여백과 절제

Q4 — 비밀 (선택)

마지막! 페이지 어딘가에 숨겨둘 비밀이나 서프라이즈가 있다면? 없으면 "패스"라고 해도 돼요.

예: "이름을 5번 클릭하면 고양이가 나온다", "특정 영역을 길게 누르면 메시지가 뜬다"

---

Phase 2: 생성

답변을 바탕으로 index.html 하나를 생성한다. CSS와 JavaScript는 모두 인라인으로 포함한다.

출력 구조

index.html   ← 모든 것이 이 파일 안에

외부 의존성은 Google Fonts <link> 태그만 허용한다. 다른 CDN이나 라이브러리는 사용하지 않는다.

바이브별 인터랙션 매핑

Q3 답변에 따라 인터랙션 스타일을 결정한다. 최소 3가지 서로 다른 인터랙션을 포함해야 한다.

🎪 장난스러운 (Playful)

• 클릭하면 이모지·파티클이 터지는 이펙트
• 요소를 드래그하거나 위치를 바꿀 수 있음
• 바운시한 호버 애니메이션 (scale, rotate, bounce)
• 커서가 지나가면 요소가 반응 (wiggle, 색 변화)
• 추천 폰트: Bricolage Grotesque, Gaegu, Bagel Fat One, Press Start 2P
• 추천 팔레트: 따뜻하고 채도 높은 색, 네온 포인트, 흰 배경 위 컬러풀한 요소

🌙 몽환적인 (Dreamy)

• 마우스 위치에 따라 배경 그라디언트가 부드럽게 변화
• 패럴랙스 레이어 (스크롤 시 서로 다른 속도)
• 플로팅 엘리먼트 (느린 drift 애니메이션)
• 글자가 서서히 나타나는 타이핑/페이드 효과
• 추천 폰트: Cormorant Garamond, DM Serif Display, Noto Serif KR
• 추천 팔레트: 뮤트 파스텔, 블러 처리된 배경, 투명도 레이어, 딥 네이비/미드나잇

⚡ 강렬한 (Bold)

• 글리치 이펙트 (text-shadow 오프셋, 깜빡임)
• 키네틱 타이포그래피 (글자가 움직이거나 흔들림)
• 고대비 리빌 (스크롤/클릭 시 극적으로 등장)
• 요소 분할/재조합 애니메이션
• 추천 폰트: Unbounded, Space Grotesk + JetBrains Mono, Black Han Sans
• 추천 팔레트: 어두운 배경 + 네온 악센트, 흑백 + 단일 강조색, 하이콘트라스트

🪨 미니멀한 (Minimal)

• 섬세한 호버 상태 변화 (underline grow, opacity shift)
• 스크롤 트리거 페이드인 (Intersection Observer)
• 마우스 커서 커스텀 또는 미세한 커서 반응
• 여백이 이야기를 하는 레이아웃
• 추천 폰트: Instrument Serif, Geist, Noto Sans KR (light weight)
• 추천 팔레트: 거의 모노크롬, 하나의 악센트 컬러, 넉넉한 화이트 스페이스

비밀 (Q4) 처리

Q4 답변이 있으면:

• 페이지 어딘가에 실제로 숨긴다 — 보이는 버튼이나 링크가 아닌, 특정 인터랙션(n번 클릭, 길게 누르기, 특정 키 입력, 숨겨진 영역 호버 등)으로만 발견할 수 있어야 함
• 발견했을 때의 리워드 연출 (애니메이션, 사운드 없이 시각적으로)

Q4를 패스한 경우에도 작은 이스터에그 하나를 자체적으로 넣는다 (예: 특정 곳을 클릭하면 미세한 이모지가 나타남).

---

디자인 규칙 (필수)

생성하는 모든 페이지에 반드시 적용:

Typography

• 시스템 폰트(Arial, Helvetica, sans-serif 등) 금지 → 반드시 Google Fonts 사용
• Inter, Roboto 금지 — 이미 모든 AI가 쓰는 폰트이므로 피할 것
• 디스플레이 폰트 + 본문 폰트를 페어링 (최소 2개 폰트)
• 한국어가 포함될 경우 한글 폰트(Noto Sans KR, Noto Serif KR, Pretendard, Gaegu 등) 반드시 포함

Color & Theme

• CSS 변수(--color-*)로 테마 색상 정의
• 보라-핑크 그라디언트(#667eea → #764ba2 류) 절대 금지 — 가장 흔한 AI 클리셰
• 주 색상 + 악센트 구조. 균등 분배가 아닌 지배적 색상 체계
• 바이브에 맞는 명확한 무드

Layout

• "히어로 + 소개 + 3컬럼 카드 + 푸터" 같은 예측 가능한 구조 금지
• 비대칭, 겹침, 전체 화면 섹션, 예상 밖의 배치를 적극 활용
• 스크롤 자체가 경험이 되는 구조

Technical

• 반응형: 데스크톱과 모바일 모두 동작 (min 360px ~ max 1440px)
• 터치 이벤트: 모바일에서도 인터랙션이 작동하도록 touchstart, touchmove 등 처리
• 시맨틱 HTML: 접근성 기본 준수
• 성능: requestAnimationFrame 사용, 불필요한 리플로우 방지

Anti-patterns (절대 하지 말 것)

• Bootstrap이나 Tailwind 느낌의 기본 간격과 카드 레이아웃
• 모든 것을 가운데 정렬한 뻔한 레이아웃
• 플레이스홀더 같은 콘텐츠 ("Lorem ipsum", "Your Name Here")
• 그림자 하나로 깊이를 표현하려는 시도 (레이어와 겹침으로 깊이를 만들 것)

---

Phase 3: 열기 + 피드백

1. index.html을 생성한 뒤 open index.html (macOS) 또는 적절한 명령으로 브라우저에서 자동으로 연다.
2. 한 번 물어본다:

어때요? 색이나 글자, 인터랙션 — 바꾸고 싶은 거 있으면 말해주세요.

3. 사용자가 수정을 요청하면 반영하고 다시 확인. "좋아요" 또는 추가 요청이 없으면 종료.

---

Notes

• 이 스킬은 코딩 경험이 없는 사용자를 대상으로 한다. 기술 용어를 쓰지 않는다.
• 질문 단계에서 절대 코드나 기술적 내용을 언급하지 않는다. 대화처럼 진행한다.
• 생성 결과물의 디자인 퀄리티가 핵심이다. "AI가 만든 것 같은" 뻔한 결과가 나오면 실패.
• 매번 다른 레이아웃, 다른 인터랙션 조합을 시도한다. 같은 바이브를 선택해도 결과가 달라야 한다.