2026년 9월 8일 화요일

[미술·실과] 1인 1작품 네온 다크모드 갤러리 - Antigravity 8대 룰로 여는 학급 전시회

교실 불을 끄면 열리는 환상적인 미술관 — Antigravity 8대 룰 기반 학생 1인 1작품 전시회 네온 다크모드 갤러리 웹앱

🎨 초등 3~6학년 미술 '작품 감상과 전시' 및 실과 '웹 디자인과 표현' 단원 — 교실 벽면의 좁은 게시판을 벗어나, 깊은 밤의 전시관처럼 칠흑 같은 다크모드 배경 위로 학생들의 그림이 영롱한 네온(Neon) 빛 액자에 담겨 떠오르는 1인 1작품 가상 갤러리입니다. 복잡한 UI 프레임워크 없이 Antigravity의 8대 미학 룰을 순수 CSS로 재현하여 시각적 몰입감을 극대화합니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
흰색 웹페이지 vs 네온 다크모드 미학 눈부신 흰 바탕 대신 차콜 블랙(#0f172a)과 네온 사이언/퍼플 빛 그림자(glow)로 작품을 입체감 있게 강조합니다. 전자칠판 화면을 다크 갤러리로 띄우고 교실 조명을 낮춰 미술관 분위기 연출.
Antigravity 8대 룰의 순수 CSS화 부유감(Float), 네온 글로우, 글래스모피즘, 부드러운 감속을 라이브러리 없이 box-shadow와 backdrop-filter로 구현합니다. 카드에 마우스를 올리면 액자가 앞으로 살짝 솟아오르는 인터랙션.
작품 설명 라이트박스 팝업 작품을 누르면 어두운 암전 속에서 확대 이미지와 함께 학생 작가의 한 줄 작품 의도가 감성적으로 떠오릅니다. 학부모 공개수업 주간 모바일 QR코드로 전시회 초대장 배포.

2. 핵심 아키텍처 해설

① 전시 작품 데이터셋: ART_GALLERY 상수

const ART_GALLERY = [
  {
    id: "art-1",
    title: "우리 동네의 노을빛",
    artist: "1번 별빛작가",
    genre: "수채화",
    desc: "하교할 때 보았던 아파트 너머 붉은 하늘을 투명하게 번지는 물감으로 표현했습니다.",
    glowColor: "#38bdf8", // 네온 스카이블루
    image: "data:image/svg+xml;utf8,..." // Base64 또는 인라인 SVG
  },
  {
    id: "art-2",
    title: "미래 도시의 숲",
    artist: "2번 초록바람",
    genre: "디지털 드로잉",
    desc: "빌딩 옥상마다 거대한 나무가 자라나 공기를 맑게 해주는 상상을 담았습니다.",
    glowColor: "#a855f7", // 네온 퍼플
    image: "data:image/svg+xml;utf8,..."
  }
];

외부 이미지 서버가 끊겨도 언제나 전시회가 열릴 수 있도록 작품 메타데이터와 인라인 그래픽을 파일 상단에 심어두는 심기 모드(데이터 임베딩) 표준 구조입니다.

② Antigravity 네온 글로우 CSS 엔진

.neon-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.neon-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 25px var(--glow), 0 20px 40px rgba(0, 0, 0, 0.5);
  border-color: var(--glow);
}

부드러운 스프링 감속 곡선(Cubic-bezier)과 듀얼 레이어 박스 섀도(Box-shadow)로 물체가 공중에 떠 있는 듯한 무중력(Antigravity) 시각 효과를 연출합니다.

③ 개인정보 0 익명 작가 보호

학생의 실제 성명 대신 번호와 자치 필명('1번 별빛작가')만 노출하고, 방명록 하트 응원은 브라우저 세션 메모리에서만 카운트되어 외부 데이터 유출이 없습니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 전시회 주제(가을 풍경, 미래 상상화 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 네온갤러리.html로 저장 후 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CSS/JS 라이브러리 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 네온 다크모드 미학: 짙은 네이비/블랙(#0b0f19) 배경 위로 카드 호버 시 화려한 네온 글로우(Cyan, Purple, Emerald)가 빛나도록 CSS를 설계한다.
3. 심기 모드(데이터 임베딩): const ART_GALLERY = [...] 상수에 모둠별 샘플 미술 작품 6~8편과 작품 설명, 네온 컬러 코드를 기본 내장한다.
4. 라이트박스 팝업: 카드를 클릭하면 화면 전체가 어두워지며 중앙에 큰 액자와 작품 해설이 뜨는 모달(Modal) 창을 구현한다.
5. 학생 개인정보 0: 학생 실명 대신 번호와 '예술가 닉네임'만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 이번 학급 전시회의 대표 테마 명칭(예: 꿈꾸는 밤의 미술관)은 무엇으로 할까요?
2. 네온 액자의 메인 컬러톤은 사이언/블루 계열과 퍼플/핑크 계열 중 무엇으로 지정할까요?
3. 관람객이 작품마다 누를 수 있는 '응원 하트(❤️)' 카운터 기능도 포함할까요?

🎯 에디터 한줄평

"같은 그림이라도 어떤 조명 아래 걸리느냐에 따라 작품의 무게가 달라집니다. 아이들이 정성껏 그린 그림을 어두운 밤하늘의 네온 액자 속에 띄워주는 것만으로도, 아이들은 자신이 교실의 학생을 넘어 세상에 울림을 주는 '진짜 작가'가 되었음을 가슴 깊이 체감합니다."

📚 기술·교육 참고 링크

  • 글래스모피즘(Glassmorphism)과 다크모드 UI 인터랙션 설계 가이드
  • 교육과정 연계: 초등 3~6학년 미술(작품의 감상과 비평, 나도 큐레이터), 실과(디지털 매체 표현)
By 시간: