바이브코딩
오늘은, 두 번째 선.
JOBSLABDAY 02CARD NEWS
목차
01어제 복습점 · 선 · 면, 그리고 첫 선
02오늘의 핵심좋아진 AI와 일률성
03실습 1회차일단 결과 만들어보기
04실습 2회차설계, 그리고 프로그램화
05발표한 줄 명령 시연
06바이브코딩 이후어디까지, 어디서부터
어제 복습 — 점 · 선 · 면
점을 찍어,
첫 선을 그었다.
점 찍기판단을 점으로 찍는다 — 촘촘할수록 원하는 결과가 나올 확률이 올라간다
선 긋기AI가 점 사이를 채워 결과물 하나 — 반복하는 것이 정상
어제는 첫 선 — 꿈페이지. 오늘은 다른 종류의 선 하나 더 — 카드뉴스.
어제 복습 — 꿈페이지, 두 번의 선
막 그은 선, 그리고 설계한 선
11회차 — 만들며 완성
일단 페이지를 하나 만들고, 내용을 채워 나가고, 디자인을 수정했다
22회차 — 설계 먼저
페이지 구성 · 콘텐츠 · 디자인, 전체 설계를 먼저 한 뒤 한 번에 구현했다
오늘 카드뉴스도 같은 순서 — 일단 만들고(1회차), 설계해서 한 번에(2회차).
좋아진 AI
적은 점으로도,
꽤 그럴듯하게 나온다.
모델이 좋아졌다같은 명령에도 결과 수준이 눈에 띄게 올라갔다
에이전트가 좋아졌다ChatGPT·클로드가 중간 단계를 스스로 판단한다
그래서운이 좋으면, 점 몇 개로도 원하는 게 한 번에 나온다
오늘의 핵심
한 번 잘 나오는 것과, 매번 같게 나오는 것.
한 번 잘 나옴 — 확률
- AI가 알아서 판단한다
- 잘 나올 때도, 아닐 때도
- 다음번엔 다른 결과
매번 같게 — 일률
- 내가 점을 찍어 고정한다
- 디자인·구성·시스템이 유지된다
- 업무에 쓸 수 있는 일률적인 결과
자동화의 본질 — 어디에 점을 찍을지 아는 것. 블로그라면 어투·글 구성, 카드뉴스라면 디자인·레이아웃·주제 기준까지.
오늘 실습
일단 결과를 만들고,
프로그램으로 만든다.
1회차 — 일단 결과 만들기레퍼런스를 찾고, 수정을 반복해 원하는 카드뉴스 하나를 만든다
2회차 — 스펙으로 정리과정에서 찍은 점들을 추려, 스펙(설계 문서)으로 만든다
프로그램화 — 프로젝트에 심기지침으로 세팅하고, 주제 한 줄로 같은 품질을 재현한다
달라진 순서
설계가 먼저였다. 이제, 구현이 먼저다.
이전 — 설계 우선, 이후 구현
- 구현 비용이 비쌌다
- 그래서 설계를 촘촘히, 먼저
- 한 번에 맞게 만들어야 했다
이제 — 구현 우선, 이후 설계, 재구현
- 구현 비용이 낮아졌다
- 우선 만들어보고
- 그 과정을 바탕으로 설계, 다시 구현
오늘 우리가 이 순서로 갑니다 — 만들고 → 스펙으로 → 다시 만들기.
실습 · 1회차 · 일단 만들어본다
카드뉴스 하나, 원하는 수준까지
먼저 레퍼런스를 찾으세요 — 내가 원하는 카드뉴스의 생김새. 그리고 만들기 시작합니다.
프롬프트 — 색칠된 칸만 내 것으로 바꿔 입력
이 레퍼런스 느낌으로, 주제 한 줄 인스타 카드뉴스 6장을 만들어줘.
1080×1080, 설치 없이 브라우저에서 바로 열리는 HTML 한 파일로.
돌려본다 → 마음에 안 들면 → 퀄리티 명령 → 다시 반복이 정상
레퍼런스 이미지는 채팅창에 직접 올려야 AI가 봅니다.
실습 · 퀄리티 명령 내리기
결과물에,
직접 명령한다.
보여준다마음에 안 드는 장을 캡처해 붙여넣는다. 말보다 정확하다
구체적으로 시킨다"여백 더 넉넉하게" "제목만 두 배 크게" "색은 두 개만" — 눈에 보이는 그대로
하나씩 시킨다한 번에 한 가지만. 여러 개를 섞으면 결과도 섞인다
이 명령 하나하나가 전부 점입니다 — 2회차에서 그대로 재료가 됩니다.
실습 · 1회차
첫 결과물 + 수정.
45분
원하는 결과물이 나올 때까지. 이 과정에서 확정한 것들이 2회차의 재료가 됩니다.
첫 결과물 나오면 불러주세요 — 같이 보며 피드백해요.
실습 · 2회차
설계, 그리고 프로그램화.
이전 과정에서 찍은 점을, 시스템으로.
2회차 · 오늘의 프로세스
채팅이, 프로그램이 되는 과정
1골라낸다
이전 대화에서, 결과를 만들어낸 명령들을 고른다
2회차 · 설계 ① 스펙 추리기
대화에서, 스펙이 될 것들을 추린다
1결과를 만들어낸 명령이 말에 결과가 좋아졌다 — 싶은 명령들을 골라낸다
2확정된 값색 코드 · 글자 크기 · 여백 · 장수 — 느낌이 아니라 값으로
3확정한다추린 것들이 곧 스펙(하나의 설계 정의)이 된다
2회차 · 설계 ② 순서로 세운다
확정한 것들을, 순서로 적는다
2디자인 적용이전 과정에서 확정한 색·글자·여백
3구성 잡기 → 문구 쓰기표지–본문–마무리 · 내 어투로, 부족한 건 AI가
2회차 · 설계 ③ 최종 스펙 테스트
한 번에,
나와야 한다.
한 프롬프트에 전부정의한 내용 전체를 하나의 명령으로 입력한다
결과 확인수정 명령 없이, 원하는 결과물이 나오는지 본다
안 나오면 스펙 보강모자란 점(규칙)을 찾아 스펙에 추가하고, 다시 한 번에
이 테스트는 원하는 결과물이 한 번에 나와야 통과입니다 — 그래야 프로그램이 될 수 있습니다.
실습 · 2회차 · 설계
카드뉴스 설계.
15분
스펙을 추리고, 순서로 세웁니다. 색·크기 값을 모르면 — 1회차 완성본을 올리고 "이 카드의 배경·제목·본문 색 코드와 글자 크기를 알려줘"라고 물어서 받아 적으세요.
막히는 부분이나 질문 있으시면 말씀해주세요.
2회차 · 스펙 문서의 틀
설계를, 하나의 스펙 문서로
이 틀을 채운 것이 내 스펙입니다 — 최종 스펙 테스트도, 프로젝트의 지침도 이 문서 하나로. 느낌이 아니라 값으로 적을수록, 매번 같게 나옵니다.
스펙 문서 틀 — 색칠된 칸만 내 것으로 바꿔 입력
이제부터 너는 내 카드뉴스 제작기야. 내가 "주제: OO"라고 말할 때마다, 아래 규칙으로 카드뉴스를 새로 만들어줘.
① 디자인 — 함께 올린 1회차 완성본 파일 과 똑같이. 특히 이 값은 그대로 써 — 배경 배경 색 코드 · 제목색 제목 색 코드 · 본문색 본문 색 코드 , 제목 제목 크기 · 본문 본문 크기 , 안쪽 여백 여백 크기 , 페이지 번호는 위치·형식 , 글 정렬은 왼쪽/가운데 . 폰트는 컴퓨터 기본 폰트를 쓰거나, 구글 폰트에서 인터넷으로 불러와(import) 써도 돼.
② 구성 — 표지 → 본문 → 마무리, 카드는 장수 장. 어투는 내 어투 한 줄 로.
③ 문구 — 주제에서 부족한 내용은 이 어투에 맞게 네가 채워줘. 한 장에 메시지는 하나만. 사실은 지어내지 마.
④ 형태 — 1080×1080, 브라우저에서 바로 열리는 HTML 한 파일. 장마다 PNG 저장 버튼 — 저장 기능은 html2canvas를 인터넷에서 한 줄 불러와 만들어도 돼(설치 아님). 저장할 땐 화면 미리보기 축소와 상관없이 원본 1080 크기 그대로 뜨고, 실패하면 화면에 '저장 실패' 안내를 띄워. 아무 반응 없이 끝나면 안 돼.
⑤ 확인 — 다 만들면 ①~④를 점검해줘. 특히 저장 버튼은 코드를 다시 읽어 실제로 내려받아지는지 확인하고, 확신이 없으면 더 단순한 방법으로 바꿔. 마지막에 나한테 "저장 버튼 눌러서 확인해보세요"라고 알려줘.
레이아웃이 고민되면 — 카드뉴스 레이아웃 갤러리 5종 ↗
실습 · 2회차 · 제작 + 수정
만들고, 다듬기.
40분
스펙 전체를 한 프롬프트에 넣어 한 번에 만들고(최종 스펙 테스트), 퀄리티 명령으로 다듬습니다. 다듬으며 바뀐 것은 스펙에 다시 반영하세요 — 그게 점을 추가하는 일입니다.
첫 결과물 나오면 불러주세요 — 같이 보며 피드백해요.
2회차 · 문서화
검증됐으면, 문서로 만든다
테스트를 통과한 스펙을, 다른 곳에 심을 수 있는 문서 하나로 뽑아냅니다 — 이것도 AI에게 시키면 됩니다.
프롬프트 — 그대로 입력
지금까지 이 대화에서 확정한 규칙 전부를 '카드뉴스 제작 지침' 문서 하나로 정리해줘.
다듬으면서 바뀐 값까지 반영하고, 다른 곳에 통째로 붙여넣을 수 있게 출력해줘.
다듬는 동안 바뀐 점(규칙)까지 담겨야 진짜 스펙입니다 — 출력된 문서를 한 번 읽어보세요.
2회차 · 프로그램화 · 프로젝트 세팅법
프로젝트에, 심는 법
프로젝트 = ChatGPT·클로드의 작업 공간. 지침을 한 번 세팅하면, 그 방의 모든 대화가 그 규칙으로 시작됩니다. 코드가 아니라 세팅 — 이게 오늘의 프로그램입니다.
1프로젝트 만들기사이드바 '프로젝트' → 새 프로젝트
▸
2지침에 붙여넣기방금 만든 스펙 문서를 지침(Instructions) 칸에
▸
3파일 올리기1회차 완성본을 프로젝트 파일로
▸
4새 대화 열기그 방에서 "주제: OO" 한 줄
프로젝트 기능이 안 보이면 — 스펙 문서를 새 대화의 첫 메시지로 붙여도 똑같이 동작합니다.
실습 · 2회차 · 세팅
프로젝트 세팅.
10분
지침 붙여넣기 + 1회차 완성본 올리기. 이걸로 프로그램 완성입니다.
막히는 부분이나 질문 있으시면 말씀해주세요.
2회차 · 세팅 환경에서 사용하기
이제, 주제 한 줄만 던진다
프로젝트 안에서 새 대화를 열고, 아래 한 줄만. 서로 다른 주제로 2~3번 — 매번 같은 품질이 나오는지가 오늘의 검증입니다.
한 줄 명령
주제: 지금 떠오르는 주제 아무거나
품질이 흔들리면 — 지침에 규칙(점)을 하나 더 박고, 다시 던져보세요.
실습 · 2회차 · 사용
한 줄 명령으로 뽑아보기.
20분
다른 주제로도 던져보세요 — 어투와 디자인이 유지되는지. 저장 실패 안내가 뜨면 새로고침 후 다시.
수정할 게 보이면 — 채팅에서 고치지 말고, 프로젝트 지침을 직접 수정하세요.
재밌는 결과 나오면 불러주세요 — 같이 봐요.
발표 준비 · 결과 캡처
결과 캡처.
10분
오픈톡방에 캡처 3장 — ① 1회차의 결과 ② 한 줄 명령의 결과 두 가지 주제.
같은 디자인, 다른 주제 — 두 장이 나란히 있어야 오늘이 보입니다.
발표 시간.
내 카드뉴스 공장, 한 줄 명령으로 시연해주세요.
리뷰 — 오늘 무슨 일이 있었나
매번 만들 것인가, 프로그램을 가질 것인가
1회차 · 수정 반복
- 수정을 반복해 하나를 완성
- 잘 나와도, 다음번엔 처음부터
- 내가 계속 붙어 있어야 한다
2회차 · 프로그램
- 찍은 점을 지침으로 고정
- 주제 한 줄로 같은 품질
- 편차가 확 줄어든다
같은 품질이 매번 나온 건 — 점의 위치를 알았기 때문입니다.
바이브코딩 이후
어디까지 되고, 어디서 막히나.
혼자 되는 것
- 간단한 자동화
- 아이디어 프로토타입
- 반복 작업 줄이기
- 혼자 쓰는 도구
전문가가 필요한 지점
- 안정적인 실서비스 운영
- 보안 · 개인정보
- 복잡한 시스템 연동
- 장기 유지보수
무엇이든,
지금 물어보세요.
막힌 지점을 함께 풀어요.
이제,
당신의 문제를
해결해보세요.
가장 작은 것부터.