2026 바탕화면 달력 만들기 도전

프롬프트를 넣고 이제 만들기 시작하네요..

그런데 오른쪽 아래에 아이콘을 누르니 gemini 기능 추가가 생기고 더 좋은 기능이 생기네요.

제미나이(Gemini) API를 연동하여 달력 앱을 더욱 똑똑하고 사랑스럽게 업그레이드해 드릴게요! 이제 단순히 사진만 보는 것이 아니라, 동물 친구들에게서 따뜻한 응원 메시지를 받거나 재미있는 동물 상식을 들을 수 있습니다.

앱의 왼쪽 하단에 두 개의 새로운 버튼이 생겼습니다!

응원 한마디 ✨: 버튼을 누르면 Gemini가 현재 화면의 귀여운 동물 친구가 전하는 듯한 따뜻한 격려의 말을 생성해줍니다.

동물 상식 ????: 버튼을 누르면 해당 동물에 대한 짧고 흥미로운 사실을 알려줍니다.

--

그런데 하고보니 동물 이미지가 안나오는 문제가 생겨서 이를 지적했음..

이미지가 로딩되지 않는 문제는 주로 URL 인코딩 문제나 이미지 생성 서비스의 일시적인 지연 때문일 수 있습니다.

해결 방법:

이미지 태그 변경: 배경 이미지를 <div>의 배경색 방식이 아닌 <img> 태그로 변경하여 로딩 상태와 에러를 더 정확하게 감지하도록 수정했습니다.

URL 인코딩: 동물 이름에 공백이 있을 경우를 대비해 URL을 안전하게 처리하도록(encodeURIComponent) 코드를 보완했습니다.

오류 처리: 만약 생성형 이미지가 로드되지 않을 경우, 기본 대체 이미지(귀여운 고양이 사진)가 나오도록 안전장치를 추가했습니다.

이제 이미지가 훨씬 안정적으로 표시될 것입니다.

아하. 기본 이미지를 넣었군요..

자 이제.. 이렇게 나와요..

코드는 첨부파일로..

만약 나중에 다시 수정하거나 실행하고 싶으시다면:

코드 복사: 오른쪽 코드 창의 내용을 전체 선택(Ctrl+A)하고 복사(Ctrl+C)하여 메모장이나 코드 에디터(VS Code 등)에 calendar.jsx 등의 이름으로 저장해두시면 됩니다.

...

음..  ㅎ하지만 이렇게 하면 다시 라이브러리 설치하고 너무 불편해서.. HTML 파일로 달라고 해봄..

화면 우측에 다운로드 버튼을 넣어줌. (첨부해 봅니다. (

그런데 이때 Ai 기능을 쓰려면 key를 넣긴 해야 한다네요..