클로드 코드 에이전트 & 스킬, 자동 세팅 파일 공개!
클로드 코드 에이전트 & 스킬, 자동 세팅 파일 공개!
안녕하세요 시몬입니다! 지난 AI 하네스 웨비나에서 약속드린 에이전트, 스킬 자동 설정 파일 링크와 사용법을 안내드려요! 웨비나에서 직접 시연해 드리긴 했지만, 막상 혼자 세팅하려면 여전히 어려운 분들이 많을 거라 생각합니다. 그런 분들을 위해 준비했습니다. 원래 모바일과 웹 범용으로 쓸 수 있게 만들었었는데, 검증 범위가 넓어지다 보니 웹 전용으로 스코프를 줄여서 정리했습니다. 프로젝트에 넣고 클로드에게 이 파일을 읽고 설정해달라고 하면 끝납니다. 가이드 파일이 뭔가요? 파일 이름은 claude-web-agent-setting-guide.md입니다. 에이전트와 스킬 세팅을 어떤 순서로, 어떻게 하라고 단계별 지침을 담은 문서입니다. 사용법은 간단해요. 새로운 폴더를 만듭니다 VS Code에서 해당 폴더를 엽니다 가이드 파일을 폴더에 넣습니다 클로드 코드를 실행합니다 @claude-web-agent-setting-guide.md 로 파일을 멘션하면서 세팅을 진행해달라고 합니다 AI가 질문하면 답변합니다 전체 세팅 시간은 약 10분 정도 걸려요. 기술 스택은 Next.js (App Router) + Tailwind CSS + TypeScript로 고정되어 있습니다. 웹 프로젝트에 집중해서 검증된 구성을 바로 쓸 수 있게 만들었습니다. 세팅이 끝나면 프로젝트에 아래와 같은 구성이 완료됩니다. 에이전트 4개 (project-manager, designer, frontend-dev, reviewer) 파이프라인 스킬 (에이전트 4개를 순서대로 조율하는 오케스트레이터) 디자인 시스템 + 디자인 토큰 파일 (CSS 변수 포함) 프로젝트 지시 파일 (CLAUDE.md) 기술 스택에 맞는 스킬 설치까지 Step 0~7, 어떻게 진행되나요? 파일 하나를 멘션하면 총 8단계가 순서대로 진행됩니다. Step 0: 경로 변수 설정 (에이전트, 스킬, 문서 저장 위치 확인) Step 1: Next.js 프로젝트 초기화 (create-next-app + 빌드 확인) Step 2: 서비스 정의 (서비스명, 타겟, 핵심 기능을 대화형으로 수집) Step 3: 브랜드 아이덴티티 + 디자인 시스템 (키컬러, 토큰, CSS 변수까지) Step 4: 스킬 설치 (find-skills, skill-creator, frontend-design + 스택별 추천) Step 5: 에이전트 4개 생성 (PM, Designer, Frontend-dev, Reviewer) Step 6: 파이프라인 스킬 생성 (에이전트 팀을 조율하는 오케스트레이터) Step 7: 프로젝트 지시 파일 생성 (CLAUDE.md) 설치 후 어떻게 작동하나요? 세팅이 끝나면 "랜딩페이지 만들어줘"처럼 태스크를 요청하면 됩니다. 파이프라인 스킬이 자동으로 실행되면서 아래 순서로 진행됩니다. PM이 기능 명세를 작성합니다 명세를 확인하고 승인합니다 디자이너가 화면을 설계합니다 설계를 확인하고 승인합니다 프론트엔드 개발자가 코드를 구현합니다 리뷰어가 코드를 검토합니다 각 단계 사이에 승인 게이트가 있어서 결과를 확인하고 수정을 요청할 수 있습니다. 현재 디자이너 에이전트는 텍스트 기반의 디자인 계획만 작성합니다. 여기에 Figma MCP나 Pencil MCP를 연결하면 실제 디자인 결과물을 만들고 승인받는 워크플로우로 확장할 수 있습니다. Pencil MCP 사용법은 지난 웨비나 영상에서 다뤘으니 참고하세요. 디자인 시스템 관련 설정도 포함 바이브 코딩으로 만든 앱들이 디자인 시스템 관련 세팅 없이 바로 개발에 들어가는 경우가 많습니다. 그래서 아예 과정 중에 디자인 관련 세팅이 포함되도록 구성했습니다. 키컬러, 브랜드 느낌, 테마 모드를 하나씩 결정하면 Tailwind v4 기반의 디자인 토큰 파일과 CSS 변수가 자동으로 생성됩니다. 뜯어보면서 배우셔도 좋습니다 클로드 코드 서브에이전트 구성을 처음 하려는 분들이 제일 많이 하는 말이 "어디서부터 시작하냐"입니다. 설명을 드려도 막연하고, 예시 코드를 드려도 어떻게 조합해야 할지 모르는 경우가 많습니다. 가이드 파일 자체를 읽어보면 에이전트 파일, 스킬 파일, 프로젝트 지시 파일이 어떤 역할을 하고 어떻게 연결되는지 감을 잡을 수 있습니다. 실제로 돌려보지 않더라도 구조를 이해하는 데 도움이 됩니다. 주의사항 에이전트를 활용한 작업은 토큰 소모가 많습니다. Pro 플랜 사용자분들은 빠르게 리밋에 도달할 수 있으니 참고하세요. 클로드 코드 세팅, 이제 막막하지 않습니다 클로드 코드 사용법을 배우는 과정에서 에이전트 팀 구성은 진입 장벽처럼 느껴지죠. 실제로 해보면 생각보다 단순합니다. 다만 처음엔 어떤 구조로 잡아야 하는지 감이 없을 뿐입니다. 이 가이드 파일이 그 첫 감을 잡는 데 도움이 됐으면 합니다. 아래 이메일을 입력하시면 자료를 보내드려요!
710명이 신청한 AI 하네스 웨비나 후기 & 자료 안내
710명이 신청한 AI 하네스 웨비나 후기 & 자료 안내
710명. 웨비나 신청자 수를 확인했을 때 이 숫자가 맞나 싶었는데 그 만큼 요즘 AI에 대한 관심이 정말 많다는 게 느껴졌습니다. 웨비나 성과와 영상, 그리고 자료를 공유드려요! 710명이 신청한 특강 3월 26일 저녁, "클로드 코드 에이전트 & 스킬 세팅법(AI 하네스)" 무료 웨비나를 진행했습니다. 프리랜서, 디자이너, 서비스기획자, 자영업자, 기술 총괄까지 다양한 분들이 오셨고 다들 AI를 더 잘 쓰고 싶다는 마음으로 3시간이나 자리를 지켜주셨어요. 웨비나 종료 후 후기를 받았는데, 무엇이 가장 도움이 되었는지 질문에 대한 답변 몇 가지를 가져왔습니다. "전체 프로세스가 어떻게 되는지, 파일 및 폴더 구조가 어떻게 되는지, 스킬·에이전트 등의 역할 및 특징에 대한 설명이요!" (퍼블리싱/UIUX 디자이너, 5년차) "밑바닥부터 AI 하네스를 만드는 부분" (기술 총괄, 20년차) "팀을 꾸려서 프로젝트를 진행한다는 것에 영감을 많이 받았어요." (디자이너, 10년차) "버벅임마저 초보인 제겐 복기할 수 있는 시간이라 그것마저 좋았어요. ADHD라 긴 영상 못 보는데 이 악물고 다 봄" (디자이너, 10년차) "정말 디테일하게 알려주신 점이 좋았습니다!" (프로덕트 디자이너, 3년차) 에이전트 설계인 것 같아요. 그리고 스킬을 계속 넣어가면서 디자인 에이전트를 확장시켜가는게 너무 흥미로웠어요. 정말 도움 많이되었습니다. 만수무강하세요 (프로덕트 디자이너, 3년차) 후기는 항상 콘텐츠 만들 때 응원과 도움이 많이 됩니다! 특히 ADHD 후기는 세 번 읽었어요 🥲 AI 하네스, 뭘 배웠냐면 이번 특강의 핵심은 "AI가 내 말을 잘 들을 수 있도록 환경을 설정하는 것"이었습니다. AI 하네스는 말의 고삐처럼, AI를 내가 원하는 방향으로 움직이게 하기 위한 구조적인 세팅법입니다. 핵심 개념은 네 가지입니다. 에이전트 분리 - 역할별로 AI를 나눠서 각자 할 일을 명확히 한다 스킬 파일 - AI가 특정 작업을 일관되게 수행하도록 참조하는 지식 파일 MCP 서버 - AI가 외부 도구(API, 검색 등)에 접근할 수 있도록 연결하는 프로토콜 CLAUDE.md - AI에게 프로젝트 맥락과 규칙을 알려주는 설정 파일 개념 설명 후에는 어떻게 세팅을 하는지 워크플로우를 안내하고, 백지 상태에서 이걸 직접 만드는 과정을 라이브로 시연했습니다. 웹사이트를 만드는 에이전트팀, 그리고 글을쓰고 이미지를 만드는 콘텐츠 프로덕션 팀 두 개를 세팅하는 것이 목표였으나 꼭 웨비나 할 때마다 AI가 말을 참 안 들어서 결국 웹사이트 에이전트팀 하나를 제대로 보여드리는 것에 집중했습니다. 🥲 참고로 웹사이트, 모바일 제작 에이전트와 스킬 세팅을 도와주는 가이드 파일도 함께 드리겠다고 했었는데요. 사용법 없이 파일만 드리면 활용이 어려울 것 같아서, 다음 글에서 사용법과 함께 안내드리겠습니다! 다음 웨비나 예정 일정은 아직 미정이지만 조만간 콘텐츠 프로덕션팀도 웨비나를 준비해보려고 합니다. 이번에 710명의 신청자를 보니 요즘 AI에 대한 관심이 정말 뜨거워졌다는게 느껴집니다. 제가 도울 수 있는 것들이 더 있다는 생각이 들어서 열심히 도와보겠습니다. 웨비나 소식은 항상 바입빌딩클럽 톡방에 가장 먼저 공유됩니다. 카카오톡 오픈채팅 입장하기 입장하셔서 바이브코딩 관련 다양한 질문과 정보를 공유해주세요! 자료 공유 아래 뉴스레터를 구독하시면 이메일로 자료 링크가 자동 전송됩니다!
클로드 코드, AI 에이전트와 스킬 설정법 무료 웨비나 + 가이드 파일 제공 (3/26)
클로드 코드, AI 에이전트와 스킬 설정법 무료 웨비나 + 가이드 파일 제공 (3/26)
아직 AI 에게 “이것 해줘“만 하고 있다면 누군가는 AI 에이전트 군단을 만들어 업무의 80%를 자동화한다는데, 나는 아직 클로드나 GPT에게 "이것 해줘", "저것 해줘" 하고 있나요? AI 에이전트와 스킬, 용어는 들어봤는데 어디서부터 시작해야 할지 막막한 분들이 많습니다. 앞으로는 나를 위한 에이전트 군단을 만드는 능력이 있는 사람과 없는 사람의 격차가 엄청나게 벌어질 겁니다. 에이전트와 스킬, 왜 알아야 하나요? 이 에이전트와 스킬을 세팅하는 환경 전체를 AI Harness(하네스)라고 부릅니다. AI 모델이 똑똑한 두뇌라면, 하네스는 그 두뇌가 실제로 일할 수 있게 만드는 장비 세트입니다. 앤트로픽 엔지니어링 블로그에서도 "최첨단 모델이라도 적절한 하네스 없이는 제대로 된 결과를 내지 못한다"고 강조합니다. 문제는 모델의 능력이 아니라, 하네스를 어떻게 설계하느냐에 달려 있다는 것입니다. 만약 에이전트, 스킬이 무엇인지 얘기는 들어봤지만 헷갈렸거나, AI가 주는 결과물이 다 비슷비슷한 거 아니야? 라고 생각하셨던 분이라면 분명 도움이 될 것입니다. 이 웨비나에서 다루는 것 이 웨비나에서 하네스의 구성 요소인 CLAUDE.md, 서브에이전트, 스킬이 각각 어떤 역할을 하고, 서로 어떻게 관계되어 있는지 개념을 짚어봅니다. 그리고 나에게 꼭 맞는 에이전트를 어떻게 세팅할 수 있는지, 백지 상태에서부터 보여드립니다. CLAUDE.md, 에이전트, 스킬의 차이와 관계 : 기본 틀 잡기. 웹 사이트 에이전트 팀 & 스킬 생성 및 실행 라이브 데모 : 아무 지식 없이도 시작할 수 있는 방법 시연. 결과 확인 및 에이전트와 스킬 고도화 : 내가 원하는 결과물을 내는 팀으로 개선하는 방법 시연. 직접 만든 컨텐츠 제작 에이전트 팀 시연 : MCP와 API를 이용해 개발뿐만 아니라 다양한 업무에 적용할 수 있는 가능성을 보여드립니다. 신청자 혜택: 웨비나 영상 다시보기 + 웨비나 PDF 파일 + "에이전트 팀 세팅 도우미" MD 파일 웨비나 영상은 유튜브에 업로드 예정이지만 신청자분들께만 공개됩니다! 신청자 분들께는 웨비나 종료 후 영상 다시보기 링크와 PDF 자료, 그리고 제가 직접 구성한 웹사이트, 모바일앱 에이전트 팀 세팅 도우미 MD 파일을 이메일로 보내드려요! 이 파일을 새로운 프로젝트에 넣은 뒤 클로드에게 해당 파일의 단계에 따라 에이전트와 스킬을 세팅해달라고 하면 클로드가 단계별로 필요한 질문들을 하며 에이전트들과 스킬을 자동으로 세팅해줍니다. 프로젝트 유형, 팀 구성, 개발 스택을 물어보고, 그에 맞는 에이전트 구조를 알아서 잡아줍니다. 웨비나에서 배운 내용을 바로 내 프로젝트에 적용하고 싶을 때 꺼내 쓸 수 있는 도구입니다. 이 설정 또한 부족한 점이 있을 수 있지만 에이전트와 스킬을 구성하는 방법에 대한 감을 잡을 수 있는 좋은 시작점이 될 것입니다. 웨비나 정보 일시: 2026년 3월 26일(목) 저녁 8시 소요시간: 약 1.5~2시간 플랫폼: Google Meet (이메일과 휴대폰 번호로 링크 발송) 대상: 바이브코딩 입문자, 경험자 모두 링크는 당일 바입빌딩클럽 톡방에 공유됩니다! 웨비나 자료 신청 웨비나 자료는 아래 아티클을 참고해주세요! https://www.vibebuild.club/articles/ai-harness-review
AI로 SEO 최적화하기 : PageSpeed 100점!
AI로 SEO 최적화하기 : PageSpeed 100점!
웹사이트를 만들었다면, 그다음은 사람들이 찾아오게 해야 하지 않을까요? 멋진 사이트를 만들었는데, 정작 아무도 들어오지 않는다면 아쉽죠. 이때 필요한 것이 SEO와 AEO입니다. SEO(Search Engine Optimization)는 구글 같은 검색엔진에서 내 사이트가 잘 노출되도록 최적화하는 것입니다. AEO(Answer Engine Optimization)는 ChatGPT, Perplexity 같은 AI 검색엔진이 내 콘텐츠를 답변 소스로 인용하도록 최적화하는 거예요. 요즘은 검색 자체가 AI로 넘어가고 있으니, 둘 다 신경 써야 하는데 SEO가 기본이지요. 콘텐츠를 계속 발행할 계획이라면 적절한 키워드를 타겟한 좋은 글을 쓰는 것도 물론 중요하지만, 그것만으로는 부족합니다. 모바일 환경에서도 레이아웃이 잘 정리되어있고, 글자들도 가독성이 높고, 페이지 퍼포먼스 측면에서도 좋은 점수를 받아야 구글이나 AI가 "이 사이트는 잘 관리되고 있는 좋은 웹사이트"라고 평가하거든요. 느리고, 접근성이 떨어지고, 기본적인 웹 표준도 안 지키는 사이트의 콘텐츠는 좋은 점수를 받지 못합니다. 근데 SEO, AEO라고 하면 막막하게 느껴지는 분들이 많을 거예요. 조금 검색을 해보셨다면 메타태그, 구조화 데이터, canonical 태그... 용어부터 낯설죠. 저도 그랬습니다. 누가 필요한 것만 진단해주고 고쳐주면 좋을텐데 싶은데, AI와 함께 아주 쉽게 기본 사항들을 최적화 할 수 있는 방법이 있습니다. 제 블로그의 SEO 점수를 모두 80~100점으로 올렸는데 어떻게 했는지 따라해보실 수 있도록 과정을 그대로 공유합니다. 내 사이트 상태부터 확인하기 제일 먼저 할 일은 현재 상태를 파악하는 겁니다. PageSpeed Insights에 내 사이트 주소를 넣어보세요. 4가지 점수가 나옵니다: Performance - 페이지 로딩 속도 Accessibility - 접근성 (스크린리더, 키보드 내비게이션 등) Best Practices - 웹 표준 준수 SEO - 검색엔진 최적화 시작 전에 캡쳐해둔다는것을 깜빡했는데, 저는 처음에 SEO 77점, Accessibility 89점, Performance 54점이었습니다. 개선할 곳이 꽤 있었죠. AI 스킬 설치하기 Claude에서 SEO 감사를 잘 수행하려면 seo-audit 라는 SEO 전문 스킬을 활용하면 됩니다. 터미널에 아래 명령어를 입력해 설치합니다. npx skills add https://github.com/coreyhaines31/marketingskills --skill seo-audit 1단계: AI에게 진단 요청하기 seo-audit 스킬을 설치했다면 이제 AI에게 "내 사이트 SEO 진단해줘"라고 말하면 됩니다. 그럼 AI가 알아서 seo-audit 스킬을 사용해 전체 프로젝트 코드를 훑으며 문제를 찾아냅니다. 저는 이런 문제들이 발견됐습니다: 파일마다 도메인이 제각각이었습니다. 검색엔진 입장에서는 같은 사이트인지 헷갈릴 수밖에 없습니다. html lang 속성이 없었습니다. canonical 태그가 없었습니다. 일부 페이지에 메타태그 자체가 없었습니다. 등등, 그리고 이 외 몇 가지가 더 있었습니다. 만약 AI가 말하는 것들이 무엇인지 몰라도 괜찮습니다만, 해당 스킬이 SEO관련 지식들이 많이 있기 때문에 궁금한 것은 물어보면 좋습니다. 2단계: 진단 결과에 따라 수정 적용하기 진단이 끝나면 AI가 하나씩 수정해줍니다. 각자의 웹사이트 상황에 따라 진단 결과가 다를 것이기 때문에 모든 것을 다 다루기보다는 어떤 방식인지만 언급하고 넘어가도록 하겠습니다. 도메인 통일 : 모든 파일에서 도메인을 하나로 맞춥니다. 이건 단순해 보이지만, 코드베이스 전체를 뒤져야 해서 손으로 하면 빠뜨리기 쉽습니다. lang 속성 추가 : <html lang="ko"> 한 줄이면 됩니다. 검색엔진이 페이지 언어를 정확히 파악하는 데 필요합니다. canonical 태그 : canonical 태그는 "이 URL이 이 페이지의 정식 주소입니다"라고 검색엔진에 알려주는 겁니다. SNS 공유 시 ?utm_source=twitter 같은 파라미터가 붙으면 검색엔진은 다른 페이지로 볼 수 있어요. 이걸 방지하는 보험 같은 역할입니다. AI가 진단 결과를 알려주면서 동시에 개선 방안까지 함께 제안할 것입니다. 제안 내용을 읽어보고 큰 문제 없을것 같다 싶으면 "진행해줘" 라고 해주세요. 3단계: 배포하고 점수 확인하기 수정이 완료되면 배포하고, 다시 PageSpeed Insights를 돌려봅니다. 한 번에 100점이 나오지 않아도 괜찮습니다. 점수가 오른 것을 확인하고, 남은 문제를 AI에게 다시 물어보는 식으로 반복합니다. PageSpeed Insights는 SEO, Performance 외에도 Accessibility, Best Practices 항목이 있습니다. 스크롤을 내려보면 각 항목마다 어떤 문제가 있는지 구체적으로 보여주기 때문에, 결과 화면을 스크린샷으로 찍어서 클로드에게 전달하며 "어떻게 개선할 수 있는지 방법을 찾고 개선해줘"라고 요청해보세요. 항목별로 원인과 해결 방법을 알려주고, 바로 코드를 수정해줍니다. 저의 경우에는 접근성 항목에서 아이콘 버튼들에 적절한 이름이 설정되어있지않다고 하는군요. 이 부분을 캡쳐해서 AI에게 전달하고 해결해달라고 하면 개선사항에 반영해줍니다. 최종 결과 Performance: 54 → 97 Accessibility: 89 → 94 Best Practices: 77 → 96 SEO: 100 → 100 따라해보세요 웹사이트가 있다면 지금 바로 시작할 수 있습니다. PageSpeed Insights에 내 사이트 주소를 넣어 현재 점수를 확인하세요 SEO 전문 스킬을 설치하세요 AI에게 "내 사이트 SEO 감사해줘"라고 요청하세요 진단 결과를 하나씩 수정 적용하세요 배포 후 다시 점수를 확인하세요 반복하세요 SEO 최적화는 한 번에 끝나는 작업이 아닙니다. 하지만 AI와 함께라면 처음 시작이 훨씬 쉬워집니다. 복잡한 설정을 직접 외울 필요 없이, 진단하고 수정하는 사이클을 돌리면 됩니다. 이렇게 하나씩 AI를 활용해 내 브랜드의 완성도를 올려가세요.
바이브코딩, 디자이너 출신이 유리한 이유
바이브코딩, 디자이너 출신이 유리한 이유
바이브코딩, 디자이너 출신이 유리한 이유 1인 개발 수익 이야기를 찾아보면 디자이너 출신은 많지 않습니다. 아마 개발에 대한 진입장벽을 크게 느끼기 때문일 겁니다. 바이브코딩으로 코딩이 쉬워졌는데도, 여전히 "코딩"이라는 단어가 주는 어려움 때문인지 많은 디자이너들이 망설이고 있는 것 같습니다. 하지만 당신이 디자이너라면, 오히려 개발자보다 훨씬 좋은 결과물을 낼 수 있습니다. 왜 그런지 이야기해보겠습니다. 코딩은 이미 AI가 해결했습니다 바이브코딩이 등장하면서 판이 바뀌었습니다. Claude Code, Cursor 같은 AI 코딩 도구를 쓰면 코딩을 몰라도 앱을 만들 수 있습니다. 아이디어를 말로 설명하면 AI가 코드를 짜줍니다. 물론 코딩 지식이 전혀 필요 없는 건 아닙니다. 하지만 처음부터 다 알아야 하는 건 아니고, 만들어가면서 천천히 하나씩 배워가면 됩니다. 저는 11년 차 프로덕트 디자이너입니다. 웹 개발 경험은 어느 정도 있었지만 모바일 앱은 처음이었습니다. Claude Code로 iOS와 안드로이드 독서 기록 앱을 직접 만들어 양쪽 스토어에 출시했고, 지금도 계속 운영하고 있습니다. 구독 수익은 아직 크진 않지만 꾸준히 발생하고 있고, 계속 키워나가는 중입니다. "코딩을 못하면 개발을 못 한다"는 전제가 더 이상 유효하지 않습니다. 그렇다면 지금 1인 개발에서 진짜 어려운 건 뭘까요. 코딩이 아닙니다. "사람들이 실제로 쓰고 싶은 제품"을 만드는 것입니다. 아무리 기술적으로 완벽한 앱을 만들어도, 쓰기 불편하거나 첫인상이 별로면 아무도 다운로드하지 않습니다. 1인 개발자 수익은 기술력이 아니라 제품력에서 갈립니다. 바로 이 지점에서 디자이너의 UX 감각이 결정적인 차이를 만듭니다. 디자이너가 만들면 뭐가 다른가 비주얼: 디자이너의 손이 닿으면 다릅니다 비주얼이 좋은 앱은 누구나 좋아합니다. 앱스토어에서 처음 3장의 스크린샷을 보고 "이거 괜찮겠다"는 느낌이 다운로드를 좌우하죠. 요즘은 AI가 준수한 퀄리티의 이미지를 만들어주긴 합니다만 디자이너의 손이 닿은 결과물은 뭔가 다릅니다. AI는 "그럴듯한" 이미지를 만들 수 있지만, 의도를 가지고 사용자의 시선을 이끌고 브랜드의 톤을 일관되게 유지하는 건 디자이너만 할 수 있는 일입니다. 모든 디자이너가 그림을 잘 그리는 건 아니지만 보통 디자이너들은 눈이 높고, 좋은 시각물이 뭔지 알죠. 직접 못 만들면 AI에게 시키되, 디자이너의 높은 눈으로 디렉팅하면 됩니다. 의도를 가지고 AI가 낼 수 없는 것을 만들어낼 수 있는 것이 바로 디자이너죠. 사용성: 개발자와는 다른 감각이 있습니다 오랫동안 개발자들과 일해본 경험으로 말하자면, UX/UI에 관심이 많은 개발자가 만든 앱도 여전히 쓰기 불편한 경우가 꽤 있었습니다. 이유를 정확히 설명하기는 어렵지만, UX/UI 디자이너들은 시각적인 요소를 다루는 능력과 무언가가 결합되어 "사용하기 편리하고 직관적이다"라는 것에 대한 감각이 특별히 발달해 있는 것 같습니다. 온보딩 흐름, 버튼 위치, 정보 위계를 자연스럽게 설계하는 것. 사용자가 "어디를 눌러야 하지?"라고 고민하지 않게 만드는 것. 이런 게 몸에 배어 있습니다. 이 감각은 수년간 UX를 고민하면서 쌓인 것이라 AI가 쉽게 대체하지 못하는 부분입니다. 그리고 이 감각이 제품을 만들 때 정말 많은 영향을 끼칩니다. 같은 기능의 앱이라도 좋은 사용성 하나만으로 엄청난 경쟁력을 가진 앱이 될 수 있습니다. 사이드프로젝트 수익의 가장 큰 변수 중 하나가 이탈률인데, 앱을 설치했는데 쓰기 불편하면 삭제합니다. 쓰기 편하면 남습니다. 남아야 1인 개발자 수익이 생깁니다. 마케팅: 결국 시각물로 승부합니다 마케팅은 사실 개발이나 디자인과는 완전히 다른 방식으로 뇌를 써야 합니다. 사람들의 심리를 읽고, 관심을 사로잡는 스킬이 필요합니다. 하지만 결국 마케팅의 결과물은 시각물로 나옵니다. 랜딩페이지, SNS 홍보 이미지, 소개 영상 썸네일. 전부 눈으로 보는 것들입니다. 마케팅 감각은 키워야 하지만, 그 감각이 붙었을 때 누구보다 좋은 시각물로 좋은 성과를 낼 수 있는 사람이 바로 디자이너입니다. 바이브코딩, 디자이너에게 유리한 이유 디자이너 출신 1인 개발자가 노릴 수 있는 수익 모델은 크게 두 가지입니다. 1. 트래픽을 끌고 와서 광고로 벌기 무료 앱이나 웹서비스를 만들고 광고 수익을 받는 모델입니다. 물론 트래픽을 끌고 온다는 건 트렌드를 파악하는 능력, 기회를 포착하는 능력이 필요하고 이것도 훈련이 필요한 영역이긴 합니다만, 시행착오 끝에 얻은 이 능력에 원래 가지고 있는 비주얼 구현 능력이 더해지면 쉽게 차별화가 됩니다. 2. 좋은 사용성으로 유료 앱 만들기 앱스토어에서 유료 앱이나 인앱 결제로 직접 수익을 내는 모델입니다. 사용자가 "이 앱은 돈 낼 만하다"고 느끼려면 쓰기 편해야 합니다. 앞서 이야기한 디자이너의 UX 감각이 바로 여기서 빛을 발합니다. 좋은 사용성은 이탈을 줄이고, 이탈이 줄면 구독이 유지되고, 구독이 유지되면 수익이 쌓입니다. 두 가지 모델 모두 공통점이 있습니다. 디자이너의 강점이 수익과 직접 연결됩니다. 시각적 매력으로 사람을 끌고, 좋은 사용성으로 남게 하는 것. 전부 디자이너가 잘하는 일입니다. 코딩이라는 단어가 주는 심리적 장벽 때문에 시작하지 못하고 있다면, 거창하게 생각하지 마세요. Cursor, Claude Code, Google AI Studio 같은 도구들이 이미 많습니다. 작게라도 예쁜 계산기 하나부터 만들어보세요. AI가 만들어준 적당한 디자인을 보고 "이건 아닌데"라고 느끼는 순간이 올 겁니다. 그때 본인의 감각을 녹여서 직접 제품을 개선해보세요. 그 경험을 한 번 하고 나면 점점 생각하는 방식이 달라집니다. "나도 만들 수 있겠는데?"라는 감각이 생깁니다. 그동안 갈고닦은 디자인 능력이 가장 강력한 무기입니다. 1인 개발로 수익을 내기 위한 진짜 경쟁력은 이미 디자이너들 안에 있습니다. 디자이너라면 당장 개발 도구를 설치하고 나만의 것을 만들어보세요.
기획 · 디자인 · 수요조사 · 개발까지, 바이브코딩 A-Z 라이브 웨비나 영상 & PDF
기획 · 디자인 · 수요조사 · 개발까지, 바이브코딩 A-Z 라이브 웨비나 영상 & PDF
AI를 활용해 아이디에이션부터 PRD 작성, Stitch를 활용한 디자인과 제품 제작까지. 2시간동안 바이브 코딩으로 제품 제작 과정을 모두 담았습니다. 진행 순서 이번 웨비나는 약 2시간 동안 아래와 같은 순서로 진행되었어요 즉석에서 AI와 제품 아이디에이션 하나 선정해 AI와 PRD 작성 AI(Stitch)를 활용해 디자인 노션 AI를 활용한 랜딩페이지 제작 & 배포 (Tally와 Kutt 를 이용한 방문자 & 전환률 측정) 안티그래비티와 커서로 제품 제작 실습 비교 아래는 웨비나 스냅샷입니다! [기획 단계 설명] [AI와 아이디에이션] [AI로 디자인] [커서 & 안티그래비티로 제작] 물론 안티그래비티가 중간에 퍼져서 실제 제대로된 비교를 하진 못했지만 전체적인 AI와의 제품 개발 프로세스를 이해하시는데 충분하실겁니다! 아래 뉴스레터를 구독하시면 이메일로 자료 링크가 자동 전송됩니다!
바이브코딩, AI가 문제 해결을 못할 때 해결 방법 4가지
바이브코딩, AI가 문제 해결을 못할 때 해결 방법 4가지
AI가 문제 해결에 막혔을 때 빠져나오는 4가지 방법 바이브 코딩을 하다 보면 AI와 함께 문제를 해결하는 과정에서 가끔 막히는 순간이 있습니다. AI에게 에러를 알려주고 "해결해줘"라고 했는데, 몇 번의 대화를 주고받아도 같은 답변만 반복하거나 이미 해결한 문제를 또 해결하려고 하는 상황이죠. 이런 '챗바퀴' 상황에서 벗어나는 실전 팁을 공유합니다. 일반적인 문제 해결 패턴 우리가 AI와 작업하는 방식은 보통 이렇습니다. AI에게 무언가를 요청한다 AI가 작성한 코드에서 에러가 발생한다 에러를 멘션하며 "해결해줘"라고 한다 몇 번의 대화 끝에 해결된다 하지만 4번 단계가 계속 반복되면서 문제가 해결되지 않을 때가 있습니다. 이럴 때 아래 4가지 방법을 순서대로 시도해보세요. 방법 1: 모델을 바꿔본다 Claude Sonnet 4.5로 풀리지 않는 문제가 GPT-5 (High reasoning)로는 해결될 수 있습니다. 단, 지금 사용하는 모델보다 더 성능이 좋은 모델로 바꿔야 합니다. 어떤 모델이 더 좋은지는 벤치마크 리더보드를 참고하면 됩니다. 방법 2: 디버그 로그를 상세히 출력한다 AI가 문제 파악에 어려움을 겪고 있다면, 더 많은 정보를 제공해야 합니다. "(@AI가 헤매고 있는 부분을 멘션하면서) 여기 문제를 제대로 파악하기 위해서 상세한 로그를 남겨줘" AI가 로그 코드를 추가해주면, 다시 에러를 발생시켜 터미널에 찍힌 로그를 확인합니다. 그 로그를 드래그해서 멘션하면서 "이제 원인이 뭔지 다시 파악해줘"라고 요청하세요. 더 많은 정보를 바탕으로 AI가 문제를 정확히 파악할 가능성이 높아집니다. 방법 3: 문제 없는 부분을 명확히 알려준다 AI가 같은 답변을 반복하면서 문제를 해결하지 못한다면, 문제 범위를 좁혀줄 필요가 있습니다. 예를 들어, 구글 로그인 구현 중 문제가 발생했을 때 AI가 계속 SHA 코드 얘기만 한다면, 내가 이미 SHA 코드를 제대로 확인하고 Google Cloud Console에도 정확히 입력했다는 것을 스크린샷으로 보여주면서 이렇게 말할 수 있습니다. "이 부분은 스크린샷에서 보듯이 확실하게 설정했으니 절대 문제가 아니야. 다른 원인을 파악해줘" AI가 다른 곳에서 문제를 찾을 수 있도록 가이드를 주는 것입니다. 방법 4: 코드에 대해 질문한다 1-3번을 시도했는데도 문제가 계속된다면, 코드를 더 깊이 들여다볼 차례입니다. 예를 들어 구글 로그인 버튼을 눌렀을 때 앱이 죽는 현상이 반복된다면, 구글 로그인이 구현된 함수를 찾아 멘션하면서 이렇게 질문하세요. "(@코드를 멘션하며) 이 코드가 정확히 어떤 일을 하는지 초등학교 3학년도 이해할 수 있을 정도로 상세하게 설명해줘" AI가 코드를 한 줄 한 줄 쉽게 설명해주면, 그 과정에서 문제의 실마리를 찾을 수 있습니다. 큰 문제에 막혀 앞으로 나아가지 못하고 있다면, 위 방법들을 하나씩 차근차근 시도해보세요!