맥의 열린 포트를 살아있는 항구 도시로 시각화하는 아이디어: Claude Opus로 순식간에 구현했습니다

핵심 요약

컴퓨터의 포트 상태를 항구 도시로 시각화하여 실시간으로 모니터링하는 독창적인 TUI 프로젝트입니다.

항구 도시 시각화 — 포트와 프로세스를 항구의 시설과 작업자로 표현함

실시간 상태 반영 — 소켓 연결 상태에 따라 건물 조명이나 작업자 활동이 변화함

인터랙티브 TUI — HTML 캔버스를 통해 프로세스 확인 및 종료가 가능함

AI 기반 개발 — Claude Opus를 활용해 빠르게 프로토타이핑 및 구현됨

한동안 portlist를 쓰던 친구가 아이디어를 하나 던져주더라.

"맨날 lsof나 netstat 같은 지루한 CLI 표만 쳐다보고 있어야겠냐? 네 컴퓨터는 사실 거대한 산업 항구야. 포트는 부두고, 서비스는 공장이고, Docker 컨테이너는 컨테이너 박스고, AI 에이전트는 그 사이를 바쁘게 돌아다니는 일꾼들이지."

이 이미지가 머릿속에서 떠나질 않아서, 이 컨셉이랑 상태 엔진 프롬프트를 통째로 Claude Opus에 집어넣어 봤거든.

결과는 진짜 미쳤음.

그냥 흔해 빠진 터미널 대시보드 래퍼 같은 게 아니라, Portlist Harbour를 우리 TUI에 직접 박아버렸어(W 키 누르면 바로 뜸). HTML 캔버스에 실시간으로 렌더링되는 인터랙티브 아이소메트릭 월드라고 보면 돼.

실시간 상태, 추측은 필요 없음: 공장 건물에 불이 들어오거나 굴뚝에서 연기가 나면, 실제로 그 뒤에서 소켓이 리스닝 중인 거야. 놀고 있으면 먼지 쌓이고 거미줄 쳐짐.
"AI 에이전트가 불 켜놓고 퇴근함": Claude Code나 Cursor가 개발 서버 띄웠다가 터미널 세션 종료하면, 꼬마 로봇 일꾼이 연장 내팽개치고 동쪽 게이트로 걸어 나가. 그럼 항구 고양이가 클립보드 들고 와서 왜 공장이 아직도 전기 처먹고 있는지 조사하러 옴.
포트 충돌 (EADDRINUSE): 프로세스 두 개가 :3000 포트 가지고 싸우면, 트럭 두 대가 부두에서 범퍼 맞대고 스파크 튀기면서 개싸움 벌임. 네가 클릭해서 하나 죽일 때까지 계속됨.
실제 LAN 노출: 서비스가 0.0.0.0에 바인딩되는 순간, 톨게이트 차단기가 올라가고 사이렌이 빨간색으로 번쩍거림. 경비 고양이들도 비상 걸려서 난리 남.
Docker & 피더선: OrbStack/Docker 컨테이너는 피더선 타고 앞바다에 도착해서 STS 크레인이 야드로 옮겨줌.

공장, 일꾼, 컨테이너, 고양이 아무거나 클릭하면 정확한 PID, 가동 시간, 프로세스 트리 다 나오고, 클릭 한 번으로 kill -9 날릴 수 있어.

지금 엣지 케이스(다중 차선 주차 처리량이나 터미널 키훅 같은 거) 마무리 중인데, 조만간 레포랑 빌드 공개할게.

프로젝트는 여기서 확인해 봐: https://github.com/Mr-hunt-007/portlist

궁금한 게 있는데, 시스템에서 일어나는 일 중에 물리적인 항구 사고로 시각화하면 재밌을 것 같은 사건 또 뭐 있을까?

핵심 요약

컴퓨터의 포트 상태를 항구 도시로 시각화하여 실시간으로 모니터링하는 독창적인 TUI 프로젝트입니다.

항구 도시 시각화 — 포트와 프로세스를 항구의 시설과 작업자로 표현함

실시간 상태 반영 — 소켓 연결 상태에 따라 건물 조명이나 작업자 활동이 변화함

인터랙티브 TUI — HTML 캔버스를 통해 프로세스 확인 및 종료가 가능함

AI 기반 개발 — Claude Opus를 활용해 빠르게 프로토타이핑 및 구현됨

한동안 portlist를 쓰던 친구가 아이디어를 하나 던져주더라.

"맨날 lsof나 netstat 같은 지루한 CLI 표만 쳐다보고 있어야겠냐? 네 컴퓨터는 사실 거대한 산업 항구야. 포트는 부두고, 서비스는 공장이고, Docker 컨테이너는 컨테이너 박스고, AI 에이전트는 그 사이를 바쁘게 돌아다니는 일꾼들이지."

이 이미지가 머릿속에서 떠나질 않아서, 이 컨셉이랑 상태 엔진 프롬프트를 통째로 Claude Opus에 집어넣어 봤거든.

결과는 진짜 미쳤음.

실시간 상태, 추측은 필요 없음: 공장 건물에 불이 들어오거나 굴뚝에서 연기가 나면, 실제로 그 뒤에서 소켓이 리스닝 중인 거야. 놀고 있으면 먼지 쌓이고 거미줄 쳐짐.
"AI 에이전트가 불 켜놓고 퇴근함": Claude Code나 Cursor가 개발 서버 띄웠다가 터미널 세션 종료하면, 꼬마 로봇 일꾼이 연장 내팽개치고 동쪽 게이트로 걸어 나가. 그럼 항구 고양이가 클립보드 들고 와서 왜 공장이 아직도 전기 처먹고 있는지 조사하러 옴.
포트 충돌 (EADDRINUSE): 프로세스 두 개가 :3000 포트 가지고 싸우면, 트럭 두 대가 부두에서 범퍼 맞대고 스파크 튀기면서 개싸움 벌임. 네가 클릭해서 하나 죽일 때까지 계속됨.
실제 LAN 노출: 서비스가 0.0.0.0에 바인딩되는 순간, 톨게이트 차단기가 올라가고 사이렌이 빨간색으로 번쩍거림. 경비 고양이들도 비상 걸려서 난리 남.
Docker & 피더선: OrbStack/Docker 컨테이너는 피더선 타고 앞바다에 도착해서 STS 크레인이 야드로 옮겨줌.

공장, 일꾼, 컨테이너, 고양이 아무거나 클릭하면 정확한 PID, 가동 시간, 프로세스 트리 다 나오고, 클릭 한 번으로 kill -9 날릴 수 있어.

지금 엣지 케이스(다중 차선 주차 처리량이나 터미널 키훅 같은 거) 마무리 중인데, 조만간 레포랑 빌드 공개할게.

프로젝트는 여기서 확인해 봐: https://github.com/Mr-hunt-007/portlist

궁금한 게 있는데, 시스템에서 일어나는 일 중에 물리적인 항구 사고로 시각화하면 재밌을 것 같은 사건 또 뭐 있을까?

핵심 요약