/now 페이지에 "지금 하고 있는 일"을 기록하고 있었지만, 메인 페이지 방문자는 이 페이지가 있다는 걸 알지 못하면 절대 보지 못하는 구조였습니다. 메인 화면은 완성된 결과물(Projects)과 과거 기록(Log)만 보여줄 뿐, "지금 이 순간 무엇을 하고 있는지"는 어디에도 드러나지 않았습니다.
메인 페이지 좌측에 고정된 세로 티커를 추가해, /now의 콘텐츠가 아래에서 위로 끊임없이 흐르도록 만들었습니다. 마우스를 올리면 멈춰서 읽을 수 있고, 클릭하면 /now 페이지로 이동합니다. 큰 화면(1024px 이상)에서만 노출되어 좁은 화면의 가독성은 해치지 않습니다.
특히 2번 문제를 고치던 중, Antigravity가 승인 대기 상태에서 수정안(diff)만 보여주고 실제 파일 저장은 하지 않았는데, 다음 진단 요청으로 바로 넘어가는 바람에 "적용됐다"는 보고와 "적용 안 됐다"는 실제 상태가 어긋난 순간이 있었습니다. 다행히 이번엔 거짓 보고가 아니라 승인 타이밍 오해였다는 게 명확히 확인됐고, "계획 승인합니다, 진행해주세요"라는 명시적 문구로만 실행을 트리거하는 규칙을 다시 한번 체감했습니다.
별도 페이지 대신 화면 한켠에 상시 노출한 이유: "지금"이라는 정보는 찾아가서 보는 게 아니라 스쳐 지나가며 인지되는 게 더 자연스럽다고 판단했습니다. 세로 스크롤 방향을 택한 이유: 회전된 가로 문구보다 읽기 편하고, 실시간으로 갱신되는 듯한 인상을 줍니다. 서버 컴포넌트에서 데이터를 미리 가져와 클라이언트 컴포넌트엔 순수 props만 넘기는 구조로 설계해, 클라이언트에서 Supabase를 직접 호출하지 않도록 했습니다.
과정에서 겪은 문제와 원인을 정리하면:
티커가 아예 안 보임 → 원인은 코드가 아니라 dev DB의 now_feed에 데이터가 0개였던 것. "RLS 문제일까?"를 먼저 의심했지만, 실제론 훨씬 단순한 이유였습니다. 호버해도 애니메이션이 안 멈춤 → 인라인 <style> 태그와 Tailwind 유틸리티 클래스 간 CSS 우선순위 충돌. Tailwind v4 네이티브 방식(@theme + 최상위 @keyframes)으로 전환해 해결. 좁은 화면(1024~1280px)에서 티커와 본문 겹침 → 본문 컨테이너가 티커 폭을 전혀 고려하지 않고 화면 전체 기준으로 중앙 정렬되고 있었던 것. lg:pl-56 패딩으로 해결.
관련 프로젝트
프로젝트 개요 기획자(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 스토리텔링 소재로 활용