안녕하세요 나도메이커입니다!

지난 시간에 소개해 드린 아두이노 우노 Q(Arduino Uno Q)의 공기질 측정 예제는 다들 재미있게 실습해 보셨나요? 전 세계의 미세먼지 농도와 실내 공기질 데이터를 실시간으로 받아와, 보드에 내장된 디스플레이에 직관적인 이모지로 표현해 보는 아주 유익한 IoT(사물인터넷) 프로젝트였습니다.

오늘은 코딩 교육 현장에서 초등학생부터 고등학생까지 모든 학생들의 창의력을 200% 끌어올릴 수 있는 흥미로운 시각화 실습을 준비했습니다. 바로 아두이노 우노 Q에 기본으로 내장된 LED 매트릭스(Matrix)를 활용하여, 내가 원하는 글자나 그림을 마음대로 띄워보는 '나만의 LED 전광판 만들기' 프로젝트입니다.

이 실습은 복잡한 C++ 언어나 파이썬 코드를 한 줄씩 작성해야 하는 기존의 어려운 방식에서 벗어나, 아두이노 App Lab이 제공하는 직관적인 웹 인터페이스(Web Interface)를 통해 마우스 클릭만으로 하드웨어를 제어할 수 있는 혁신적인 방식을 채택하고 있습니다. 하드웨어의 좌표 개념과 디지털 출력 원리를 아주 쉽게 배울 수 있으니 지금 바로 시작하겠습니다!

■ 1. 아두이노 우노 Q PC 연결 및 인식 확인

실습을 시작하기 위한 첫 번째 단계는 메인 보드와 컴퓨터(HOST PC)를 안전하게 연결하는 것입니다. 아두이노 우노 Q 보드의 C타입 포트에 데이터 통신이 지원되는 C타입 케이블을 꽂고, 반대쪽을 PC의 USB 포트에 연결해 줍니다.

정상적인 케이블을 사용했다면, 운영체제가 플러그 앤 플레이(Plug and Play) 방식으로 새로운 하드웨어를 자동으로 인식하고 보드를 잡아주게 됩니다. (참고: 전원 공급만 되는 충전 전용 케이블을 사용하실 경우 데이터 통신이 되지 않아 소프트웨어에서 보드를 찾을 수 없으므로, 케이블 종류 확인이 필수적입니다.)

■ 2. 아두이노 App Lab 접속 및 내장 예제 탐색

보드 연결이 완료되었다면, 아두이노 우노 Q의 전용 개발 환경인 아두이노 App Lab 소프트웨어를 실행합니다. App Lab은 코딩 초보자나 방과 후 강사님들이 별도의 라이브러리 설치 없이 즉각적으로 활용할 수 있는 풍부한 고품질 예제들을 제공합니다.

소프트웨어 좌측 메뉴에서 'Examples(예제)' 탭을 클릭하면 우리가 실습해 볼 수 있는 다양한 프로젝트 목록이 쭉 나타납니다. 스크롤을 내려 이번 프로젝트의 핵심인 'Led Matrix Painter (LED 매트릭스 페인터)' 항목을 찾아 클릭해 줍니다!

■ 3. 프로젝트 복사(Copy) 및 안전한 작업 환경 세팅

예제를 클릭하면 해당 프로젝트의 개요 화면이 나옵니다. 여기서 원본 예제를 그대로 덮어쓰는 것이 아니라, 나만의 코드로 자유롭게 수정하고 저장할 수 있도록 복사본을 만들어야 합니다.

화면 상단에 위치한 'Copy and edit app (앱 복사 및 편집)' 버튼을 클릭해 주세요. 이 과정을 거쳐야 원본 데이터의 손상을 막고 나만의 독립된 작업 워크스페이스(Workspace)가 생성됩니다.

복사가 성공적으로 진행되면 좌측의 'My Apps (내 앱)' 폴더 안에 'Copy of Led Matrix Painter'라는 새로운 프로젝트 파일이 안전하게 생성된 것을 확인할 수 있습니다.

■ 4. LED Painter 웹 인터페이스 실행 및 원리 이해

이제 복사한 프로젝트를 열어 본격적으로 LED 전광판을 켤 준비를 해보겠습니다.

편집 화면 우측 상단에 위치한 RUN(실행) 버튼을 힘차게 클릭합니다. 내부적으로 코드가 컴파일되고 아두이노 보드에 탑재되면서, 잠시 후 모니터 화면에 새로운 형태의 웹 브라우저 창이 열리게 됩니다.

이 웹 인터페이스가 바로 이번 실습의 하이라이트입니다. 화면 중앙을 보시면 아주 많은 격자무늬(그리드)가 있는 도화지 같은 영역을 볼 수 있습니다. 이 격자 하나하나가 아두이노 우노 Q 전면에 부착된 수많은 LED 픽셀(Pixel)과 1:1로 정확하게 매칭(동기화)되어 있습니다.

메뉴에 있는 Frame 1이라는 공간에 사용자가 마우스로 원하는 칸을 클릭하여 색을 칠하면, 그것이 곧장 보드의 하드웨어로 전송되어 빛을 내는 원리입니다. 이를 통해 학생들은 디스플레이의 X축, Y축 좌표계 개념과 디지털 점등 원리를 게임처럼 아주 쉽고 재미있게 배울 수 있습니다.

■ 5. 나만의 도트(픽셀) 아트 그리기 및 보드 연동 테스트

웹 브라우저의 격자 화면에 마우스를 클릭하고 드래그하여 자유롭게 그림이나 글자를 그려보세요.

저는 실습을 위해 제가 소속된 브랜드인 아이씨뱅큐의 영문 로고인 'ICB'라는 글자를 아주 정성스럽게 점을 찍어(도트 아트 방식으로) 표현해 보았습니다.

그림을 그리는 즉시, PC 모니터에서 눈을 돌려 여러분의 아두이노 우노 Q 보드를 확인해 보세요! 웹 화면에 그렸던 ICB 글자가 보드의 LED 매트릭스에 한 치의 오차도 없이 선명하게 실시간으로 연동되어 반짝이는 것을 직접 눈으로 확인할 수 있습니다.

오늘은 이렇게 아두이노 우노 Q가 자랑하는 전용 인터페이스를 활용하여, 초보자도 코딩의 장벽 없이 직관적으로 즐길 수 있는 LED 매트릭스 시각화 예제를 진행해 보았습니다.

이 예제는 코딩 교실에서 활용도가 무궁무진합니다. 학생들 각자 본인 이름의 영문 이니셜을 따와서 멋지게 디자인해 보거나, 하트(♥), 스마일(^_^)과 같은 귀여운 그림(픽셀 아트)을 직접 그려보며 하드웨어와의 상호작용(Interaction)을 재미있게 경험할 수 있습니다.

아두이노 우노 Q와 함께라면 복잡한 전선 연결이나 어려운 C++ 문법 없이도 훌륭한 나만의 스마트 전광판을 뚝딱 만들어낼 수 있습니다. 실습하시다가 혹시 어렵거나 추가로 궁금한 점이 생기신다면 언제든 아래 댓글로 남겨주시기 바랍니다. 상세하게 답변해 드리겠습니다!