바이브 코딩으로 빗소리 ASMR 시뮬 비법 공개!

바이브 코딩으로 빗소리 ASMR 시뮬 비법 공개!

먼저 분위기를 이끌 그림을 그리도록 하겠습니다.
제미나이가 그림을 빨리 그려주니 제미나이로 하겠습니다.

https://gemini.google.com/

이미지 버튼을 활성화하고,

프롬프트를 주겠습니다.

너는 마리 로랑생 화가야. 
비오는 야외 공원 풍경을 그려줘. 
공원 광장이 활짝 펼쳐져 보아고 곳곳에는 벤치와 나무가 있어. 
매점도 하나 보이고. 
몇몇 사람들은 우산을 쓰고 있고 매점 앞에는 파라솔이 펼쳐져 있고 테이블이 있어서 
거기서 간식을 즐기는 사람들도 있어. 
분위기는 비가 오지만 어둑하지 않고 전체적으로 아름답고 쾌활한 분위기로 그려줘.

참고로 마리 로랑생은 사망한지 오래된 프랑스 화가입니다.
저작권 문제가 없어 화풍을 흉내내도 문제가 없습니다.
와우~ 아름답네요. 제 생각보다 더 휼륭합니다.
하지만 시뮬레이션은 이걸 약간만 참조하니 너무 큰 기대는 마세요~

2번째 준비물은 ASMR 빗소리인데요.
픽사베이에서 무료로 찾아보실수 있습니다.
저작권 문제가 없으시다면 다른 사이트도 괜찮습니다.

https://pixabay.com/ko/sound-effects/

'빗소리'로 검색하시면,

어마 무시한 양이 나오거든요.
미리 들어보고 힐링되는 소리를 다운받으시면 됩니다.

이제 윈드서프에서 폴더를 열고,
배경음악을 붙여넣은 다음 rain.mp3 파일로 바꿉니다.

윈드서프 규칙 파일을 생성합니다.

.windsurfrules 파일을 만들고 아래 내용을 채워넣습니다.

- cavas html 과 java script 를 사용해줘.
- 그림과 비슷한 분위기의 아름답고 디테일한 시뮬레이션을 만들어줘
- 배경효과음은 rain.mp3를 무한 재생해줘. 웹 브라우저 정책에 따라 배경음악은 자동 재생이 안될 수 있으니 클릭하면 재생되게 해줘.
- 난수 함수를 사용할 경우 seed 를 고정하는 함수를 추가해서 사용해줘.
- 2D이지만 3D의 느낌을 주는 시뮬레이션을 만들어줘

이제 채팅창에 금방 그림을 붙여넣고 프롬프트를 날립니다. 선택모델은 '클로드4'입니다.

너는 최고의 아티스트야. 이 그림에 걸맞는 시뮬레이션을 만들어줘.

사람들이 걸어다니긴 하는데, 바닥도 없고.. 그림자도 너무 길고..
화면을 클릭하면 빗소리가 나긴 합니다.
수정해달라고 하겠습니다.

사람들이 허공을 걷는 느낌이 들어. 
길을 만들어 그 위를 걷게 해주고 그림자가 너무 긴데 그냥 없애줘.
그리고 우산을 거꾸로 쓰고 있으니 바로 잡아줘.

 

이런 그리는 순서가 바꾸었네요. 건물을 그리고 도로를 그려야 하는데 순서가 바뀐겁니다.
우산은 여전하네요 ㅎ

건물과 도로를 그리는 순서가 바뀐것 같아. 
건물을 그리고 난 다음 도로를 그리도록 바꿔줘. 
사람들의 우산방향도 여전한데 뒤집어줘.

이런 식으로 하나씩 잡아가는 겁니다.

그 이후로 이러저러한 지시를 했는데요. 상황에 맞게 프롬프트를 주시면 됩니다.

도로가 공중에 떠 있는 것 같은데 건물 바닥을 도로 위쪽 선에 맞춰줘. 
그리고 사람들이 도로 아래쪽으로만 걷는데 골고루 걷게 해줘.

그렇게 이래 저래 완성한 결과물인데요.

아래 URL에 방문하시면 구경해보실 수 있습니다.

https://cray7.mycafe24.com/RainDraw/

번외편, 그림 그냥 버리기 아까워서 배경위에 비오는 모드입니다.

https://cray7.mycafe24.com/RainDrawPic/

바이브코딩으로 만드는 빗소리 ASMR, 흥미로운 주제가 되셨을까요?
오늘도 방문 감사합니다~