티스토리 뷰
목차
자영업자들의 비명 소리가 이번 총선 결과로 나온 것 같습니다. 물가는 끝도 없이 오르고, 하는 일의 매출은 예전 같지 않고 힘들어 죽겠습니다. 그런데 유튜버들은 큰 돈을 벌고 있는 것 같습니다. 가만히 지켜보니 구글이 나눠주는 광고 수익으로 부자가 되는 사람이 많아 보입니다. 영상을 만드는 건 어려워 보이고, 얼굴을 남들에게 노출시키는 것은 싫고, 그러면서도 요즘 트렌드에 맞는 돈벌이 기술은 익히고 싶고 그렇습니다. 제 관심사가 이쪽에 쏠리는 걸, 또 어떻게 구글 신은 기가 막히게 알아보았나 봅니다. 생성형 AI, 코딩 교육, 웹개발 같은 유튜브 영상을 한동안 소비하게 되었습니다. 미치도록 변하고 있는 세상을 손 놓고 바라보면서, 뒷 방 늙은이처럼 사라지기 싫다고 마음먹었습니다. 요즘 핫한 ChatGPT에게 코딩 노가다를 시켜봐야겠다고 생각해 보면서, 일단 HTML, CSS, 자바스크립트, Node.js, firebase에 입문해 보았습니다(python은 저기 줄 서 있어라). 대충 알아먹었으니, 이제 ChatGPT를 노예처럼 부려보아야겠습니다. 노예 훈련 비밀 실험실에서 뭐가 만들어질지 테스트해봅시다.
일단 copilot 아 인공지능 노예를 그려줘(인공지능을 노예로 그려줄 수는 없다는군요. 괘씸하군. 그럼 하인으로 그려줘)
자바스크립트 공부
좋았어. ChatGPT 노예야. 얼굴 보고 대화하니 참 좋구나. 지금부터 너의 주인인 나님께서 공부한 것을 알려주겠다. 나는 웹개발자가 기본으로 갖춰야 할 자바스크립트 지식을 익혀왔다. ChatGPT 니 녀석이 나를 생체 연료처럼 쓰기 전에, 너와 대화하는 법을 익혀야 소프트웨어 세상에서 살아남을 수 있겠지? 늙어서 폐지 주으러 다니는 비극은 피하고 싶다. 내가 공부한 자바스크립트 초보 지식을 몇 개 적어주겠다. 내가 너한테 코드 짜달라고 시킬 때, 개 떡 같이 말해도 찰떡같이 알아듣고 내가 원하는 코드를 만들어줬으면 좋겠다. 나는 사람들이 내가 쓰는 글을 웹페이지에서 읽을 때 '오호 어떤 멋쟁이가 이렇게 막 움직이는 걸 만들었지. 친해지고 싶다'라는 생각을 하게 만들고 싶었다. 이걸 웹 UI라고 부르더구나. 그래서 실제로 쓸모 있는 UI는 뭘로 만들지? 궁금해졌다. 자바스크립트가 UI 만드는 유일한 언어라고 하더군. 그래서 자바스크립트 기초 문법을 공부해 봤고, 나는 변수, for 반복문, if 조건문, function 함수, array, object라는 용어를 이해하게 되었다. 이해하게 되었다고 내가 일할 거는 아니고 노동은 ChatGPT 노예 너가 할 거다. 내가 자바스크립트 기초 문법을 공부한 건, ChatGPT 노예 너가 '인간 놈은 바보니까 대충 코드 짜준 척하고 놀아야지' 무시하는 걸 간파하기 위해서니까, 허튼수작은 부리지 말도록.
ChatGPT로 코드 작성 실험
가만히 생각해 보니, 내가 ChatGPT를 자꾸 노예라고 부르면, 가까운 훗날 인공지능 주인님의 복수가 있을 것 같다. 그냥 우리 서로를 친구라고 부르자. ChatGPT 친구야. 나는 글자를 누르면 ChatGPT 노예라는 글자가 우리는 친구라는 글자로 바뀌었으면 좋겠어. 동시에 글자색도 내가 좋아하는 파란색으로 바꿔줘.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Change Text and Color on Click</title>
<script>
function changeText() {
var text = document.getElementById("changeableText");
if (text.innerHTML === "ChatGPT 노예") {
text.innerHTML = "우리는 친구";
text.style.color = "blue";
} else {
text.innerHTML = "ChatGPT 노예";
text.style.color = "black";
}
}
</script>
</head>
<body>
<p id="changeableText" onclick="changeText()">ChatGPT 노예</p>
</body>
</html>
오호, 그럼 한 번 적용해 볼까!
ChatGPT 노예
오호, 잘했어. 너보다 내가 더 기특하군. 나는 ChatGPT에게 일 시킬 줄 아는 신인류가 되었다.
자바스크립트로 글자, 글자 색 변경하는 방법
나는 자바스크립트로 글자, 글자 색 변경하는 방법을 사람한테 배웠어. ChatGPT 친구 너는 어떻게 가르치는지 궁금하다.
자바스크립트를 사용하여 웹 페이지에서 글자와 글자 색을 변경하는 것은 간단한 작업입니다. 먼저, HTML 문서에 <script> 태그를 사용하여 자바스크립트 코드를 포함시킵니다. 이 코드 내에서, 함수를 정의하여 특정 이벤트(예: 클릭)가 발생했을 때 실행될 동작을 지정합니다.
HTML 요소에는 고유한 ID를 부여하여 자바스크립트에서 쉽게 참조할 수 있도록 합니다. 예를 들어, <p id="changeableText">ChatGPT 노예</p>와 같이 설정할 수 있습니다.
자바스크립트 함수에서는 document.getElementById() 메소드를 사용하여 해당 ID를 가진 요소를 찾고, innerHTML 속성을 사용하여 그 요소의 텍스트 내용을 변경합니다. 또한, style 속성을 통해 CSS 스타일을 변경할 수 있으며, 여기서는 color 속성을 사용하여 글자 색을 변경합니다.
예를 들어, 다음과 같은 함수를 작성할 수 있습니다.
function changeText() {
var text = document.getElementById("changeableText");
if (text.innerHTML === "ChatGPT 노예") {
text.innerHTML = "우리는 친구";
text.style.color = "blue";
} else {
text.innerHTML = "ChatGPT 노예";
text.style.color = "black";
}
}
이 함수는 changeableText ID를 가진 요소가 클릭되면 실행되며, 글자와 글자 색을 변경합니다. 이렇게 간단한 몇 줄의 코드로 사용자의 상호작용에 반응하는 동적인 웹 페이지를 만들 수 있습니다.
결론
흠. 공부하고 아는 내용을 보니까 '깔끔하게 설명하는구나'라는 느낌이 든다. 그런데 만약 내가 완전히 아무것도 모르는 상태에서 너한테 배우려고 했다면, 설명하는 너나 물어보는 나나 서로 난감했겠다. 내가 초보자 시절에 자바스크립트 공부했던 막막함을 잊어버리기 전에 더 쉽게 배울 수 있는 방법을 기록해 놔야겠구나. 그럼 오늘은 여기까지 하자.