사다리타기 게임 만들기 (JavaScript 구현)

이 예제는 HTML Canvas와 JavaScript를 활용하여 만든 사다리타기 게임입니다. 인원수를 입력하고 결과 항목을 설정하면, 자동으로 사다리가 생성되고 각 참가자의 이동 경로를 애니메이션으로 확인할 수 있습니다.

Canvas 위에 세로선과 가로선을 그리고, JavaScript로 경로를 계산하여 참가자가 어떤 결과에 도착하는지 보여주는 구조입니다.

사용 방법

1. 인원수를 입력합니다. 최소 2명부터 최대 10명까지 설정할 수 있습니다.
2. 사다리 생성 버튼을 누르면 인원수에 맞게 결과 입력칸이 만들어집니다.
3. 각 입력칸에 선물, 벌칙, 메뉴, 팀 이름 등 원하는 결과를 입력합니다.
4. 1번부터 시작 버튼을 누르면 1번 참가자부터 순서대로 사다리를 타기 시작합니다.
5. 각 참가자의 이동 경로가 색상 선으로 표시되고, 도착한 결과가 팝업으로 나타납니다.
6. 모든 참가자가 완료되면 버튼이 전부 완료 상태로 바뀝니다.

결과를 다시 정하고 싶다면 인원수나 결과 항목을 수정한 뒤 사다리 생성 버튼을 다시 누르면 됩니다.

활용 예시

• 점심 메뉴 정하기
• 벌칙 정하기
• 선물 추첨하기
• 팀 배정하기
• 발표 순서 정하기

사다리타기 게임은 단순한 놀이처럼 보이지만, JavaScript의 배열 처리, Canvas 그리기, 이벤트 처리, 애니메이션 로직을 함께 학습할 수 있는 좋은 예제입니다.

웹 개발을 처음 배우는 분들도 이 구조를 따라가면 인터랙티브한 웹 도구를 만드는 흐름을 이해할 수 있습니다.

로또 번호 추첨기 (JavaScript 구현)

이 프로그램은 JavaScript와 Canvas를 활용하여 만든 로또 번호 추첨기입니다. 공이 회전하며 섞인 후 랜덤으로 6개의 번호가 추출되는 구조로 구현되어 있습니다.

실제 로또 머신처럼 물리 움직임을 적용하여 자연스럽게 번호가 선택되도록 구성하였습니다. 아래 버튼을 눌러 직접 추첨을 실행해보세요.

Lotto 6/45

핵심 기능

• 1 ~ 45번 공 랜덤 생성  1번부터 45번 공을 전부 만들어서 원 안에 넣습니다.
  

• for (let i = 1; i <= 45; i++) balls.push(new Ball(i));
  

• 공의 충돌 및 회전 물리 구현
• 6개 번호 자동 추출
• 다시 추첨 기능

이 코드를 활용하면 다양한 랜덤 추첨 프로그램이나 게임 기능으로 확장할 수 있습니다.

로또 당첨은 어떤 사람이 될까?

1. 꿈이 정말 알려줄까?

실제로 당첨자들 사이에서 '꿈'은 가장 흔한 당첨 징조로 꼽힙니다. 당첨자 인터뷰 사례에서 좋은 꿈 이야기가 자주 등장하며, 아래와 같은 유형이 특히 많이 언급됩니다.

• 조상님 꿈: 가장 대표적인 사례입니다. 조상님이 나타나 밝은 미소를 지으시거나, 숫자를 알려주거나, 보따리를 주시는 꿈이 많습니다.
• 동물 및 자연 꿈: 돼지 떼가 집으로 들어오는 꿈, 온 세상이 불바다가 되는 꿈, 맑은 물이 집 안에 가득 차는 꿈 등이 자주 언급됩니다.
• 유명인 꿈: 대통령이나 유명한 연예인과 악수를 하거나 함께 식사를 하는 꿈을 꾸고 당첨된 사례도 있다고 알려져 있습니다.

물론 꿈이 당첨을 보장하는 것은 아닙니다. 다만 기대감과 설렘이 생겼을 때 복권을 구매하게 되는 심리적 계기가 된다는 점에서 흥미로운 현상입니다.

2. 통계로 분석이 가능할까?

로또는 기계에서 공이 무작위로 추출되는 독립 시행입니다. 따라서 엄밀히 말하면 '다음 번호'를 예측하는 수학적 방법은 존재하지 않습니다. 하지만 '기록'으로서의 통계는 존재합니다.

• 자주 나오는 번호: 특정 회차 동안 유난히 자주 등장한 '핫 넘버(Hot Numbers)'와 오랫동안 나오지 않은 '콜드 넘버(Cold Numbers)'를 조합하는 방식입니다.
• 번호대별 균형: 1번대, 10번대, 20번대 등 각 구간에서 골고루 번호가 섞여 나오는 비율을 분석합니다.
• 홀짝 및 총합: 홀수와 짝수의 비율(3:3 또는 2:4), 그리고 여섯 숫자 합계의 평균 범위(보통 120~180 사이)를 참고하기도 합니다.
• 현실적인 통계: 역대 당첨자들의 통계를 보면, 자동 선택 비중이 수동보다 압도적으로 높습니다(약 60~70%). 결국 통계적 분석보다는 '운'과 '꾸준함'이 더 큰 요인임을 보여줍니다.

3. 당첨된 사람들의 실제 사례

어떤 사람들이 당첨되는지에 대한 흥미로운 특징들입니다.

• 소액으로 꾸준히: 당첨자들의 상당수는 한꺼번에 수십만 원어치를 사는 사람이 아니라, 매주 5,000원에서 10,000원 정도를 규칙적으로 구매해 온 사람들이라고 합니다.
• 우연한 구매: 거스름돈으로 샀거나, 평소에 안 가던 길에서 눈에 띄는 판매점에 들어가 샀다가 당첨된 사례가 아주 많습니다.
• 나눔의 습관: 당첨자 인터뷰 중에는 "평소에 주변에 베푸는 마음으로 살았는데 복을 받은 것 같다"는 이야기가 종종 등장합니다.

로또 역대 최다 빈출 번호 알아볼까요?

역대 로또(1회~1222회)에서 통계적으로 가장 자주 등장한 숫자 상위 6개와 최근 흐름을 반영한 조합의 예시는 다음과 같습니다.

📊 역대 최다 빈출 번호 (보너스 번호 포함 기준)

역대 가장 많이 뽑힌 숫자들을 순서대로 나열하면 보통 다음과 같은 번호들이 상위권을 차지합니다. (데이터 집계 시점에 따라 1~2단계 차이는 있을 수 있습니다.)

1. 43: 압도적인 1위 후보로 자주 등장합니다.
2. 34: 최근 몇 년간 빈도가 급상승한 번호입니다.
3. 12: 초창기부터 꾸준히 나오는 번호입니다.
4. 27: 20번대 중 가장 강력한 통계를 가집니다.
5. 1: 첫 번째 번호로 자주 등장하는 상징적인 숫자입니다.
6. 33: 쌍둥이 번호 중 가장 출현 빈도가 높습니다.

🎲 'Hot Numbers' 기반 추천 조합

위의 통계적 빈도와 최근 10회차 이내의 흐름을 섞어서 번호를 구성해 본다면 다음과 같은 조합이 가능합니다.

[ 1, 12, 27, 33, 34, 43 ]

HTML5 Canvas로 테트리스 게임 만들기

이 글에서는 JavaScript와 Canvas를 활용하여 테트리스 게임을 구현하는 방법을 설명합니다. 블록 이동, 회전, 충돌 판정, 점수 계산 등 게임의 핵심 로직을 직접 구현할 수 있습니다.

아래 게임을 직접 실행해보면서 동작 원리를 확인해보세요.

핵심 로직

1. createMatrix()
게임판 배열을 생성하는 함수입니다.
테트리스 게임판은 10칸 × 20줄 구조이며, 각 칸은 0 또는 블록 번호를 저장합니다.
0은 빈 칸을 의미하고, 1~7은 서로 다른 테트리스 블록 색상을 의미합니다.

2. drawBoard()
canvas 위에 현재 게임판을 다시 그리는 함수입니다.
먼저 기존 화면을 지우고, 격자선을 그린 다음, 고정된 블록과 현재 떨어지고 있는 블록을 함께 출력합니다.

3. collide()
현재 블록이 벽, 바닥, 기존 블록과 충돌했는지 확인합니다.
블록이 이동하거나 회전할 때마다 이 함수를 사용하여 가능한 움직임인지 검사합니다.

4. merge()
떨어지던 블록이 더 이상 내려갈 수 없을 때, 해당 블록을 게임판 배열에 고정합니다.
이후 새로운 블록이 생성됩니다.

5. sweep()
가로 한 줄이 모두 채워졌는지 검사하고, 채워진 줄을 제거합니다.
줄이 제거되면 점수가 올라가고, 일정 줄 수 이상이 되면 레벨이 증가합니다.

6. update()
게임 루프를 담당하는 함수입니다.
requestAnimationFrame()을 이용해 화면을 계속 갱신하고, 일정 시간이 지나면 블록이 자동으로 한 칸씩 내려가도록 처리합니다.

테트리스 구현 핵심 정리

테트리스는 2차원 배열을 활용하여 블록의 위치를 관리하며, 충돌 감지와 회전 알고리즘을 통해 동작합니다.

이러한 구조를 이해하면 다양한 게임이나 인터랙티브 웹 기능으로 확장할 수 있습니다.

이미지 용량 줄이기 · 배경 투명 변환기 — 브라우저에서 바로 처리

이미지 파일을 선택하거나 드래그&드롭하면 용량 압축·포맷 변환·배경 투명 처리를 브라우저에서 바로 실행합니다.
이미지가 서버로 전송되지 않아 개인 사진이나 업무 자료도 안심하고 사용할 수 있습니다.

• 용량 압축 — 최대 크기(px)와 품질(%) 조절로 파일 크기 대폭 감소
• 포맷 변환 — WEBP · JPG · PNG 세 가지 포맷으로 자유롭게 변환
• 배경 투명 처리 — 단색 배경을 지정 색상·오차 범위로 제거해 투명 PNG/WEBP 생성
• 다중 파일 지원 — 여러 이미지를 한 번에 선택해 일괄 변환
• 드래그&드롭 — 파일 탐색기에서 직접 끌어다 놓기 가능
• 완전 로컬 처리 — 이미지가 외부 서버로 전송되지 않아 개인정보 안전

이미지 용량 줄이기 , 배경 투명

이미지는 서버로 업로드되지 않고, 내 브라우저에서만 변환됩니다.

사용 방법

1. 파일 선택 버튼으로 이미지를 고르거나, 드래그&드롭 영역에 파일을 끌어다 놓습니다.
2. 최대 크기(px)를 설정합니다. 가로·세로 중 긴 쪽이 이 값을 넘지 않도록 자동 축소됩니다.
3. 품질(%) 슬라이더로 압축 강도를 조절합니다. 낮을수록 용량이 작아지고 화질이 떨어집니다.
4. 저장할 포맷(WEBP·JPG·PNG)을 선택합니다. 가장 작은 용량을 원한다면 WEBP를 추천합니다.
5. 배경을 투명하게 만들고 싶다면 배경 투명 체크 후 제거할 색상과 오차 범위를 설정합니다.
6. 변환 시작을 누르면 결과 표에 원본·결과 용량·절감량이 표시되고 다운로드 버튼이 나타납니다.

포맷별 특징 비교

자주 묻는 질문 (FAQ)

빈 줄 제거기 — 공백 줄 · 숨겨진 특수 문자 자동 정리

텍스트를 붙여넣으면 불필요한 빈 줄(공백 줄)을 자동으로 제거하고, 눈에 보이지 않는 제로폭 공백 같은 숨겨진 특수 문자까지 함께 정리해주는 도구입니다.
블로그 글 편집, 문서 정리, 코드 클린업 등 빈 줄이 많아진 텍스트를 빠르게 다듬을 때 유용합니다.

• 빈 줄 자동 제거 — 연속된 빈 줄·공백만 있는 줄을 한 번에 정리
• 제로폭 공백 제거 — 눈에 보이지 않는 Zero-width 특수 문자(U+200B 등) 자동 삭제
• 실시간 자동 변환 — 체크 옵션으로 입력 즉시 결과 반영
• 결과 복사 — 변환된 텍스트를 클립보드에 바로 복사
• 전체 삭제 — 입력·출력 칸을 한 번에 초기화

사용 방법

1. 왼쪽 변환할 텍스트 칸에 정리할 텍스트를 붙여넣습니다(Ctrl+V).
2. 자동 변환 체크가 켜져 있으면 입력 즉시 오른쪽 변환 결과 칸에 결과가 나타납니다.
3. 복사 버튼을 누르면 변환된 텍스트가 클립보드에 복사됩니다(Ctrl+C로도 가능).
4. 다시 시작하려면 삭제 버튼으로 입력·출력 칸을 모두 초기화하세요.

제거되는 항목

자주 묻는 질문 (FAQ)

우편번호 · 주소 찾기 — 카카오 주소 검색 위젯

버튼 하나로 카카오(다음) 주소 검색 팝업을 열고, 선택한 주소의 우편번호·한글주소·영문주소를 자동으로 입력해주는 위젯입니다.
별도 가입이나 API 키 없이 바로 사용할 수 있어 블로그나 웹페이지에 간단하게 삽입할 수 있습니다.

• 카카오 주소 검색 팝업 — 도로명주소·지번주소 모두 검색 지원
• 우편번호 자동 입력 — 5자리 신 우편번호(ZIP) 자동 반영
• 영문주소 자동 입력 — 한글 주소 선택 시 영문주소도 함께 자동 표시
• 복사 기능 — 한글주소·영문주소 각각 클립보드 복사 가능
• 초기화 — 입력된 주소·우편번호 한 번에 삭제

사용 방법

1. 주소 / 우편번호 찾기 버튼을 클릭합니다.
2. 카카오 주소 검색 팝업이 열리면 찾을 주소를 입력하고 검색합니다.
3. 목록에서 원하는 주소를 클릭하면 우편번호·한글주소·영문주소가 자동으로 입력됩니다.
4. 한글주소 복사 또는 영문주소 복사 버튼으로 클립보드에 바로 복사할 수 있습니다.
5. 새로 검색하거나 초기화하려면 지우기 버튼을 누르세요.

주소 형식 안내

자주 묻는 질문 (FAQ)

근무일 계산기 — 주말·공휴일 제외 실제 근무일·근속기간 계산

입사일과 퇴사일(또는 기준일)을 입력하면 주말과 공휴일을 제외한 실제 근무일(영업일)을 바로 계산할 수 있습니다.
단순 날짜 차이가 아닌 법정 근속기간(X년 X개월 X일)도 함께 표시되어 인사·급여·경력 정리에 유용합니다.

• 시작일·종료일 포함 여부 선택 — 입사일·퇴사일 포함/제외를 개별 설정
• 주말 제외 — 토요일·일요일 자동 제외 옵션
• 공휴일 제외(KR) — 한국 법정 공휴일 자동 반영 (외부 API 연동, 하루 1회 캐시)
• 법정 근속기간 — X년 X개월 X일 형태로 자동 계산
• 결과 복사 — 계산 결과 전체를 텍스트로 복사해 공유 가능

사용 방법

1. 시작일(입사일)과 종료일(퇴사일/기준일)을 입력합니다.
2. 시작일·종료일 포함 여부를 체크합니다. 기본값은 모두 포함입니다.
3. 필요에 따라 주말 제외(토/일) 또는 공휴일 제외(KR) 옵션을 선택합니다.
4. 계산하기를 누르면 총 일수, 주말 제외, 공휴일 제외, 근무일(영업일), 법정 근속기간이 한눈에 표시됩니다.
5. 시작일과 종료일 순서가 바뀌었다면 시작↔종료 바꾸기 버튼을 활용하세요.
6. 결과를 저장하거나 공유하려면 결과 복사를 누르세요.

근무일(영업일) 계산 기준

자주 묻는 질문 (FAQ)

D-Day 계산기 — 무료 온라인 날짜 계산

시험일, 여행 출발일, 기념일까지 D-Day가 얼마나 남았는지 바로 계산해 보세요.
날짜를 입력하고 계산하기 버튼 하나만 누르면 됩니다. 설치나 로그인 없이 무료로 사용할 수 있습니다.

• D-Day 모드 — 특정 날짜까지 남은 일수 또는 지난 일수 표시
• 두 날짜 차이 — 시작일·종료일 사이의 정확한 일수 계산
• 기념일 모드 — 100일·200일·1주년·2주년 등 주요 기념일 날짜 일괄 확인

사용 방법

1. 상단 탭에서 원하는 계산 모드를 선택합니다.
2. 날짜 입력란을 클릭해 날짜를 선택하거나, 오늘 버튼으로 오늘 날짜를 바로 입력합니다.
3. 계산하기 버튼을 누르면 결과가 즉시 표시됩니다.
4. 결과를 공유하려면 결과 복사 버튼으로 클립보드에 복사하세요.

모드별 기능 안내

자주 묻는 질문 (FAQ)

이 도구는 브라우저에서만 동작하며 입력한 날짜 정보는 외부로 전송되지 않습니다.

급여 계산기 — 실수령액 자동 계산 (4대보험 + 세금)

월급이나 연봉을 입력하면 4대보험(근로자 부담)과 세금을 자동으로 계산해 실수령액을 바로 알 수 있습니다.
세금은 간편 추정과 급여명세서 원천세 직접 입력 두 가지 방식을 지원하므로 상황에 맞게 선택하면 됩니다.

• 월급 / 연봉 두 가지 기준 모두 지원 — 연봉은 자동으로 월 환산
• 4대보험 국민연금·건강보험·장기요양·고용보험(근로자 부담) 자동 계산
• 비과세 공제 식대·차량유지비 등 비과세 항목 반영 가능
• 세금 추정 모드 부양가족 수 기반 간이세액 추정 (근로소득세·지방소득세)
• 원천세 입력 모드 급여명세서의 소득세·지방소득세 직접 입력 → 정확한 실수령액 확인
• 결과 복사 공제 내역 전체를 텍스트로 복사해 공유 가능

사용 방법

1. 급여 기준을 월급(세전) 또는 연봉(세전) 중 선택합니다.
2. 세전 금액을 입력합니다. 연봉을 선택하면 12로 나눠 월 기준으로 자동 환산됩니다.
3. 식대·차량유지비 등 비과세 항목이 있으면 월 금액을 입력하세요. 없으면 0으로 둡니다.
4. 세금 계산 방식을 선택합니다.
   • 추정(간편) — 부양가족 수를 입력하면 근로소득세를 자동으로 추정합니다.
   • 원천세 입력(정확) — 급여명세서에 적힌 소득세·지방소득세를 직접 입력하면 정확한 실수령액이 나옵니다.
5. 계산하기 버튼을 누르면 실수령액과 공제 내역이 표시됩니다.
6. 결과를 저장하거나 공유하려면 결과 복사를 누르세요.

4대보험 요율 안내 (근로자 부담)

자주 묻는 질문 (FAQ)

알바 급여 계산기 — 시급, 주휴수당, 실수령액 자동 계산

시급과 근무 시간만 입력하면 일급·주급·월급을 한 번에 환산해 드립니다.
까다로운 주휴수당 포함 여부와 3.3% 소득세, 4대보험 공제까지 선택하여 실제 내가 받을 예상 실수령액을 바로 확인해 보세요.

• 시급/근무시간 기반 일급·주급·월급 자동 환산
• 주휴수당 주 15시간 이상 근무 시 자동 계산 (포함/미포함 선택 가능)
• 공제 항목 4대보험(간편 추정) 및 3.3% 사업소득세 선택 적용
• 월급 환산 한 달을 평균 4.345주(연 52주 기준)로 계산한 정확한 월 예상액
• 결과 복사 상세 내역을 텍스트로 복사해 간편하게 공유

사용 방법

1. 시급을 입력합니다. (2024년 최저시급: 9,860원 / 2025년: 10,030원)
2. 하루 근무 시간과 한 달 근무 일수를 입력합니다.
3. 주휴수당 발생 여부에 따라 포함/미포함을 선택하세요. (주 15시간 이상이면 보통 포함)
4. 4대보험 가입 여부나 3.3% 세금 공제 여부를 공제(선택)에서 체크합니다.
5. 계산하기 버튼을 누르면 일/주/월 단위 급여와 공제액이 표시됩니다.

주휴수당 지급 조건 안내

자주 묻는 질문 (FAQ)