아두이노(Arduino)는 누구나 쉽게 대화형 전자 제품과 사물인터넷(IoT)을 만들 수 있도록 제작된 오픈소스 하드웨어 및 소프트웨어 생태계입니다. 자료는 아두이노(arduino) 입문자용 가상 시물레이터 입니다.

구성

• 보드: UNO R3(ATmega328P, 16 MHz)와 UNO R4 Minima(RA4M1, 48 MHz) 중 고를 수 있습니다. 헤더 핀, PWM ~ 표시, L·TX·ON LED, 리셋 버튼을 그렸고, 사용 중인 핀은 금색으로 표시됩니다. 공식 로고는 넣지 않았습니다.
• 브레드보드 부품: LED(220 Ω), RGB LED, 푸시 버튼(풀다운 / GND·풀업 배선), 가변저항, 조도 센서, TMP36 온도 센서, SG90 서보, 피에조 부저, 16×2 LCD를 놓을 수 있습니다. 부품을 더하거나 빼고 핀을 바꿀 수 있고, 버튼은 누르고 있기, 가변저항은 드래그, 빛·온도는 슬라이더로 조작합니다.
• 전선 색: 핀 상태에 따라 바뀝니다. 빨강은 HIGH, 주황은 PWM, 보라는 tone, 파랑은 입력입니다.
• 코드 편집기: 구문 강조가 되고, 지금 실행 중인 줄을 초록색으로 표시합니다. Ctrl+Enter로 업로드하고, 일시정지·리셋, 시간 배율 0.25–4×를 지원합니다.
• 시리얼: 모니터에서 보드로 글자를 보낼 수 있습니다. 플로터는 이름:값 형식의 출력을 여러 선으로 그립니다.
• 핀 패널: D0–A5 상태 표와 사용 중인 핀의 파형을 보여줍니다.

예제 12개: Blink, 버튼, 페이드(PWM), 가변저항 읽기, 신호등(millis 상태 기계 + 보행자 버튼), 서보 스윕, 멜로디(「작은 별」, 실제 소리), 야간등, LCD 온도계, RGB 무지개, 시리얼 명령, 떠 있는 입력(INPUT → INPUT_PULLUP으로 고쳐 보기).

실수를 알려 주는 경고

• PWM이 안 되는 핀에 analogWrite를 쓴 경우
• pinMode 없이 HIGH를 써서 LED가 희미하게 켜지는 경우
• Serial.begin을 빠뜨린 경우
• D0·D1이 시리얼과 충돌하는 경우
• tone을 두 핀에서 동시에 쓴 경우
• LCD에 한글을 출력한 경우

한계: 스케치를 아두이노 C의 자주 쓰는 부분만 JavaScript로 바꿔 실행합니다. 그래서 정수 나눗셈, 포인터, 구조체, static 지역 변수는 실제와 다르게 동작하거나 지원되지 않습니다. 세미콜론을 빠뜨려도 JavaScript 규칙 때문에 오류 없이 넘어가는 경우가 있습니다.

검증: 헤드리스 브라우저에서 12개 예제를 모두 변환·실행해 오류가 없는 것을 확인했습니다.

• 가변저항 512 → 2.50 V, TMP36 24 °C → LCD 23.8 °C(ADC 양자화 때문)가 정확히 나옵니다.
• 버튼 누름/뗌에 따라 LED가 켜지고 꺼지고, 시리얼 명령 ‘1’을 보내면 LED가 켜집니다.
• 떠 있는 입력은 0과 1을 오가다가 INPUT_PULLUP으로 고치면 1로 안정됩니다.
• while(true); 같은 무한 루프에서도 페이지가 멈추지 않습니다.

Sources:

• Arduino

MCP 서버를 만드는 과정을 그림으로 설명하고, 직접 도구를 만들어 메시지 흐름을 시뮬레이션해볼 수 있는 한글 HTML 페이지 입니다.

Spring Boot 파이프라인 학습 페이지를 만들었습니다. 페이지는 세 부분으로 되어 있습니다.

• 파이프라인 지도: 트리거 → 빌드 → 테스트 → 패키징 → Docker 이미지 → Dev 배포 → Prod 배포, 이렇게 7단계를 보여줍니다. 단계를 누르면 그 단계가 하는 일, 쉬운 비유, 실제 azure-pipelines.yml 코드가 함께 나옵니다.
• 시뮬레이터: 먼저 트리거를 고릅니다(main push, PR, feature 브랜치). 다음으로 넣을 오류를 고릅니다(컴파일 오류, 테스트 실패, 커버리지 부족). 마지막으로 운영 배포 전 승인 여부를 정하고 실행하면 됩니다. 단계가 실제처럼 진행되고, 로그와 함께 지금 무슨 일이 일어나는지 쉬운 설명이 나옵니다. "한 단계씩" 버튼으로 천천히 따라갈 수 있고, Prod 배포 전에는 승인과 거절을 직접 눌러 볼 수 있습니다. 연습 미션 4개는 해당 상황을 만들면 자동으로 체크됩니다.
• 용어 사전: Stage, Job, Agent, Artifact, Environment 같은 기본 용어를 정리했습니다.

Git의 핵심 개념(작업 디렉터리 → 스테이징 → 커밋, 브랜치, 병합, 원격 저장소)을 그림으로 설명하고, 직접 명령어를 눌러보며 따라 할 수 있는 시뮬레이터가 들어간 한글 페이지입니다.

IPv4 서브넷 계산기

TCP vs UDP 대화형 시뮬레이터

• TCP 3-Way Handshake (SYN, SYN-ACK, ACK 및 Sequence/Ack 번호 변화) & 4-Way Teardown (FIN, ACK) 단계별 패킷 시뮬레이션
• TCP 신뢰성 메커니즘 (흐름 제어, 슬라이딩 윈도우, 혼잡 제어) 설명
• TCP vs UDP 헤더 구조 비교 (20바이트 vs 8바이트) 및 연결형/비연결형 특징 분석

ARP (주소 결정 프로토콜) 흐름 시뮬레이터

• 로컬 네트워크에서 IP는 알지만 MAC을 모를 때 일어나는 전체 과정 시뮬레이션
• ARP Cache 확인 → Broadcast Request(FF:FF:FF:FF:FF:FF) → 스위치 플러딩 → Unicast Reply → 호스트 ARP 캐시 테이블 업데이트 과정을 대화형 그래픽으로 구현

DNS (도메인 네임 시스템) 재귀/반복 조회 시뮬레이터

• 웹사이트 주소 입력 시 브라우저/로컬 캐시 → 리컬시브 DNS(Resolver) → Root Server(.) → TLD Server(.com) → Authoritative Server(example.com) 로 이어지는 반복 조회 흐름 시뮬레이션
• 주요 DNS 레코드 종류 (A, AAAA, CNAME, MX, NS, TXT) 정밀 요약

통합 엔드투엔드(End-to-End) 패킷 시뮬레이터

• "웹 브라우저에 [https://www.google.com](https://www.google.com)을 입력하면 일어나는 일" 전체 과정을 [DNS 조회 → ARP 요청 → TCP Handshake → HTTP/HTTPS 요청/응답]의 올인원 패킷 흐름 타임라인으로 재생/일시정지/단계별 탐색

프로토콜 종합 퀴즈

• TCP/UDP, ARP, DNS와 관련된 무한 퀴즈 풀이 및 즉시 채점/해설 제공

문자만 입력하면

로고가 됩니다.

브랜드 이름을 입력하고 스타일·서체·간격·색상을 조절해 텍스트 로고를 만들어 보세요.

Typography Playground

Typography Playground is an interactive tool for exploring how typography affects readability, hierarchy, and visual style. Users can adjust text properties in real time and compare different typography approaches.

Key Features

• 🔤 Adjust font size and weight
• ↕️ Control line height and letter spacing
• ↔️ Change text width and alignment
• 🔠 Switch between uppercase, lowercase, and italic styles
• 🎨 Preview Light, Editorial, and Dark styles
• 📰 Compare Editorial, Tech, and Minimal typography
• ⚖️ Explore Bad vs Good Typography examples
• 📐 Visualize a consistent type scale
• 👀 Compare text width and readability
• 🎛️ Edit sample text and see changes instantly

It is designed as a simple interactive typography learning experience for understanding how small typographic changes can significantly improve a UI.

세계에서 가장 오래 살아남은 프로그래밍 언어 중 하나. 지금 이 순간에도 전 세계 은행·정부·항공사의 핵심 시스템은 COBOL로 돌아가고 있습니다.

개발자가 되기 위한 강의가 아닙니다. AI가 만들어준 HTML 파일을 열어보고, 문구·색상·이미지·링크를 고치고, 버튼이 왜 안 눌리는지 대략 찾을 수 있게 만드는 “최소한의 실전 지식”만 아주 쉽게 설명합니다.