html 과 자바스크립트 웹 에디터(실시간 코드 편집기)
바이브 코딩으로 프로그램을 만들고 코드를 편집하려고 보니, 뭔가 마음에 드는 에디터가 있으면 좋겠다는 생각이 들었다.
https://sciencej.cafe24.com/html5/htmlediter/htmlediter.html
인공지능으로 만든 html 과 자바스크립트 코드를 코드 입력에 붙여 넣기 하고, 우측 상단에 저장을 누르면 index.html 파일로 저장된다. index.html 대신 원하는 이름.html 로 컴퓨터에 저장해 두면, 그 다음 부터는 저장된 이름.html 파일을 눌러서 바로 실행할 수 있다.
<사용방법>
1. 에디터를 실행하고 코드 입력창에 바이브 코딩으로 만든 코드를 붙여 넣기 하면 된다.
(단 html과 자바스크립트로 만들어진 코드만 된다. 바이브 코딩에서 코드를 만들때 html 과 자바스크립트로 만들어 달라고 요구하자)
그럼 미리보기 창에 결과 화면이 나온다.
코드 입력창에서 내용을 수정하면 바로 미리보기 창에 반영되는 걸 볼 수 있다.
아래 그림은 코드 입력에서 배경색을 파란색으로 바꾼 후 미리보기 창에 배경색이 파란색으로 바뀐 모습이 나타나는 그림이다.
2. 수정하고 나서 저장하기를 누르면 html 파일로 저장이 된다. 그럼 인터넷 연결 없이도 프로그램 처럼 가지고 다니면서 사용이 가능하다.
3. 코드 입력창에서 원하는 명령어나 변수를 드래그 하면, 위쪽에 그 변수가 몇개가 있는지 확인이 가능하다. 이전, 다음을 눌러 코드 입력창에서 그 변수가 있는 위치로 계속 이동해 가면서 살펴 볼 수 있다.
4. 변수 찾기 또는 함수 찾기를 누르면 정확하지는 않지만 코드에 사용된 변수나 함수를 확인할 수 있다. 코드 분석할 때 도움이 된다.
찾은 변수를 누르면 그 코드입력 창에서 그 변수가 있는 위치로 이동한다.
5. 수정을 하고 나면, 수정기록에 수정한 내용들이 기록된다. 따라서 다시 원래 상태로 되돌리고 싶으면 수정기록을 살펴 보면 된다. 방금전 수정한 내용이면 되돌리기를 통해 방금 전으로 되돌릴 수 있다.
또 수정기록을 클릭하면 코드 입력 창에서 그 위치로 이동한다.
6. 콘솔보기를 누르면 콘솔창이 나타나 코드 중간에 넣어둔 메시지를 확인할 수 있다.
완성된 코드를 좀 더 쉽게 수정할 수 있기를 바란다.
<추가> 2026년 1월 해외 여행하면서 필요한 프로그램을 만들다 보니, 스마트폰에서는 입력된 코드를 지우는 것이 쉽지 않다. 그래서 전체지우기 버튼을 추가했다.
스마트폰에서도 제미나이로 원하는 프로그램을 코딩한 다음, html 편집기에 붙여 넣기 하고, 스마트폰 내부에 저장을 해서 보관하면, 인터넷이 되지 않는 곳에서도 바로 실행시켜 사용할 수 있어서 좋다. 또 저장을 해 놓면 상당히 빠르게 실행할 수 있다.