딸깍! 바이브 코딩 by 안티그래비티

스마트한 “계산기” 기능이 있는 웹 사이트를 만들고 싶어. 디자인도 예쁘고, 버튼을 누르면 실제로 작동하는 계산기를 만들어 줘. 그리고 어떤 기능들을 추가하면 좋을지 나한테 제안도 해 봐.

AI로 엑셀 분석하는 프로그램을 만들어야 하는데, 회사에서 쓰고 있는 데이터를 AI에게 보여줄 수는 없 으니 니가 샘플 하나 임의로 만들어 줘. 내용물은 부품의 종류와 발주 이력, 불량률, 납품일자, 단가 등, 협력업체의 부품 납품 현황을 한 눈에 볼 수 있도록 구성해 주고. (엑셀 파일의 조금 더 상세한 규격 설명 추가)

이렇게 생긴 웹 사이트 하나 만들어 줘

https://ko/wikipedia.org/wiki/장영실 이 사이트랑 비슷한 사이트를 만들고 싶은데 내용물은 “장영실” 대신 “반병현”으로 채워 줘.

모바일 청첩장 웹 페이지를 만들어 줘. 1. 스마트폰으로 접속할 것을 전제로 제작해야 해. 2. 청첩장 문구는 폴더 내의 문구.txt 파일에 적어 뒀어. 3. 청첩장에 들어갈 사진은 pictures 폴더 안에 넣어 뒀어. 4. 결혼식까지 남은 날짜의 실시간 카운트다운 애니메이션이 들어가면 좋겠어. 안티그래비티의 보안 설정상 폴더 밖의 파일에 접근하지 못하도록 설정되어 있습니다. AI가 폴더 외부의 파 일까지 마구잡이로 접근할 수 있다면, 실수로 D드라이브를 통째로 포맷해버린다거나 하는 불상사가 생길 수 있기 때문입니다. 따라서 가급적이면 AI에게 참고시킬 자료는 프로젝트 폴더 안에 저장해 주시기 바랍니다.

QR코드 관련 작업을 도와주는 웹 사이트 만들어 줘. 1. 화면 상단 좌측에 logo.png 파일을 삽입해 주고 2. 화면 상단 우측에는 사이트 이름 넣어 줘. Smart QR 3. 중앙에는 URL을 입력받을 수 있는 심플한 입력창 4. URL 입력하고 확인 누르면, URL 창이 하단으로 내려가고 정중앙에 QR코드 만들어짐 5. QR코드 클릭하면 jpg 파일로 다운로드할 수 있어.

문서 파일을 업로드하면 용량을 줄여주는 웹 앱을 만들어 줘.. 1. 폴더 내의 logo.png 파일을 화면 좌상단에 넣어 줘. 로고를 클릭하면 https://nanalab.kr로 이동해. 2. 화면 우상단에는 “Smart Doc Compressor”라고 적어 줘. 3. 화면 중앙에는 “Upload or Drop your file!”이라는 문구 적어 주고 4. 버튼 눌러서 업로드할 수도 있고 5. 드래그 앤 드롭으로 브라우저에 바로 파일을 업로드해도 인식하게 해 줘. 6. PDF, PPT, DOC, HWP 파일을 지원하면 좋겠어. 지원하는 파일 아이콘도 페이지에 표기해 주면 좋겠네. 7. 파일을 업로드하면 파일별로 일종의 프로그레스바 가 있는 목록을 표시해 주고 8. 각 파일별로 별도로 작업을 하면서, 진행상황을 프로그레스 바에 기록해 줘. 9. 작업 끝나면 프로그레스바 우측의 다운로드 버튼이 활성화됨. 클릭하면 파일 다운로드됨. 10. 압축된 파일은 ‘compressed_원본파일명’ 형태로 저장.

사진 편집을 위한 웹 앱 하나 만들어 줘. 1. 상단 왼쪽에는 logo.png를 넣어주고, 로고 클릭하면 https://nanalab.kr로 이동해. 2. 상단 우측에는 “Smart Image Resizer”라고 적어 줘. 3. 메인에는 이미지 파일을 드래그 앤 드롭하거나, 버튼을 눌러 업로드할 수 있는 메뉴를 위치시켜 줘. 4. 파 일 업로드 후, 사용자는 캔버스 비율을 선택할 수 있어. 1:1, 3:4, 4:3, 9:16, 16:9 중에 하나를 선택 하거나 커스텀으로 입력받아. 5. 그리고 사용자는 padding과 crop 중 하나를 골라. 6. p adding을 누르면 사진의 종횡비가 캔버스 비율과 맞지 않을 때, 여백을 남기면서 사진 크기를 변환 해. 여백은 기본적으로 흰색인데 사용자가 바꿀 수 있어. 7. Crop을 누르면 사진의 일부를 잘라내면서 종횡비를 맞춰줘. 8. 사진을 여러 개 입력할 경우, 입력된 사진의 썸네일들을 목록으로 보여주고 9. 썸네일 옆에는 프로그레스 바를 만들어 줘. 작업이 진행되는 동안 차오를 거야. 10. 프로그레스 바가 100%에 도달하면 다운로드 버튼이 활성화돼. 사진을 다운로드할 수 있어. 11. 모 든 사진이 작업이 끝나면 일괄 다운로드 버튼이 활성화돼. 이거 누르면 zip 압축 파일로 한꺼번에 사진이 다운로드됨.

GIF 편집을 위한 웹 애플리케이션을 하나 만들어 줘. 1. logo.png 파일을 화면 좌상단 헤더에 넣어주고, 클릭하면 https://nanalab.kr로 이동 2. 우상단에는 Video to GIF라고 이름 붙여 줘. 3. 메인 화면에는 Video → GIF라는 문구 크게 적어 주고 4. Make your own GIF Animation! 이라고 적어 줘. 5. 화 면 중앙에는 드래그 앤 드롭으로 파일을 업로드할 수 있는 메뉴를 만들어 주고, 업로드 버튼을 눌 러서 직접 업로드도 할 수 있어. 6.파 일이 업로드되면 아래쪽에 파일 목록이 생겨. 왼쪽에는 썸네일, 썸네일 옆에는 프로그레스 바, 프 로그레스 바가 100%가 되면 다운로드할 수 있어. 7. 사용자가 동영상 파일을 업로드하면, 프레임을 잘라서, GIF 애니메이션으로 변환해 주는 거야. 8. 단, 작업이 너무 오래 걸리면 안 되니까 29FPS로 제한해 줘.

GIF 편집기능이 있는 웹 애플리케이션 만들어 줘. 1. 페이지 상단 헤더 좌측에 logo.png 집어넣고, 이거 클릭하면 https://nanalab.kr 로 이동해 줘. 2. 헤더 우측에는 “Smart GIF Studio” 라고 적어 줘. 3. 메인에는 Free GIF Editor 라는 제목이랑, “GIF 파일을 무료로 편집하세요! 리사이징, 다운스케일, 크롭, FPS 조절 등 다양한 기능이 무료로 제공됩니다!” 를 영어로 번역해 적어 줘. 4. 그 밑에는 “모든 데이터는 사용자의 컴퓨터 브라우저에서만 프로세싱됩니다. 데이터가 외부로 전송 되지 않으므로, 자료 유출 걱정 없이 안심하고 사용할 수 있습니다.” 를 영어로 적어 줘. 5. 제 목과 설명 아래쪽에는 GIF 파일 한 개를 선택해 드래그드롭할 수 있는 섹션 만들어주고, Choose File 버튼 만들어서 그거 클릭하면 사용자가 직접 브라우징할 수 있게도 해 줘. 6. 일단 파일이 한 번 업로드되면 제목과 업로드 상자가 모두 사라지고, GIF 내용물과 편집 패널만 보여 줘. 7. 데스크톱 환경에서는 GIF를 왼쪽, 편집 패널을 오른쪽에 8. 모바일 환경에서는 GIF를 위, 편집 패널을 아래에 배치해 줘. 일단 여기까지만 만들어 줘. 이어서 추가 기능 요구할게.

AI랑 채팅을 나눌 수 있는 일종의 챗봇 웹 앱을 만들어 줘. 사용자는 로그인 없이 사용할 수 있게 해 주고.

주식투자 관련 정보를 제공해 주는 웹 사이트를 만들어 줘. 접속하면 메인 화면에 일단 코스피 지수, 코스닥 지수, 나스닥 지수, S&P500 지수 그래프를 그려 줘. 일단은 real data가 아니라 가짜 데이터를 만들어서 사이트 디자인을 편리하고 예쁘게 설계하는 데 집중해 줘. 그래프는 2초마다 업데이트해 주고.

이름, 생일, 성별을 입력받은 다음 불, 물, 나무, 땅, 바람 중 하나를 고르면 랜덤으로 오늘의 운세를 출력해 주는 사이트 만들어 줘.

텍스트를 입력받으면 그게 몇 글자인지 세어 주는 사이트 만들어 줘. 한글은 2byte가 한글자야 명심해.

pdf, docx 문서를 업로드하면 문서에 포함된 글자 수, 단어 수, 공백 개수와 이미지 개수를 알려주는 웹 앱 만들어 줘.

Lorem Ipsum 문자를 생성하는 웹 앱 하나 만들어 줘. 기본적으로 150자 정도 분량 글자를 띄워두고, 사용자가 슬라이드 바를 이동하면 그에 맞게 글자 분량을 수정하는 거야. 최소 10글자, 최대 5000글자.

사용자가 여러 개의 PDF 파일을 업로드하면, 그걸 합쳐서 하나의 문서 파일로 병합해 주는 웹 앱 만들어 줘. HTML, CSS, JS만 사용해서 만들어 줘.

잠시 자리를 비웠을 때, 화면에 정보를 표기해 주는 앱을 만들어 줘. 사용자 동작 - 일정 입력, 언제 다시 돌아오는지 입력, 기타 문구 입력 확인 버튼을 누르면 깔끔하고 아름다운 그러데이션 애니메이션 표시. 일정, 돌아오는 시간과 카운트다운, 기타 안내 문구가 출력되도록 만들어 줘. 일정을 제일 큰 글자로.

BMI 계산해 주는 웹 앱 만들어 줘. 사용자 키, 몸무게, 성별을 입력받아서 BMI 계산해 주고 BMI 90, 100, 110 기준 몇 kg까지 빼거나 찌워야 하는지 화면에 보여 줘.

여러 사람 이름을 입력하면, 그 중 한 사람을 추첨하는 웹 앱을 만들어 줘. 구슬을 대포로 발사하고, 여러 장애물을 거쳐, 가장 마지막에 떨어지는 사람을 당첨자로 설정하면 좋겠네.