Logo
VIBE CODING PORTFOLIO


상상을 현실로
만드는 새로운 방식

AI와 함께라면 누구나 프로그래머가 될 수 있습니다.
이제 기술적 장벽보다 중요한 것은,
당신의 상상을 시작할 용기입니다.

Projects

상상이 현실이 된 순간들

AI와의 협업을 통해 기획부터 구현까지 완성한,
작지만 의미 있는 디지털 프로젝트들을 소개합니다.
‘1주 1사이트’ 프로젝트를 지속적으로 진행 중입니다.

2026 만다라트 목표 관리

grid_view

오타니 쇼헤이가 사용해 유명해진 9x9 그리드 방식의 목표 달성 도구로, 핵심 목표에서 세부 실천 과제로 확장되는 구조적 계획표를 제공합니다. 직관적인 그리드 UI를 통해 사용자가 한눈에 자신의 목표 체계를 파악하고 관리할 수 있습니다.

Next.js GitHub Supabase
자세히 보기

FunLifeFlow (마인드맵)

account_tree

React Flow 기반의 무한 캔버스 마인드맵으로, 아이디어를 자유롭게 연결하고 확장할 수 있는 유연한 사고 도구입니다. 노드 간의 드래그 앤 드롭 연결, 자동 레이아웃 정렬 등 역동적인 상호작용 기능을 갖추고 있습니다.

Next.js React Flow Vercel
자세히 보기

Kibokibo (웹 리듬 게임)

music_note

웹 브라우저에서 바로 즐길 수 있는 고품질 리듬 액션 게임으로, 음악과 일치하는 정확한 타격감 구현에 집중했습니다. 복잡한 설치 없이 바로 플레이 가능하며, 사용자가 게임 난이도와 환경을 커스터마이징할 수 있습니다.

Web Audio Supabase Vercel
자세히 보기

My Schedule (자기관리)

calendar_month

매일의 루틴 체크부터 프로젝트 WBS 관리까지 하나로 통합된 생산성 플랫폼입니다. 칸반 보드, 뽀모도로 타이머, 비전 보드 등 다양한 도구로 목표 달성을 체계적으로 지원합니다.

Next.js Zustand Tailwind
자세히 보기

상세페이지 자동화

auto_awesome

Google Opal과 Nano Banana를 활용해 상품 정보 입력만으로 고퀄리티 상세페이지를 자동 생성하는 AI 솔루션입니다.

Google Opal Nano Banana Automation
자세히 보기

양도소득세 계산기

calculate

2024년 최신 세율을 반영한 부동산 양도소득세 계산기입니다. 복잡한 세금 계산을 쉽고 간편하게 해결하세요.

Next.js Tailwind Calculator
계산기 열기

🎰 LottoMap (로또맵)

map

대한민국 로또 6/45 당첨 데이터 기반 종합 분석 플랫폼. 지도 기반 명당 찾기, 세금 계산, AI 추천, 자동화된 프리미엄 콘텐츠를 제공합니다.

Next.js Supabase Gemini AI
자세히 보기
Workflow

제작 과정

1

아이디어 구상

핵심 가치 및 요구사항 정의

2

프롬프트 설계

정교한 아키텍처 및 로직 설계

3

AI 생성 및 구현

실시간 코드 생성 및 프로토타이핑

4

반복 최적화

피드백 반영 및 UX/UI 고도화

5

프로덕트 배포

실제 환경 런칭 및 운영

Infrastructure

기술 및 개발 환경

혁신적인 아이디어를 실현하기 위해 최첨단 AI 모델과 강력한 개발 도구를 활용합니다.

psychology

AI Partners

  • auto_awesome
    Gemini 3 Pro Multimodal Reasoning & Ideation
  • smart_toy
    Claude Opus 4.5 Complex Logic & Code Generation
  • auto_graph
    Google Opal (w/ n8n, Make) Process Automation Agent
  • bolt
    Nano Banana Ultra-fast Rendering Engine
  • palette
    Google Stitch AI-Powered UI Design Tool
terminal

Dev Environment

  • rocket_launch
    Google Antigravity Advanced Agentic Coding Environment
  • cloud_circle
    Vercel & Supabase Serverless Infrastructure
  • code
    GitHub Version Control & Collaboration
layers

Tech Stack

Next.js 14 Tailwind CSS React Flow Zustand Web Audio API Canvas API
Glossary

주요 용어 정리

Vibe Coding과 현대 기술 생태계의 주요 개념들을 정리합니다.

Vibe Coding

복잡한 코드를 몰라도 괜찮습니다. AI(인공지능)와 대화하듯이 소통하며 내가 상상한 아이디어를 실제 프로그램으로 만들어내는 새로운 창작 방식입니다.

Gemini / Claude 무료 가능

"똑똑한 AI 비서"
사람처럼 생각하고 글을 쓰거나 코드를 짜주는 인공지능입니다. 기획부터 개발까지 모든 과정에서 도움을 줍니다. 무료로도 충분히 뛰어난 성능을 경험할 수 있습니다.

"전문 AI 개발자"
단순히 코드를 짜주는 것을 넘어, 컴퓨터를 직접 조작하고 파일을 만들며 실제 개발자처럼 일하는 고급 AI 에이전트입니다.

Serverless 관리 불필요

"서버 없는 서버"
실제로 서버가 없는 게 아니라, 복잡한 서버 관리를 사용자가 전혀 신경 쓸 필요가 없다는 뜻입니다. 마치 발전소를 직접 운영하지 않고 콘센트만 꽂아 전기를 쓰듯, 인프라 걱정 없이 오직 서비스 개발에만 집중할 수 있는 가장 효율적인 방식입니다.

Vercel 무료 배포

"인터넷 집짓기"
내 컴퓨터에만 있던 웹사이트를 전 세계 사람들이 들어올 수 있도록 인터넷 상에 올려주는 곳입니다. 개인 프로젝트는 평생 무료로 이용할 수 있습니다.

Supabase 무료 DB

"데이터 창고"
회원가입 정보나 저장된 글, 게임 점수 같은 데이터를 안전하게 보관해주는 창고입니다. 일정 규모까지는 무료로 제공됩니다.

GitHub 무료 플랫폼

"코드 타임머신"
내가 작성한 코드의 모든 변경 내역을 저장하고, 언제든 원하는 시점으로 되돌릴 수 있는 버전 관리 플랫폼입니다. 전 세계 개발자들과 협업하고 코드를 공유하는 공간이기도 합니다.

Next.js / Tailwind 무료 도구

"레고 블럭과 꾸미기 도구"
웹사이트를 튼튼하고 예쁘게 만들기 위해 전 세계 개발자들이 무료로 공유하는 최고 수준의 조립 도구들입니다.

React Flow 무료 도구

"이어 그리기 도구"
마인드맵처럼 화면에 상자를 만들고 선으로 연결하는 기능을, 복잡한 수학 공식 없이도 쉽게 구현할 수 있게 도와줍니다.

Google Opal 자동화 도구

"일 잘하는 AI 직원"
n8n, Make 같은 자동화 툴과 결합하여, 사람이 하던 반복 업무(문서 작성, 이메일 발송 등)를 알아서 처리해주는 스마트 에이전트입니다.

Nano Banana 무료 가능

"초고속 그림 작가"
Gemini의 이미지 생성 기능을 통해 사용할 수 있는 차세대 렌더링 엔진입니다. 복잡한 디자인 작업도 순식간에 처리해냅니다.

Zustand 무료 도구

"스마트 메모장"
웹사이트가 사용자의 로그인 상태나 테마 설정 등을 까먹지 않고 잘 기억하고 있도록 도와주는 정리 도구입니다.

Web Audio / Canvas 기본 탑재

"웹 브라우저의 초능력"
별도의 프로그램 설치 없이도, 인터넷 창(크롬/엣지 등) 그 자체에서 고품질 음악을 연주하거나 화려한 게임 그래픽을 그려내는 기술입니다.

Google Stitch 무료 도구

"AI UI 디자이너"
텍스트 프롬프트만으로 모바일 및 웹 애플리케이션의 UI를 자동으로 생성해주는 Google의 AI 기반 디자인 도구입니다. 디자인 아이디어를 빠르고 쉽게 시각화할 수 있습니다.

Why Vibe Coding?

전통적인 개발 방식보다 더 빠르게, 아이디어에서 MVP까지 단 며칠 만에 구현합니다. 1인 메이커를 위한 가장 혁신적이고 효율적인 선택입니다.

Speed

압도적인 속도

Low Cost

낮은 비용

No Barrier

기술 장벽 해소

Solo Run

1인 창업 최적화