바이브코딩 집짓기 교실

새하루 키트를 이용한

나의 첫 집짓기

새하루 키트를 이용한 나의 첫 집짓기

층이 쌓인 집과 더하기 표시를 그린 분필 그림

과정 소개

새하루 키트를 이용한

나의 첫 집짓기

키트를 활용하여 내 그림과 사진으로 꾸민 나만의 집을 지어 봅시다.

3시간 소요

  • 새하루 집짓기 키트에 내 그림과 사진을 넣어 나만의 집을 짓는다
  • 방을 누르면 들어가는 상세페이지를 만들어 연결한다
  • 누구나 열 수 있는 주소로 배포한다
  • 수업이 끝난 뒤에도 혼자서 바이브코딩으로 만들고 고쳐 나갈 수 있게 된다

코드를 몰라도 괜찮아요!

키트를 이용하여 쉽고 재밌게 바이브코딩을 익힙니다

saeharu.com 홈 화면. 지붕 창문의 소개, 작업실, 2층 어둠 속에서, 1층 하루끝 그림일기가 층마다 놓인 집 모양 페이지

가이드의 집

새하루의 집이자, 작업을 전시하는 포트폴리오 공간입니다. 층마다 각 층의 방에 들어가면 각각의 작업을 볼 수 있어요.

새하루의 집 (saeharu.com) 구경하기 ↗

수업에서 하는 일

  1. 집짓기 키트로 1층 짓기키트를 받아 집 색을 고르고, 1층 방에 내 그림이나 사진을 넣습니다. 이미지를 움직이고 폰트도 입혀 봅니다.
  2. 방에 들어가는 상세페이지 만들기방에 담을 이야기를 페이지로 만들고, 방을 누르면 그 페이지로 들어가게 잇습니다.
  3. 웹사이트로 공개하기링크만 있으면 누구나 볼 수 있게 배포합니다.GitHub, Vercel을 사용합니다.

새하루 집짓기 키트 소개

새하루의 집을 이용해 만든 키트예요. 수업 첫 단계에서 내려받아, 여기에 내 그림을 채우고 층을 하나씩 올려 나만의 집을 짓습니다.

여섯 가지 색(베이지, 분홍, 노랑, 초록, 하늘, 남색)의 1층짜리 집. 지붕과 벽, 현관문이 있고, 1층에는 방 이름 문패와 '방을 꾸밀 자리'라고 적힌 빈 칸이 있다.

활용 예시

포트폴리오

분홍색 집의 2층 작업 방을 누르면, 일러스트 세 점을 나란히 보여주는 작품 페이지가 열리는 모습

소개 페이지

남색 집의 1층 소개 방을 누르면, 얼굴 그림과 이름, 연락 버튼이 있는 도예가의 소개 페이지가 열리는 모습

나만의 쇼룸

노란색 집의 1층 머그컵 방을 누르면, 머그컵 사진과 가격, 스토어로 연결되는 버튼이 있는 쇼룸 페이지가 열리는 모습

나만의 기록 저장소

초록색 집의 1층 여행 일기 방을 누르면, 날짜별 풍경 그림이 쌓인 여행 기록 페이지가 열리는 모습

준비물

수업 전에 꼭 준비해 주세요

공통

가입과 설치

  • Claude 유료 계정 (월 $22)
  • Claude 데스크톱 앱 설치

새하루 키트를 이용한 나의 첫 집짓기

내 콘텐츠

  • 나를 대표하는 이미지 (캐릭터, 사진 등)
  • 상세페이지에 담을 내용 (작품 사진 몇 장과 짧은 소개 글)

이 집의 주인이 누구인지 보여 주는 이미지예요. 꼭 손으로 그린 캐릭터가 아니어도, 나를 닮은 사물이나 좋아하는 사진도 괜찮아요. 방 그림은 가로로 긴 16:9 비율이면 잘 맞아요.

저장소 만들기

노션

  • 노션 계정

신청

신청 안내

원하는 날짜의 수업을 골라 신청해 주세요.

분필로 그린 종이비행기가 날짜에 동그라미 친 달력으로 날아가는 그림

1:1 수업 신청이나 궁금한 점은 인스타그램 DM으로 편하게 물어봐 주세요.

인스타그램 DM 보내기 ↗