이렇게 만들었어요
AI가 코드를 대신 써 주는 시대에는 '어떻게 코딩하느냐'보다 '무엇으로 만들 수 있고, 무엇을 알아야 하느냐'가 더 중요합니다. 모두허브의 도구들을 어떤 재료와 지식으로 만들었는지 그대로 보여드립니다.
서비스 39개 중 18개는 외부 라이브러리 없이 브라우저 기본 기능만으로 만들었어요.
모든 서비스의 공통 기반
모든 도구가 함께 쓰는 기반 기술입니다.
서비스별로 보기
IT 백과사전
알아야 했던 것
SCAN·C-SCAN·LOOK·C-LOOK은 '끝 트랙까지 가는가'와 '한 방향으로만 처리하는가' 두 선택의 조합이라, 0 쪽 방향은 트랙 번호를 뒤집어(t → 최대 트랙 − t) 큰 쪽 방향 코드 하나로 계산한다. ARP 화면은 상태를 들고 있지 않고 (모드, 단계)에서 ARP 테이블을 매번 다시 계산한다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- SVG (새 탭에서 열림)확대해도 깨지지 않는 벡터 그래픽
잉어 키우기 게임
알아야 했던 것
먹기는 큰 쪽이 작은 쪽보다 1.15배 이상 크고 작은 쪽 중심이 큰 쪽 몸 안에 들어올 때만 일어난다. 먹으면 먹이 넓이의 절반만큼 몸 넓이가 늘어나서(r' = √(r² + 0.5·r먹이²)) 클수록 성장이 느려진다.
라이브러리
- three.js (새 탭에서 열림)브라우저에서 3D 장면을 그리는 그래픽 라이브러리
브라우저 기능
- WebGL (새 탭에서 열림)그래픽 카드로 2D·3D를 그리는 브라우저 기능
젤리 주사위 굴리기
알아야 했던 것
주사위마다 입자 64개(4×4×4)를 두고 칸마다 원래 모양으로 되돌리는 힘을 걸어 말랑하게 만든다. 결과는 난수가 아니라 멈춘 격자의 회전에서 위를 향한 면으로 읽는다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- WebGPU (새 탭에서 열림)WebGL 다음 세대의 그래픽 카드 활용 기능
- Web Audio API (새 탭에서 열림)브라우저에서 소리를 합성하고 재생
2048 콤보 게임
알아야 했던 것
한 번 밀 때 같은 수는 한 번씩만 합쳐지고, 새 타일은 빈칸에 90% 확률로 2, 10% 확률로 4가 나온다.
라이브러리
- three.js (새 탭에서 열림)브라우저에서 3D 장면을 그리는 그래픽 라이브러리
브라우저 기능
- WebGL (새 탭에서 열림)그래픽 카드로 2D·3D를 그리는 브라우저 기능
- Web Audio API (새 탭에서 열림)브라우저에서 소리를 합성하고 재생
- Vibration API (새 탭에서 열림)휴대폰 진동으로 손맛 더하기
- Web Share API (새 탭에서 열림)휴대폰의 공유 창으로 결과 보내기
차트 매매 연습
알아야 했던 것
바이낸스 1시간봉 5천 개에서 끊김 없이 이어진 가장 긴 구간만 남기고, 1시간봉을 묶어 4시간봉과 일봉을 다시 만든다.
라이브러리
- Lightweight Charts (새 탭에서 열림)TradingView가 만든 금융 차트 라이브러리
- TanStack Query (새 탭에서 열림)서버에서 받은 데이터를 캐시하고 다시 불러오는 도구
- tRPC (새 탭에서 열림)서버 함수를 타입 그대로 호출하는 API 도구
- Drizzle ORM (새 탭에서 열림)타입스크립트로 데이터베이스를 다루는 ORM
- Supabase (새 탭에서 열림)로그인과 PostgreSQL 데이터베이스
데이터 출처
- Binance Market Data API (새 탭에서 열림)비트코인·이더리움 과거 시세 캔들
찢어지는 천 시뮬레이터
알아야 했던 것
천을 점과 막대로 나눠 Verlet 적분으로 움직이고, 막대가 원래 길이의 2.8~4배를 넘게 늘어나면 끊는다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- WebGL (새 탭에서 열림)그래픽 카드로 2D·3D를 그리는 브라우저 기능
- Canvas 2D (새 탭에서 열림)픽셀 단위로 그림을 그리고 이미지로 저장
- File API (새 탭에서 열림)끌어다 놓은 이미지 파일 읽기
합격할지도
알아야 했던 것
0.35배보다 작게 줄이면 글자를 숨긴다. 한글은 SDF 글꼴 지도에 미리 그려 두고 노드·연결선·글자를 종류별로 한 번에 그린다.
라이브러리
- three.js (새 탭에서 열림)브라우저에서 3D 장면을 그리는 그래픽 라이브러리
- TinySDF (새 탭에서 열림)글자를 확대해도 선명한 SDF 이미지로 만드는 도구
브라우저 기능
- WebGPU (새 탭에서 열림)WebGL 다음 세대의 그래픽 카드 활용 기능
- WebGL (새 탭에서 열림)그래픽 카드로 2D·3D를 그리는 브라우저 기능
- IndexedDB (새 탭에서 열림)큰 데이터를 브라우저에 자동 보관
- Broadcast Channel API (새 탭에서 열림)같은 사이트의 여러 탭끼리 변경 사항 전달
- File System Access API (새 탭에서 열림)내 컴퓨터의 파일에 바로 저장
데이터 출처
- Google Drive API (새 탭에서 열림)내 구글 드라이브에 맵 파일 저장
한영 오타 변환기
알아야 했던 것
영문 자판 키를 두벌식 자모로 바꾼 뒤 이어진 자모를 음절로 조립한다. Shift를 누른 키는 쌍자음이나 ㅒ·ㅖ가 된다.
라이브러리
- Hangul.js (새 탭에서 열림)한글 자모를 분해하고 음절로 조립
이모지 검색기
알아야 했던 것
한글 음절 코드에서 0xAC00을 빼고 21×28로 나누면 초성이 나온다. 이 계산 덕분에 'ㅅㄹ'처럼 초성으로도 찾을 수 있다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Clipboard API (새 탭에서 열림)버튼 하나로 복사
데이터 출처
- Emojibase (새 탭에서 열림)이모지 이름과 검색어의 3개 언어 데이터 (빌드할 때 변환)
오늘의 운세 포춘쿠키
알아야 했던 것
오늘 날짜와 방문자 ID를 이어 FNV-1a 해시로 운세를 고르기 때문에, 같은 날에는 몇 번을 열어도 같은 운세가 나온다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Web Crypto API (새 탭에서 열림)예측하기 어려운 암호학적 난수 생성
- Web Storage (새 탭에서 열림)내 브라우저에만 남는 작은 저장 공간
색각 테스트 게임
알아야 했던 것
레벨이 오를수록 격자는 3칸에서 8칸으로 늘고 색 차이는 47에서 5로 줄어든다. 다른 칸은 HSL 중 한 채널만 바꿔 만든다.
라이브러리
- canvas-confetti (새 탭에서 열림)성공 순간에 꽃가루 효과를 터뜨리는 라이브러리
브라우저 기능
- Web Share API (새 탭에서 열림)휴대폰의 공유 창으로 결과 보내기
글자수 세기 + 메타 스니펫 검사기
알아야 했던 것
검색 결과 제목은 15~32자, 설명은 50~120자를 권장 범위로 두고, 바이트 수는 UTF-8 인코딩 기준으로 센다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Encoding API (새 탭에서 열림)글자를 UTF-8 바이트로 바꿔 크기를 셈
깃허브 프로필 비교기
알아야 했던 것
공개 지표 6개를 두 사람 중 큰 값으로 나눠 0~1로 맞춘 뒤, 팔로워 30%·저장소 25% 같은 가중치를 곱해 더한다.
라이브러리
- TanStack Query (새 탭에서 열림)서버에서 받은 데이터를 캐시하고 다시 불러오는 도구
브라우저 기능
- SVG (새 탭에서 열림)확대해도 깨지지 않는 벡터 그래픽
데이터 출처
- GitHub REST API (새 탭에서 열림)공개 프로필과 저장소 통계
환율 타임머신
알아야 했던 것
주말과 공휴일에는 환율이 고시되지 않아 요청한 날짜 이전의 가장 가까운 영업일 환율을 쓰며, 1999년 1월 4일 이후만 조회된다.
라이브러리
- Lightweight Charts (새 탭에서 열림)TradingView가 만든 금융 차트 라이브러리
- TanStack Query (새 탭에서 열림)서버에서 받은 데이터를 캐시하고 다시 불러오는 도구
데이터 출처
- Frankfurter API (새 탭에서 열림)무료 일별 환율 API
QR 코드 생성기
알아야 했던 것
WiFi QR은 WIFI:T:암호화방식;S:이름;P:비밀번호;; 형식이고, 값 안의 \ ; , : 는 앞에 역슬래시를 붙여 이스케이프한다.
라이브러리
- node-qrcode (새 탭에서 열림)텍스트를 QR 코드 이미지로 만드는 라이브러리
우주 갤러리
알아야 했던 것
NASA 오늘의 천문 사진(APOD)은 1995년 6월 16일부터 하루 한 장이다. 지난 날짜는 바뀌지 않으니 7일, 오늘 사진은 1시간 동안 저장해 둔다.
라이브러리
- TanStack Query (새 탭에서 열림)서버에서 받은 데이터를 캐시하고 다시 불러오는 도구
- date-fns (새 탭에서 열림)날짜 더하기·빼기와 달력 계산 함수 모음
데이터 출처
- NASA APOD API (새 탭에서 열림)NASA 오늘의 천문 사진
시간↔프레임 계산기
알아야 했던 것
29.97fps 드롭프레임은 10분째를 뺀 매 분 첫 2개 프레임 번호를 건너뛰고(59.94fps는 4개), 초와 프레임 사이를 ;로 표시한다.
라이브러리
외부 라이브러리 없이 만들었어요
행성 나이 계산기
알아야 했던 것
지구 나이를 행성의 공전 주기로 나눠 행성 나이를 구하고, 행성의 현재 위치는 케플러 방정식을 풀어 계산한다.
라이브러리
- three.js (새 탭에서 열림)브라우저에서 3D 장면을 그리는 그래픽 라이브러리
브라우저 기능
- WebGL (새 탭에서 열림)그래픽 카드로 2D·3D를 그리는 브라우저 기능
데이터 출처
- NASA JPL Approximate Positions of the Planets (새 탭에서 열림)행성 궤도 요소 표 (코드에 내장)
퍼센트 계산기
알아야 했던 것
증감률은 (현재값−이전값)÷|이전값|×100이고, 마진율은 원가가 아니라 매출을 분모로 (매출−원가)÷매출×100이다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Intl API (새 탭에서 열림)언어별 숫자 표기·국가 이름·글자 나누기
한강 수온체크
알아야 했던 것
서울시 수질 자료는 측정소마다 여러 시각의 행이 섞여 오므로, 측정소별로 날짜와 시각이 가장 늦은 값만 골라 쓴다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Geolocation API (새 탭에서 열림)허락받은 뒤 현재 위치 확인
데이터 출처
- 서울 열린데이터광장 수질 측정 자료 (새 탭에서 열림)한강 측정소별 매시간 수온·수질
랜덤 룰렛
알아야 했던 것
조준한 각도에서 과녁의 회전각을 빼서 맞힌 칸을 정한다. 3D를 쓸 수 없는 기기에서는 치우침 없는 난수로 추첨한다.
라이브러리
- three.js (새 탭에서 열림)브라우저에서 3D 장면을 그리는 그래픽 라이브러리
- lz-string (새 탭에서 열림)긴 데이터를 짧은 공유 주소로 압축
브라우저 기능
- WebGL (새 탭에서 열림)그래픽 카드로 2D·3D를 그리는 브라우저 기능
- Web Crypto API (새 탭에서 열림)예측하기 어려운 암호학적 난수 생성
- Web Audio API (새 탭에서 열림)브라우저에서 소리를 합성하고 재생
- Vibration API (새 탭에서 열림)휴대폰 진동으로 손맛 더하기
- Web Share API (새 탭에서 열림)휴대폰의 공유 창으로 결과 보내기
군 복무일 계산기
알아야 했던 것
전역일은 입대일에 복무 개월 수(육군 18·해군 20·공군 21개월)를 더한 날의 전날이고, 달력에 없는 날짜는 그 달 말일로 맞춘다.
라이브러리
외부 라이브러리 없이 만들었어요
데이터 출처
- 병무청 복무기간 안내 (새 탭에서 열림)군별 복무 개월 수의 근거
색상 코드 변환기
알아야 했던 것
HEX는 RGB 세 채널의 8비트 값을 16진수로 이어 붙인 것이고, HSL은 RGB의 최댓값과 최솟값 차이로 채도와 색상각을 구한다.
라이브러리
- react-colorful (새 탭에서 열림)가벼운 색상 선택기 컴포넌트
랜덤 숫자 생성기
알아야 했던 것
crypto.getRandomValues의 32비트 정수를 2의 32제곱으로 나눠 0 이상 1 미만의 난수를 만들고, 중복 없이 뽑을 때는 이미 나온 수를 건너뛴다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Web Crypto API (새 탭에서 열림)예측하기 어려운 암호학적 난수 생성
1분 자기소개 리듬 코치
알아야 했던 것
공백을 뺀 글자 수를 초당 4·5·6자로 나누고, 마침표마다 0.35초, 쉼표마다 0.18초 쉬는 시간을 더해 말하는 시간을 추정한다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Web Audio API (새 탭에서 열림)브라우저에서 소리를 합성하고 재생
- Canvas 2D (새 탭에서 열림)픽셀 단위로 그림을 그리고 이미지로 저장
로또 번호 생성기
알아야 했던 것
1부터 45까지에서 중복 없이 6개를 뽑는다. 예측하기 어려운 난수를 위해 Math.random 대신 crypto.getRandomValues를 쓴다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Web Crypto API (새 탭에서 열림)예측하기 어려운 암호학적 난수 생성
데이터 출처
- 동행복권 (새 탭에서 열림)로또 6/45 공식 당첨 번호
추첨기
알아야 했던 것
Web Crypto로 만든 32비트 난수를 2의 32제곱으로 나눠 0~1 값을 얻고, 이미 뽑힌 항목은 제외하며 다시 뽑는다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Web Crypto API (새 탭에서 열림)예측하기 어려운 암호학적 난수 생성
디데이 카운터
알아야 했던 것
목표일과 오늘을 모두 자정으로 맞춘 뒤 날짜 차이를 세고, 2월 30일처럼 달력에 없는 날짜는 입력 단계에서 걸러낸다.
라이브러리
- date-fns (새 탭에서 열림)날짜 더하기·빼기와 달력 계산 함수 모음
태어난 지 며칠 계산기
알아야 했던 것
두 날짜를 UTC 자정으로 바꿔 경과 일수를 구하고, 기념일은 한국식 백일처럼 태어난 날을 1일째로 센다.
라이브러리
- date-fns (새 탭에서 열림)날짜 더하기·빼기와 달력 계산 함수 모음
날짜 계산기
알아야 했던 것
끝날 포함을 켜면 하루를 더하고, 개월 수는 달력 기준으로 센다. 말일에서 시작하면 더 짧은 달의 말일까지를 한 달로 본다.
라이브러리
- date-fns (새 탭에서 열림)날짜 더하기·빼기와 달력 계산 함수 모음
근무일 계산기
알아야 했던 것
토·일요일을 먼저 빼고, 평일과 겹친 공휴일만 따로 센다. 공휴일은 연도별 날짜 목록으로 판정한다.
라이브러리
- date-fns (새 탭에서 열림)날짜 더하기·빼기와 달력 계산 함수 모음
세계 국기 퀴즈
알아야 했던 것
나라마다 두 글자 국가 코드(ISO 3166-1)로 국기 이미지를 찾고, 일본어 국가명이 없으면 브라우저의 Intl.DisplayNames로 채운다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Intl API (새 탭에서 열림)언어별 숫자 표기·국가 이름·글자 나누기
데이터 출처
- REST Countries (새 탭에서 열림)나라 이름·국가 코드·국기 주소
- Flagpedia flagcdn (새 탭에서 열림)국가 코드로 찾는 국기 이미지
이더리움 단위 변환기
알아야 했던 것
1 ETH는 10의 18제곱 wei다. 부동소수점 오차를 피하려고 모든 값을 정수(bigint) wei로 바꾼 뒤 단위를 변환한다.
라이브러리
- viem (새 탭에서 열림)이더리움 단위 변환과 계정 생성을 돕는 라이브러리
브라우저 기능
- BigInt (새 탭에서 열림)아주 큰 정수를 오차 없이 계산
이더리움 계정 생성기
알아야 했던 것
128비트 난수로 BIP-39 12단어를 만들고, BIP-44 경로 m/44'/60'/0'/0/0(60은 이더리움)으로 첫 계정 키를 파생한다.
라이브러리
- viem (새 탭에서 열림)이더리움 단위 변환과 계정 생성을 돕는 라이브러리
- node-qrcode (새 탭에서 열림)텍스트를 QR 코드 이미지로 만드는 라이브러리
브라우저 기능
- Web Crypto API (새 탭에서 열림)예측하기 어려운 암호학적 난수 생성
그라데이션 생성기
알아야 했던 것
색 지점을 위치 순서로 정렬해 이어 붙이고, 선형은 각도(deg)로, 원뿔형은 from 각도로 시작 방향을 정한다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- CSS Gradients (새 탭에서 열림)CSS만으로 그리는 선형·원형·원뿔형 그라데이션
움직이는 텍스트 효과 생성기
알아야 했던 것
글자를 코드 단위가 아니라 사용자가 보는 글자(grapheme) 단위로 나눠야 합쳐진 이모지가 쪼개지지 않고 한 글자로 움직인다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Intl API (새 탭에서 열림)언어별 숫자 표기·국가 이름·글자 나누기
- CSS Animations (새 탭에서 열림)키프레임으로 움직임을 만드는 CSS 기능
스터디 카드
알아야 했던 것
카드마다 0~100 숙련도를 두고 '알았어요'는 +20점, '몰랐어요'는 −15점을 준다. 50점 미만 중 가장 낮은 5장을 약한 카드로 보여준다.
라이브러리
- tRPC (새 탭에서 열림)서버 함수를 타입 그대로 호출하는 API 도구
- Drizzle ORM (새 탭에서 열림)타입스크립트로 데이터베이스를 다루는 ORM
- Supabase (새 탭에서 열림)로그인과 PostgreSQL 데이터베이스
- TanStack Query (새 탭에서 열림)서버에서 받은 데이터를 캐시하고 다시 불러오는 도구
JSON 도구 모음
알아야 했던 것
JWT의 exp는 초 단위라 현재 시각을 1000으로 나눠 비교한다. 서명은 검증하지 않고 base64url 인코딩만 풀어서 보여준다.
라이브러리
- Ajv (새 탭에서 열림)JSON 스키마 검증기
- js-yaml (새 탭에서 열림)YAML과 JSON을 서로 변환
- JSONPath Plus (새 탭에서 열림)JSONPath 식으로 원하는 값을 찾아내는 도구
- jsdiff (새 탭에서 열림)두 텍스트의 달라진 줄을 비교
뽀모도로 타이머
알아야 했던 것
집중 25분, 짧은 휴식 5분을 반복하다 4회차마다 15분 긴 휴식을 둔다. 남은 시간은 시작 시각과 현재 시각의 차이로 계산한다.
라이브러리
외부 라이브러리 없이 만들었어요
브라우저 기능
- Web Audio API (새 탭에서 열림)브라우저에서 소리를 합성하고 재생
- Web Locks API (새 탭에서 열림)여러 탭 중 한 곳만 작업하도록 순서를 정함
- Page Visibility API (새 탭에서 열림)탭이 가려지거나 다시 보일 때를 감지
- Fullscreen API (새 탭에서 열림)화면 전체로 크게 보기
데이터 출처
- Kenney Interface Sounds (새 탭에서 열림)자유 이용(CC0) 알림 효과음
- Unsplash (새 탭에서 열림)배경 자연 사진 (출처 표기)