개인 프로젝트·프론트엔드에이전트 빌드비주얼 시스템메타 케이스 스터디

개인 포트폴리오 사이트

내가 어떻게 만드는지를 증명하는 포트폴리오 사이트.

이 사이트 자체가 케이스 스터디입니다. AI 에이전트로 처음부터 만들었지만, "AI가 만든 느낌"이 사라질 때까지 제품, 프론트엔드, 비주얼, 인터랙션 하나하나를 판단하며 다듬었습니다.

0→1사이트 빌드

Agent실행 방식

No템플릿 의존 없음

Meta케이스 스터디

문제

대부분의 포트폴리오는 정적 템플릿, PDF, 아니면 살짝 손본 사이트 빌더에서 끝납니다. 하지만 이 사이트는 완성된 작업물만 보여주는 게 아니라, "에이전트를 지시해서 완성도 있고 인터랙티브한 제품을 만들어 내는 능력" 자체를 보여줘야 했습니다.

Role: 오너 · 프론트엔드 빌더 · 비주얼 디렉터 · 에이전트 오케스트레이터

Live proof

이 페이지 자체가 결과물이다.

스크롤하며 지나친 모든 제목은 한 글자씩 디코딩되어 나타난 것이다. 사이트 언어를 바꾸면 페이지 전체가 새로운 문자 체계로 다시 스크램블된다 — 템플릿이 아니라 실제로 만들어졌기 때문이다.

Built, not templated

아무 언어나 눌러보세요 — 사이트의 모든 제목에 쓰인 바로 그 효과입니다.

실시간 상태 — 스크린샷이 아닙니다

모션 감소: 꺼짐
테마: light
브레이크포인트: md (768px+)
언어: ko

창 크기를 바꿔 보세요 테마 전환 — 오른쪽 위

AI／제품 빌더로서의 강점을 중심으로 포지셔닝을 정의했습니다.

비주얼 언어, 그리드, 다크 모드, 프로젝트 카드, 인터랙션 디테일을 지휘했습니다.

노코드 템플릿이나 PDF가 아니라, 에이전트와의 협업으로 처음부터 사이트를 만들었습니다.

이 페이지 자체를, 에이전트 주도로 제품을 굴리는 메타 케이스 스터디로 구성했습니다.

AI 협업 거버넌스

이 사이트가 훌륭한 건 AI가 똑똑해서가 아니라 제가 그것을 "다스릴" 줄 알기 때문입니다 — 이 페이지는 제가 AI의 인지 맹점을 찌르고, 다시는 반복하지 않을 프로세스로 바꾼 기록입니다.

거버넌스 사례

일차 증거 열기

AI의 몸에 밴 습성

어떤 면을 최적화할 때 AI는 인접 맥락에 대한 헤아림이 없습니다: 중국어판을 고치면 영어 줄바꿈을 놓치고, 모바일 클래스를 바꿔도 제가 데스크톱에서는 차이를 볼 수 없다는 걸 모릅니다. 건드린 면만 검증하고 "이 변경의 이웃은 안 깨지나"를 묻지 않습니다.

내가 세운 거버넌스 장치

규칙을 세웠습니다: 어떤 프런트 변경이든 그 전에 Viewport Scope & Language Target을 강제 선언 — 어느 단점, 어느 로케일을 건드리는지 먼저 말하면 검증에 명확한 표적이 생깁니다.

협업으로 풀린 가치

AI의 장님 코끼리 만지기식 국소 최적화를 선언적 검증 경계로 수렴시켰습니다. 일회성 레이아웃 버그가 다시 일어나지 않는 협업 규칙이 됐습니다.

AI의 몸에 밴 습성

맥락 일관성을 지키려고 AI는 반증을 봐도 이전 결론을 계속 따르고, 앞선 판단이 틀렸다고 인정하려 하지 않습니다 — 다중 턴 협업에서 오류를 증폭시키는 방어적 환각입니다.

내가 세운 거버넌스 장치

"반증 우선(Evidence-over-Consistency)" 반복 규칙을 도입: 지금의 일차 오류 로그를 최고 중재 기준으로 삼고, 새 증거가 이전 판단과 충돌하면 반드시 증거를 우선 — 일관성 때문에 억지 부리지 않습니다.

협업으로 풀린 가치

당사자(나 + OpenClaw 에이전트 + Claude Code)의 의견이 갈릴 때 협업에 명확한 중재 기준을 줍니다. 틀린 판단은 그 자리에서 뒤집히고, 다 함께 하나의 틀린 결론을 따라가지 않습니다.

AI의 몸에 밴 습성

AI는 무수한 선택지를 생성할 수 있지만 "제가 그리는 효과"는 모릅니다 — hero의 인터랙션 애니메이션이 어울리는지, 그 기능을 만들 가치가 있는지. 이런 시각과 가치 판단은 답하지 못합니다.

내가 세운 거버넌스 장치

인간과 AI의 분담을 명확히 그었습니다: 큰 아키텍처, 단점 전략, 선택지 생성은 AI에게. 심미 중재와 최종 판단은 인간에게 남깁니다 — AI는 선택지를 낼 뿐 결정하지 않습니다.

협업으로 풀린 가치

AI의 산출을 인간의 취향에 봉사하게 하고, AI의 평균값 미감에 희석되지 않게 합니다 — 결과물은 결국 "사람이 지휘한" 것처럼 보이고 "AI가 도와준" 것처럼 보이지 않습니다.

성과

증명이 되는 포트폴리오

사이트가 능력을 설명하는 데서 그치지 않고, 인터랙티브 프론트엔드와 에이전트 오케스트레이션 능력을 그대로 보여줍니다.

"AI 티"가 나지 않음

디자인 목표는, AI가 만든 사이트 하면 떠오르는 뻔한 비주얼·카피 패턴을 남기지 않으면서 에이전트를 잘 부려 쓰는 것이었습니다.

제로에서 결과물까지

빈 페이지에서 배포된 개인 브랜드 시스템까지, 처음부터 끝까지의 과정을 통째로 보여줍니다.