2분만에 필요한 기능 AI와 함께 개발한 과정 소개

어제 작업한 사례 하나 공유 드려요. 이제 간단한 기능은 그냥 만들어 쓸 수 있네요.

직접 쓴 글이나 다른 자료에서 인사이트를 발췌한 글을 홈페이지 게시판에 올리곤 하는데, 매번 동일한 포맷으로 에디팅 하는게 귀찮았음.

그래서 이걸 HTML과 CSS코드를 반영해서 코드를 올리면 훨씬 편하지 않을까 생각했는데, 코드 쓸 줄은 전혀 모른다는게 문제.

제미나이랑 상담 시작. 내가 쓴 글 이러 저러한 기준으을 반영해서 너가 HTML과 CSS 코드 알맞게 입혀줄래?

몇번 피드백 해주니 원하는 형태로 글에 코드를 입혀주기 시작.

이걸 매번 게시판에 가서 코드 입력 버튼 누르고 코드 붙여넣기 해서 다시 미리보기 눌러보고 잘 반영 되었는지 확인하는게 귀찮아짐.

코드를 넣으면 웹에서 보이는 프리뷰를 바로 보여주는 게 있으면 좋지 않을까 해서 (예전 같았으면 검색을 했겠지만) 하나 만들어 보기로 함.

Google AI Studio를 열고 HTML 코드를 넣으면 웹페이지에서 보이는 프리뷰 화면을 바로보여주는 웹앱 또는 웹페이지를 만들고 싶어. 어떻게 만들수 있을까? 라고 한마디 요청

코드를 짜주면서 텍스트에 붙여넣고 .html로 저장해서 웹에서 열어보라고 함.

해봤더니 아래 동영상 처럼 왼쪽은 코드 입력창 오른쪽은 그걸 프리뷰해주는 창이 만들어짐.

코드 입력해 보니 미리보기 아주 잘됨. 나이스!!

이제 원하는 간단한 기능들은 쉽게 만들어서 쓸 수 있는 시대가 되었다는 걸 느끼네요. 저거 만드는데 2분 정도 걸렸네요.

억지로 AI를 활용하기 보단 필요한 기능을 간단히 구현해서 쓸 수 있는 시대가 되서 신이 납니다.