41회 모임에서 프롬프트를 입력으로 작동하는 코드를 만들어 낼 수 있다는 것을 소개했습니다. image.pngimage.png클릭하여 확대

이 모임에 '파란하늘'님도 함께 하셨어요. 내용을 들으시고는

'웹사이트의 형태를 손으로 그린 이미지를 입력하면 작동하는 코드를 만들어 낼수 있을까?'

라는 흥미로운 질문을 공유해 주셨습니다. 저를 포함해서 직접 실험해 보신 분이 없었습니다. 그래서 이 주제를 실험후 공유를 부탁드렸어요. 그 결과는 아래와 같습니다.

<숙제:ai로 웹앱 만들기:손글씨 그림으로 웹앱 페이지 구현하기>

손글씨로는 ai(클로드)에게 색상 요청이 어려워 그림 파일을 올렸습니다. 
결과:전체적으로 화면 구성은 잘 이해해 html(화면구성에 관한 코드)은 잘 짜주는데 도형,글자의 크기 비율관계는 잘 이해하지 못하는 것 같아 수동으로 코딩해 주어야 할 것 같습니다. apps script(동작에 관한 코드)는 직접 글로 적어주니 잘 이해하고 짜 주네요.
참고로 데이터 베이스로 구글의 스프레드 시트를 사용했는데 속도가 느려 다음에는 속도도 빠르고 무료인 구글의 Firestore로 ai를 활용래 웹앱을 만들려고 합니다

[https://script.google.com/macros/s/AKfycbw1vdSqFPQn8y3M3JoVKOgfuAps9Km-rQJjWM2WCXUmFtPb7mI8gncN03jVV7xH2xJGPQ/exec](https://script.google.com/macros/s/AKfycbw1vdSqFPQn8y3M3JoVKOgfuAps9Km-rQJjWM2WCXUmFtPb7mI8gncN03jVV7xH2xJGPQ/exec)

위에 링크는 샘플 웹앱이라 궁금하면 아무 이름이나 적고 사용해 보셔도 됩니다~^^

입력

직접 그린 그림

175072496376963c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg175072496376963c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg클릭하여 확대

175072496410863c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg175072496410863c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg클릭하여 확대

175072496426363c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg175072496426363c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg클릭하여 확대

175072496441263c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg175072496441263c32e86d0e620f72a35952e6ef644d2ada92eed61d0d32b9973344ce7e7045e0.jpg클릭하여 확대

출력

AppScript

https://script.google.com/macros/s/AKfycbw1vdSqFPQn8y3M3JoVKOgfuAps9Km-rQJjWM2WCXUmFtPb7mI8gncN03jVV7xH2xJGPQ/exec

*비번: 0000

예시) 2025-06-24_11-50.png2025-06-24_11-50.png클릭하여 확대

2025-06-24_11-50_1.png2025-06-24_11-50_1.png클릭하여 확대 2025-06-24_11-51_2.png2025-06-24_11-51_2.png클릭하여 확대