1. 들어가며 오늘은 바이브 코딩으로 레트로 스타일 웹사이트를 제작한 과정에 대해서 소개해 드릴게요. 바로 프롬프트를 공개해 드리겠습니다. Claude Opus 4.1로 만들었습니다. 2. 프롬프트 1. 프로그램 개요 80-90년대 레트로 감성을 현대적으로 재해석한 디자인 스튜디오 웹사이트를 만들어줘. “RETRO STUDIO”라는 이름으로 타이포그래피와 비주얼 디자인을 강조하는 원페이지 스크롤 방식의 사이트를 구현해줘. 네온사인, 픽셀아트, 신스웨이브 같은 복고풍 요소들을 적극 활용하면서도 … 더 읽기
1. 개요 바이브 코딩으로 인터랙티브 효과를 넣은 웹사이트를 만들어 보았어요. 첫 페이지에 ‘바이브코딩’의 낱말이 흩어졌다가 모이면서 아름다운 효과를 보여주는 웹사이트를 만들어 보았어요. 강조하고 싶은 텍스트로 변경하면 원하시는 브랜드 명으로 같은 효과를 낼 수 있어요.그럼 바로 프롬프트 및 소스코드를 공개해 드릴게요. 2. 프롬프트 1. 프로그램 개요 한국어로 된 웹사이트를 만들어줘. 사이트 이름은 “바이브코딩”이고, 디지털 아트와 기술을 … 더 읽기
1. 들어가며 바이브 코딩으로 스크롤 기반의 인터랙티브 기능을 추가한 다크 모드 웹사이트 제작 방법을 소개할게요. Claude Opus 4.1을 활용해 만들었어요. 웹사이트 개발 시 참고하시고 도움이 되셨으면 좋겠습니다. 그럼 바로 프롬프트를 소개해 드릴게요. 2. 프롬프트 1. 프로그램 개요 스크롤 기반의 인터랙티브 다크 모드 포트폴리오 웹사이트를 만들어줘. 스튜디오나 디자이너의 작품을 보여주는 느낌의 웹사이트로, 스크롤 할 때마다 프로젝트 … 더 읽기
1. 개요 오늘은 바이브 코딩으로 레트로 스타일의 웹사이트를 제작해보는 과정을 소개해 드리도록 할게요. 여기서 포인트는.. 레트로 느낌을 살리기 위해 CSS, 자바스크립트 없이 HTML만 사용해서 만들었어요. 바로 프롬프트 작성을 해볼게요. 2. 프롬프트 3. 프로그램 4. 소스코드 바이브 코딩을 공부함에 있어 이번 포스팅이 도움이 되셨길 바랄게요.
1. 개요 오늘은 바이브 코딩으로 감각적인 웹사이트 만들기 과정을 소개하도록 할게요. 개인적으로 좋아 하는 스타일을 반영한 웹사이트 템플릿을 만들어 보았어요. 바로 프롬프트를 소개하도록 하겠습니다. 2. 프롬프트 1. 프로그램 개요 고급스러운 미술 갤러리 웹사이트를 만들어줘. 일반적인 세로 스크롤이 아니라 가로(수평)로 스크롤되는 특별한 구조로 만들어줘. 전체적으로 어둡고 모던한 분위기의 갤러리 사이트로, 마치 실제 갤러리를 방문하는 것 같은 … 더 읽기