Section A · 1 / 4
클로더스 4기 특강

코드 한줄도 모르는 내가,
야 나두! 개발자

— 제이 / 디지우드 · 2026.4.15 —
Section A · 2 / 4

이거 진짜 한달도 안돼서 제가 만들었습니다.

저도 제가 만들어 놓고 신기합니다.

몽타주 앱 캡쳐 1
몽타주 앱 캡쳐 2
몽타주 앱 캡쳐 3
Section A · 3 / 4
발표자 소개

공대생에서 직장인, 1인 창업, 그리고 12명의 소기업까지

반지하 공방

38세, 반지하 공방 1인 창업

디지우드 전경

디지우드 × 디온웍스 · 12명 소기업

공대생 → 직장인 → 1인 창업자 → 지금의 저. 코드는 여전히 한 줄도 못 씁니다.
Section A · 4 / 4
바이브코딩하는 이유

"이거 매번 이렇게 밖에 못하나?"
그 한 줄에서 시작됐습니다.

— 내가 매일 불편했던 것 —

Section B · 1 / 9
SECTION B

내가 만든 서비스

4가지, 그리고 그 안의 이야기

Section B · 2 / 9
OVERVIEW

맘에 안들어서 내가 직접 만든 서비스

SERVICE 01
DGHR
HR 관리 앱 — 출퇴근, 연차, 연장근로 등 실시간 관리
SERVICE 02
사내MES
견적·주문·작업·배송 관리 — 종합 MES/POP 자체 구축
SERVICE 03
D-onworks.com
브랜드 페이지 — 비주얼 에디터 기반 자체 제작
SERVICE 04
몽타주 앱
안드로이드 AI 앱 — 꿈해몽, 타로, 사주
Section B · 3 / 9
SERVICE 01

DGHR

출퇴근은 엑셀, 연차는 카톡, 수당 계산은 계산기. 파편화된 인사 관리에 지쳤습니다.
시중 SaaS는 비싸고 복잡하기만 해서 — 우리 회사에 딱 맞는 HR 앱을 직접 만들었습니다.

엑셀로 인사관리하는 고통

모바일에서도 출퇴근·휴가·근태를 한손으로 관리.

DGHR 모바일 로그인
DGHR 모바일 메뉴
DGHR 모바일 휴가신청
DGHR 모바일 출퇴근

직원 출퇴근부터 KPI까지, 오늘 하루를 한눈에 보여주는 대시보드.

DGHR 대시보드

근태 관리 — 캘린더와 연장근로 수당까지 자동 계산.

DGHR 근태 관리

업무관리 — 팀별 업무 목록과 진행 상태를 실시간 관리.

DGHR 업무관리

업무자동화 — 블로그 글, 제안서, PPT까지 AI가 자동 생성.

DGHR 업무자동화

AI 블로그 생성 결과물 — 사진과 글이 자동으로 완성.

DGHR 블로그 생성

심지어 현장 작업자에게 알람까지 — 공장 TV에 오늘의 퇴근 안내를 자동 송출.

공장 현장 TV에 송출되는 DGHR 퇴근 알람
1 / 8
Section B · 4 / 9
SERVICE 02

사내MES

견적서, 주문 접수, 납기 지연 — 제조업 현장은 매일이 전쟁입니다.
오늘 물건이 나가야 하는데 다 됐는지도 모르고, 고객은 긴급이라고 난리.
수억 원짜리 MES를 도입해도 내 입맛에 맞추긴 하늘의 별따기 — 그래서 직접 만들었습니다.

제조업 현장의 혼란

대시보드 — 주문·작업·미출하·미수금을 한눈에 확인.

사내MES 대시보드

견적관리 — 견적서를 작성하고 PDF·엑셀로 바로 출력.

사내MES 견적관리

주문관리 — 거래처별 주문 현황과 진행 상태를 실시간 추적.

사내MES 주문관리

작업지시서 — 커팅 도면까지 포함된 현장용 지시서 자동 생성.

사내MES 작업지시서

POP 현장 모니터 — 공장 현장에서 작업 진행률을 실시간 표시.

사내MES POP 모니터
1 / 6
Section B · 5 / 9
SERVICE 03

D-onworks.com

브랜드 페이지 개발, 왜 남에게 맡기세요? 이제 하루면 만드는 세상입니다.
기획부터 디자인, 배포까지 — AI와 함께 직접 만든 우리 회사 브랜드 페이지.

D-onworks 메인

포트폴리오 — DGHR에서 블로그를 발행하면 이 사이트에 자동 등록.

D-onworks 포트폴리오

블로그 상세 — 글을 요약해서 잡지 형태로 자동 업로드.

D-onworks 블로그 상세

시공 갤러리 — 현장에서 업로드한 사진이 자동으로 연결.

D-onworks 시공 갤러리

관리자 비주얼 에디터 — 유지보수가 쉽도록 직접 편집 가능.

D-onworks 관리자 에디터
1 / 5
Section B · 6 / 9

그러다 보니 욕심이 생겼어요
"이거 앱도 만들어서 돈도 벌겠는데?"

Section B · 7 / 9
SERVICE 04

몽타주 앱

'꿈해몽' 앱이 거의 없는 걸 보고 — 아, 이거 틈새시장이다! 만들다 보니 욕심이 욕심을 불러 사주와 타로까지 추가됐어요.

몽타주 스플래시
몽타주 로그인
몽타주 홈

오늘의 타로 — 카드를 셔플하고, 고르고, AI가 해석해 줍니다.

타로 셔플
타로 선택
타로 결과

AI 해석 결과 → 타로 리딩 메뉴 → 사주풀이까지 한 앱에서.

타로 해석
타로 리딩 메뉴
사주풀이

이달의 운세 · 꿈해석 기록 · 양자택일 타로 리딩.

이달의 운세
꿈해석 기록
양자택일 타로

꿈사전 6,000+ 항목 · 코인 충전 · 이용약관까지 갖춘 완성형 앱.

꿈사전
코인 충전
이용약관
1 / 5
Section B · 8 / 9
EPISODE

근데 진짜 힘들었어요

LEVEL 1 · 앱 개발
앱 만드는 건 그나마 괜찮았어요
Flutter로 화면 그리고, RAG로 DB 구축해서 AI가 데이터를 근거로 해석하게 만들고… 여기까진 어찌저찌.
LEVEL 2 · 플레이스토어 등록
앱보다 스토어 등록이 10배 더 어려웠어요
개인정보처리방침, 앱 심사, 콘텐츠 등급 분류, 스크린샷 규격, 타겟 SDK… 구글이 리젝하면 처음부터 다시.
LEVEL 3 · 광고 · 수익화
광고 붙이는 건 더더더 어려웠어요
구글 AdMob, Firebase 연동, 설정에 설정에 설정. 죽는 줄 알았습니다.
그래도 끝까지 하나 만들어보니 — 엄청난 공부가 됐습니다.
1 / 3
Section B · 9 / 9

그런데 코드 한 줄도 모르면서
어떻게 이렇게 만들 수 있을까요?

Section C · 1 / 2
SECTION C

비개발자가
바이브 코딩할 때는?

핵심 공식 하나만 기억하세요

Section C · 2 / 2
좋은 프롬프트 × AI 결과 이해
= 빌더 (Vibe Coder)
Section D · 1 / 8
SECTION D

오늘 같이 고민할 것

여기서부터 끝까지, 세 가지를 함께 살펴봅니다.

01

AI가 알아듣는
말 하는 법

02

AI가 한 일을
이해하는 방법

03

현장에서 바로
써먹는 실전 TIP

Section D · 2 / 8
SECTION D

AI가 알아듣는
말 하는 법

프롬프트 — 이 시간의 첫 번째 도구

Section D · 3 / 8
D-1 · 나쁜 프롬프트 vs 좋은 프롬프트

같은 요청, 전혀 다른 결과

bad-prompt.sh
홈페이지 만들어줘
good-prompt.sh
나는 프리랜서 디자이너 "김다온"이야. 자기소개 페이지를 한 파일로 만들어줘.   페이지 구성: 1. 맨 위 — 이름 + 한 줄 소개 2. 중간 — 포트폴리오 카드 3개 3. 맨 아래 — 이메일 + GitHub   디자인: 다크 배경 + 시안 포인트. 반응형(모바일 대응) 필수.
Section D · 4 / 8
D-2 · 당신의 진짜 무기

이 분야의 전문가는 나야 ~!

개발자는 코드를 압니다. 하지만 당신 분야의 불편함은 당신만 압니다.

개발자가 모르는 것
  • 세무사 5월의 지옥
  • 온라인 판매자의 재고 악몽
  • CEO가 매주 반복하는 보고
  • 자영업자의 주문 접수 카오스
당신이 아는 것
  • 바로 그 지옥의 모든 디테일
  • 어떻게 해야 덜 불편한지
  • 무엇이 진짜 가치인지
  • 어떤 숫자가 중요한지

"당신의 업무 지식이, 그 어떤 개발자보다 강력한 자산입니다."

Section D · 5 / 8
D-3 · 실전 예시 ① 기획을 깊게

반복 대화 = 내 생각의 구체화

planning-dialogue.sh
고객 관리 앱을 만들고 싶어 어떤 종류의 고객인가요? B2B? B2C? 몇 명 규모? 세무사 사무실, 한 사람당 평균 30명 정도 기존 엑셀 관리에서 가장 불편한 건 어느 부분인가요? 매년 5월 종합소득세 신고할 때 연락 돌리는 게 제일 힘들어 그러면 핵심 기능은: ①연락처 DB ②일괄 문자/메일 ③신고 진행 상태 추적 이 세 가지로 MVP를 만드시는 게 어떨까요? 맞아! 바로 그거야. 이제 화면부터 그려줘. ← 모호했던 아이디어가 MVP로 좁혀지는 순간
Section D · 6 / 8
D-4 · 실전 예시 ② 반복업무 자동화

PRD.md를 '만들어 가는' 과정

AI와 반복적인 대화를 통해 내가 무엇을 원하는지 구체화해 나가는 것 — 그게 바로 기획서를 만드는 일입니다.

PRD 없이 시작하면
  • 설계도 없이 집을 짓는 것과 같다
  • AI가 엉뚱한 방향으로 코드 생성
  • 중간에 허물고 다시 짓기 반복
  • "이거 아닌데…"가 끝나지 않는다
PRD.md로 시작하면
  • 방향이 한 장에 정리된다
  • 안 만들 것이 분명해진다
  • AI가 문서를 나침반으로 삼는다
  • 1시간 기획이 1개월 삽질을 막는다

"AI와 쭉 나눈 대화, PRD.md 파일로 만들어줘" — 이 한마디만으로도 결과물이 완전히 달라집니다.

Section D · 7 / 8
D-5 · 실제 PRD.md 예시

이 사이트의 PRD.md

AI//STUDY 사이트도 이런 PRD 한 장으로 시작했습니다.

prd.md
# AI//STUDY Archive   ## 한 줄 설명 D-ONWORKS의 AI 지식 아카이브 사이트   ## 핵심 기능 (3가지) - Lectures — 발표·특강 자료 - Repositories — AI 오픈소스 큐레이션 - Vibe Skills — Claude Code 노하우   ## 안 만들 것 (범위 명확화) × 회원 가입 · 결제 · 댓글 기능   ## 기술 스택 - Docusaurus 3.9.2 + React 18 - Vercel 자동 배포 · ai.d-onworks.com   ## 성공 기준 ✓ 새 글 1편 작성 30분 이내 ✓ 페이지 로드 2초 이내
Section D · 8 / 8
D-6 · 핵심 공식

완벽한 첫 질문은 없다
바이브 코딩은 끝없는 대화의 과정이다

이 5단계를 끝없이 반복한다. 10번, 20번, 30번도 괜찮다.

Section E · 1 / 5
SECTION E

AI가 한 일을
이해하기

프롬프트 다음으로 중요한 두 번째 핵심

Section E · 2 / 5
E-1 · 역으로 확인하기

나조차도 내가 뭘 말하는지
정확하지 않을 때가 많습니다

그러면 AI는 무엇을 이해한 걸까요? — 이 질문 한 줄이면 됩니다.

reverse-check.sh
내가 방금 한 말을, 네가 어떻게 이해했는지 3줄로 다시 설명해봐. 네, 제가 이해한 바는: 1. ... 2. ... 3. ... 맞나요? 맞지 않다면 수정해주세요. → 여기서 내가 '어, 1번은 좀 다른데' 하고 잡을 수 있다
Section E · 3 / 5
E-2 · 역질문

코드를 못 읽어도 괜찮습니다
AI에게 설명시키면 됩니다

explain-to-me.sh
이 코드가 뭘 하는지 초등학생도 알아들을 수 있게 비유로 설명해줘. 좋습니다! 비유하자면: 이 코드는 '편지 보내는 우체국' 같습니다. · 편지(데이터)를 받고 · 주소(URL)를 확인한 뒤 · 도장(인증)을 찍어서 · 해당 주소로 보냅니다. → 아, 그런 거구나! 이제 나도 이해했다.
Section E · 4 / 5
E-4 · 교차 검증

AI가 하는 말을 그대로 믿지 마세요

다른 방안도 있는지 물어보는 것만으로 절반의 실수가 걸러집니다.

cross-verify.sh
A로 수정하면 해결됩니다. A로 수정하는 방안 말고 다른 방안도 2-3가지 더 검토해서 장단점 비교하고 교차 검증해. 검토했습니다: A안 — 빠르지만 유지보수 어려움 B안 — 느리지만 안정적, 표준 방식 C안 — 외부 서비스 사용, 유료 → 상황을 고려하면 B안을 추천합니다. → 더 나은 선택을 하게 된다
Section E · 5 / 5
E-5 · 실전 크로스체크

제 화면은 항상 이렇게 둘입니다

왼쪽에 Gemini, 오른쪽에 Claude Code — 한쪽이 내놓은 답을 다른 쪽에 붙여 넣어 교차 검증하는 게 제 습관입니다.

Gemini와 Claude Code를 나란히 띄워 교차 검증하는 실제 작업 화면

← 실제 제 작업 화면 · 왼쪽: Gemini 답변 / 오른쪽: Claude Code 실행

SECTION F · 1 / 10
SECTION F

실전 TIP

당신이 내일부터 쓸수 있는 비법

SECTION F · 2 / 10
F-1 · 스택 결정법

"아몰랑, BM 해"

무슨 도구를 써야 할지 모르겠다고요? 그게 정상입니다. 그냥 AI한테 벤치마킹 시키세요.

ASK
"세계적인 ERP 벤치마킹해서 내 회사용으로 추천해줘"
ASK
"인기 있는 웹 서비스 BM해서 기술 스택 알려줘"
ASK
"앱 스토어 상위 10개 BM해서 내 앱 구조 제안해줘"
결과
AI가 세계 수준을 참고한 스택을 알아서 제안한다
SECTION F · 3 / 10
F-2 · 실제 BM 결과

"세무사 CRM BM 해줘" → 이런 답이 옵니다

claude-bm.sh
$ 세무사 고객관리 앱 BM 해줘 ● 1. 시장 기존 솔루션 (벤치마킹) · 위하고 T — 더존 통합 ERP / 무겁고 비쌈, 소규모엔 과함 · 플랫폼세무사회 — 한국세무사회 공식, AI세무사 탑재 / 표준화로 커스터마이즈 어려움 · 세무통 — 매칭 → CRM SaaS 확장 / 아직 CRM 기능 미성숙 · 모바일택스 — 월 6만원 기장 통합 / 세무사보다 납세자용 · 혜움 — IT 세무법인 자체 시스템 / 외부 판매 안 함 → 소규모(1인 30명) 세무사 전용 경량 CRM = 시장 공백. 직접 만들 가치 있음. ● 2. 기술 스택 추천 (Next.js 15 + Supabase + Flutter) 백엔드/DB Supabase (PostgreSQL) — 관계형 데이터 최적 웹 프론트 Next.js 15 + Tailwind + shadcn/ui 모바일 Flutter 또는 PWA — 30명 규모면 PWA 충분 SMS 알리고 API — 카카오 알림톡, 비용 1/3 이메일 Resend (월 3,000건 무료) 인증 Supabase Auth (카카오 OAuth) 배포 Vercel + Supabase — 초기 비용 0원

→ 한 줄 질문으로 시장 분석 + 추천 스택까지. 이게 BM의 힘입니다.

SECTION F · 4 / 10
F-3 · 권한 모드 활용법

Shift+Tab 하나로
AI 자율성을 조절합니다

기획할 땐 Plan 모드로 방향부터 잡고, 속도 낼 땐 Bypass 모드로 풀스로틀.

MODE · PLAN
계획만 짜고
코드는 안 짠다
새 프로젝트 시작·큰 작업 전
방향 잡을 때 ↓
MODE · ACCEPT EDITS
파일 수정 자동
명령만 확인
일상 코딩 기본값
흐름은 끊지 않고 안전 ↓
MODE · BYPASS
전부 자동
속도 최대
실전 바이브 코더
Git 자주 커밋 필수 ↓

→ Plan 으로 시작 → Shift+Tab 으로 Bypass 전환 → 속도 붙여서 완주.

plan mode on 터미널 상태 표시 → Shift+Tab → bypass permissions on 터미널 상태 표시

↑ 실제 제 클로드 코드 터미널 하단에 뜨는 모습 그대로

SECTION F · 8 / 10
F-4 · 수정해도 잘 안될때?

같은 파일 3번째 fix라면?

그건 더 이상 버그 수정이 아닙니다. 근본 원인을 놓치고 있다는 신호입니다.

이렇게 물어보세요
"같은 파일을 3번 고쳤는데 또 다른 문제가 생겼어. 임시 fix 말고 근본 원인이 뭔지 찾아줘. 이 파일 전체 구조를 다시 설계해야 할 수도 있어."

→ AI가 "아, 원래 구조에 문제가 있었네요" 하고 실토할 때가 많습니다.

SECTION F · 9 / 10
F-5 · 보안문제는?

보안? 나도 모름. 그래서 AI한테 시켜라

비개발자의 가장 큰 위험: 내가 뭘 조심해야 하는지 모른다는 것. 대책은 간단합니다.

매주 한 번, 이 프롬프트를 실행
"내 코드 전체에서 기본적인 보안 이슈를 점검해줘:
· API 키 · 비밀번호 · 토큰 노출
· .env 파일의 .gitignore 포함 여부
· 사용자 입력 검증
· SQL 인젝션 · XSS 취약점
각각 발견 건수와 위치를 숫자로 보고해."
SECTION F · 10 / 10
F-6 · 스파게티 코드

코드가 스파게티가 됩니다

같은 기능 여러 라이브러리 혼용, 동일한 컴포넌트 중복. 주기적으로 정리하세요.

매번 체크
  • "지금 사용하는 라이브러리들 최신 안정 버전인지 확인해"
  • "공통 컴포넌트를 하나로 분리해서 중복되지 않도록 해"
매번 체크
  • "중복된 함수, 미사용 import, 너무 긴 파일 없는지 확인해"
  • "네가 검토한 내용이 맞는지 reflection 검증해봐"
활용 도구
context7 · vibe-cleanup 같은 코드 건전성 검토 도구를 수시로 돌리세요.
SECTION F · 11 / 10
F-7 · 라이브러리 버전 함정

AI는 옛날 설명서로 코드를 짭니다(Context7 활용)

학습 시점이 과거라 AI가 알려준 라이브러리 사용법이 이미 바뀌어 있을 때가 많아요. 배포 직전에야 터집니다.

제가 당한 일
Flutter로 몽타주 앱 한 달 개발 → 스토어 올릴 때 "버전이 너무 낮다" 거절 → 라이브러리 싹 업데이트 → 코드 전면 리팩토링 지옥
처음부터 이걸 썼어야
context7 — AI가 라이브러리 최신 공식 문서를 실시간으로 읽고 그 기준으로 코드를 짜게 해주는 MCP
노하우 · 프로젝트 첫날 이거부터
▶ npx ctx7 setup --claude
이 한 줄로 MCP 연결 완료. 이후 AI에게 시킬 때 "use context7"만 붙이면 최신 안정 버전 기준으로 코드를 짜줍니다.
SECTION F · 12 / 10
F-8 · CLI로 환경 설정 끝내기

이젠 터미널 한 줄로 다 됩니다

DB 마이그레이션·배포 환경변수까지 — Supabase CLI · Vercel CLI가 클로드에 연결되면, 웹페이지 뒤지며 설정할 일이 없어집니다.

예전엔 이렇게
Supabase 대시보드 열고 → 테이블 찾아 스키마 수정 → Vercel 콘솔 들어가서 환경변수 하나하나 붙여넣고 → 재배포… 클릭 지옥
이젠 이렇게
CLI 가 붙은 클로드 터미널에 한 마디면 끝 — 마이그레이션·env 세팅·배포까지 알아서
이렇게 시키세요
▶ "supabase CLI로 DB 니가 알아서 고쳐줘"
▶ "vercel CLI로 환경변수 세팅하고 배포까지 해"
단순 반복 작업은 다 CLI 로 — 브라우저 콘솔 클릭은 이제 그만.
SECTION F · 13 / 10
F-9 · 막히면 Playwright 에게

복잡한 설정은 Playwright가 대신 봅니다

Playwright MCP 가 연결되면, AI 가 실제로 브라우저를 열고 ·화면을 캡처·DOM 을 분석해서 뭐가 잘못됐는지 스스로 찾아냅니다.

제가 많이 쓴 케이스
Google AdMob 광고 연동,
Google Firebase 설정 —
메뉴가 너무 복잡해서 사람이 하면 한 시간. Playwright 한테 시키면 스스로 돌아다니며 풀어냅니다.
이렇게 시키세요
▶ "Playwright 로 이 페이지 열어보고
  뭐가 잘못됐는지 분석해"
▶ "AdMob 콘솔 들어가서
  광고 단위 ID 찾아줘"
⚠ 주의 · 토큰은 각오하세요
브라우저 스크린샷·DOM 스냅샷을 계속 주고받기 때문에 일반 대화 대비 토큰이 몇 배로 튑니다. 그래도 사람이 직접 헤매는 시간 대비 훨씬 이득.
Section G · 1 / 4

내일부터
당신이 할 일

Section G · 2 / 4

좋은 프롬프트 × AI 결과 이해

= 빌더 (Vibe Coder)

Section G · 3 / 4

당신도
이미 빌더입니다

오늘 밤,
터미널이 눈에 아른거려서
밤잠 설칠 당신을 기대합니다.

Section G · 4 / 4

Q & A

궁금한 게 있으면 뭐든 물어보세요.
"이런 거 만들고 싶은데 가능해요?" 도 환영합니다.

EMAIL
ai@d-onworks.com
WEB
ai.d-onworks.com
PHONE
010-2598-3723

Thank you.

By kai-slide-creator v2.10.0 (customized)