과정 소개
인터랙티브 미디어를 활용한
움직이는 이미지와 영상, 음악을 활용해 세상에 하나뿐인 나만의 집을 만들어보세요.
3시간 소요
가이드의 작업
새하루의 '어둠 속에서'는 움직이는 그림과 소리로 잿빛 세계를 탐험하는 페이지입니다. 이 수업에서 다루는 이미지, 애니메이션, 영상, 사운드를 모두 써서 만들었어요.
수업에서 하는 일
나를 알릴 때
사람을 모을 때
팔고 싶을 때
초대할 때
바이브코딩이란?
문법보다 느낌(vibe)과 의도를 전하는 데 집중한다는 뜻에서 붙은 이름입니다. 코드는 몰라도 괜찮습니다. 무엇을 만들고 싶은지, 결과가 마음에 드는지 방향과 판단은 내가 정하고, AI와 대화하며 완성해 갑니다.
바이브코딩을 하지 않을 때
웹페이지 하나를 만들려면 코딩을 배우거나, 디자이너와 개발자를 구해 원하는 모습을 설명하고, 시안을 여러 번 주고받아야 완성됩니다.
바이브코딩을 할 때
만들고 싶은 페이지의 내용과 분위기, 필요한 기능을 자세히 말하면 그대로 만들어집니다.
개인 작품 공간처럼 작은 규모의 작업 기준입니다.
경험해 보신 후 여전히 어렵게 느껴지거나 프로젝트 규모가 커지면, 전문가와 함께 만드는 것을 권장합니다.
처음부터 거창하게 준비하기보다, 대화하면서 마음에 드는 것을 찾아가는 편이 효율적입니다. 마음에 들 때까지 이 세 단계만 되풀이하면 됩니다.
STEP 1
만들고 싶은 것을 평소 쓰는 말로 적습니다.
STEP 2
Claude가 코드를 쓰고 파일을 만들어 주는 동안 기다립니다.
STEP 3
결과를 열어 보고, 마음에 드는지 확인합니다.
첫 번째 프롬프트
내 생일 초대장 페이지를 만들 거야. 11월 14일 토요일 저녁 6시, 장소는 우리 집 옥상이야. 컨셉 이미지로 촛불 켠 딸기 케이크와 노란 풍선을 그려줘.
index.html 파일을 만드는 중
내 생일 파티에 초대합니다
11월 14일 토요일 저녁 6시
우리 집 옥상
두 번째 프롬프트
배경을 밤의 옥상으로 바꿔줘. 줄 전구와 테이블, 멀리 보이는 건물들을 그리고, 초대 글은 위쪽에 둬.
index.html 파일을 고치는 중
내 생일 파티에 초대합니다
11월 14일 토요일 저녁 6시
우리 집 옥상
세 번째 프롬프트
초대 글은 엽서 안에 넣어줘. 엽서를 누르면 글이 나오게.
누르면 열리는 동작을 넣는 중
가이드 소개
마음의 풍경을 그립니다. 그림책과 웹 작업을 하고 있습니다.
과거 다수의 스타트업에서 개발, UI/UX디자인, 프로덕트 매니징 등의
역할을 두루 해왔습니다.
AI는 내가 상상한 것 이상의 결과물을 만들어 주기도 하지만 방향을 정하고 판단하는 사람은 나이기 때문에,
더 중요한 것은 나의 역할이며 내가 어떻게 하느냐에 따라 완성도가 크게 달라집니다.
가이드는 내가 상상하는 장면을 화면으로 옮길 수 있도록, 무엇을 어떤 순서로 만들지 함께 기획하고 막힌 곳을 같이 풀어 갑니다.
AI
말로 요청한 것을 코드로 옮겨 만듭니다.
결과물
나
무엇을 만들지 정하고,
결과가 마음에 드는지 판단합니다.
가이드
가이드
필요한 지식을 알려 주고,
혼자서도 계속 만들 수 있게 돕습니다.
준비물
공통
집 꾸미기
꼭 손으로 그린 그림이 아니어도 괜찮아요. 실사 이미지를 준비하셔도 됩니다.
저장소 만들기
