Canva Code 로 가능한 몇가지 사례 - ToDo List, 뽀모도로 타이머, 포트폴리오 사이트, 환율계산기..

소개

시도하고자 했던 것과 그 이유를 알려주세요.

지난번에 간단히 캔바 코드를 이용해 보았는데

캔바코드로 가능한 것과 가능하지 않은 것이 있는거 같아 확인해볼수 있는 예제를 만들어보았습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

Chat GPT, Canva Code

우선 Canva Code 에 질문을 해보았습니다.

이중에 지난번에 해봤던 예제 제외하고 1번과 3번을 시켜봤습니다.

한국 웹 사이트의 스크린 샷

창 크기를 줄였다 늘였다 해보니 반응형으로 잘 동작합니다.

게시 URL : https://2023-1globaljapanese.my.canva.site/dagpvzrsv-c

새로 고침을 해도 데이터가 잘 유지되고 로컬 스토리지에도 잘 저장되는걸 확인할 수 있었습니다.

중국어 텍스트가있는 웹 페이지의 스크린 샷

게시 URL : https://2023-1globaljapanese.my.canva.site/dagpr8ir-4g

캔바에서 준 간단한 예제로 생성 해본 뒤

GPT O3 에게도 프롬프트를 요청해보았습니다.

한국어로 된 문자 메시지

GPT 에서 제시해준 프롬프트 중에서도 1, 2 번을 시도해보았습니다.

프롬프트를 자세히 주니 좀더 상세한 기능 구현도 가능했습니다.

게시 URL : https://2023-1globaljapanese.my.canva.site/dagpvwzp86a

한국 시간 추적기의 스크린 샷

브라우저 알림과 알림음 둘다 안될꺼라고 생각했는데

의외로 알림음은 가능했습니다.

그래서 이건 쓸모 있게 활용도 가능할꺼 같더라구요^^

게시 URL : https://2023-1globaljapanese.my.canva.site/dagpv27husk

마지막으로 안될 줄 알고 시도해봤던 기능이 하나 더 있었는데요

환율을 실시간으로 반영한 여행 예산

계산기 입니다. 프롬프트는 역시 GPT 에게 받았습니다.

처음에 안되길래 속는셈 치고 재요청 해보았는데 의외로 반영이 되었습니다.

이것도 사실 그냥 되는척 하는거 아닐까 하고 생각했는데

브라우저의 개발자 도구로 확인해보니 실제 API 로 요청해온 값으로 보여주고 있는것을 확인할 수 있었습니다.

게시 URL : https://2023-1globaljapanese.my.canva.site/dagpv1hd4fo

결과와 배운 점

  • 오디오나 외부 API 사용도 상황에 따라서는 가능했습니다.

  • 웹 게시가 가능하므로 별도의 호스팅 없이 유용한 프로그램도 만들어 써볼수 있을꺼 같습니다.

  • 별도 DB 사용은 안되지만 로컬 스토리지를 활용해서 나 혼자만을 위한 정보들은 유지하며 사용이 가능합니다.

  • 기대했던거 보다는 Canva Code 로 할수 있는 부분들이 많았습니다.

  • 조금 복잡한 기능도 프롬프트를 잘 쓴다면 간단하게 만들어 유용하게 사용할 수 있을꺼 같습니다.

    한달간 수고해주신 유미선, 이지영 두분 스터디장님 들께 감사드립니다.

    덕분에 많이 배웠습니다^^

3
2개의 답글

👉 이 게시글도 읽어보세요