https://www.clien.net/service/board/use/19257747

안녕하세요 전에 이글을 올렸던 회원입니다


https://www.clien.net/service/board/use/19270463?od=T31&po=0&category=0&groupCd=
이후에 제 글을 보고 평소 생각하시던 대시보드를 직접 만드셨다는 다른 회원님의 글을 봤습니다.

그 글을 보고 저도 바이브 코딩으로 처음 만들었던 스포티파이 앨범 디스플레이가 지금은 어떻게 바뀌었는지, 그 이후에는 어떤 것들을 만들고 있는지 한번 올려봅니다.

1. 스포티파이 앨범 디스플레이

처음 만들었던 스포티파이 앨범 디스플레이는 지금은 많이 안정화되어 특별한 오류 없이 잘 작동하고 있습니다.

초기에는 수정하거나 새로운 기능을 추가할 때마다 펌웨어를 빌드하고 업데이트했습니다.

그런데 이 과정이 생각보다 시간이 오래 걸리더군요. 그래서 이제는 수정 사항이나 추가하고 싶은 기능들을 Codex에 하나씩 모아놓았다가 한 번에 빌드하는 방식으로 작업하고 있습니다.

지난 글에서 스포티파이 앨범 디스플레이의 구성을 물어보신 분들이 계셨는데, 구조는 생각보다 간단합니다.

맥에서 재생 중인 음악의 앨범 커버, 곡 제목, 가수, 재생 시간, 진행 상태 등의 정보를 맥용 앱에서 ESP32 기기로 전송합니다.

맥과 ESP32 기기는 동일한 내부 네트워크에 연결되어 있습니다.

맥에서 음악을 재생하지 않으면 ESP32에는 대기 화면이 표시되고, 일정 시간이 지나면 화면 밝기가 낮아지면서 절전 모드로 들어가도록 만들었습니다.

지금은 스포티파이 외에도 애플뮤직과 유튜브 뮤직도 동작 가능하게 만들어놨습니다.

디스플레이를 하나 더 추가했습니다.

[사진: 새로 구입한 3.49인치 디스플레이]

기존에 사용하던 디스플레이는 2.16인치 정사각형 제품입니다.

그런데 사용하다 보니 앨범 커버 위에 곡 제목과 재생 정보가 표시되면서 정작 앨범 커버가 가려지는 것이 마음에 들지 않았습니다.

그래서 이번에는 3.49인치 가로형 디스플레이를 하나 더 구입했습니다.

[사진: 앨범 커버만 표시하는 디스플레이]

기존 2.16인치 기기는 다른 정보 없이 앨범 커버만 표시하고, 새로 구입한 3.49인치 기기에는 앨범 커버와 각종 재생 정보를 표시하도록 역할을 나눴습니다.

현재는 이렇게 두 개의 디스플레이를 사용하고 있습니다.

[사진: 앨범 정보가 표시되는 디스플레이]

새로운 가로형 디스플레이는 곡 제목, 가수, 재생 시간 등 전체 앨범 정보를 담당합니다.

이것저것 기능도 추가했습니다.

음악 정보만 표시하기에는 아쉬워서 몇 가지 기능을 더 넣었습니다.
현재는 시계, 날씨, 컴퓨터 모니터링, 기기 정보 등의 기능도 사용할 수 있습니다.

맥용 앱도 조금씩 수정하면서 현재는 최대 8개의 ESP32 기기를 등록할 수 있도록 만들었습니다.

처음에는 펌웨어를 수정할 때마다 USB 케이블로 연결해서 업데이트했는데, 너무 번거로워서 이제는 맥에서 Wi-Fi를 통해 OTA 업데이트를 할 수 있도록 변경했습니다.

기존의 작은 디스플레이는 책상 위에 세워놓고 사용하고 있습니다.

새로운 가로형 디스플레이는 3D 프린터로 모니터용 마운트를 출력해서 모니터 아래에 부착했습니다.

처음 해보는 작업이었는데, 하나씩 만들면서 '어? 이게 되네?' 하는 재미가 상당했습니다.

그러다 보니 자연스럽게 다음에는 ESP32로 뭘 만들어볼까 고민하게 되더군요.

그렇게 시작한 것이 아이들 장난감입니다.

2. 아들을 위한 장난감 내비게이션

[사진: 장난감 내비게이션에 사용한 ESP32 제품]

이전에 ESP32 디스플레이를 구입하면서 다른 형태의 제품도 하나 구입했었습니다.

화면 크기도 적당하고 만듦새도 괜찮아서 어디에 활용하면 좋을까 고민하고 있었습니다.

마침 자동차를 좋아하는 아들이 자기 장난감 자동차에도 아빠 차처럼 내비게이션을 달아달라고 몇 번 이야기한 적이 있었습니다.

처음에는 중고 내비게이션을 하나 구입해서 달아줄까 생각했습니다.

그런데 전원 문제도 있고, 실제 내비게이션은 움직이지 않으면 길 안내도 제대로 되지 않으니 금방 재미없어할 것 같았습니다.

그래서 Codex를 이용해 간단한 장난감 내비게이션을 만들어봤습니다.

[사진: 내비게이션 메인 화면]

화면에는 집과 유치원 등의 목적지를 선택할 수 있는 버튼이 있습니다.

버튼을 누르면 미리 만들어놓은 가상의 경로를 따라 길 안내가 시작됩니다.

처음에 어린이용 내비게이션이라고 설명했더니 AI가 화면을 상당히 알록달록하게 만들어주더군요.

제가 원했던 모습과는 거리가 있어서 티맵과 비슷한 느낌으로 다시 만들어달라고 했습니다.

[사진: 집 또는 유치원으로 가는 길 안내 화면]

집이나 유치원을 선택하면 이런 식으로 가상의 경로가 표시됩니다.

실제 내비게이션처럼 음성 안내도 나오도록 만들었습니다.

자동차가 실제로 움직이지 않아도 화면에서는 목적지까지 주행하는 것처럼 진행됩니다.

실제 동네 버스 노선도 추가했습니다.

[사진: 버스 노선 선택 화면]

27번 버스와 52번 버스는 저희 동네에서 실제로 운행하는 버스입니다.

아들과 함께 버스를 타러 갈 때 이용하는 노선이기도 하고, 아들이 버스를 워낙 좋아해서 추가해봤습니다.

일반적인 목적지 안내와 달리 버스 노선은 실제 정류장 순서대로 이동하도록 만들었습니다.

기기가 이동을 안해도 정류장 안내가 순서대로 나옵니다. GPS는 사용 안하고 정해진데로 움직입니다.

정류장마다 안내 방송도 나오니 제법 그럴듯합니다. ㅎㅎ

그런데 아들이 여기에 버스 에어탱크에서 바람 빠지는 소리도 넣어달라고 하더군요.

그래서 주행 중간중간 '치이익~' 하는 소리도 추가했습니다.

경찰차와 구급차가 출동할 때는 화면이 빨간색으로 깜빡이도록 만들었습니다.

자동차 좋아하는 아이들이 재미있어할 만한 요소들은 최대한 넣어봤습니다.

이 기기도 제가 사용하고 있는 NAS를 통해 OTA 업데이트할 수 있도록 설정했습니다.

아들이 가지고 놀고 있는 기기를 매번 USB 케이블로 연결해서 업데이트했다가는 원성을 들을 것 같아서 미리 대비했습니다. ㅎㅎ

그런데 이걸 보고 있던 딸이 자기도 하나 만들어달라고 합니다.

그래서 이번에는 딸을 위한 장난감 제작을 시작했습니다.

3. 딸을 위한 고양이 키우기와 아쿠아리움

딸에게 어떤 걸 만들어주면 좋겠냐고 물어보니 고양이 키우기와 물고기 키우기를 둘 다 하고 싶다고 하더군요.

그래서 한 기기에 두 가지 기능을 모두 넣었습니다.

사실 이런 장난감은 시중에서 구입할 수도 있습니다.

하지만 구입한 장난감은 처음에는 재미있게 가지고 놀다가 금방 흥미를 잃는 경우도 있습니다.

반면 직접 만들면 아이와 함께 앉아서 '이런 기능이 있었으면 좋겠어', '이건 이렇게 바꿔줘' 하면서 원하는 장난감을 만들어갈 수 있습니다.

저는 이 과정이 생각보다 재미있었습니다.

고양이 키우기

[사진: 고양이 키우기 화면]

고양이 키우기는 아이가 부담 없이 가지고 놀 수 있도록 최대한 간단하게 만들었습니다.

배변 처리나 질병 같은 복잡한 요소는 제외했습니다.

처음에는 고양이 종류별로 6마리를 만들어 넣었습니다.

그런데 딸이 강아지도 있었으면 좋겠다고 해서 강아지가 추가되고, 이후에는 피카와 알파카까지 추가됐습니다.

이렇게 아이가 원하는 동물을 그때그때 추가할 수 있다는 점이 직접 만드는 장난감의 장점인 것 같습니다.

이미 완성된 장난감이었다면 제공되는 동물 중에서 골라야 했겠지만, 직접 만들다 보니 아이가 원하는 동물을 계속 추가하거나 수정할 수 있었습니다.

아쿠아리움

[사진: 아쿠아리움 화면]

아쿠아리움은 준비된 해양 동물 라이브러리에서 원하는 동물을 골라 수족관에 넣을 수 있도록 만들었습니다.

여기에 한 가지 기능을 더 추가했습니다.

딸이 직접 그린 그림을 사진으로 찍어서 아쿠아리움에 넣을 수 있도록 한 것입니다.

이제 딸이 좋아하는 물고기나 직접 그린 해양 동물을 수족관에서 움직이게 할 수 있습니다.

배경도 원하는 것으로 바꾸고, 마음에 드는 물고기를 추가하거나 삭제할 수 있습니다.

무엇보다 아이가 자신이 그린 그림을 실제 화면 속에서 움직이게 할 수 있다는 점이 재미있는 부분인 것 같습니다.

4. ESP32와 AI로 직접 만들어보면서 느낀 점

물론 AI가 만능은 아닙니다.

원하는 기능을 이야기한다고 해서 언제나 한 번에 완성해주는 것도 아닙니다.

수정하다 보면 생각하지 못했던 문제가 생기기도 하고, 기존에 잘 작동하던 기능이 갑자기 작동하지 않는 경우도 있습니다.

그럴 때마다 아이들과 화면을 함께 보면서 어떤 부분을 수정하면 좋을지 이야기하고, AI에 다시 요청하는 과정을 반복했습니다.

그래도 ESP32와 AI를 조합해서 직접 만들어보니 가장 크게 느낀 장점은 사용자가 원하는 방식대로 만들 수 있다는 점이었습니다.

아마 시중에는 제가 만든 고양이 키우기보다 훨씬 완성도가 높고 기능도 많은 제품들이 있을 겁니다.

아쿠아리움 역시 마찬가지겠죠.

하지만 직접 만들면 한 기기에 두 가지 기능을 넣을 수도 있고, 아이가 원하는 배경이나 동물, 물고기를 마음대로 추가하거나 삭제할 수도 있습니다. 새로운 아이디어가 생기면 AI를 통해 기능을 수정하고, NAS에 새로운 펌웨어를 올려 OTA로 업데이트하면 됩니다.

나중에 아이들이 더 이상 가지고 놀지 않으면 기존 하드웨어를 활용해 완전히 새로운 장난감으로 바꿔줄 수도 있을 것 같습니다.

물론 단점도 있습니다.

저는 전문 개발자가 아니다 보니 머릿속에 떠오른 기능을 말로 설명하면서 작업하는 방식입니다.

AI는 제가 요청한 기능은 만들어주지만, 프로젝트 전체의 구조를 처음부터 완벽하게 설계해주거나 앞으로 발생할 문제까지 모두 예상해주지는 못합니다. ,제가 미처 생각하지 못한 부분이 있으면 그대로 넘어갈 수도 있고, 문제가 발생하더라도 원인을 정확하게 파악하지 못할 가능성도 있습니다. ,아마 전문 개발자분들이 제가 만든 코드나 전체 구성을 보시면 고개를 절레절레 흔드실 수도 있을 것 같습니다. ㅎㅎ

그럼에도 코딩을 전문적으로 배워본 적 없는 사람이 머릿속으로 생각했던 기기를 실제로 만들어볼 수 있다는 것 자체가 상당히 재미있는 경험입니다. ,특히 아이들과 함께 어떤 기능을 넣을지 고민하고, 원하는 동물이나 소리를 추가하면서 하나의 장난감을 만들어가는 과정이 좋았습니다. 완성된 장난감을 사주는 것과는 또 다른 재미가 있더군요.

현재는 이것들 외에도 바이브 코딩으로 맥용 앱을 몇 가지 더 만들어 사용하고 있습니다.

• 3D 프린터 작동 상태를 확인하는 모니터링 앱

• Caps Lock과 한영 전환 상태를 화면에 크게 표시해주는 앱

• 타임머신 백업 상태를 모니터링하는 앱

그리고 아이들 영어 공부를 도와줄 ESP32 기반 AI 영어 도우미도 만들고 있습니다.

이 앱들과 AI 영어 도우미도 어느 정도 정리되면 다음에 소개해보겠습니다.

읽어주셔서 감사합니다.