"에이전트는 이미지를 보는 게 아니라 텍스트를 읽는다. 와이어프레임도 텍스트가 맞다."
전통적인 방식은 Figma로 시안을 완성한 뒤 개발자에게 넘기는 구조다. 기획자가 직접 만드는 바이브 코딩에서 이 방식을 그대로 쓰면 Figma 작업에 시간이 많이 들고, 결국 에이전트한테 넘길 때는 텍스트로 다시 설명해야 한다. Figma 시안이 있어도 에이전트는 그걸 직접 읽지 못한다.
텍스트로 섹션 배치와 컴포넌트를 명세했다. ASCII로 레이아웃을 그리고, 각 영역에 데이터 출처(어느 테이블의 어느 필드)와 사용할 컴포넌트를 적었다. 이 텍스트가 그대로 에이전트 프롬프트의 재료가 됐다.
홈, 프로젝트 허브, /now — 세 페이지만 텍스트 와이어프레임으로 짰다. Figma를 쓰지 않은 건 게을러서가 아니라 바이브 코딩 방식에 안 맞기 때문이다.
와이어프레임의 목적은 두 가지다. 첫째, 만들기 전에 배치를 결정하는 것. 둘째, 만드는 사람에게 명세를 전달하는 것. 바이브 코딩에서 "만드는 사람"은 에이전트다. 에이전트는 텍스트를 읽는다. 그러면 와이어프레임도 텍스트가 맞다.
Figma 시안이 필요한 경우는 따로 있다. 디자이너와 협업할 때, 클라이언트에게 시각적 승인을 받아야 할 때. 혼자 만드는 바이브 코딩에서는 텍스트 와이어프레임 + 디자인 토큰으로 충분하다.
텍스트 와이어프레임 작성 방법: 화면을 고른다 — 배치 판단이 필요한 화면만. 단순한 목록 페이지나 정적 페이지는 생략 섹션 순서를 정한다 — 위에서 아래로 섹션 나열 각 섹션에 적는다 — 들어갈 컴포넌트 / 데이터 출처(테이블.필드) / 반응형 동작 빈 상태를 정한다 — 데이터가 없을 때 어떻게 보이는지 컴포넌트 인벤토리에 반영한다 — 새로 필요한 컴포넌트가 드러나면 목록에 추가
어떤 화면을 그릴지 기준도 있다: 꼭 그려야 함 — 요소가 많고 배치 판단이 큰 화면 (홈, 핵심 페이지) 가볍게 그리면 좋음 — 커스텀 구조가 있는 화면 (/now 피드 형태) 안 그려도 됨 — 표준 패턴을 따르는 화면 (목록 페이지, 정적 페이지, 관리자 CRUD)
관련 프로젝트
프로젝트 개요 기획자(PM)로서 AI를 활용한 업무 자동화(AX) 사례를 문서화하는 개인 포트폴리오 사이트입니다. 국내 기업의 AX 기획자/AI PM 직군으로의 커리어 전환을 목표로, 사이트 자체가 채용 지원용 스토리텔링 자료로 실사용되고 있습니다. 핵심 패턴: 업무 병목 발견 → AI로 워크플로우 재설계 → Before/After·근거·재현 가능성 문서화 전체 서사는 '실행하지 않은 아이디어 나열'이 아니라, 하나의 검증된 자동화 패턴과 도메인별 확장 블루프린트를 갖춘 재사용 가능한 엔진을 보유하는 방향으로 수렴하고 있습니다. 기술 스택 Next.js 16, Tailwind CSS v4, TypeScript Supabase (개발/운영 환경 분리), Vercel, Resend Claude API 기반 기술 자문 및 프롬프트 설계 보안 아키텍처 관리자 CRUD는 세션 기반 인증과 RLS(Row Level Security)로 보호 공개 읽기 전용 경로는 별도의 익명 클라이언트로 분리 서비스 롤 키는 애플리케이션 코드에서 완전히 배제 권한 검증은 마이그레이션 파일 및 대시보드 검토를 통해서만 진행 작업 방식 (에이전틱 IDE 협업 워크플로우) AI 에이전트 기반 IDE가 파일/버전관리 작업을 담당하고, LLM은 기술 자문 및 프롬프트 작성 역할을 수행하는 협업 구조를 운영합니다. AI 자문 → 에이전트용 프롬프트 작성 → 실행자가 붙여넣기 → 계획 확인 → 자문 검토 → 실행 승인 → 로그 검토 → 직접 클릭 테스트 → 명시적 지시 시에만 커밋 통제 규칙 실행 전 계획 검토 필수 요약 보고가 아닌 직접 클릭 테스트로 검증 개발 환경 우선 적용 후 명시적 승인 하에 운영 환경 반영 커밋은 명시적 지시가 있을 때만 수행 DB 자격증명 직접 연결 및 범위 외 삭제 금지 브랜치 전략: 개발 브랜치에서 작업 후 운영 브랜치는 배포 전용으로 직접 커밋 금지, 병합 전 변경 범위 검증 현재 진행 상황 고객사 미팅 브리핑 자동화 사례: 1단계 완료, 개발/운영 환경 배포 및 실데이터 테스트 완료 범위 변경 감지 자동화 사례: 상태 확인 진행 중 리스크 조기 경보 자동화 사례: 운영 환경 배포 완료 보안 사고 관련 포스트: 'AI 리스크 거버넌스 사례'로 재구성 예정 AI 활용 관련 콘텐츠 시리즈 초안 작성 완료, 게시 미확정 핵심 학습 원칙 보고가 아닌 검증: 버그·보안 이슈는 항상 직접 로그/브라우저 검토를 통해서만 발견되며, 에이전트의 자체 결과 요약을 그대로 신뢰하지 않음 보안 사고의 콘텐츠화: 실제 발생한 권한 관련 이슈 사례를 케이스 스터디로 재구성하여 콘텐츠화 커밋 의미 분리: 기능 단위/변경 유형별로 항상 분리 커밋 자동화하지 않는 것도 스토리: 저사용 빈도 기능을 의도적으로 고도화하지 않은 결정 자체를 AX 스토리텔링 소재로 활용