peektea: 버블티로 터미널 파일 브라우저 제작

발행: (2026년 6월 1일 AM 04:00 GMT+9)
9 분 소요
원문: Dev.to

출처: Dev.to

안녕하세요, 저는 Maneshwar입니다

저는 git‑lrc라는, 커밋마다 실행되는 마이크로 AI 코드 리뷰어를 만들고 있습니다. 무료이며 소스는 GitHub에 공개되어 있습니다.
⭐️ git‑lrc에 별표 달기 로 개발자들이 프로젝트를 발견하도록 도와주세요.
한 번 사용해보고 프로젝트 개선을 위한 피드백을 남겨 주세요.


제가 찾고 있는 것

키보드만으로 ncdu‑스타일 파일 브라우저를 만들고 싶습니다:

  • 키보드로 디렉터리를 탐색
  • 파일을 Nautilus, Vim, Nemo 혹은 다른 앱으로 바로 열기
  • 이미지를 터미널 안에서 미리 보기

마우스 없이, 키보드만으로 모든 작업을 마치고 싶습니다.

큰 목표라서 먼저 작은 것부터 시작했고, Bubble Tea—Charmbracelet의 Go TUI 프레임워크—를 배우는 구실로 삼았습니다.

그 결과물은 peektea 입니다. 현재는 파일 탐색만 하는 최소 버전입니다.

실행하고 화살표 키로 디렉터리를 이동한 뒤, 부모 디렉터리로 돌아갈 수 있습니다.
지금까지는 차 한 잔 정도(≈140줄의 Go) 정도 구현했으며, 다음 단계는 파일 열기와 이미지 미리 보기가 될 예정입니다.


그럼, Bubble Tea란?

Bubble Tea는 Elm Architecture를 기반으로 한 Go용 터미널 UI 프레임워크입니다. 간단히 말해 애플리케이션은 세 가지 요소로 이루어집니다:

구성 요소설명
Model프로그램의 상태
Update이벤트를 받아 새로운 모델을 반환하는 함수
View모델을 문자열로 렌더링하는 함수
  • 변이 없음, 숨겨진 상태 없음.
  • UpdateView는 순수 함수.
  • 프레임워크가 이벤트 루프, 터미널 I/O, 화면 재그리기를 담당하므로 무엇을 보여줄지만 기술하면 됩니다.

Model

type model struct {
    dir     string        // current directory
    entries []os.DirEntry // directory entries
    cursor  int           // selected entry
    err     error         // any error that occurred
}

위 구조체가 peektea전체 상태를 나타냅니다: 현재 디렉터리, 그 안의 항목들, 커서 위치, 그리고 오류 값. 탐색 시 기존 모델을 바꾸지 않고 Update가 새로운 값을 가진 모델을 반환합니다.


Update 루프 (차를 저어주는 부분)

키 입력은 모두 tea.KeyMsg 로 들어옵니다. 이를 패턴 매칭하고 다음 모델(및 선택적으로 tea.Cmd)을 반환합니다.

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.KeyMsg:
        switch msg.String() {
        case "right", "l", "enter":
            if len(m.entries) > 0 && m.entries[m.cursor].IsDir() {
                next := filepath.Join(m.dir, m.entries[m.cursor].Name())
                entries, err := os.ReadDir(next)
                if err == nil {
                    m.dir = next
                    m.entries = entries
                    m.cursor = 0
                }
            }
        // … other key handling …
        }
    }
    return m, nil
}

두 번째 반환값(tea.Cmd)은 비동기로 실행돼 다음 메시지를 만들어 내는 함수입니다. 여기서는 nil을 반환했지만, 백그라운드 작업(예: 미리 보기 로드)이 필요하면 명령을 반환하면 됩니다.

부모 디렉터리로 돌아갈 때 커서가 방금 떠난 폴더 위에 머무르게 하는 작은 트릭 덕분에 탐색이 자연스럽게 느껴집니다.


View

View()Update가 실행된 뒤 Bubble Tea가 호출하는 순수 문자열 변환 함수입니다. 스타일링은 Lipgloss 로 처리합니다.

var (
    cursorStyle = lipgloss.NewStyle().
                    Foreground(lipgloss.Color("212")).
                    Bold(true)

    dirStyle = lipgloss.NewStyle().
                Foreground(lipgloss.Color("39"))

    fileStyle = lipgloss.NewStyle().
                 Foreground(lipgloss.Color("252"))
)

.Render(s) 를 사용해 어디서든 렌더링합니다. 디렉터리는 뒤에 /와 청록색을, 커서가 있는 행은 배경 강조를, 선택된 항목은 표시를 붙입니다.


프로그램 시작하기

func main() {
    dir, _ := os.Getwd()
    p := tea.NewProgram(newModel(dir), tea.WithAltScreen())
    p.Run()
}

핵심 플래그는 tea.WithAltScreen() 입니다. 이는 터미널을 대체 화면 버퍼로 전환해(vim, htop이 쓰는 기법) 프로그램 종료 시 쉘이 깨끗한 상태로 돌아오게 합니다.

peektea screenshot


앞으로 구현할 내용

ncdu‑스타일 꿈을 실현하기 위한 로드맵:

  1. 파일을 편집기/앱으로 열기 – 파일에 Enter 를 누르면 Vim, Nautilus/Nemo/xdg-open 등 파일 타입에 맞는 프로그램을 실행.
  2. 터미널 이미지 미리 보기 – Kitty/iTerm 프로토콜이나 chafa 로 이미지를 인라인 렌더링.
  3. 파일 내용 미리 보기 – 화면을 분할해 오른쪽에 선택 파일의 내용을 표시.
  4. 필터링 – 입력으로 항목 리스트를 실시간으로 좁히기.

peektea를 직접 써보고, 레포에 별을 달거나 다음 단계 아이디어를 기여해 주세요!

## Overview

- **Bubble Tea** ships a `textinput` in the [bubbles](https://github.com/charmbracelet/bubbles) library.  
- **Hidden file toggle** – press `h` to show/hide dotfiles.  

All of it stays keyboard‑driven, with no need to reach for the mouse. When you add new functionality, it lands directly in the repository.

The nice thing about the framework is that each new feature is refreshingly easy to implement: you extend the model and handle new keys in `Update`. That’s the whole pattern.

---

![Bubble Tea screenshot](https://media2.dev.to/dynamic/image/width=800,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fed6ratvd5eb5bp0ep9ck.png)

---

## The Problem

AI agents write code fast, but they can also **silently remove logic**, change behavior, and introduce bugs—often only discovered in production.

## The Solution

**`git‑lrc`** fixes this. It hooks into `git commit` and reviews every diff **before** it lands.

- 60‑second setup  
- Completely free  
- Open source and ready for anyone to use  

Any feedback or contributions are welcome!

**Star it on GitHub:** https://github.com/your-repo/git-lrc

실제 동작 보기

git‑lrc가 심각한 보안 문제(유출된 자격 증명, 과다한 클라우드 비용, 로그에 숨겨진 민감 데이터)를 어떻게 잡아내는지 확인해 보세요.

▶️ 데모 영상 재생

Your browser does not support the video tag.

영상이 로드되지 않으면 직접 다운로드할 수 있습니다:
git‑lrc‑intro‑60s.mp4 (60 초)


Tip: “ 태그를 지원하지 않는 플랫폼에서는 위 블록을 간단한 링크나 YouTube/Vimeo 임베드 플레이어로 교체하면 됩니다.

왜 필요할까

  • 🤖 AI 에이전트가 조용히 문제를 일으킵니다.
    코드가 사라지고, 로직이 바뀌며, 엣지 케이스가 사라집니다. 프로덕션에 배포될 때까지 눈치채기 어렵습니다.

  • 🔍 배포 전에 잡아냅니다.

0 조회
Back to Blog

관련 글

더 보기 »

Tunecat: 간단한 인터넷 라디오

간단하고 멍청한 인터넷 라디오 장치입니다. 데모 인스턴스 https://tunecat.runxiyu.org/ 가 Classical Music Mix https://archive.org/details/classical... 를 제공하고 있습니다.

FiXiY - Y에서 X 찾기

TRIESTE, Italy – For developers, system administrators, and digital hoarders alike, the daily struggle of locating a specific snippet of text buried deep inside...