깃헙 링크 : https://github.com/chojondocho/artifex

로컬 다운로드 링크 : https://github.com/chojondocho/artifex/releases/latest/download/artifex.html


온라인 웹 링크 (바로 시작) : https://chojondocho.github.io/artifex/artifex.html

* 온라인 웹 링크는 깃헙 페이지스 기능으로 배포한 거라 코드 그대로 사용되고, 코드 보면 알겠지만 외부 서버에 API키 전송 절대 안 하니 안심하고 사용 가능.




이전부터 내가 특갤에 정보글 올릴 때마다, 실베에 올라갈 때마다 애들이 다 하나같이 "어떻게 이렇게 어디 다른 사이트에 올린 것처럼 글 만들어?"였다.



챗지피티나 제미나이 등 AI 사용해서 HTML로 만들고 디씨에서 게시글 올릴 때 HTML 체크해서 HTML편집기에 붙여넣고 올리면 된다고 하는데도, 너무 반복되는 질문에


언젠가 한번 글을 올릴까 하다가 이번 바이브코딩 대회 열린 참에 그냥 누구나 클릭 한 번으로 사용하기 쉬운 프로덕트로 배포하는 게 어떤가 해서 이렇게 만들게 되었다.



위에서 로컬 다운로드 링크를 클릭해 html 파일을 다운로드 하고 브라우저로 실행하든가, 온라인 웹 링크를 클릭해 바로 시작하면 된다.


사이트의 우상단에 API 키를 입력하는 박스가 있는데, 이것은 다음의 링크(https://aistudio.google.com/app/apikey)를 클릭해서 구글 계정으로 로그인하고





오른쪽 위에 이 버튼을 눌러 키를 직접 만들어 복사해서 artifex 웹 API Key 박스에 붙여넣으면 된다. 그리고 프리셋 부분을 선택하거나 내용을 편집하고, 컨텐트를 입력한 뒤 Generate 생성 버튼을 클릭하면 끝이다. 정말 그걸로 끝이다.



---



자, 이제 내가 이걸 어떻게 만들었는지. 초심자도 따라할 수 있게끔 '바이브코딩'의 단계를 보여주겠다.




우선 나는 내가 원하는 프로덕트의 핵심 기능을 텍스트로 옮기며 최초의 요청 프롬프트를 구상했다.




DCInside에서 갤러리에 게시글을 올리는데, 작성하는 곳에 HTML편집기 기능이 있어.

내가 지금 프로덕트 하나를 구상하고 있는데, 그게 뭐냐면, 웹 UI로 작동하고, 오직 순수 HTML/CSS/Javascript만으로 동작하는 오픈소스 프로젝트인데,

사용자가 아무리 바보에다 초등학생에 불과하다고 할지라도 그냥 깃헙에서 다운로드 받고 index.html 더블클릭해서 실행하면 모든 게 다 추가 인스톨 필요 없이도 작동하게 하는 거고,

다음의 how_to_genai.txt에서 설명하는 Gemini API를 활용해서,

사용자가 그 어떤 텍스트를 입력하더라도 그것을 태그 내 인라인CSS(<tag style="...")가 적용된 세련되고 스타일리쉬한 멋진 - 이에 관련된 여러 바리에이션을 사용자가 또 설정해서 언제든 어떤 컨셉이든 어떤 느낌이든 변경할 수 있게끔. 그러나 기본 규약은 지켜야함 - 내용에 최적인 html로 완성시켜서 복붙할 수 있게 출력해주는 프로덕트야. 단, DCInside HTML편집기에는 예를 들어 <head>나 <body> 등이 아닌 즉각 사용되는 태그부터 작성한다거나 이모지를 사용해서는 안 된다거나, 외부 CSS/JS를 사용해서는 안 된다거나, 복잡한 레이아웃을 사용해선 안 된다거나 하는 세부 규약을 모두 지켜내면서 말이지.


이 프로젝트를 완성하기에 앞서 조사해야할 모든 자료조사를 딥리서치 기능을 통해 마치시기 바랍니다. 당신은 우선 모든 것을 구체적으로 계획하고, 딥리서치 API에 당신의 구체적인 계획을 전달해야 합니다.




* 참고 : 여기서 how_to_genai.txt 는 구글의 언어모델 제미나이 모델을 프로그램 코드로 사용하는 방법이 적혀 있다. 전문 링크 




그 직후 나는 챗지피티 o3 모델에게 상기 프롬프트를 다듬어 달라고 요청했다.






부족한 부분은 살짝 직접 고치면 된다.



그 후, 본격적으로 딥리서치 기능을 이용하여 우리에게 필요한 모든 정보를 수집한다.



딥리서치 기능은 챗지피티든 그록이든 클로드든 제미나이든 다 있지만



단언컨대 현재로선 제미나이가 SOTA이므로 제미나이를 사용한다.







how_to_genai.txt 도 함께 첨부해준다.



그리고 20분 정도 기다리면 결과가 나온다.







오른쪽 위에 Export -> Export to Docs 를 클릭해 구글 Docs로 옮긴 다음, 거기서 File -> Download -> Markdown (.md) 로 마크다운 파일로 다운로드 받는다.



이제 다시 챗지피티 o3로 넘어가서 이를 참고로 재기획하도록 한다. o3 모델은 무언가를 다듬거나 정보를 토대로 처음부터 높은 퀄리티의 무언가로 재구성하는 것에 아주 특출나다.







그럼 이제 o3가 새로 만든 계획서를 복사하여 다시 제미나이 2.5 Pro 모델로 돌아가




[개선 전 .md 마크다운 파일과 how_to_genai.txt 파일을 첨부하며]


아래는 첨부 파일을 개선한 버전이다. 첨부 파일의 전문도 꼼꼼히 읽고 난 뒤에 아래의 내용을 확인할 것.


```

...o3가 완성한 계획서...

```


그럼 이제 본격적으로 모든 코드를 실제 작성하여 완성할 것.


모든 코드는 '코딩'과 관련된 모든 수백가지의 사항들을 극도로 만족하는 가장 아름답고 모든 방면에서 탄탄하게 기능하는 코드여야 한다.


프로덕트는 반드시 사용자의 감각과 관점에서 모든 UI/UX의 세부 사항이 세계적인 장인 정신으로 극도로 정교하게 설계 및 아름답게 구조화되어야만 한다.




이렇게 제공하면 된다. 나는 추가적인 컨텍스트를 덧붙이기보다는 항상 모델의 최상의 성능을 위해서 새로운 챗 세션을 연 뒤에 첫 프롬프트로 입력하는 것을 선호하는 편이므로


기존 제미나이 딥리서치 챗 세션은 종료시키고, 새로운 채팅을 열어서 그곳에 덧붙인다.







그리고 '바이브코딩'을 시작하면 된다.



































전체 대화 링크를 제공하지 못한 것은 오류 복붙하는 중간에 개인정보가 약간 포함되어 있어서 스샷으로 대체하겠다...



아무튼, 이런 식으로 하면 된다. 약 2시간 정도 걸린 것 같다.






API 키나 프리셋 정보는 브라우저의 로컬 스토리지 내에 저장되므로 브라우저를 꺼도 보존되니 마음껏 애용해주시기 바란다.


나만의 프리셋을 만들어서 보다 자신의 선호에 특화시키는 것을 추천한다.



읽어주셔서 감사합니다.




깃헙 링크 : https://github.com/chojondocho/artifex

로컬 다운로드 링크 : https://github.com/chojondocho/artifex/releases/latest/download/artifex.html


온라인 웹 링크 (바로 시작) : https://chojondocho.github.io/artifex/artifex.html

* 온라인 웹 링크는 깃헙 페이지스 기능으로 배포한 거라 코드 그대로 사용되고, 코드 보면 알겠지만 외부 서버에 API키 전송 절대 안 하니 안심하고 사용 가능.


제미나이 API 키 무료로 발급 받기 : https://aistudio.google.com/app/apikey