BLOG
바이브 코딩
이야기
디자이너를 위한 바이브 코딩 팁, AI 도구 활용법, 사이드 프로젝트 이야기를 나눕니다.
디자이너의 첫 바이브 코딩
코딩 경험 없는 디자이너를 위한 바이브 코딩 입문 시리즈
5편의 글
바이브 코딩이 뭔데? — 디자이너가 코딩을 배우는 새로운 방법
AI와 대화하면서 코드를 만드는 바이브 코딩. 왜 디자이너에게 특히 잘 맞는지, 기존 코딩 학습과 뭐가 다른지 정리했어요.
HTML, CSS, JavaScript — AI와 함께 처음부터 이해하기
웹을 이루는 세 가지 언어, 외울 필요 없어요. AI에게 물어보면서 패턴을 익히는 방법을 알려드려요.
프롬프트의 기술 — AI에게 잘 부탁하는 법
같은 AI인데 어떤 사람은 멋진 결과를, 어떤 사람은 엉뚱한 결과를 받아요. 차이는 프롬프트예요.
포트폴리오 사이트 — AI와 함께 직접 만들기
디자이너에게 포트폴리오는 명함이에요. AI와 함께 직접 코드로 만들어보는 실전 가이드.
배포까지 — Vercel로 세상에 공개하는 법
만든 사이트를 세상에 공개하는 마지막 단계. Vercel로 무료 배포하고, 내 도메인까지 연결하는 법.
사이드프로젝트 생존기
실제로 만들면서 배우는 과정을 담은 실전 시리즈
5편의 글
디자이너도 만들 수 있다! 바이브 코딩으로 시작하는 사이드프로젝트 첫걸음
코딩 몰라도 괜찮아요! AI와 함께하는 바이브 코딩으로 디자이너가 실제로 만들 수 있는 현실적인 사이드프로젝트 5가지를 소개하고, 아이디어를 구체화하는 실전 방법을 알려드려요.
기획서 없어도 괜찮아! AI와 함께 프로젝트 구조 설계하고 Next.js 초기 세팅까지
완벽한 기획서가 없어도 시작할 수 있어요. AI에게 아이디어를 설명하고 함께 프로젝트 구조를 잡아가며 Next.js + Tailwind 개발환경을 만드는 실전 과정을 담았습니다.
Figma → 실제 컴포넌트까지! 디자이너를 위한 실전 코드 변환 워크플로우
기획과 초기 세팅이 끝났다면 이제 진짜 시작이에요. Figma 디자인을 AI와 함께 실제 동작하는 컴포넌트로 변환하는 실전 워크플로우를 공유해요.
막막한 에러 화면, 이제 무서워하지 마세요! 디자이너를 위한 실전 트러블슈팅 가이드
코딩 중 마주치는 빨간 에러 메시지, 더 이상 포기의 신호가 아닙니다. 에러 읽는 법부터 AI 디버깅 요청, 구글링 노하우까지 - 막힐 때마다 써먹는 생존 키트를 공개해요.
드디어 세상 밖으로! 내가 만든 사이드프로젝트를 완성하고 공유하는 실전 가이드
코딩까지 마쳤다면 이제 마지막 단계예요. 배포부터 도메인 연결, SNS 공유까지 내 프로젝트를 세상에 선보이고 소중한 피드백을 받는 모든 과정을 담았어요.
AI 코딩 도구 해부학
IDE, AI 모델, 에이전트의 차이를 명확하게. 디자이너 관점에서 각 도구의 성격과 조합법을 해부합니다.
5편의 글
IDE 비교 — VS Code, Cursor, Windsurf, Zed 뭐가 다를까?
IDE는 코드를 쓰는 "작업 공간"이에요. 같은 역할인데 왜 이렇게 많은지, 디자이너에게 뭐가 맞는지 정리했어요.
AI 모델 비교 — Claude, GPT, Gemini 각각의 코딩 성격
같은 질문을 해도 AI마다 답이 달라요. Claude, GPT, Gemini의 코딩 성격을 비교해봤어요.
AI 에이전트 비교 — Claude Code, Codex, Jules, Gemini CLI
자동완성이 아니라 "알아서 코딩"하는 AI 에이전트. 각각 어떻게 다른지 비교해봤어요.
Copilot vs 에이전트 — 자동완성과 자율 코딩의 차이
둘 다 AI가 코딩을 도와주는 건데, 뭐가 다른 걸까? 개념부터 실제 사용까지 비교해봤어요.
나한테 맞는 조합 찾기 — IDE × 모델 × 에이전트 가이드
IDE, AI 모델, 에이전트를 어떻게 조합해야 할까? 상황별 추천 세트를 정리했어요.