wbpark Dev Blog

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

배우기 건강관리 · 인체사용설명서 만들기 · 아우라 Aura 3D Studio 만들기 · 이미지 아트 String Art Threading 놀기 · 워해머 워해머 전장 플래너

📚 배우기

읽고 배우는 자료와 시각화

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

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

사용법
  1. 위쪽 메뉴(폰은 ‘☰’)에서 ‘🍽️ 식단’ 같은 주제를 골라요
  2. ‘📖 사전’에서 인슐린·도파민 같은 용어를 가나다순으로 찾아요
  3. 표의 ‘Ep.01’ 같은 번호를 누르면 원본 인스타 영상이 열려요
  4. ‘📚 레퍼런스’에서 근거 논문과 저서를 직접 확인하세요
소스

경제 지식 · 화폐가치와 투자전략

M2 통화량으로 화폐가치 하락을 살펴보고, ETF 투자 시뮬레이션과 Top10 리밸런싱 전략을 백테스트합니다.

사용법
  1. 위쪽 ‘ETF 시뮬레이션’ 같은 메뉴로 이동해요 (폰은 스크롤)
  2. ‘화폐가치 계산기’에 연도·금액을 넣어 실질 가치를 비교해요
  3. ‘월 투자금 (만원)’을 바꾸면 30년 후 예상 자산이 바로 나와요
  4. ‘ETF 백테스트 계산기’에서 시작 연도를 골라 실제 수익을 봐요
소스

서울시 침수흔적도 뷰어

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

사용법
  1. 왼쪽 패널에서 연도를 눌러 켜거나 ‘전체 켜기’를 누르세요
  2. ‘최소 침수심 필터’를 올리면 깊게 잠긴 곳만 남아요
  3. 주소를 넣고 ‘검색’을 누르면 그 위치로 확대돼요
  4. 침수 영역을 누르면 침수심·원인 정보가 떠요 (‘☰’로 패널 접기)
소스

물리 시뮬레이터

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

사용법
  1. ‘Spring Simulation’의 ‘Start’를 누르면 진동이 시작돼요
  2. 위상 다이어그램과 시간·에너지 그래프가 실시간으로 그려져요
  3. ‘Reset’ 후 k·m 같은 값을 바꿔 다시 ‘Start’ 해 보세요
  4. 아래 진자·이중진자도 같고, ‘Download CSV’로 데이터를 받아요
소스

Earth 시뮬레이터

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

사용법
  1. 왼쪽 위(폰은 맨 위) 화면은 태양 주위를 도는 지구예요
  2. 그 화면을 드래그해 돌리고 휠·두 손가락으로 확대해요
  3. ‘⏩’·‘⏪’로 자전·공전 ‘Speed’를 1.5씩 바꿔요
  4. 아래 두 화면은 남극 쪽 모습, 백야·극야가 바뀌는 걸 보세요
소스

🛠️ 만들기

이미지 · 색 · 효과 · 파일을 만드는 도구와 3D 전시

NEW

3D 갤러리 보기 · 걸어서 관람

2025년 3월 아드모 두 번째 전시회 「Colorfull」을 갤러리 미루 평면도대로 옮겼습니다. 펭귄을 걸려 1관~5관의 현장 사진을 확대해 보고, 4관에서 펭귄 그림 다섯 점을 감상합니다. 자동 관람 · 1인칭 시점을 지원합니다.

사용법
  1. 바닥을 누르면 펭귄이 걸어가요. 드래그하면 둘러볼 수 있어요
  2. 벽 사진이나 그림을 누르면 그 앞까지 가서 크게 보여줘요
  3. ‘둘러보기’로 관람 순서를 고르거나 ‘자동 관람’으로 차례로 돌아요
  4. ‘1인칭’(V 키)으로 펭귄 눈높이에서 봐요. PC는 WASD로 걸어요
소스

3D 갤러리 보기 · 구버전

같은 전시를 처음 3D로 옮겨 본 버전입니다. 바닥에 평면도를 깔고 벽마다 현장 사진을 세웠습니다. 드래그로 돌려 보고 휠로 확대합니다.

사용법
  1. 드래그로 전시장을 돌려 보고, 휠 · 두 손가락으로 확대해요
  2. 벽마다 걸린 현장 사진을 가까이 당겨서 보세요
  3. 펭귄을 걸리며 자세히 보려면 새 버전 ‘걸어서 관람’으로 가요
소스
NEW

Aura 3D Studio

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

사용법
  1. ‘프리셋’에서 ‘화염’·‘냉기’ 같은 효과를 골라요
  2. ‘강도’·‘두께’ 슬라이더로 다듬고 화면을 드래그해 돌려 봐요
  3. ‘.glb / .gltf 선택…’으로 내 모델에도 씌울 수 있어요
  4. ‘GIF’ → ‘생성’을 누르면 움직이는 GIF로 저장돼요
소스
NEW

Aura 2D Studio

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

사용법
  1. 목록의 아우라 카드를 누르면 편집기로 불러와요
  2. ‘프리셋’ 버튼이나 ‘랜덤’으로 새 효과를 골라 보세요
  3. ‘이미지 업로드 (PNG·SVG)…’로 내 아이콘에 씌워요
  4. ‘GIF’·‘스프라이트시트’ → ‘생성’으로 내려받아요
소스
NEW

String Art Threading

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

사용법
  1. 샘플을 고르거나 사진을 올리면 바로 계산이 시작돼요
  2. ‘편집본’의 파란 틀을 끌어 실을 걸 영역을 정해요
  3. ‘원’·‘3색 (RGB)’ 등을 바꾸고 ‘계산 시작’을 눌러요
  4. 다 되면 ‘PNG’·‘SVG’·‘작업 순서 TXT’로 저장해요
소스
NEW

Caire — Seam Carving

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

사용법
  1. ‘이미지’에서 샘플을 고르거나 내 사진을 올려요
  2. 미리보기 오른쪽·아래 모서리를 끌어 크기를 바꿔요
  3. 지킬 부분은 ‘마스크 편집 모드’를 켜고 원본에 칠해요
  4. 원하는 크기가 되면 ‘결과 PNG’로 저장해요
소스
NEW

Primitive × p5.brush

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

사용법
  1. 샘플을 고르거나 내 사진을 올려요
  2. 붓질 버전도 원하면 ‘브러시 적용’을 먼저 골라요
  3. 도형 종류·개수를 정하고 ‘생성’을 누르면 도형이 쌓여요
  4. 결과는 ‘PNG (미적용)’·‘SVG’·‘PNG (브러시)’로 저장해요
소스

같은 그림, 다른 도형

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

사용법
  1. ‘6 흑백’을 누르면 삼각형과 노란 원이 사라져요
  2. ‘1 주황’·‘2 노랑’을 눌러 채널마다 숨은 도형을 봐요
  3. ‘보는 눈’에서 색맹 시각으로도 바꿔 보세요
  4. ‘이미지 편집’에서 레이어를 고르고 사각형·타원 도구로 그려요
소스

Color Picker Lab

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

사용법
  1. ‘점 편집’에서 원판 빈 곳을 누르면 그 색의 점이 생겨요
  2. ‘선 편집’에서 점을 차례로 눌러 엣지로 이어요
  3. 이어진 점을 끌면 아래 그라데이션 막대가 바로 바뀌어요
  4. ‘막대 CSS 복사’·‘PNG 저장’으로 결과를 가져가세요
소스
업데이트

QR 코드 생성기

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

사용법
  1. 맨 위 칸에 QR로 만들 주소를 입력해요
  2. 원하면 선·배경 색과 ‘오류 수정 수준’을 바꿔요
  3. ‘Generate QR Code’를 누른 뒤 PNG·SVG로 저장해요
  4. QR 이미지를 아래 점선 칸에 놓으면 원문을 읽어 줘요
소스

3D Viewer Lab

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

사용법
  1. ‘⬆ GLB’로 .glb 파일을 불러와요 (예시 모델도 있어요)
  2. 드래그로 둘러보고, 모델을 누르면 메뉴가 떠요
  3. ‘⚡ 로우폴리’·‘🧩 파츠 분리’로 옆에 사본을 만들어요
  4. ‘⬇ 다운로드’를 누르면 결과를 GLB 파일로 받아요
소스

🎲 놀기

게임과 게임 보조 도구

NEW

워해머 전장 플래너

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

사용법
  1. ‘지도 고르기’에서 내 성향·상대 성향을 고르고 추천 지도를 눌러요
  2. ‘유닛’ 탭의 ‘+ 유닛 놓기’로 유닛을 놓고 판 위에서 끌어 옮겨요
  3. 유닛을 고르면 이동·돌격 반경이 판에 바로 그려져요
  4. ‘📏’로 거리를 재고 ‘2D’·‘3D’로 보기를 바꿔 보세요
소스

워해머 판 · 턴과 이동

3D 보드 위에서 유닛을 배치하고 턴별 이동을 다룹니다.

사용법
  1. ‘이동을 시작한다 →’를 누르고 A 진영 모델을 골라요
  2. ‘이동’을 누른 뒤 모델을 끌어 옮기고 ‘확정’을 눌러요
  3. 고른 모델에서 다른 유닛까지 거리·막힘·차폐가 판에 떠요
  4. 빈 곳을 끌면 시점이 돌고 ‘다음 →’으로 턴을 넘겨요
소스

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

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

사용법
  1. ‘공격 프로필’에서 ‘수정’을 눌러 공격·위력·관통력·피해를 넣어요
  2. ‘방어 유닛’도 ‘수정’으로 내구력·방호·체력을 맞춰요
  3. ‘계산 시작’을 누르면 시행 횟수만큼 주사위를 굴려요
  4. 단계별 ‘예상값’과 ‘실제 결과’, 피해 분포 그래프를 비교해요
소스

Snake Game

간단한 웹 게임 만들기. 키보드 방향키나 휴대폰 스와이프로 조작합니다.

사용법
  1. ‘Start’를 누르거나 엔터를 치면 게임이 시작돼요
  2. 방향키로 뱀을 움직여 빨간 먹이를 먹으면 길어져요
  3. 휴대폰에선 게임 화면을 스와이프해서 방향을 바꿔요
  4. 벽이나 내 몸에 부딪히면 끝나요, ‘Pause’로 잠깐 멈춰요
소스

🧪 실험실

공부하며 만든 기술 실험

OpenAI API · Assistant

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

사용법
  1. OpenAI API 키를 넣고 ‘(유사 로그인) KEY 설정’을 눌러요
  2. 칸을 비운 채 ‘(유사 체팅방) 생성/설정’을 눌러 대화방을 만들어요
  3. 3번 칸에 챗봇 ID를 넣어요 (없으면 4번에서 만들어요)
  4. 질문을 쓰고 ‘메시지 전송’ → ‘챗봇 응답 생성’을 차례로 눌러요
소스

React 목록 CRUD

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

사용법
  1. 글 제목을 누르면 내용과 ‘수정’ · ‘삭제’ 버튼이 나와요
  2. ‘글쓰기’에서 제목 · 내용을 적고 ‘등록’하면 맨 위에 추가돼요
  3. 👍를 눌러 좋아요를 올리고 ‘인기순 정렬’로 줄 세워 보세요
  4. ‘공유하기’를 누르면 지금 목록이 담긴 주소가 만들어져요
소스

이미지 맵 · 이미지 CRUD

이미지를 업로드(파일 · 드롭다운)하고 드래그나 터치로 움직여 봅니다.

사용법
  1. ‘장소 등록’으로 사진을 고르거나 지도 위에 끌어다 놓아요
  2. 사진을 마우스나 손가락으로 끌어 원하는 곳에 옮겨요
  3. 사진을 누르면 ‘이동’ · ‘삭제’ 버튼이 나타나요
  4. 버튼은 서버 요청 연습용이라 실제로 저장되진 않아요
소스

브라우저 음성 인식(STT)

브라우저 Speech API로 음성을 인식해 녹음 · 출력해 봅니다.

사용법
  1. Chrome · Edge · Safari에서 ‘녹음 시작’을 눌러요
  2. 마이크 권한을 허용하고 한국어로 말해 보세요
  3. 말한 내용이 버튼 아래에 글자로 바로 나타나요
  4. 다 말했으면 ‘녹음 중지’를 눌러요
소스

모바일 움직임 테스트

모바일 기기에서 받아올 수 있는 움직임 · 방향 센서 데이터를 확인합니다.

사용법
  1. 휴대폰에서 열고, 센서 · 위치 권한을 물으면 허용해요
  2. ‘모션 데이터 수집 시작’을 누르고 폰을 기울여 각도를 봐요
  3. ‘장치 모션 데이터 수집 시작’으로 가속도 · 회전율을 확인해요
  4. ‘현재 위치 가져오기 시작’을 누르면 위도 · 경도가 계속 갱신돼요
소스

모바일 GPS

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

사용법
  1. ‘추적 간격(밀리초)’에 갱신 주기를 적어요 (기본 500)
  2. ‘위치 정보 업데이트 토글’을 누르고 위치 권한을 허용해요
  3. 위도 · 경도가 뜨고, 움직이면 초당 이동 속도(m/s)가 나와요
  4. 다시 ‘위치 정보 업데이트 토글’을 누르면 추적이 멈춰요
소스

차트 그려보기

차트를 출력하고 데이터를 갱신하는 연습입니다.

사용법
  1. 열면 게시글 5개의 누적 조회수 막대그래프가 바로 그려져요
  2. 3초마다 조회수가 랜덤으로 늘며 막대가 자라나요
  3. 막대에 마우스를 올리거나 탭하면 정확한 조회수가 보여요
  4. 위쪽 ‘누적 조회수’를 누르면 막대를 숨기거나 다시 보여줘요
소스

챗봇 대본 연습

챗봇 대본을 JSON으로 관리하는 요령을 연습합니다.

사용법
  1. ‘경로당’이나 ‘의료복지시설’ 버튼을 눌러 시설을 골라요
  2. 이어서 나오는 동네 버튼(예: ‘창천동’)을 눌러요
  3. 시설 링크가 뜨고, 누르면 네이버 지도에서 열려요
  4. 버튼 글자를 입력해 ‘전송’해도 되고, ‘처음으로’로 다시 시작해요
소스

공유하기

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

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