웹페이지 제작까지 단 39초 [챗GPT 실전편]

“다음 내용으로 HTML 코드를 만들어 줘” 문장 하나에 만들어진 홈페이지

[스페셜 리포트 - 챗GPT, 너 내 동료가 돼라!]

1분이면 웹페이지가 개설된다. 황당무계한 일이 챗GPT 세상에서는 실제 일어난다. 돈을 주고 웹페이지 제작을 맡기고 밤낮으로 코드를 짰다면, 챗GPT가 주는 선물을 만끽해 보자. 자고 일어나면, 아니 1분 만에 웹페이지가 개설될 것이다.

먼저 초보자를 위한 웹페이지 개설이다. 이미 시장에는 초거대 생성 인공지능(AI)을 활용한 서비스들이 다수 운영되고 있다. 이러한 서비스는 일반 이용자가 챗GPT를 학습시키는 것보다 빠르고 간편하게 유용한 결과물을 전달한다. 이 중 ‘믹소(MIXO)’는 웹페이지 제작에 특화된 서비스를 제공하는 스타트업이다.

방법은 간단하다. 믹소에 접속해 웹페이지의 주제와 특징을 기술하고 ‘사이트 생성’을 클릭하면 끝이다.

만약 ‘GPT를 통해 수익화하는 법을 알려주는 사이트를 개설한다’고 생각해 보자.

영어를 잘한다면 한 방에 가능하겠지만 영어를 모른다고 해도 걱정할 필요가 없다. 번역 애플리케이션(앱)인 플리토나 딥엘(deepl), 챗GPT에서 “GPT로 돈 버는 사이트를 소개하고 제작하려고 해. 이 사이트는 GPT 수익화의 방법에 대해 광고할 거야”를 영문으로 번역한 후 해당 문장을 복사해 붙여 넣기 하면 된다.

다음 단계는 하단에 ‘사이트 생성’을 클릭하면 끝이다. 1, 2, 3…, 단 40초 만에 무료 랜딩페이지(소비자 유입 시 처음 접하는 웹페이지의 첫 장)가 뚝딱 개설됐다. 믹소 사이트 내에서 AI가 스스로 사이트의 이름, 로고, 이미지, 문구·사이트 코드, 검색 엔진 최적화(SEO) 작업, 모바일 경험 등을 조작해 40초 만에 결과물을 내놓은 것이다.

AI가 만든 사이트의 이름은 ‘GPT머니메이커’다. 웹페이지의 첫 문구는 “GPT 기술로 수익을 창출하고 지금 수익을 올리십시오(Monetize Your GPT Skills and Earn Money Today. Make Money Online with Your GPT Skills).” 어떤가, 관심을 끌 만한가.

아래로는 이 웹사이트가 줄 수 있는 특징들이 하나둘 나열돼 있다. △GPT 사이트로 돈을 버십시오 △당신의 기술을 수익화하십시오 △단계별 가이드 등이다. 그리고 하단에는 이 웹사이트를 통해 돈을 번 사람들의 인터뷰가 담겨 있다. “이 가이드는 정말 훌륭합니다. GPT 초심자에서 GPT 전문가로 순신간에 성장했습니다.”(아담 믹스)

물론 샘플이다. 설정 사이트에서 해당 내용들을 수정하고 이미지를 교체하고 색깔을 바꿀 수 있다. 하지만 툴이 정해져 있으니 사진을 넣고 글을 일부 수정하는 정도에서 그쳐도 웹페이지 제작에 큰 문제가 없다. 쉽고 간편하고 빠르게 웹페이지를 시작할 수 있는 셈이다.

해당 사이트를 실제로 활용하고 싶다면 ‘비용’이 든다. 도메인을 연결하고 믹소 브랜딩을 제거하고 사이트를 시작하는 데 드는 비용은 월정액 9달러다. 어디까지나 랜딩 페이지만 무료다.

조금 더 어렵게 가고 싶은 호기심 많은 독자라면 챗GPT를 활용해 웹페이지를 제작하는 방법도 있다. 챗GPT는 웹사이트를 만들 때 사용하는 HTML과 자바스크립트 코드도 짜 주고 AI 개발과 빅데이터 분석에 사용되는 파이선 코드도 짜 준다. 코딩 왕초보도 웹페이지를 만들 수 있도록 도와주는 훌륭한 개발자다.

이 역시 방법은 간단하다. 챗GPT란 개발자에게 코드를 문의하는 방식이다. 챗GPT에 접속해 어떠한 웹페이지를 제작하고 싶은지 설명하고 이 웹페이지의 코드를 알려 달라고 하면 된다. 그러면 챗GPT가 엄청난 수식의 코드를 단 몇 초 만에 완성한다.

이 코드를 적용할 수 있는 프로그램을 설치해 복사 붙여 넣기 하면 웹페이지가 완성된다. 기자는 ‘비주얼 스튜디오 코드’란 프로그램을 사용했다(무료 다운로드 가능하다). 웹페이지의 완성도를 높이고 싶다면 챗GPT에 추가로 문의하면 된다. ‘배경 화면 색깔을 바꾸고 싶어. 코드를 알려줘’ 이렇게 몇 번 반복하고 나면 내가 원하는 웹사이트를 제작할 수 있다.

첫 질문에 원하는 방향을 전부 써도 좋다. 예컨대 ‘배경은 검은색, 화면 위 왼쪽 끝에 붉은색 글자로 000 작성, 화면 중앙에 0000000을 흰 글씨로, 글자 크기는 20pt로’ 등이다. 이제 웹 브라우저에서 컨트롤(CRTL)+알파벳 ‘O’를 눌러 HTML 파일을 더블 클릭하면 챗GPT가 만들어 낸 웹사이트 결과를 볼 수 있다.

텍스트로만 봐선 무슨 소리인지 모르겠다면 유튜브에서 챗GPT + 웹페이지를 검색해 보자. 무수한 샘플 사례들이 나올지어니!

[꿀팁] 마법의 문장

①“다음 내용으로 HTML 코드를 만들어 줘”
이 문장 다음에 원하는 방향의 웹사이트를 지시하면 웹사이트 개설할 수 있는 코드가 생성된다. 이때 원하는 방향을 상세하게 설명할수록 한 번에 완벽한 웹사이트를 만들 수 있다.

②“모든 코드에 설명을 넣어 줘”
페이지를 부분 수정하고 싶어도 어떤 코드인지 알 수 없다면 처음부터 다시 만들어야 하는 노동을 해야 한다. 이를 피하려면 반드시 챗GPT에 코드 설명을 부탁해야 한다. 예컨대 색깔을 검은색에서 흰색으로 바꾸고 싶다면 ‘/*’로 시작하는 줄이 설명 줄이므로 색깔을 설명하는 코드를 찾아 ‘color : black→white’로 바꾸면 쉽다.

정채희 기자 poof34@hankyung.com