2026년 9월 8일 화요일

[미술·체육·실과] 퍼스널 컬러 진단 & 나만의 스포츠 유니폼 디자인 모바일 앱

내 몸에 꼭 맞는 색과 번호! — 초등 체형·퍼스널 컬러 진단 & 나만의 스포츠 유니폼 디자인 모바일 웹앱

🎽 초등 5~6학년 미술 '색의 조화와 배색' 및 체육 '체형과 운동' 융합 — 학생들이 4가지 피부 톤(봄 웜, 여름 쿨, 가을 웜, 겨울 쿨)과 활동 체형(스피드형, 파워형, 밸런스형)을 자가 진단하고, SVG 벡터 그래픽으로 구현된 농구/축구 유니폼에 메인 컬러, 줄무늬, 배번, 영문 이니셜을 실시간으로 배색해보는 인터랙티브 디자인 스튜디오입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
눈대중 배색 vs 퍼스널 컬러 이론 사계절 퍼스널 컬러 팔레트 4종을 기본 제공하여 피부 톤과 대비되는 보색/유사색 조화를 직접 체험합니다. 봄 웜톤 팔레트 선택 시 산뜻한 코랄/라임/아이보리 조합 자동 추천.
실시간 SVG 유니폼 커스텀 외부 3D 그래픽 엔진 없이 순수 SVG 도면 위로 색상 팔레트 클릭 한 번에 옷깃, 몸통, 소매 색상이 즉시 변경됩니다. 등번호(0~99)와 영문 닉네임 입력 시 유니폼 뒷면 실시간 렌더링.
우리 반 운동회 유니폼 굿즈 도면 출력 완성된 유니폼 앞뒤 도면을 A4 규격 카드 형태로 브라우저 인쇄하여 학급 운동회 팀 조끼 디자인에 활용합니다. 학급 체육 대회 백팀/청팀 대표 유니폼 공모전 투표.

2. 핵심 아키텍처 해설

① 퍼스널 컬러 팔레트 사전: PALETTES 상수

const PALETTES = {
  springWarm: { name: "봄 웜톤 (생기발랄)", colors: ["#ff7f50", "#ffd700", "#98fb98", "#ffffff"] },
  summerCool: { name: "여름 쿨톤 (청량상쾌)", colors: ["#6495ed", "#b0e0e6", "#dda0dd", "#f8fafc"] },
  autumnWarm: { name: "가을 웜톤 (깊고따뜻)", colors: ["#d2691e", "#8b4513", "#556b2f", "#fef3c7"] },
  winterCool: { name: "겨울 쿨톤 (선명모던)", colors: ["#000080", "#dc143c", "#0f172a", "#ffffff"] }
};

미술 교과의 색채학 이론을 디지털 16진수 색상 코드로 매핑한 심기 모드(데이터 임베딩) 표준 데이터셋입니다.

② 동적 SVG 유니폼 렌더링 엔진

function renderJersey(mainColor, subColor, num, name) {
  return `
    <svg viewBox="0 0 200 240" class="jersey-svg">
      <!-- 몸통 -->
      <path d="M 40 40 L 70 20 L 130 20 L 160 40 L 140 220 L 60 220 Z" fill="${mainColor}" stroke="#333" stroke-width="2"/>
      <!-- 소매 스트라이프 -->
      <path d="M 40 40 L 20 80 L 50 90 L 60 60 Z" fill="${subColor}"/>
      <path d="M 160 40 L 180 80 L 150 90 L 140 60 Z" fill="${subColor}"/>
      <!-- 등번호 및 닉네임 -->
      <text x="100" y="80" text-anchor="middle" font-size="14" fill="${subColor}" font-weight="bold">${name}</text>
      <text x="100" y="150" text-anchor="middle" font-size="52" fill="${subColor}" font-weight="900">${num}</text>
    </svg>
  `;
}

외부 이미지 다운로드 없이 순수 수학 좌표로 유니폼의 옷본을 그리고, 사용자의 색상 선택에 따라 fill 속성을 실시간 교체하여 초고화질로 출력합니다.

③ 개인정보 0 안전한 굿즈 카드

학생의 본명 대신 체육 유니폼용 영문 이니셜(예: 'LION', 'SPEED-7')만 입력받으며, 모든 디자인 결과는 브라우저 안에서만 처리되어 외부 유출이 없습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 스포츠 종목(축구, 농구, 야구)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 유니폼디자인.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 이미지 파일이나 무거운 3D 라이브러리 없이 인라인 SVG와 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 실시간 SVG 유니폼: 메인 컬러, 서브 컬러(줄무늬), 등번호, 영문 닉네임을 변경할 때마다 중앙의 유니폼 SVG가 깜빡임 없이 즉각 재렌더링되도록 한다.
3. 사계절 퍼스널 컬러 팔레트: 봄/여름/가을/겨울 4대 팔레트 탭을 제공하여 추천 배색 4종을 원클릭으로 적용할 수 있게 한다.
4. 모바일 터치 최적화: 좌우 분할(좌측 유니폼 뷰어, 우측 조작 패널) 레이아웃으로 모바일 및 태블릿 화면에서 가로 스크롤 없이 시원하게 표시한다.
5. 학생 개인정보 0: 학생 실명 대신 영문 이니셜/스포츠 닉네임만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 기본으로 띄울 유니폼 스타일은 축구 유니폼과 농구 민소매 유니폼 중 무엇으로 할까요?
2. 유니폼 앞면(팀 로고)과 뒷면(등번호+이름)을 뒤집어볼 수 있는 플립 버튼을 넣을까요?
3. 디자인 완성 후 '디자인 도면 인쇄' 버튼을 눌렀을 때 A4 규격 카드 서식으로 출력할까요?

🎯 에디터 한줄평

"색채학 수업이 지루했던 이유는 도화지에 물감을 칠하는 번거로움 때문이었습니다. 코드로 만들어진 SVG 유니폼 위에서 색을 클릭 한 번으로 갈아입혀 보며, 아이들은 보색과 명도 대비가 스포츠 경기장의 가시성을 어떻게 높이는지 직관적으로 깨닫습니다. 실생활과 예술이 코딩으로 만나는 가장 신나는 무대입니다."

📚 기술·교육 참고 링크

  • W3C SVG 2.0 그래픽 벡터 표준 명세 및 웹 인터랙션
  • 교육과정 연계: 초등 5~6학년 미술(색의 조화와 배색, 디자인과 생활), 체육(신체 발달과 운동 참여)
By 시간: