처음이라면: 한 줄 설치
herdr·Bun·Node가 없어도 돼요
curl -fsSL https://herdrweb.dev/install.sh | sh없는 herdr(0.9.0+)·Bun(1.4+)·Node를 sudo 없이 내 계정에 설치하고, 앱을 herdr 플러그인으로 넣어요. Tailscale이 켜져 있으면 폰용 주소와 QR 코드까지 보여 줘요.
설치 전 시식 · 로그인 없이 공개
devswha/herdr-web-ui 개발·원격 작업
PC에서 맡긴 AI 작업, 폰에서 이어보기
결제 화면 수정을 AI에게 맡겼는데 외출할 시간이 됐다면? PC의 herdr에서 실행 중인 같은 작업을 폰으로 읽고, 질문에 답하고, 필요할 때 터미널을 열어볼 수 있어요. 연결 구조와 알림 조건, 계속 켜둘 것을 살펴봅니다.
68초 영상설명도 3장선택 가이드01 · 영상으로 한눈에
PC에서 맡긴 AI 작업, 폰에서 이어보기
Google Flow 한국어 나레이션·자막을 사용한 설명 영상입니다. 공개 릴리스 v0.4.8의 기능을 바탕으로 만든 가상 작업 이야기이며, 실제 PC를 조작한 녹화는 아닙니다.
02 · 실제 앱 화면
원본 레포의 실제 녹화로 먼저 보세요
herdr web ui README에 실린 실제 사용 녹화예요. 하나를 고르고 재생을 누르면 움직여요.
녹화: devswha/herdr-web-ui README (v0.4.12 기준), MIT 라이선스. 깃밥이 만든 영상이 아니에요.
03 · 바로 시작하기
설치는 한 줄, 폰 연결은 QR 한 번
herdr를 처음 쓰는 경우와 이미 쓰는 경우로 나눴어요. 명령어 옆 복사 버튼을 누르고 PC 터미널에 붙여넣으면 돼요.
원본 v0.4.12 문서 기준 · 2026-10-19 확인 · 깃밥이 직접 설치해 보지는 않았어요. 아래 분석은 v0.4.8 기준이에요.
macOS · Linux에서 설치
herdr를 이미 쓴다면: 플러그인만
herdr 0.9.0+·Bun 1.4+·Node 18+가 있을 때
herdr plugin install devswha/herdr-web-uiherdr가 레포를 받아 빌드하고 플러그인으로 등록해요. 오래된 herdr는 먼저 업데이트하고 다시 시작해야 해요.
Windows x64 (PowerShell)
irm https://herdrweb.dev/install.ps1 | iexGit for Windows가 필요해요. 폰 연결은 herdr의 Phone setup에서 하고, 터미널은 크기가 고정된 화면 미러로 보여요.
설치한 다음
PC 브라우저로 열기
herdr가 켜진 상태에서 http://127.0.0.1:7317 을 열어요. 데스크톱이 있는 PC는 설치기가 열어 줘요. 앱이 이 주소에 묶이니 localhost 대신 이 주소를 계속 쓰세요. pane을 고르거나 New workspace로 에이전트를 시작해요.
잘 켜졌는지 확인
응답에 "ok":true 가 보이면 서버가 돌고 있어요.
curl -s http://127.0.0.1:7317/api/health폰 연결
설치기가 보여 준 QR을 폰으로 찍고, Safari는 공유 → 홈 화면에 추가, Chrome은 앱 설치를 눌러요. 플러그인으로 설치했다면 Tailscale로 HTTPS 주소를 만들어요. 내 Tailscale 기기는 코드 없이 들어가요.
tailscale serve --bg --https=443 http://127.0.0.1:7317알림 켜기
폰 앱의 오른쪽 위 ⋯ → Alerts를 눌러요. iPhone은 iOS 16.4 이상, 홈 화면에 추가한 앱에서만 알림이 와요.
켜기 전에 알아둘 것
- 기본값은 이 PC(127.0.0.1)에서만 열려요. 다른 사람이 닿을 수 있는 주소(0.0.0.0, 공유기 주소, 공개 프록시)에 토큰 없이 열면 내 터미널에 입력할 수 있게 돼요.
- 한 줄 설치기는 Tailscale이 켜져 있으면 tailscale serve로 내 tailnet에 앱을 공개해요. 원하지 않으면 플러그인 방식으로 설치하세요.
- Tailscale이 없어도 SSH 터널·VPN·HTTPS 프록시로 연결할 수 있어요. 다만 홈 화면 설치와 알림은 HTTPS가 있어야 해요.
- 폰은 화면일 뿐이라 PC와 herdr가 켜져 있어야 이어서 볼 수 있어요.
코딩 도구에게 설치를 맡기려면
원본에는 코딩 에이전트용 설치 안내서(INSTALL.md)가 따로 있어요. 아래 명령문을 Claude Code나 Codex에 붙여넣으면 그 안내서대로 점검 → 설치 → 확인을 진행하고, 위험한 단계 앞에서는 먼저 물어봐요.
코딩 도구에 붙여넣을 설치 명령문
README 설치 ↗INSTALL.md (코딩 에이전트용) ↗폰 설정 가이드 ↗접근과 안전 ↗라이선스: MIT ↗
작동 원리 그림 3장 펼치기
같은 세션에 접속하는 구조, 채팅·터미널·질문의 역할, 알림을 위한 조건을 나눠봅니다. 아래는 깃밥이 공식 자료를 읽고 만든 설명도예요.
01 / PC의 작업을 폰에서 읽기
실행은 PC에서, 읽고 답하기는 폰에서도
- 쉽게 말하면
- 웹 서버는 herdr의 작업 상태와 에이전트 원본 대화를 읽어요. 폰의 메시지는 같은 실행 중인 pane에 전달됩니다.
- 내 상황에 대입하면
- 밖에서 새 작업을 만들지 않고 지금 하던 작업을 확인하고 싶을 때.
- 알아둘 점
- herdr web ui 자체가 AI 실행을 호스팅하거나 폰으로 옮기지 않아요. 실행 PC·herdr·웹 서버가 계속 필요합니다.
설명도는 공개 릴리스 v0.4.8(cb65ecb9)을 기준으로 합니다. 최신 개발 브랜치의 미출시 동작은 포함하지 않았습니다.
근거: devswha 및 기여자의 herdr web ui v0.4.8 공식 자료. 설명도·모션: 깃밥. 나레이션: Google Flow. 코드 라이선스: MIT. 확인: 2026. 10. 15. 원본 라이선스 보기 ↗
04 · 선택 가이드
내 조건이라면 어느 쪽을 고를까요?
질문 세 개로 결론까지
답을 고르면 아래 비교와 판단 근거를 바탕으로 깃밥이 정리한 결론이 바로 나와요.
세 가지를 고르면 결론이 나와요.
결론은 아래 비교와 '조건이 달라지면' 판단(v0.4.8 문서 기준), 원본 README FAQ를 그대로 옮긴 거예요. README FAQ ↗
한눈에 비교
폰에서 실행 중인 작업을 확인하는 방식을, 별도 확장 없는 기본 구성끼리 비교했어요.
| 기준 | herdr web ui + herdr | 일반 SSH + tmux 접속 |
|---|---|---|
| 대화와 작업 찾기 | 작업 목록 + 읽기 좋은 채팅 | 세션·창을 골라 터미널 출력 읽기 |
| 질문에 답하고 입력하기 | 승인·질문 카드, 터미널로도 전환 | 터미널에서 키·명령으로 응답 |
| 자리를 비웠을 때 알림 | 입력 필요·완료 때 웹 푸시 (HTTPS 필요) | 기본 제공 없음, 따로 구성 |
| 유지할 환경 | herdr + 웹 서버 + 접근 권한 | 원격 PC + tmux 세션 |
이럴 땐 herdr web ui + herdrherdr 작업을 폰에서 찾고 대화·승인·알림으로 이어보고 싶을 때.
이럴 땐 일반 SSH + tmux 접속tmux에 익숙하고, 터미널을 직접 읽고 입력하는 것으로 충분할 때.
기준별 자세한 설명과 출처
대화와 작업 찾기
- herdr web ui + herdr
- herdr의 작업 공간·탭·pane과 상태를 고르고, 지원되는 에이전트 대화를 읽기 좋은 채팅으로 봐요.
- 일반 SSH + tmux 접속
- SSH로 접속해 tmux 세션·창·pane을 선택하고 터미널 출력을 읽어요.
작업이 많고 대화를 다시 읽는 일이 잦을수록 구조화된 목록과 채팅이 도움이 됩니다.
질문에 답하고 입력하기
- herdr web ui + herdr
- 지원되는 승인·질문은 카드로 답하고, 같은 pane의 터미널로도 전환할 수 있어요.
- 일반 SSH + tmux 접속
- 터미널에 표시된 질문을 읽고 키와 명령으로 응답해요. 기본 구성에는 에이전트별 채팅·승인 카드가 없습니다.
긴 명령이나 복잡한 수정은 두 방식 모두 폰에서 판단하기 어려울 수 있어요.
자리를 비웠을 때 알림
- herdr web ui + herdr
- 입력이 필요하거나 완료됐을 때 웹 푸시를 지원해요. HTTPS·알림 허용과 기기별 조건이 필요합니다.
- 일반 SSH + tmux 접속
- 일반 SSH + tmux 자체가 같은 웹 푸시 흐름을 제공하지는 않아요. 필요하면 별도 알림 구성을 붙입니다.
계속 화면을 열어둘지, 알림을 받고 돌아올지로 비교해보세요.
유지할 환경
- herdr web ui + herdr
- herdr와 웹 서버, 실행 PC, 접근 권한과 연결 경로를 유지해요. AI 모델·구독 비용은 별도입니다.
- 일반 SSH + tmux 접속
- 원격 PC와 tmux 세션은 유지하고, 확인할 때 SSH로 다시 접속해요. 익숙한 터미널 환경을 계속 쓸 수 있습니다.
기존 herdr 사용자에게는 자연스러운 추가이고, tmux 사용자에게는 환경 전환 비용이 생겨요.
써 보기 전 확인 3가지
설치하기 전에 확인하면 헛걸음을 줄일 수 있어요. 체크는 이 화면에만 표시돼요.
안 맞으면 지원되지 않는 동작은 터미널로 확인하거나 기존 접속 방식을 유지해요.
안 맞으면 권한을 설명할 수 있는 기기부터 연결하고, 불필요한 기기는 해제해요.
안 맞으면 테스트가 확인될 때까지 알림만 믿고 중요한 승인 대기를 맡기지 않아요.
깃밥이 가정한 예시 상황과 근거
herdr에서 AI에게 결제 화면 수정을 맡긴 개발자가 외출합니다. 폰에서는 진행 상황과 짧은 승인 요청을 확인하고, 최종 변경 검토는 PC에서 이어갈 수 있어요.
- 작업은 PC의 herdr pane에서 시작했고 PC를 계속 켜둘 수 있어요.
- 폰에서는 진행 상황·질문·짧은 입력이 주로 필요해요.
- 최종 코드·테스트 결과는 직접 검토할 수 있어요.
공개 릴리스 v0.4.8(cb65ecb9)의 문서·코드와 SSH·tmux 공식 자료를 확인했습니다. 그림과 결제 화면 수정 이야기는 설명용이며, 깃밥이 직접 설치·성공률·성능을 측정한 결과가 아닙니다.
쓰임부터 이해하는 레포 해설
외출해도, PC에서 하던 작업으로 돌아와요
herdr web ui는 AI를 폰에서 새로 실행하는 앱이 아니라, PC의 herdr 작업을 브라우저와 폰에서 읽고 조작하는 화면이에요.
맡길 부분과 직접 챙길 부분
herdr web ui에 맡겨요
- herdr 작업 목록·상태와 지원 에이전트의 원본 대화를 보여줘요.
- 같은 pane에 메시지·키 입력·지원되는 카드 응답을 전달해요.
- 설정된 기기로 입력 필요·완료 알림을 보내요.
직접 준비하고 운영해요
- 실행 PC·herdr·웹 서버와 접속 경로를 유지해요.
- 접속할 기기와 권한, AI 모델·구독을 정해요.
- 승인 요청을 읽고, 코드 변경과 실제 테스트 결과를 검토해요.
처음에는 작은 작업 하나와 내 기기 하나로, 같은 대화·입력·알림부터 확인해보세요.
더 자세히: 원본 해석과 확인할 사항
이미 PC에서 herdr 안의 Claude Code나 Codex를 쓰고 있고, 밖에서는 진행 상황과 짧은 질문만 확인하려는 상황을 가정합니다. 공개 릴리스 v0.4.8의 문서·코드에 근거한 설명이며, 결제 화면 수정은 이해를 위한 가상 예시입니다.
내 폰에서 같은 작업 하나를 끝까지 확인해요
내 조건에 맞춰 확인하기 위한 순서예요. 깃밥이 직접 실행한 결과를 뜻하지는 않아요.
버전·운영체제·지원 에이전트를 확인해요
확인 후 남길 것v0.4.8과 내 herdr·에이전트 버전, 지원 채팅·터미널 모드 목록. Windows는 화면 미러 방식의 차이도 기록합니다.
기본 로컬 주소와 폰 접속 경로를 확인해요
확인 후 남길 것접속 주소, 허용된 기기, 로그인·페어링 방식. 인터넷에 바로 포트를 공개하는 것으로 대신하지 않습니다.
작은 작업에서 채팅·터미널·응답을 비교해요
확인 후 남길 것PC와 폰의 동일 pane 이름, 같은 대화·출력, 전달된 응답을 확인한 기록.
테스트 알림 뒤 실제 입력 대기를 확인해요
확인 후 남길 것HTTPS·권한·설치 상태와 알림 도착 기록. 앱이 앞에서 활성화된 동안은 일반 알림이 억제될 수 있습니다.
다음 단계로 진행
같은 pane을 정확히 열고 응답을 확인했으며, 내 환경에서 접근 제한과 알림이 기대대로 동작할 때 범위를 늘려요.
여기서 보류
대화 연결이나 권한이 불분명하거나, 승인할 내용을 폰에서 읽기 어려우면 PC로 돌아가 확인해요.
판단 근거와 확인 항목 더 읽기
같은 작업을 두 가지 화면으로 읽어요
- 공식 자료에서 확인
- 채팅은 에이전트의 원본 세션 파일을 읽고, 입력은 같은 live pane에 전달합니다. herdr가 프로세스와 터미널 기록을 관리합니다.
- 깃밥의 해석
- 폰으로 복제된 새 AI 작업을 시작하는 구조가 아니에요. 채팅과 터미널은 같은 작업을 다른 형태로 보여줍니다.
- 도입 전 판단
- 먼저 폰에서 고른 작업 공간·탭·pane이 PC와 같은지 확인합니다.
승인 카드는 판단을 대신하지 않아요
- 공식 자료에서 확인
- 지원되는 승인·질문 메뉴는 카드로 표시되고, 응답을 보내기 전 현재 터미널 메뉴와 일치하는지 다시 확인합니다. 모든 프로그램의 질문을 카드로 지원하는 것은 아닙니다.
- 깃밥의 해석
- 작은 화면에서도 응답하기 쉬워지지만, 실행할 명령과 변경 범위는 직접 읽어야 해요.
- 도입 전 판단
- 내용이 충분히 보이지 않거나 지원되지 않는 메뉴라면 터미널로 확인하고, 판단하기 어려우면 PC에서 이어갑니다.
접속 경로와 앱 접근 권한을 함께 정해요
- 공식 자료에서 확인
- 서버는 기본적으로 127.0.0.1에서 듣습니다. Tailscale 소유자 로그인, 페어링된 기기 또는 설정한 토큰으로 접근을 구분합니다. 공용 프록시에는 먼저 토큰을 설정하라는 지침이 있습니다.
- 깃밥의 해석
- 주소가 열리는 것과 내 기기만 제어할 수 있는 것은 별도 조건이에요. 터미널 입력 권한은 실제 PC에 영향을 줍니다.
- 도입 전 판단
- 처음에는 기본 로컬 바인딩과 Tailscale HTTPS 경로로 시작하고, 기기 목록과 실제 접근 권한을 확인합니다.
이런 상황에 잘 맞아요
- herdr에 여러 작업을 띄워두고 폰에서 진행 상황·질문·짧은 입력을 확인하려는 사람.
- 실행용 PC와 원격 접속 경로를 유지하고, 중요한 결과는 직접 검토할 수 있는 사람.
다른 선택지도 비교해 보세요
- PC를 꺼도 폰만으로 같은 AI 작업이 계속되기를 기대할 때.
- 현재 tmux 환경에서 터미널만 간단히 확인하면 충분할 때.
써보기 전에 확인할 것
- 실행 PC와 herdr, 웹 서버가 외출 중에도 계속 켜져 있나요?
- 폰에서 같은 pane을 열고 읽기·입력 권한을 구분했나요?
- 알림 조건을 맞춘 뒤 테스트 알림을 받았나요?
선정한 이유: AI 작업 자체와 원격으로 읽고 입력하는 화면을 구분해 이해하기 좋아요. 이미 herdr를 쓰는 사람이 폰에서도 같은 세션을 이어볼지 판단할 수 있습니다.
출처와 확인 범위
공식 자료와 코드를 바탕으로 깃밥이 설명도와 영상을 만들었어요. 실제 기기를 조작한 녹화나, 새로 설치해 동작·도입 효과를 측정한 기록은 아니에요.
- 제작자
- devswha and herdr web ui contributors
- 자료 확인일
- 2026-10-15
- 라이선스
- MIT ↗