Gemini 3 Pro 모델, Google AI Studio, Cursor를 사용하여 몇 시간 만에 블로그 웹사이트를 만들어보세요. 최근 Google에 합류한 @fofrAI는 Gemini 3 Pro 모델과 Google AI Studio, Cursor를 단계적, 반복적으로 사용하여 단 몇 시간 만에 개인 블로그 "fofr"을 처음부터 만드는 전체 과정을 공유했습니다. 개발 프로세스는 반복적인 프롬프트 기반 개발을 채택하여 단계적으로 진행됩니다. 1. AI Studio 프로토타이핑: Google AI Studio의 React 프레임워크를 사용하여 상세한 힌트가 포함된 블로그 프로토타입을 생성했습니다. 초기 힌트는 "아름다운 타이포그래피, 중앙 정렬 레이아웃, 이상적인 줄 길이"를 강조하고 이미지, 비디오, 생성된 미디어, 코드 블록, 힌트 카드를 지원하는 구성 요소를 명시했습니다. 이후 수정 과정에서는 "몬스테라 테마"(Merriweather 헤딩 글꼴과 Inter 본문 글꼴을 사용하여 따뜻하고 종이 같은 질감)를 추가하고 홈페이지에 최신 게시물을 표시했습니다. 디자인은 모바일 우선(최대 너비 3xl)으로 진행되었으며, 코드는 로컬 개발을 위해 내보내기되었습니다. 2. 커서 개선 및 기능 확장: 코드를 GitHub 저장소에 다운로드하고, Cursor를 사용하여 종속성을 설치한 후 로컬에서 실행합니다. 다중 페이지 라우팅(react-router-dom), 마크다운 파싱(react-markdown에서 사용자 정의 컴포넌트 처리)을 추가하고, 샘플 콘텐츠를 저장할 `posts` 디렉터리를 생성합니다. 주요 개선 사항은 다음과 같습니다. • 미디어 구성 요소: MediaCard는 이미지/비디오 표시, 즉각적인 복사, 전체 화면 보기 및 다운로드를 지원합니다. 라이트박스 모달을 통해 여러 이미지나 여러 단계의 프롬프트 반복을 통해 좌우로 탐색할 수 있습니다. • 대화형 요소: 결과물을 비교하기 위한 CompareSlider, 프로젝트 사례를 강조하기 위한 PromptCard. Gemini는 피드백으로 스크린샷을 제공하여 시각적 버그를 수정하고 원활한 구성 요소 통합을 보장할 수 있습니다. 3. 코드 품질 및 배포 최적화: 자동 코드 검사를 위해 ESLint 플러그인과 GitHub 워크플로가 도입되었습니다. Vercel에서 호스팅되며, 애셋은 Cloudflare R2에 저장됩니다. Vercel OG 패키지를 사용하여 Open Graph 이미지를 생성하려는 초기 시도는 실패했습니다. 대신 satori 스크립트를 사용한 정적 생성 방식을 사용했습니다. 파비콘은 이모티콘 아이콘으로 간소화되었습니다. 표지 이미지는 블로그 마크다운과 스크린샷을 기반으로 Nano Banana Pro 모델을 사용하여 생성되었습니다. 사용된 기술 및 도구: 핵심 AI 모델: Gemini 3 Pro(AI Studio 프로토타입 제작, 커서 코드 생성/디버깅). 프런트엔드 스택: React 18+, TypeScript, Tailwind CSS, lucide-react 아이콘 라이브러리. • 지원 도구: react-markdown(구문 분석), Vercel(배포), Cloudflare R2(저장), ESLint(품질 관리). 과제와 해결책: 여러 페이지로 구성된 탐색 제한: AI Studio는 복잡한 경로에 적합하지 않으므로 먼저 단일 페이지를 디자인한 다음 수동으로 구현했습니다. • 복잡한 코드: AI가 생성한 코드는 중복되기 쉽기 때문에 이를 자동으로 수정하기 위해 린터가 일찍 도입되었습니다. • 동적 이미지 생성: Open Graph는 가장 시간이 많이 걸리는 방법이며, 정적 솔루션은 여러 번 반복한 후 간소화됩니다. • 시각적 디버깅: 효율적인 솔루션을 위해 스크린샷과 AI 프롬프트를 활용하므로 수동 코딩이 필요 없습니다. 원본 텍스트를 읽어보세요
