오늘의 찜질방
오늘 날씨가 찜질방 어느 방인지 알려줍니다 ♨️
기온만 보는 날씨 앱이 답답해서 만들었습니다. 체감온도와 습도를 같이 보고 오늘 바깥이 황토방인지 건식 사우나인지 습식 사우나인지 불가마인지로 판정합니다. 숫자보다 «오늘 나가면 어떤 느낌인지»가 먼저 와야 한다고 봤습니다. 위치를 허용하면 가장 가까운 도시로 맞추고, 거절해도 도시를 직접 고르면 됩니다.
열어 보기 →WebWeather APIGeolocation
Side Projects
Playground
블로그에 도구 이야기만 쓰다 보면 손이 근질거려서, 배운 것을 그때그때 작은 것으로 만들어 봅니다. 여기 있는 것들은 전부 브라우저에서 바로 열리고, 설치도 로그인도 회원가입도 필요 없습니다.
게임 엔진이나 물리 라이브러리를 쓰지 않고 충돌 계산부터 직접 짠 것이 많습니다. 라이브러리를 얹으면 빨리 끝나지만 왜 되는지는 안 남아서요. 아래에 각각 무엇이고 안에서 무엇이 돌아가는지 적어 두었습니다.
무엇을 만들었나
똥 말랑
고양이 배를 꾹 누르면 힘주기, 떼면 심호흡 🐱
고양이 배를 누르면 5초가 거꾸로 흐르고, 손을 떼면 3초 심호흡으로 넘어갑니다. 힘주기와 쉬기의 리듬을 화면이 대신 세어 주는 장난감입니다. 힘주기마다 버틴 시간이 막대로 정리돼 나옵니다. 아무것도 저장하지 않습니다 — 서버로 보내는 것도, 브라우저에 남기는 것도 없습니다.
열어 보기 →InteractiveSVGMobile
구슬 폭포 추첨기
양동이를 가장 먼저 채운 사람이 당첨 🫧
사다리타기가 지겨워서 만든 추첨기입니다. 이름을 한 줄에 하나씩 넣으면 사람마다 양동이가 놓이고 구슬이 쏟아집니다. 회전 바와 범퍼, 물레방아에 얻어맞고 흩어지다가 자기 양동이를 먼저 채운 사람이 당첨입니다. 물리 엔진 없이 원과 선분 충돌만 직접 짰고, 고정 타임스텝이라 같은 시드·같은 이름이면 기기가 달라도 같은 결과가 나옵니다. 결과를 정해 두고 연출하는 게 아닙니다.
열어 보기 →GameCanvasPhysics
코인 밀기 추첨기
코인을 쏟아붓고 먼저 떨어진 사람이 당첨 🪙
오락실 코인 밀기를 추첨기로 옮겼습니다. 이름 없는 중립 코인이 먼저 판을 깔고, 뜸을 들인 뒤 참가자 코인이 한꺼번에 쏟아집니다. 밀대가 밀어내다가 낙하선을 먼저 넘은 코인의 주인이 당첨입니다. 중립 코인을 계속 보충하는 이유는 판이 비면 늦게 떨어진 코인이 불리해지기 때문입니다. 코인이 수백 개까지 늘어나서, 매 프레임 전부를 비교하지 않고 격자로 나눠 이웃만 검사합니다.
열어 보기 →GameCanvasPhysics
아이맥스 1열
내 얼굴이 22미터 스크린에 걸린다, 목 꺾이는 1열에서 🎞️
폭 22m·높이 16m 스크린을 세우고 그 앞 4.5m, 눈높이 1.4m에 앉힙니다. 실제 아이맥스 1열 거리입니다. 이 자리에서 스크린 꼭대기를 보려면 77도를 올려다봐야 하고, 그래서 화면이 아래는 거대하고 위는 좁아지는 사다리꼴이 됩니다. 왜곡을 그림으로 흉내내지 않고 곡면 스크린을 3D로 세워 그 자리에서 투영합니다. 카메라 화면이든 가진 사진이든 걸 수 있고, 어느 쪽도 브라우저 밖으로 나가지 않습니다.
열어 보기 →WebWebGLCamera
만드는 과정은 블로그에
여기 있는 것들을 만들면서 막혔던 지점은 대부분 글로 따로 남겼습니다. 한글 조합 중간 상태를 오타로 세지 않는 법, 이미지 압축 파이프라인, Cloudflare 빌드 캐시가 말썽부린 기록 같은 것들입니다.
개발 글 보러 가기 →