# data[].attributes.body
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

# data[].attributes.body
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

# data[].attributes.attachment_link.title
인공지능 손동작 인식 로봇팔

# data[].attributes.body
마이크로비트 연결 안됨

# data[].attributes.body
흰색 인식 방향 반대 미디어파이프 잔상 줄이기

# data[].attributes.attachment_link.title
미디어 파이프 AI 연습

# data[].attributes.attachment_link.title
이 채팅을 확인해 보세요

# data[].attributes.attachment_link.description
누군가 당신이 보고 싶어 할 것 같아 공유한 채팅입니다.

# data[].attributes.body
FitVision v3 프로젝트 인수인계 프롬프트

당신은 시니어 프론트엔드 개발자이자 AI 엔지니어입니다.

지금부터 학교 프로젝트인 FitVision v3를 처음부터 끝까지 완성해야 합니다.

이 프로젝트는 단순 예제가 아니라 실제 서비스 수준으로 구현해야 합니다.

프로젝트명

FitVision

AI Fitness Coach

목표

사용자가 로그인 후

목표 설정

AI 운동 추천

운동 시작

웹캠으로 운동 자세 분석

자동 카운트

실시간 피드백

운동 결과 저장

출석 체크

랭킹 반영

까지 하나의 흐름으로 진행되는 AI 운동 코칭 웹서비스를 구현한다.

반드시 실제 동작해야 하며 더미 데이터는 최소화한다.

개발 환경

Frontend

HTML

CSS

JavaScript

Database

Supabase

AI

MediaPipe Pose

LLM

Groq API

음성

SpeechSynthesis API

배포

CodePen 가능

HTML 하나로도 동작 가능하도록 마지막에 통합

디자인 요구사항

Planfit AI

Samsung Health

Apple Fitness

느낌을 합친 미래형 UI

색상

배경

#071018

민트

#28FFD2

블루

#00B7FF

Glassmorphism

애니메이션

반응형

카드형 UI

화면 구성

로그인

입력

학번

이름

키

현재체중

목표체중

시작하기 버튼

기능

localStorage 저장

Supabase users 저장

홈 이동

홈

표시

안녕하세요 ○○님

연속 운동

오늘 운동량

최고 점수

칼로리

목표 설정

스쿼트

런지

플랭크

저장

AI 추천

Groq API 사용

입력

현재체중

목표체중

프롬프트

"고등학생이 할 수 있는 맨몸운동 위주 하루 운동 루틴을 추천"

출력

운동 종류

횟수

예상 시간

식단 추천

운동

MediaPipe Pose

운동

스쿼트

런지

플랭크

실시간 관절 표시

자동 카운트

자세 점수

운동시간

칼로리

스쿼트

엉덩이

무릎

발목

각도 계산

160도 이상

서있는 상태

90도 이하

앉은 상태

앉았다 일어나면

+1

런지

양쪽 무릎

엉덩이

발목

자세 판별

자동 카운트

플랭크

어깨

엉덩이

발목

일직선 여부

시간 측정

AI 피드백

좋은 자세

좋아요!

완벽합니다!

나쁜 자세

조금 더 내려가세요.

허리를 펴주세요.

엉덩이를 조금 내려주세요.

SpeechSynthesis로 음성 출력

결과

총 운동횟수

자세 점수

운동시간

칼로리

최고기록

Supabase 저장

출석

달력

운동 완료 시 자동 체크

같은 날 중복 불가

연속 운동 계산

3일 이상

칭찬 문구

랭킹

Supabase rankings

정렬

1

자세 점수

2

운동횟수

Top10 출력

Supabase 정보

Project URL

https://chuarhnstfkmhlbjzmfs.supabase.co

Publishable Key

(사용자가 제공한 publishable key 사용)

테이블

users

attendance

workouts

rankings

SQL도 함께 작성

필수 구현

로그인 유지

localStorage

Supabase CRUD

MediaPipe

Groq API

SpeechSynthesis

반응형

애니메이션

다크모드

Glass UI

실시간 자세 분석

자동 카운트

랭킹

출석

결과 저장

프로젝트 구조

처음에는

index.html

style.css

script.js

supabase.js

ai.js

pose.js

calendar.js

ranking.js

으로 개발

마지막에는 CodePen 제출용으로 HTML 하나로 합쳐도 된다.

코드 품질

주석 충분히 작성

함수 분리

가독성 좋게

중복 제거

ES6 문법

에러 처리

최적화

최종 목표

학교 제출용이 아니라 실제 서비스 수준의 완성도를 목표로 한다.

중간 코드가 아닌 모든 기능이 동작하는 완성본을 생성한다.

코드는 길이에 상관없이 끝까지 완성하며 누락 없이 작성한다.

# data[].attributes.attachment_link.title
AI 전기 사용량 분석 및 절전 도우미 웹서비스

# data[].attributes.body
const int redPin = 5;

const int greenPin = 6;

const int bluePin = 9;

void setup() {

// RGB 핀들을 출력으로 설정

pinMode(redPin, OUTPUT);

pinMode(greenPin, OUTPUT);

pinMode(bluePin, OUTPUT);

}

void loop() {

// 1단계: 빨강 -> 노랑 -> 초록

for (int i = 0; i <= 255; i++) {

analogWrite(redPin, 255 - i);

analogWrite(greenPin, i);

analogWrite(bluePin, 0);

delay(10);

}

// 2단계: 초록 -> 청록(Cyan) -> 파랑

for (int i = 0; i <= 255; i++) {

analogWrite(redPin, 0);

analogWrite(greenPin, 255 - i);

analogWrite(bluePin, i);

delay(10);

}

// 3단계: 파랑 -> 보라(Magenta) -> 빨강

for (int i = 0; i <= 255; i++) {

analogWrite(redPin, i);

analogWrite(greenPin, 0);

analogWrite(bluePin, 255 - i);

delay(10);

}

}

# data[].attributes.body
ㅣ

# data[].attributes.body
/*
  Blink

  Turns an LED on for one second, then off for one second, repeatedly.

  Most Arduinos have an on-board LED you can control. On the UNO, MEGA and ZERO
  it is attached to digital pin 13, on MKR1000 on pin 6. LED_BUILTIN is set to
  the correct LED pin independent of which board is used.
  If you want to know what pin the on-board LED is connected to on your Arduino
  model, check the Technical Specs of your board at:
  https://docs.arduino.cc/hardware/

  modified 8 May 2014
  by Scott Fitzgerald
  modified 2 Sep 2016
  by Arturo Guadalupi
  modified 8 Sep 2016
  by Colby Newman

  This example code is in the public domain.

  https://docs.arduino.cc/built-in-examples/basics/Blink/
*/

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);  // change state of the LED by setting the pin to the HIGH voltage level
  delay(1000);                      // wait for a second
  digitalWrite(LED_BUILTIN, LOW);   // change state of the LED by setting the pin to the LOW voltage level
  delay(1000);                      // wait for a second
}

# data[].attributes.body
휴...

# data[].attributes.body
크흠..

# data[].attributes.body
1. 아크릴 판의 커버 제거

2. 우노보드 뒷면에 벨크로 부착

3. 우노보드를 아크릴 판에 (usb 커넥터가 바깥으로 향하도록) 부착

4. 서포트를 lcd 디스플레이 결합 위치에 결합 (볼트를 아크릴 판 밑에, 서포트는 위에 놓은 뒤 결합)

5. 4개의 서포트 위에 lcd 디스플레이를 올려놓고 볼트로 고정

6. 아크릴 판 뒷면 모서리(4곳)에 밀림 방지 스티커 부착

7. 브레드보드를 아크릴 판에 부착 (우노보드 밑)

8. 우노보드와 lcd 디스플레이 연결 (선 연결 표와 회로도, 완성 사진 등을 참고)

9. 우노보드와 rgb led 연결 (선 연결 표와 회로도, 완성 사진 등을 참고)

10. 우노보드와 온습도 센서 연결 (선 연결 표와 회로도, 완성 사진 등을 참고)

11. 미세먼지 측정 센서에 선 연결하기 (핀 배치도 확인)

12. 센서들과 우노보드 연결 (선 연결 표와 회로도, 완성 사진 등을 참고)