8 screens
UI kits화면 키트
Eight finished screens from the same tokens. The site kit spaces generously, the console kit packs rows at 34px — only the density differs.같은 토큰으로 조립한 완성 화면 여덟 장. 사이트 키트는 여백을 넉넉히, 콘솔 키트는 행 높이를 34px로 촘촘하게 — 밀도만 다르다.
site사이트
4 screens4장
console콘솔
4 screens4장
measure읽는 폭
660px
shared공통
radius 0 · no shadow라운드 0 · 그림자 0
S1
Portfolio — home포트폴리오 — 홈
1120px
snap panels · colour field · row lists스냅 패널 · 색면 · 행 목록
garamnoh.pages.dev
garamnoh
enko
darklight
still writing
2019 —
garamnoh
Developer · Jeonju개발자 · 전주
❯ 1 human, n agents
How I work작업 방식
Name the values first.
The screen comes after.값에 먼저 이름을 붙인다.
화면은 그 다음이다.
The screen comes after.값에 먼저 이름을 붙인다.
화면은 그 다음이다.
Tools first도구 먼저
CLI over UIUI보다 CLI
One source단일 출처
tokens, not literals리터럴이 아닌 토큰
Ship small작게 배포
four states, no more상태는 네 개까지
Work작업
3
2026 · shipped배포
PiloRuns several coding agents from one terminal.여러 코딩 에이전트를 한 터미널에서 돌린다.
CLI
2026 · in use사용 중
Design system디자인 시스템The tokens and classes behind this site.이 사이트가 쓰는 토큰과 클래스.
CSS
2025 · shipped배포
hwpx-toolsConverts Korean HWPX documents into structured data.한글 HWPX 문서를 구조화된 데이터로 바꾼다.
Python
S2
Portfolio — case detail포트폴리오 — 작업 상세
1120px
meta strip · 660 body · side contents메타 스트립 · 본문 660 · 사이드 목차
garamnoh
Work작업/pilo
shipped2026.03 – 2026.09
Pilo
An orchestrator that runs several coding agents from one terminal. Queue the work, watch the state on one screen.여러 코딩 에이전트를 한 터미널에서 지휘하는 오케스트레이터. 작업을 큐에 넣고 상태를 한 화면에서 본다.
Role역할
planning · development · design기획 · 개발 · 디자인
Stack스택
Node · Ink · SQLite
Scope규모
1 person · 6 months1인 · 6개월
Install설치
npm i -g pilo
Problem문제
Past three agents I could not tell how far each task had got. Switching terminal tabs to compare state by eye took longer than the work itself.에이전트를 셋 이상 돌리면 어떤 작업이 어디까지 갔는지 알 수 없었다. 터미널 탭을 옮겨 다니며 상태를 눈으로 대조하는 시간이 실제 작업 시간을 넘었다.
Approach접근
One queue for everything, and four states only: queued, running, done, failed. Not adding a fifth is what kept it cheap to maintain.모든 작업을 하나의 큐로 모으고, 상태를 네 가지로만 표현했다. queued · running · done · failed. 그 이상을 만들지 않은 것이 유지 비용을 낮췄다.
Decision결정
No web UI. The terminal already had the density I needed.웹 UI를 만들지 않았다. 터미널이 이미 최고의 밀도를 가진 인터페이스였다.
Outcome결과
4×
concurrent tasks동시 작업
−62%
time spent checking확인 시간
317
tasks handled처리한 작업
On this page이 글에서
Problem문제
Approach접근
Outcome결과
S3
Portfolio — writing list포트폴리오 — 글 목록
1120px
filter tags · year groups · archive필터 태그 · 연도 그룹 · 아카이브
garamnoh
Work작업Writing글About소개
Writing글
24 notes written while building tools.도구를 만들며 남긴 기록 24편.
All 24전체 24CLI 9Design 7디자인 7Conversion 5문서변환 5Other 3기타 3
20269 notes9편
08.14
Settle the token names first and the theme can come later토큰 이름을 먼저 정하면 테마는 나중에 온다
Dropping the Paper theme changed no component code. Why.Paper 테마를 버리며 컴포넌트 코드는 한 줄도 고치지 않았다. 그 이유.
Design디자인6 min6분
06.02
Running four agents off one queue큐 하나로 에이전트 넷 돌리기
Why Pilo's scheduler keeps only four states.Pilo의 스케줄러가 상태를 네 개로만 두는 이유.
CLI9 min9분
05.09
What terminal UI taught me about density터미널 UI에서 배운 정보 밀도
Fitting more on a screen and reading it better are the same problem.한 화면에 더 많이 담는 것과 더 잘 읽히는 것은 같은 문제다.
Design디자인11 min11분
02.21
A paragraph in HWPX is not a paragraphHWPX 안의 문단은 문단이 아니다
The cell line-break problem in the Hangul document format.한글 문서 포맷을 파싱하며 만난 셀 줄바꿈 문제.
Conversion문서변환7 min7분
202511 notes11편
11.30
Questions to ask before adding colour to a CLICLI에 색을 넣기 전에 물어볼 것
CLI5 min5분
S4
Portfolio — about and contact포트폴리오 — 소개 · 연락
1120px
profile · history table · form프로필 · 이력 표 · 폼
garamnoh
Work작업Writing글About소개
garamnoh
developer
seoul, kryou@example.comgithub.com/garamnohhh
I am a developer who builds tools, mostly things that run in a terminal, and I write down the rules that come out of building them.도구를 만드는 개발자입니다. 주로 터미널에서 돌아가는 것들을 만들고, 만들면서 생긴 규칙을 문서로 남깁니다.
I am not a designer, but I had to build the screens myself, and I got tired of picking colours and spacing from scratch every time. Every personal project now runs on the same tokens.디자이너가 아니지만 화면을 직접 만들어야 했고, 매번 색과 간격을 다시 고르는 데 지쳐 이 시스템을 만들었습니다. 지금은 개인 프로젝트 전부가 같은 토큰 위에서 돌아갑니다.
History이력
| 2024 – present2024 – 현재 | Freelance · tool development프리랜스 · 도구 개발 | seoul |
| 2021 – 2024 | Backend engineer · document processing백엔드 엔지니어 · 문서 처리 | seoul |
| 2019 – 2021 | Junior developer · internal tools주니어 개발자 · 사내 도구 | seoul |
Contact연락
I usually reply within two days.보통 이틀 안에 답합니다.
or you@example.com또는 you@example.com
What I take on이런 일을 함께 합니다
→Internal tools · CLI design and build내부 도구 · CLI 설계와 구현
→Document and data format conversion문서·데이터 포맷 변환
→Design systems for one person or a small team개인·소규모 팀 디자인 시스템
Availability지금 상태
Open to new project enquiries새 프로젝트 문의 가능
Available to start from Q4 2026.2026년 4분기부터 착수 가능합니다.
C1
Console — dashboard콘솔 — 대시보드
1120px
268 + 1fr · KPI · activity log268 + 1fr · KPI · 활동 로그
garamnohconsole
workspace
Dashboard대시보드
Work작업317
Agents에이전트4
Logs로그
settings
Theme테마
Keys키 관리
v0.4.1 · currentv0.4.1 · 최신
Dashboard대시보드
running
2/ 4 slots
queued
7waiting대기
done · 24h
41+12
failed · 24h
32 retries재시도 2
Active tasks활성 작업9
| id | task | agent | elapsed |
|---|---|---|---|
| in-318 | Unify token names토큰 이름 통일 | pm | 3m 29s |
| in-319 | Align deck frame덱 프레임 정렬 | worker-2 | 1m 04s |
| in-320 | Snippet copy button스니펫 복사 버튼 | — | queued |
| in-321 | Favicon 512 export파비콘 512 export | — | queued |
| in-315 | HWPX cell line breakHWPX 셀 줄바꿈 | worker-1 | failed |
| in-317 | Document 30 components컴포넌트 30종 문서 | pm | 12m 41s |
Last 7 days최근 7일
peak 41 · today 36최대 41 · 오늘 36
Activity활동
14:22✓in-317 done
14:08×in-315 failed
13:51→in-318 started
13:40+7 tasks queued
C2
Console — list and filters콘솔 — 목록 · 필터
1120px
filter bar · selection · pagination필터 바 · 선택 · 페이지네이션
garamnoh
console/Work작업
All 317전체 317running 2queued 7failed 3
3 selected3개 선택됨
| id | task | agent | state | started | elapsed | |
|---|---|---|---|---|---|---|
| ✓ | in-318 | Unify token names토큰 이름 통일 | pm | running | 14:19 | 3m 29s |
| ✓ | in-319 | Align deck frame덱 프레임 정렬 | worker-2 | running | 14:21 | 1m 04s |
| ✓ | in-315 | HWPX cell line breakHWPX 셀 줄바꿈 | worker-1 | failed | 13:02 | 8m 12s |
| in-320 | Snippet copy button스니펫 복사 버튼 | — | queued | — | — | |
| in-317 | Document 30 components컴포넌트 30종 문서 | pm | done | 12:44 | 12m 41s | |
| in-316 | Confirm wordmark 5b워드마크 5b 확정 | worker-3 | done | 11:58 | 4m 07s | |
| in-314 | Remove Paper from colors.csscolors.css Paper 제거 | pm | done | 10:31 | 2m 55s |
1 – 7 / 317
C3
Console — task detail and log콘솔 — 작업 상세 · 로그
1120px
tabs · log stream · side meta탭 · 로그 스트림 · 사이드 메타
Work작업/in-315
failed
Fix HWPX cell line-break handlingHWPX 셀 줄바꿈 처리 수정
Split cell paragraphs by line and rebuild them. 47 of 49 tests pass.셀 문단을 줄 단위로 쪼개 문단을 다시 생성한다. 테스트 49개 중 47 통과.
Failure cause실패 원인
AssertionError: expected 4 lines, got 1 — table_cell.py:118
Logs로그
diff 4
Tests테스트 2
Meta메타
stdout · 1,204 lines
allerrorwarn
13:02:14 info loading fixtures (49)
13:02:15 step parse table_cell.py
13:04:31 pass 47 assertions
13:09:52 fail cell_multiline · expected 4 lines, got 1
13:09:52 fail cell_nested · index out of range
13:10:26 warn retrying with --strict=false
13:10:26 info aborted after 2 failures
13:10:27 ❯
Meta메타
agentworker-1
Started시작13:02:14
Elapsed소요8m 12s
Retry재시도1 / 3
Commit커밋e96ecaf
Branch브랜치fix/hwpx-cell
Changed files변경 파일
table_cell.py+42 −8
parser.py+6 −2
test_cell.py+31
C4
Console — settings콘솔 — 설정
1120px
settings sections · switches · destructive actions설정 섹션 · 스위치 · 파괴적 동작
garamnoh
console/Settings설정
General일반
Agents에이전트
Keys키 관리
Notifications알림
Danger zone위험 구역
General일반
Behaviour동작
Retry automatically on failure실패 시 자동 재시도
Requeues the same task up to three times.최대 3회까지 같은 작업을 다시 큐에 넣는다.
Keep raw logs로그 원문 보관
Deleted after 30 days. Using 1.2GB.30일 후 자동 삭제. 용량 1.2GB 사용 중.
Desktop notification on completion완료 시 데스크톱 알림
Only failed tasks are announced.실패한 작업만 알린다.
Danger zone위험 구역
Delete workspace워크스페이스 삭제
This cannot be undone. 317 tasks and their logs go with it.되돌릴 수 없습니다. 작업 317건과 로그가 함께 지워집니다.