안녕하세요
최근 제가 혁신적이라고 생각했던 바이브코딩 경험기를 올려봅니다
저는 몰랐는데 제가 하는 방식이 최근에 많은 바이브코딩이라는걸 만들고 나서야 알았습니다
저는 근무시간에 항상 이어폰으로 스포티파이로 노래를 듣는데 스포티파이 용도로 작은 외장모니터를 연결해
플레이리스트를 띄워놓을 만큼 노래들으면서 일하는걸 좋아합니다
그런데 항상 아쉬운점이 있는데 좋은 노래가 나오면 일을 하는 중에도 앨범아트나 곡정보를 확인하고 싶은데
그게 좀 불편했습니다
그래서 항상 외장 디스플레이 화면에 앨범아트, 노래제목, 가수이름 등 정보만 띄워 놓는 방법 찾았는데
마땅히 적당한 방법이 없었습니다
그래서 최근에 Chat GPT 로 여러가지 일을 시켜본 결과 충분히 코딩도 가능하다는 결론으로
일단 ESP32 에 OLED 디스플레이가 부착된 완제품을 사서 테스트 하기로 마음먹습니다

제가 구매한 건 ESP32-S3 보드에 2.16 OLED 디스플레이가 장착된 제품입니다
항상 USB 선이 달려있는게 보기 싫어서 충전할 생각에 배터리 내장된 제품으로 샀습니다
지금은 판매를 안하는데 거의 같은 제품은 ESP32-C6 라고 스펙이 같은 제품이 있습니다
혹시 따라해보실 분은 이제품으로...
아무튼 이걸 받고 Chat GPT에게 코딩을 시켜서 원하던 기능을 완성했습니다.
구조는 메뉴바에 떠있는 맥용 앱이 있고

이곳에서 연결상태등을 볼수 있습니다
나중에는 욕심이 생겨서 3D 프린터 상태창을 추가하니 그것도 가능해서 추가하고
처음에는 하나의 기기와 연동되게 했는데 나중에 다른 디스플레이 추가할 목적으로
다중 기기 연결 설정까지 했네요
ESP32 S3 디스플레이에는 이렇게 맥에서 재생중인 스포티파이노래의
앨범 아트를 전체 화면으로 띄우고 맨위에는 wifi 연결 상태 - 배터리 남은 용량 - 충전중이면 CHG 문구가 나오고
배터리가 10% 미만이면 배터리를 충전해주세요 라고 빨간 문구가 화면 중앙에 띄가 만들었습니다

아래쪽에는
노래제목
가수이름
플레이시간
플레이 진행바로 구성을 했습니다
화면을 누르면 노래 일시 정지, 좌우 스와이프는 전곡 다음곡으로 넘어가게 만들었습니다
그리고 위에서 아래로 스와이프 하면 옵션창이 나오고

이런식으로 화면 구성을 하게 만들었습니다
수정에 수정을 했는데
예를 들면 ESP32를 90도 180도 270도 돌리면 화면도 같이 돌게 코딩 해달라고 ChatGPT에게
입력하면 화면은 도는데 터치설정은 그대로라 작동이 안되는등 결국에는 사람이 하나씩 확인하고
수정해달라고 하면서 했습니다
그리도 프로그래밍의 프 자도 모르는 제가 Chat GPT에게 말로 설명해서 이정도 구연이 가능하다는게
정말 신기했습니다.
이건 디스플레이는 오랬동안 생각만 해왔는데 가능해진것이 앞으로도 AI가 우리생활을 바꿀지 많이 실감했습니다
이게 가능하다는걸 알고 이제는 3D 프린터용 출력파일도 제가 직접 그리는게 아니고 Chat GPT에게 주문해서 만들고 있습니다
아마 이거 3D 도면 그리는거 배우는데 일년은 걸렸을 것 같습니다
물론 여기 계신분중에 실력이 좋아서 저희 결과물에 허점도 보이시겠지만
일반인이 열심히 만든것으로 봐주시면 감사하겠습니다

그냥 가수,곡이름도 없는 그런 화일들을 여러 라이브러리 활용해 앨범아트, 곡명, 가수정보, 출시년도 등을 한 번에 정리해주는거에 감탄했는데 1년정도 되니 가물가물합니다.
- 스포티파이 재생중인 정보는 어디서 받아오는 걸까요? wifi로 맥과 직접 연결?
- 혹시 가사표시는 안되나요?
- 개발하신 소스는 깃허브 공개는 안하셨을까요? 링크가 있다면 참고해서 만들어쓰고 싶습니다.
- 스포티파이 정보는 맥과 로컬 Wifi 직접 연결입니다
다른 프로젝트 보면 스포티파이 API 쓰는 경우가 많은데 저는 맥에서 프로그램을 만들어서
미니디스플레이 자동으로 감지 연결하고 맥에서 받은 재생중인 정보를 디스플레이로 보내
디스플레이에서 보여주는 방식입니다
스포티파이 API 도 생각했는데 그렇게 만들지 않았습니다 이유는
- API 갱신이나 변경이 있으면 반영해서 업데이트 해야하고
- 휴대용이 아니라 노래는 맥으로 재생해서 ESP32 보드에 많은 역활을 부여하고 싶지 않았습니다
그냥 기본 정보만 수행하도록 하고 싶었습니다
가사표는 생각을 안해봤는데 CHAT GPT에게 물어보니 별도의 서비스를 사용해야 한다고 하네요
코드는 깃허브에 올릴예정이긴 합니다만 아직 제가 혼자 사용해보고 좀 더 다금고 아이디어를 추가 해서
완성도가 올라가면 올려볼까 합니다 올리게 되면 클리앙에도 사용기 올리도록 하겠습니다
저 보드안에 OS는 설치가 되어 있는 건가요?
맥용 앱은 Chat GPT 로 만들었습니다
윈도우 리눅스 앱도 만드는것 가능해 보입니다
저 ESP32 보드를 처음 켜면 기본 음악앱 보이스 레코딩 앱등이 있는 OS가 있긴 있습니다
처음 시작할때 Chat GPT에게 기존 OS 백업 하라고 시키고 나머지는 해당 보드에 맞는 코드로
ESP32 자체 OS 비슷한걸 만들었습니다
디스플레이 내에도 Chat GPT로 만든 OS(?) 를 설치해놔서 노래재생시 보여주는 방식, 옵션 설정이 있어서Wifi 연결 배터리 부족알림 충전알림 OTA 업데이트 회전시 어떻게 직동하는지등등 설정해놓았습니다
저는 프로그래머와는 아주 거리가먼 디자인전공자 입니다
무언가 볼때 안에 코드보다 색 형태 배치 구성 같은것만 보이는 사람입니다 ㅋ
제가 할수 있으면 누구나 할수 있습니다
도전해보세요
저도 회사에서 요구하는 여러 대시보드나 간단한 프로그램들을 만들곤 하는데
나중에 문제 생기면 감당이 될지 고민이 되긴하네요..ㅜ_ㅜ
온라인에 올려서 연동하는것도 쉽지 않고... 여튼 신박한 AI긴 합니다.
저도 처음에는 잘하다가 좀 복잡해지거나 설명을 이해못하면 뻗어버리면 어쩌나 고민했는데
ESP32 가격도 4~5만원 수준이고 하다가 안되면 원래 OS올려서 장난감으로 써야지 하고
시작했습니다
이번에 해보면서 계속 유지보수, 기능추가 수정은 가능한 수준인것 같습니다
말씀하신것처럼 회사내 사용프로그램 같은건 '할수있다' 라고 말하기는 애매하구요
개인이 아이디어 구연하는데는 충분한 수준까지 올라온것 같습니다
이런 분야도 있군요 덕분에 하나 배워갑니다
지금 생각하고 있는것 중 하나가 작은 원형 디스플레이에 티맵 경로안내 턴바이턴 표시 하는건데
캔신호도 같이 생각해봐야 겠습니다
저랑 같은 생각하신분이 여기 또 계시네요 ㅋ