"터미널 톤 AI 명함으로 ai-soo-port 교체.md"
# 왜 텍스트 명함을 버리고 터미널로 갔나
예전 포트폴리오 ai-soo-port는 장황했다. 한 사람이 무엇을 할 수 있는지 설명하려 문장을 늘릴수록, 읽는 사람은 오히려 핵심에서 멀어졌다. AI-native 운영자라는 정체성은 말로 설득하는 것이 아니라 숫자로 증명되어야 한다고 생각했다.
그래서 명함을 한 페이지로 다시 지었다. 거의 모든 문장을 걷어내고, 실제로 처리한 토큰량과 에이전트 구성, 일자별 사용 추이 같은 ‘측정된 사실’만 남겼다. 방문자는 읽는 대신 본다 — 이것이 이 명함의 첫 번째 원칙이다.
# 무엇이 달라졌는가
## 숫자가 스스로 말하게 한다
페이지의 모든 수치는 ccusage가 로컬 기록에서 뽑아낸 실측값이다. 누적 토큰, 최근 2주 사용량, 일자별 시계열까지 — 어느 것도 손으로 적은 값이 아니다. 공개본은 총합과 추이만 남기고 비용·프로젝트 정보는 전부 제거해, 안전하면서도 진짜다.
- ·누적 처리 토큰을 그대로 카운트업으로 노출
- ·Claude Code · Codex · Hermes 세 런타임을 색으로 구분
- ·차트는 라이브러리 없이 인라인 SVG로 직접 렌더
## 터미널이라는 은유
디자인 언어는 near-black 배경에 오렌지·스카이 액센트를 얹은 터미널이다. 개발자의 작업 공간을 그대로 명함으로 가져와, ‘이 사람은 이런 환경에서 일한다’를 한눈에 전한다. 게시판 글조차 cat 명령으로 파일을 여는 것처럼 보이게 했다.
# 어떻게 만들었나 — 기술 스택
## 프런트엔드
프레임워크는 Next.js 16과 React 19, 타입은 전부 TypeScript로 잡았다. 스타일은 Tailwind CSS v4의 테마 토큰으로 색과 폰트를 한곳에서 관리한다. 카운트업과 차트 애니메이션은 requestAnimationFrame만으로 처리해 의존성을 늘리지 않았다.
- ·Next.js 16 App Router · React 19 · TypeScript
- ·Tailwind CSS v4 (@theme 토큰)
- ·차트·카운터: 외부 라이브러리 0개
## 살아있는 데이터
게시판은 Notion API로 가져온다. 공개 체크박스가 켜진 글만 노출되고, 제목을 누르면 본문이 바로 이 터미널 테마 안에서 그대로 렌더된다. 콘텐츠는 10분 주기로 갱신되므로, 글을 Notion에 쓰면 재배포 없이도 자연스럽게 반영된다.
npm run usage # public/usage.json 재생성
scripts/refresh-and-deploy.sh # 재생성 → commit·push# SEO와 접근성을 처음부터
검색엔진이 글을 제대로 이해하도록, 글 제목은 h1, 본문 섹션은 h2와 h3로 계층을 잡았다. 페이지마다 제목과 설명 메타데이터를 동적으로 생성하고, 외부 링크에는 rel 속성을 붙였다. 터미널이라는 강한 비주얼 콘셉트를 유지하면서도 시맨틱 마크업을 포기하지 않은 셈이다.
- ·글 제목 h1, 섹션 h2/h3로 명확한 문서 구조
- ·글별 동적 title·description·Open Graph 메타
- ·키보드·스크린리더를 고려한 시맨틱 태그
# 다음 단계
도메인을 기존 ai-soo-port로 옮겨 완전히 교체하고, 일일 사용량 갱신을 자동화하는 일이 남았다. 명함은 고정된 이미지가 아니라, 매일 조금씩 자라는 대시보드가 된다.
AI가 일을 굴리고, 나는 흐름을 탄다 — 이 페이지가 그 증거다.