wbpark Dev Blog

직접 만든 웹앱과 그림, 공부한 기록을 모아 두는 곳

📌 공익 목적 정보글

건강관리 · 인체사용설명서

예땀(@yeddam_soul)님의 「인체사용설명서」 시리즈를 식단·운동·수면·마인드·바이오해킹으로 나눠 정리했습니다. 영양소·호르몬 사전, 에피소드별 상세, 논문 기반 레퍼런스 42건.

  • 건강
  • 요약 정리
소스

서울시 침수흔적도 뷰어

서울시 침수흔적 데이터(2013~2025)를 지도로 봅니다. 연도별 레이어 토글, 침수심 필터, 주소 검색을 지원합니다.

  • Leaflet
  • GeoJSON
  • Canvas
소스

🛠️ 기술 도구

3D Viewer Lab

GLB 모델을 불러와 살펴보고 파츠별로 분리하거나, 로우폴리로 변환해 다운로드합니다.

  • Three.js
  • GLB
  • Web Worker
소스

물리 시뮬레이터

단진동 · 진자 · 이중진자 실험과 설명 페이지입니다. 위상 공간(phase diagram)을 실시간으로 보고 데이터를 CSV로 받을 수 있습니다.

  • React
  • KaTeX
  • 물리
소스

Earth 시뮬레이터

남극의 백야 · 극야 현상을 3D 지구로 봅니다. 자전 속도를 n배속으로 조절하고 확대 · 축소 · 시점 이동이 가능합니다.

  • React Three Fiber
  • 천문
소스

QR 코드 생성기

URL을 QR 코드로 바꾸고 색상과 오류 정정 수준을 조절합니다. QR 이미지를 드래그하거나 Ctrl+V로 붙여 넣으면 원문 URL을 읽어 줍니다.

  • QRCode.js
  • jsQR
소스

OpenAI API · Assistant

GPT Assistant API 테스트 페이지입니다. Thread(채팅방) 생성, Assistant(챗봇) 생성 · 수정, Run(AI 응답 생성)을 실행해 봅니다.

  • OpenAI API
소스

React 목록 CRUD

React로 만든 목록 CRUD 테스트입니다. 상태(State) 데이터를 URL에 담아 내보낼 수 있습니다.

  • React
소스

🎨 예술 도구

NEW

Aura 3D Studio

3D 오브젝트에 아우라를 씌우고 모든 수치를 조절합니다. 표면 그라데이션 채우기와 일렁임 연출, 컬러피커 그라데이션 · 라이브러리 · GIF/JSON 내보내기를 지원합니다.

  • Three.js
  • WebGL
  • GIF
소스
NEW

Aura 2D Studio

아이콘용 2D 아우라를 캔버스 하나에 수백 개 띄워 봅니다. 도형 내부 그라데이션과 일렁임 연출, 컬러피커 그라데이션 · 라이브러리 · GIF/스프라이트시트 내보내기를 지원합니다.

  • WebGL
  • Canvas
  • GIF
소스
NEW

String Art Threading

못과 실 한 가닥으로 이미지를 재현하는 스트링 아트 생성기입니다. 배경 제거, 원·타원·정사각형·직사각형 틀, SVG/작업 순서 내보내기를 지원합니다.

  • Canvas
  • 이미지 처리
소스
NEW

Caire — Seam Carving

중요한 부분은 지키고 덜 중요한 이음선부터 지워 크기를 바꾸는 이미지 리사이즈입니다. 모서리를 드래그해 미리보고 제거 픽셀 · 에너지 · 제거 우선순위 히트맵을 확인합니다.

  • Canvas
  • 이미지 처리
소스
NEW

Primitive × p5.brush

삼각형·타원 같은 기본 도형을 하나씩 더해 이미지를 근사하고, 그 도형을 그대로 또는 p5.brush 수채·해칭 붓질로 다시 그립니다.

  • p5.js
  • p5.brush
  • Web Worker
소스

같은 그림, 다른 도형

한 장의 풀컬러 이미지가 흑백·색상 등 보는 방식에 따라 다른 도형으로 보이는 원리를 체험합니다.

  • 색채
  • 지각
소스

Color Picker Lab

원판 위에 점과 엣지로 색을 배치하고 보간 곡선과 그라데이션을 다듬습니다.

  • Canvas
  • 색채
소스

🎲 게임

NEW

워해머 전장 플래너

성향으로 추천 지도를 골라 지형·목표 위에 유닛을 놓고, 이동 · 돌격 · 오라 · 심층 타격 · 시야선을 2D/3D로 미리 재 봅니다. 목표 장악, 미션 트위스트, 공유 링크 지원.

  • Three.js
  • 워해머
소스

워해머 전투 계산 시뮬레이터

공격 프로필을 넣고 단계별 해석 기대값과 N회 시뮬레이션 실측값을 나란히 비교하는 검증 도구입니다.

  • 확률
  • 시뮬레이션
  • 워해머
소스

🧪 테스트 · 실험

모바일 GPS

모바일 GPS 위치와 속도(m/s)를 받아오는 연습입니다.

  • Geolocation
소스

🖼️ 그림 · 2025년 3월 전시회

전체 보기 →
펭귄의 날개완벽하고 완전하고 허술한 구조, 계단 나무 온도삶에 형태가 있다면 움직임단어에 담기지 않는 언어 관점, 점 선 면 분화같은 대상 다른 맥락 일상기억하고 재현하는 과정