[codex-cli] HTML 코드스니펫으로 소스 자동화

code snipet으로 코드 자동화

 

소스코드를 작은 조각으로 만들고 프롬프트로 자동화 완성을 하도록 한다.

1. 코드스니펫 만들기

 

material design의 위젯들을 태크로 만들고 랜더링 함수를 만들어 사용하는 예제를 만든다(main.html).그리고 생성 AI에서 참조하도록 프롬프트를 만든다.

• main.html

2. 지침.txt

 

코드 스니펫을 사용하는 지침을 다음과 같이 작성한다.

목적: BMI를 기록하는 웹앱을 HTML과 Javascript로 만든다.
방법: 현재폴더의 main.html을 "코드스니펫"으로 활용한다. 
      - <template> tag를 그대로 활용한다.
      - renderTemplate()함수를 사용하여 UI의 위젯을 만든다.
      - 데이터 저장은 localstorage를 이용한다.
할일: 현재 폴더의 UI.png를 보고 화면디자인과 기능을 구현한다.

3. UI 요청

 

UI 요청내용을 아래와 같은 이미지로 만든다.

4. 프롬프트

 

지침.txt의 내용을 수행한다. 최종 결과물은 bmi.html로 저장한다. 

10분 이상이 소요되었다.

결과물은 다음과 같다.

• bmi.html

 

5. 참고

 

생성 AI로 만드는 결과물은 "랜덤요소"가 매우 강하다. 그러므로 실제 개발에서 생성 AI만 믿고 코딩하는 Vibe Coding은 현실적이지 못하다. 이것은 기술의 문제가 아니라 생산구조의 문제이므로 개발자적 사고방식이 없는 사람들(논리상 개발자적 사고방식만 성공률이 높다)은 설계대로 완성품을 만들 수 없다.

다음은 ChatGPT 에서 그대로 사용한 프롬프트와 자료들의 결과물이다.