Vibe coding: 시간대 시계

Source: Dev.to

GitHub 리포지토리

Introduction

안녕하세요! 대학 시절 이후로 컴퓨터 과학과 관련된 첫 블로그 글을 올립니다. 오랫동안 하고 싶었던 일이라 이렇게 올리게 되었어요. 찾아주셔서 감사합니다!

이 블로그의 목표는 다음과 같습니다:

• 내 프로젝트들을 기록하기.
• beaded(즉, 정해진) 경로를 따르지 않아도 최종 목표에 도달할 수 있다는 것을 스스로에게 상기시키기.

내 사용 사례, 워크플로, 코드, 구현 등은 완벽하지 않을 수 있지만, 완벽한 것은 없으니까요. 저는 프로젝트를 시작하고 끝낼 수 있다는 것을 증명하고, 몇 년이 지난 뒤에도 돌아보며 제 작업을 의심하지 않기를 원합니다. 시작했던 지점과 지금까지 얼마나 성장했는지를 기억하고 싶습니다.

스파크: 바이브 코딩

Vibe coding은 2025년 초에 제 눈길을 끌었습니다. 코드를 정기적으로 작성하지 않는 사람 입장에서, LLM이 코드를 대신 작성해 주고 워크플로를 가속화할 수 있다는 아이디어는 매력적이었습니다. 아래는 이 프로젝트 아이디어가 어디서 시작됐는지에 대한 약간의 배경입니다.

홈랩 배경

• Dell Latitude에 Proxmox를 설치하고 실용적인 프로젝트를 위해 만지고 있습니다.
• 오래된 **Raspberry Pi 3 B+**를 Retroflag‑NESPI 케이스에 넣어 원래는 RetroPie로 레트로 게임을 즐겼습니다.
• Steam Deck을 구입한 뒤, 라즈베리 파이를 향후 프로젝트를 위해 보관했습니다.

2019년에 Raspberry Pi 7‑inch 터치스크린 모니터를 구입해 메인 데스크톱에서 음악 재생기/온도 측정기로 사용했습니다. 이 모니터는 잘 작동했지만 2025년 초에 더 큰 모니터로 교체하면서 라즈베리 파이와 화면을 서랍에 넣어 두었습니다.

아이디어가 구체화되다

2025년 말, 나는 서랍을 뒤져 라즈베리 파이와 터치스크린을 발견하고, “이걸 가지고 뭘 할까?” 라고 생각했다.

버리기 싫어서 실용적인 용도를 찾았다.

이전 SaaS 원격 근무 시 의료 문서 작업을 지원하며 로그인 문제, 계정 관리, 데이터베이스 변경 등을 담당했다. 우리는 미국 전역의 사용자들을 지원했으며, 각 사용자의 시간대를 아는 것이 매우 중요했다.

동부 해안에 살면서 나는 머릿속으로 한 시간씩 거꾸로 세어 CST, MST, PST를 맞추곤 했지만, 여러 시간대를 표시하는 내 책상 위의 시계가 있으면 훨씬 빨랐을 것이다. 또한 컴퓨터 위젯에 의존하지 없이 시간을 확인할 수 있는 방법도 원했다.

그 편리함이 Time‑Zone Clock 개념에 영감을 주었다.

구현 계획

1. 경량 및 간단 – 데스크톱 실행 파일로 실행될 수 있는 오픈‑소스 도구를 원했습니다.
2. 하드웨어 – Raspberry Pi OS(경량, Pi용 설계)를 OS로 사용할 예정이었으며, 최악의 경우 Ubuntu로 전환할 수 있었습니다.
3. 내구성 – 장치가 OS가 손상되지 않도록 안정적으로 전원을 켜고 끌 수 있어야 합니다.

프로젝트를 vibe code하기 위해 LLM을 사용하기로 했으며, 최종 제품에 얼마나 가까워질 수 있는지 확인하고 싶었습니다.

LLM 선택

• ChatGPT는 제가 처음 탐색한 LLM이었습니다.
• 다른 모델을 시도할 수도 있었지만, 새로운 시스템을 배우는 데 드는 부담을 피하고 싶어 ChatGPT에 머물렀습니다.

첫 번째 프롬프트 및 도구 선택

내가 ChatGPT에 처음 보낸 프롬프트는 다음과 같습니다:

“**라즈베리 파이 3 b+**를 한 번에 세 개의 다른 시간대를 표시하는 시계로 만들고 싶어요. 파이는 7인치 터치스크린 디스플레이에 장착될 예정입니다. 아이디어나 설치할 수 있는 무료 오픈소스 도구를 찾아 주세요. 라즈베리 파이 OS는 이미 장치에 설치되어 있습니다.”

ChatGPT는 하드웨어 제약을 이해하고 Tkinter(Python 표준 GUI 라이브러리)를 제안했습니다. 그 장점은 다음과 같습니다:

• 가볍고 웹 스택이 필요 없습니다.
• 브라우저나 네트워크 의존성이 없어 빠르게 실행됩니다.
• 매우 커스터마이징이 가능(예: 야간 모드).

ChatGPT는 또한 내가 마음에 들어한 UI 목업 이미지를 생성해 주었습니다.

첫 번째 스크립트 얻기

ChatGPT가 다음과 같은 Python 스크립트를 제공했습니다:

1. Python 3와 Tkinter를 설치합니다.
2. 세 개의 시간대를 표시합니다.

저는 흥분했지만, ChatGPT가 스스로 추가한 몇 가지 작은 세부 사항을 발견했고, 구현의 일부를 재고하게 되었습니다. 이것은 전형적인 바이브 코딩 교훈입니다: LLM의 출력이 최종이라고 가정하지 마세요—여전히 검토하고 조정해야 합니다.

다음은?

여기서 나는:

• 스크립트를 다듬고(레이아웃 조정, 야간 모드 추가, 서머타임 변경 처리).
• 라즈베리 파이에서 쉽게 실행할 수 있도록 앱을 독립 실행 파일로 패키징.
• 전체 설정 과정을 문서화(종속성 설치, 터치스크린 구성 등).

다음 게시물에서는 최종 코드, 설치 단계, 그리고 Time‑Zone Clock이 실제로 작동하는 데모를 공유할 예정이니 기대해 주세요!

프로젝트 개요

LLM은 당신이 아는 것처럼 아이디어에 대해 모든 것을 알고 있습니다.
최상의 결과를 얻으려면 다음을 수행해야 합니다:

1. 시작부터 프롬프트에 작은 세부 사항을 설명하세요 – 모델이 아이디어를 빠르고 정확하게 파악할 수 있도록 필요한 모든 데이터를 제공하세요.
2. 진행하면서 변경하세요 – 디자인과 기능을 반복적으로 개선하세요.

Version 1에서의 변경 사항

이러한 업데이트를 구현한 후, 스크립트를 Raspberry Pi에 올리고 Version 1을 실행했습니다.

첫인상

• 단순성 – 앱이 플러그‑앤‑플레이처럼 느껴지며, 끝없는 테스트가 필요 없습니다.
• 기능성 – 시간이 정확하고, 화면은 앱이 종료될 때까지 켜진 상태를 유지하며, 12/24‑시간 버튼이 작동하고, 길게 누르면 종료가 예상대로 동작합니다.

이제 해야 할 일:

• 7‑인치 디스플레이에 맞게 글꼴 크기 조정하기.
• 야간 모드 기능 추가하기.

두 번째 파동의 변경 사항

1. 글꼴 크기 조정 – 정확히 7‑인치 화면에 최적화합니다.
2. 야간 모드 – 22:00 – 06:00 사이에 자동으로 활성화됩니다.
3. 야간 모드 색상 – 야간 모드가 활성화될 때 글꼴 색상을 호박색으로 전환합니다.

참고: “Pi’s ready! Get it? No? Okay…”.

다음 단계

• 데스크톱 아이콘 실행 파일 만들기 이렇게 하면 앱을 실행하고 싶을 때마다 라즈베리 파이에서 텍스트 편집기를 열 필요가 없습니다.
• 설치 안내가 포함된 저장소를 공유하겠습니다 (전체 스크립트는 이 블로그 글에 포함하기엔 너무 깁니다).

Reflections & Lessons Learned

• Hiccups:

  • ChatGPT sometimes asked for clarification or tried to rewrite the whole script instead of letting me edit manually.
  • File‑permission and file‑conversion issues cropped up.

• Future ideas:

  • Port the app to a Proxmox environment.
  • Improve compatibility with larger displays and Windows (currently built for Linux on a 7‑inch screen).

저장소 및 리소스

코드, 설치 안내 및 알려진 문제를 포함한 저장소가 아래에 링크될 예정이며, 직접 시도해보고 싶은 분들을 위해 제공됩니다.

최종 메모

여기까지 읽어주셨다면—감사합니다! 저는 이 프로젝트를 만들고 이에 대해 글을 쓰는 것이 정말 즐거웠습니다. 더 일찍 시작했더라면 좋았겠다고 생각하고, 앞으로도 더 많은 블로그를 공개하게 될 것을 기대합니다.