Colophon · 살아있는 제작기
고객사에 적용하는 방식을
자사 사이트에 먼저 적용했습니다.
본 웹사이트는 그린파이 방법론을 적용한 첫 공개 프로젝트입니다. 사용 기술, 소요 기간, 발생한 실패와 조치를 선별 없이 기록합니다.
- 프레임워크
- Next.js 16 (App Router) + React 19 + TypeScript
- 스타일
- Tailwind CSS 4 — 디자인 토큰은 CSS 변수
- 타이포
- Noto Serif KR(디스플레이) · Wanted Sans(본문) · JetBrains Mono(수치)
- 히어로
- 자체 제작 L-시스템 SVG — 시드 고정 결정론적 생성, 라이브러리 0개
- AI
- Vercel AI SDK v7 · kinfri.ai(자사 게이트웨이) + Vercel AI Gateway 이중화
- 판별 엔진
- Claude Sonnet 5 (Vercel AI Gateway 직결, kinfri 폴백) · 스트리밍 · 거절 기준 4종 내장
- 글래스박스
- 검색 → 근거 게이트 → 생성(gemini-3.5-flash) → 인용 검증 4단 파이프라인
첫 화면의 식물은 이미지가 아니라 시드가 고정된 알고리즘의 결정론적 생성 결과입니다 — 고객 시스템에서 환각을 통제하는 원칙과 동일합니다. 본 사이트의 AI를 자사 게이트웨이(kinfri.ai)로 구동하는 것도 같은 이유입니다. 당사는 제공하는 방식을 자사에 먼저 적용합니다.
Day 3 — 모바일 오버플로 수정 · SEO/GEO 기반 구축
- 01전 12페이지를 375px 폭에서 실측 스캔 — 콜로폰 1곳에서 가로 스크롤 확인. 한글 어절 유지(keep-all) 규칙과 공백 없는 라틴 연쇄(컴포넌트명 6종 나열)가 만나 개행 불가, 38px 초과
- 02콜로폰 전체와 AI 출력 영역(글래스박스·판별 채팅)에 overflow-wrap: anywhere 비상 개행 적용 — 어절 유지 규칙은 그대로, 한 단어가 줄 전체보다 길 때만 발동
- 03canonical 결함 수정 — 루트 레이아웃의 canonical이 전 페이지에 상속되어 모든 하위 페이지가 홈의 사본으로 선언되던 문제. 페이지별 canonical·OG 체계로 전환
- 04구조화 데이터 신설 — Organization·WebSite 전역, 에세이 2편 Article(저자·게시일). 소개 페이지에 이미 공개된 사실만 기재
- 05GEO 기반 구축 — llms.txt 신설, robots.txt에 AI 검색 크롤러 13종 명시 허용, 에세이 OG 다크 이미지 분기
- 06메타 설명에 서비스 키워드 보강(RAG·AI 에이전트·Text-to-SQL·LLM 게이트웨이), sitemap 우선순위 차등화
Day 2 — 디자인 시스템 v2, 클로드 디자인과의 핸드오프
- 01claude.ai/design에 Greenpi Design System 프로젝트 생성 — 파운데이션·컴포넌트·시그니처 카드로 협업 시작
- 02디자인 측 산출물: 심볼 'Measured π' 브랜드 체계, 토큰 v2(저채도 서페이스·격자 농도 절반·AA 대비 액센트), 페이지 11종 재설계, 비즈니스 문어체 카피
- 03design-sync 단방향 배포 계약(AGENTS.md) 수립 — 디자인 도구 → design-sync → site, 코드는 디자인을 따르고 이견은 SYNC-LOG로
- 04UI 키트 6종(GpLogo·GpButton·GpStat·GpHud·GpTag·GpSectionLabel) 이식, 모바일 내비·4열 푸터 신설
- 05식물 히어로 성능 계약 반영 — 노드 예산(3000/800), 모바일·reduced-motion 정지, 말단 세대 애니메이션 제외, 30fps+IntersectionObserver
- 06Wanted Sans self-host 전환, OG 1200×630 규격화, 판별 엔진을 Claude Sonnet 5로 상향
Day 1 — 조사에서 살아있는 사이트까지
- 01회사 방향 토론: 순수 구축 전문사 / 가격 비노출 / 그린파이 하우스 브랜드 / 제조·파트너 채널 이원 타깃 확정
- 02리서치 에이전트 3기 병렬 가동 — 2026 디자인 트렌드, 3D·모션 기술 스택, AI-네이티브 컨셉 사례 조사
- 03비주얼 3안을 이미지 생성 파이프라인(자체 CLI + AI 게이트웨이)으로 시안화 → 'A 계측된 정원 + B 제너레이티브 아트' 하이브리드 채택
- 04살아있는 식물 히어로 프로토타입: L-시스템 재귀 + 바람 스웨이. 1차는 단일 기관 반복이라 밋밋 → 말단 기관 5종(술·깃털잎·코일·레이스잎·꼬투리)으로 재설계
- 05Next.js 16 + Tailwind 4 스캐폴드, 디자인 토큰·타이포 3종 체계, PlantHero 포팅, 정적 페이지 9종 구현
- 06판별 엔진 + 글래스박스 구현, kinfri 게이트웨이 실연동
- 07히어로 성장 인트로(씨앗→만개 2.6초, 라이브러리 없이 rAF 단일 루프), sitemap·robots·OG 메타 정비
- 08프로덕션 빌드 — 콘텐츠 페이지 전부 정적 프리렌더. Vercel 배포(빌드 32초) + greenpi.kr 도메인 연결
* 일지는 사이트 업데이트 시점마다 추가됩니다.
투명성은 유리한 지표만 선별해 제시하는 것이 아닙니다. 본 사이트 구축 과정에서 실제로 발생한 실패와 조치 내역입니다.
✕완료 판정 체크리스트에 '375px 가로 스크롤 없음' 항목이 있었으나 콜로폰이 통과하지 못한 채 배포됨 — 빌드 일지 데이터의 공백 없는 컴포넌트명 나열이 한글 어절 유지 규칙(keep-all) 아래에서 개행 지점을 잃어 화면 밖으로 밀려남. 실기기(아이폰) 확인에서 발견
→12페이지 전수를 375px에서 스크립트로 실측 — 데이터가 자라는 영역(콜로폰·AI 출력)에 overflow-wrap: anywhere 비상 밸브 적용. 정적 카피가 아닌 축적형 콘텐츠는 검수 시점 통과가 미래를 보증하지 않으므로 구조로 방어
✕글래스박스의 근거 검색이 한국어 조사를 처리하지 못함 — '안건을'이 '안건'과 매칭되지 않아 정답이 있는데도 '모른다'고 답함
→토큰 앞부분 절단 매칭(최대 2자, 최소 2자)으로 수정. 근거 게이트로 인해 오답이 아니라 무응답으로 실패한 것은 아키텍처가 정상 작동한 결과
✕판별 엔진에 claude-sonnet-4-6을 배정했으나 게이트웨이에서 401 — 게이트웨이 서버에 해당 프로바이더 키가 미설정
→실호출 테스트 라우트(/api/kinfri-health?test=모델)를 만들어 가용 모델을 실측 → gemini-3.1-pro로 전환. 모델 교체는 환경변수 변경으로 처리
✕게이트웨이 자격증명을 다른 프로젝트에서 자동 복사하려던 스크립트가 보안 분류기에 차단됨
→우회하지 않고 수동 절차로 전환 — 자동화가 항상 최적해는 아님
✕배포 직후 사이트가 Vercel 팀 기본 설정의 배포 보호(SSO)에 가려 외부에서 보이지 않음
→프로젝트 설정에서 보호 범위를 프리뷰 전용으로 조정 — 공개 여부는 담당자가 최종 결정
✕프로덕션에서 AI 라우트만 500 — CLI 파이프로 등록한 환경변수 끝에 보이지 않는 개행(CRLF)이 붙어 존재하지 않는 모델을 호출하고 있었음. URL은 브라우저 규칙이 개행을 지워줘서 헬스체크는 통과 — 그래서 더 늦게 발견
→env 값을 코드에서 항상 trim + 개행 없는 재등록. 진단 라우트(실호출 테스트)가 없었다면 원인 규명이 더 지연됐을 사안
✕잉크 배경 버튼의 글자가 전부 소실 — 전역 앵커 색 규칙이 CSS 레이어 밖에 있어 유틸리티 클래스보다 우선 적용됨. 인라인 스타일 기반 디자인 확정본에서는 드러나지 않던 이식 단계 결함
→앵커 기본색을 base 레이어로 이동. 전 페이지를 계산된 스타일로 스캔해 글자색=배경색 충돌 0건 확인