exercises-dataset 딥다이브
— 1,324개 운동이 통째로 박힌 단일 HTML 운동 백과사전

바닐라 JS로 수천 개 데이터 SPA 만들기 (의존성 0)

React 없이도 검색·다중필터·무한스크롤·모달이 다 된다. 상태 객체 하나(state)에 데이터/필터/페이지를 담고, "필터 → 슬라이스 → 렌더" 파이프라인으로 화면을 다시 그리는 전형적 패턴을 작은 코드로 읽을 수 있다. 프레임워크가 뒤에서 해 주던 일을 "직접" 보게 되는 게 핵심.

볼 파일: index.html의 applyFilters() → renderGrid() 흐름

사전계산 색인 + 디바운스로 "빠른 검색" 만들기

검색이 느려지는 흔한 이유는 "글자 하나 칠 때마다 전체를 무겁게 재가공"하기 때문. 이 앱은 시작 때 운동마다 검색 문자열(_idx)을 한 번 만들어 두고(사전계산), 타이핑이 멈출 때만(디바운스) 부분일치를 돌린다. 두 기법의 교과서적 조합.

볼 파일: init()의 _idx 생성, debounce() 유틸

IntersectionObserver 무한스크롤 + hover 지연 로딩

스크롤 위치를 직접 계산하지 않고, 화면 끝 "감지선"이 보이면 콜백이 도는 IntersectionObserver로 다음 페이지를 붙인다. 또 무거운 GIF는 카드에 마우스를 올릴 때만 로드해 데이터 낭비를 막는다. 이미지가 많은 갤러리/피드에 그대로 응용된다.

볼 파일: appendNextPage(), 그리드의 mouseover 핸들러

브라우저 안에서 SQL을 만들어 .sql 파일로 내려받기

setup.html은 서버 없이 데이터로부터 CREATE TABLE + 1,324개 INSERT를 만들어 Blob으로 다운로드시킨다. DB 방언(MS SQL·PostgreSQL·MySQL·SQLite)마다 컬럼 타입과 따옴표 이스케이프가 다른 걸 코드로 처리하는 법을 배운다.

// setup.html — DB마다 다른 CREATE TABLE 템플릿(PostgreSQL 발췌)
CREATE TABLE exercises (
  id                VARCHAR(10) PRIMARY KEY,
  name              VARCHAR(255) NOT NULL,
  instructions_en   TEXT,  instructions_es  TEXT,  instructions_zh  TEXT,  // 6개 언어를 컬럼으로 평탄화
  secondary_muscles TEXT,   // 배열은 JSON 문자열로 저장
  image  VARCHAR(500),  gif_url  VARCHAR(500),  created_at  TIMESTAMP
);

볼 파일: buildInserts(), escStr(), generateInsertSql()

다국어를 어떻게 저장할까 — 컬럼 평탄화 vs 정규화

원본 JSON은 instructions.en처럼 언어를 중첩 객체로 담는다. 그런데 setup.html의 SQL 스키마는 이를 instructions_en, instructions_es… 처럼 컬럼으로 펼친다. "별도 번역 테이블로 정규화"하는 정석 대신 "컬럼 평탄화"를 택한 트레이드오프(조회 단순 ↔ 언어 추가 시 스키마 변경)를 비교해 보는 좋은 재료다.

볼 파일: JSON의 instructions 구조 vs setup.html의 CREATE TABLE

"Ask Your LLM" — 데이터셋이 백엔드 부트스트랩 프롬프트를 동봉

가장 시대를 타는 부분. setup.html은 프레임워크(Express·FastAPI·ASP.NET·Spring Boot·Laravel·Gin)와 DB를 고르면, "이 데이터로 완성형 REST API를 만들어 줘"라는 구조화된 프롬프트를 생성한다. 그대로 ChatGPT·Claude에 붙여 백엔드 초안을 받는 흐름이다. "문서 대신 프롬프트를 배포한다"는 새로운 온보딩 감각.

볼 파일: buildLlmPrompt(framework, db)

클론해서 탐색기 열고, 파이썬으로 통계 뽑기 난이도 ★☆☆ 입문

저장소를 클론한 뒤 index.html을 더블클릭해 검색·필터를 체험한다. 그다음 exercises.json을 파이썬으로 읽어 "부위별 운동 수", "기구별 분포"를 출력해 본다. README의 "433개"가 아니라 실제로 몇 개인지 직접 세어 보는 게 포인트(스포일러: 1,324개).

# 부위(category)별 운동 개수 세기
import json, collections
data = json.load(open("data/exercises.json", encoding="utf-8"))
print("총 운동:", len(data))
print(collections.Counter(ex["category"] for ex in data))

"오늘의 맨몸 루틴 6개" 랜덤 생성기 난이도 ★☆☆ 입문

기구가 body weight인 운동(325개)만 골라 무작위 6개를 뽑아 "오늘의 홈트 루틴"으로 출력하는 스크립트를 짠다. 부위가 겹치지 않게 고르는 조건을 붙이면 난이도가 살짝 올라간다. 데이터 필터링·랜덤 샘플링의 기본기 연습.

setup.html로 SQLite DB 만들어 조회하기 난이도 ★★☆ 중급

setup.html을 열어 SQLite 방언으로 .sql을 생성·다운로드하고, sqlite3 gym.db < exercises.sql로 적재한다. 그다음 "가슴 운동 중 덤벨만", "부위별 개수" 같은 쿼리를 직접 날려 본다. 생성된 스키마가 다국어를 어떻게 컬럼으로 폈는지 확인하는 게 핵심.

"부위 클릭 → 운동 목록" 미니 웹앱 난이도 ★★☆ 중급

바닐라 JS 또는 React로 작은 앱을 만든다 — 인체 부위 버튼을 누르면 해당 category 운동을 카드로 보여주고, 카드를 누르면 GIF와 설명을 띄운다. 원본 index.html의 createCard()·openModal()을 참고하되 내 식으로 다시 써 보는 게 목표.

FastAPI로 운동 REST API 세우기 (+ LLM 부트스트랩) 난이도 ★★★ 고급

setup.html의 "Ask Your LLM"에서 FastAPI+SQLite 프롬프트를 뽑아 백엔드 초안을 받고, 거기에 ?category=chest&equipment=dumbbell&page=2 같은 필터·페이지네이션을 직접 구현한다. 이미지/GIF는 정적 파일로 서빙. "LLM 초안 → 내가 검증·보강"이라는 2026년형 개발 흐름을 체험한다.

데이터 품질 검증 스크립트 난이도 ★★★ 고급

"신뢰하되 검증하라". image/gif_url이 가리키는 파일이 실제로 images/·videos/에 있는지, ID 중복은 없는지, 6개 언어가 빠짐없이 채워졌는지 검사하는 스크립트를 만든다. 데이터셋을 제품에 넣기 전 반드시 거치는 "수입 검사" 과정을 직접 설계하는 실습.