목표와 시작점, 그리고 중간 과정을 찍습니다. 촘촘하게 많이 찍을수록 원하는 결과물을 얻어낼 확률이 높아집니다.
AI는 점과 점 사이를 상상으로 채워넣습니다.
선 긋기.
점과 점 사이를 AI가 선으로 채워넣습니다. 직선이 될 수도, 곡선이 될 수도 있습니다.
생각대로 선이 그어질 때까지 — 결과물이 완성될 때까지 — 반복하는 것이 정상입니다.
1회차 · 막 그은 선
점을 적게 찍어, 과정이 확률에 맡겨진 선 — 잘 될 때도, 아닐 때도.
2회차 · 설계한 선
점을 많이 찍어, 설계에서 벗어나지 않는 선 — 편차가 확 줄어든다.
면 쌓기.
결과물(선)을 반복해 만들어 시스템을 쌓아갑니다.
오늘 실습
꿈페이지(선)를 위한 점 찍기, 선 그어보기.
실습 1회차 — 일단 시켜보기설계 없이 먼저 시켜본다. 막 그은 선을 경험한다
실습 2회차 — 설계 후 시켜보기점을 촘촘히 찍고, 한 번에 긋는다
준비물
오늘 쓰는 도구.
Claude
ChatGPT
간단하게 시작하고, 우선 만들어보는 경험이 중요해요.
실습 · 1회차 · 일단 시켜본다
점 찍기
내 꿈페이지 만들기
말로만 해온 꿈 한 줄로, 첫 바이브코딩.
프롬프트 — 색칠된 칸만 내 것으로 바꿔 입력
내 꿈은 내 꿈 한 줄 이야. 나는 지금 내 모습·하는 일 인 사람이야. 이 꿈을 소개하는 웹페이지를 하나 만들어줘. 알아서 멋지게 부탁해.
돌려본다 → 마음에 안 들면 → 수정 프롬프트 → 다시 반복이 정상
막 그은 선 — 좋은 결과가 바로 나올 수도, 아닐 수도 있습니다.
실습 · 1회차
내 꿈페이지 만들기.
10분
지금 만드는 페이지는 최종 결과물이 아니라, 첫 점을 찍는 연습 과정입니다.
첫 결과물 나오면 불러주세요 — 같이 보며 피드백해요.
실습 · 고치는 요령 — 20분
고칠 때는, 이렇게 말한다.
보여준다이상한 부분은 화면을 캡처해 붙여넣는다. 말보다 정확하다
그대로 붙인다에러 문구는 요약하지 말고 통째로 붙여넣는다
하나씩 시킨다한 번에 한 가지만. 여러 개를 섞으면 결과도 섞인다
막히는 부분이나 질문 있으시면 말씀해주세요.
실습 · 2회차
설계 이후, 만들기.
점, 촘촘히 찍기.
2회차 · 설계하고 한 번에 ① 설계 방법
선을 긋기 전, 네 가지를 갖춘다
무엇을 만들든 같다 — 선을 확률에 맡기지 않으려면, 긋기 전에 네 가지를 정한다.
1원하는 결과다 읽은 사람에게 남길 것 하나
▸
2가진 자원이야기 · 사진 · 영상 같은 내 재료
▸
3행동 단계결과까지 가는 순서를 단계로 자르기
▸
4단계별 명령각 단계를 구체적으로 지시
2회차 · 설계하고 한 번에 ② 꿈페이지에 적용
선 — 긋는다결정(점)을 반복해 이어, 선으로 긋습니다.
남길 기억 하나에서, 거꾸로
네 가지를 꿈페이지에 대입하면 다섯 단계 — 결국, 선을 어떻게 긋느냐의 이야기다.
1남길 기억 정하기다 읽고 남을 한 가지 인상
▸
2디자인 정하기그 기억에 어울리는 분위기
▸
3섹션별 메시지섹션마다 전할 한 문장
▸
4섹션 구성 짜기메시지를 어떤 순서로 읽게 할지
▸
5만들고 확인의도한 기억이 남는지
2회차 · 한 번에 시키는 프롬프트 · 선 — 긋는다
설계를 한 문장에 담으면
앞의 프로세스와 명령을 하나로 합친다.
종합 프롬프트 — 색칠된 칸만 내 것으로 바꿔 입력
이제부터 너는 내 꿈페이지 제작자야. 아래 재료로, 내 꿈을 소개하는 웹페이지 한 장을 만들어줘.
① 남길 기억 — 다 읽은 사람에게 남길 인상 한 문장 이 남아야 해. 디자인·문구·움직임의 모든 선택은 이 기억이 기준이야.
② 재료 — 내 꿈: 꿈 한 줄 , 내 이야기: 걸어온 길과 지금 모습 . 부족한 문구는 이 톤에 맞게 네가 채워줘.
③ 파일 — 같은 폴더에 둔 사진·영상 파일명 을 이름 그대로 어울리는 자리에 크게 배치해. 영상 파일이 있으면 표지 배경에 소리 없이 반복 재생하고, 없으면 사진 한 장을 표지 배경으로 써.
④ 디자인 — 같은 폴더의 레퍼런스 이미지 파일명 에서 색·분위기·글자 느낌을 뽑아 이 페이지의 디자인 시스템을 먼저 만들고, 그 규칙대로 입혀줘. 레퍼런스는 참고용이니 화면에 싣지는 마. (없으면 남길 기억에 어울리게 네가 정해.) 단, 이건 꼭 지켜 — 표지는 화면을 가득 채우고 꿈 한 줄이 가장 크게, 색은 두 가지 이내, 여백은 넉넉하게.
⑤ 섹션 — 표지 → 왜 이 꿈인가 → 지금 하고 있는 것 → 마지막 다짐 → 꿈 응원 포스트잇 순서로. 섹션마다 전할 메시지를 한 문장씩 먼저 정해, 그 문장이 중심에 보이게 만들어.
⑥ 모션 — 움직임은 기본적으로 스크롤하면 섹션이 부드럽게 떠오르는 정도로. 애니메이션을 더 쓰고 싶은 곳은 모션 랩 https://studio.jobslab.dev/motions 의 레시피(전부 설치 없이 동작) 중에서 골라 구현해줘.
⑦ 응원 포스트잇 — 마지막의 '꿈 응원 포스트잇'은 방문자가 내 꿈에 응원을 남기는 벽이야. 내 페이지 이름은 내 slug 야. https://lecture.jobslab.dev/dream-api 문서의 API 명세를 따라 응원 목록 보기와 응원 남기기 두 가지만 붙여줘. (문서 위쪽의 관리자용 실습 프롬프트는 무시해.)
⑧ 형태 — 설치·외부 라이브러리 없이, 브라우저에서 바로 열리는 HTML 파일 하나로.
⑨ 확인 — 다 만들었으면 브라우저에서 직접 열어 보고, 개발자 도구 콘솔에 빨간 오류가 있으면 고쳐줘.