41회 모임에서 프롬프트를 입력으로 작동하는 코드를 만들어 낼 수 있다는 것을 소개했습니다.
![]()
이 모임에 '파란하늘'님도 함께 하셨어요. 내용을 들으시고는
'웹사이트의 형태를 손으로 그린 이미지를 입력하면 작동하는 코드를 만들어 낼수 있을까?'
라는 흥미로운 질문을 공유해 주셨습니다. 저를 포함해서 직접 실험해 보신 분이 없었습니다. 그래서 이 주제를 실험후 공유를 부탁드렸어요.
그 결과는 아래와 같습니다.
<숙제: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)
위에 링크는 샘플 웹앱이라 궁금하면 아무 이름이나 적고 사용해 보셔도 됩니다~^^
입력
직접 그린 그림
![]()
![]()
![]()
![]()
출력
AppScript
*비번: 0000
예시)
![]()
![]()
![]()
