ChatGPT AI를 이용하여 코딩에 도움 받기
며칠 째 주구장창 고객사 프로젝트를 진행해왔더니, 머리에 과부하가 걸린 것 같습니다. 멍~ 하니 좀비처럼 컴퓨터 앞에 앉아서 일을 하고는 있지만 좀처럼 효율이 오르지 않는 상태가 지속되고 있습니다.
웹사이트 구축 작업을 진행중인데요, Bootstrap을 사용해서 Button Group을 후다닥 적용해서 쓰면 딱 좋은 경우가 발생했습니다. getbootstrap.com에 접속해서 버튼 그룹을 찾았고 사용을 하고자 했으나...
이미 기존의 웹사이트에서, 온갖 외부 라이브러리들을 불러다가 사용하는 상태였던지라, 충돌이 나더라구요. T . T
수 많은 작업자들의 손을 거쳐가서 그런지, 연결된 CSS나 JS라이브러리 소스들이 100인 100색, 천차만별 상태였습니다.
부트스트랩을 그대로 사용할 수가 없는 상태라, 부트스트랩의 HTML을 기본 뼈대로 해서, 직접 CSS를 작성해서 사용해야겠다고 생각하고 한 10여 분쯤 코딩을 진행하다가 문득 이런 생각이 들었습니다.
'어라...? 왜 내가 이 일을 하고 있지? ChatGPT 한테 한번 시켜봐야겠다!'
머리도 잘 안돌아 가는데 누구라도 좀 시켜보고 싶다는 생각에 당장, ChatGPT 사이트에 접속을 했습니다.
Chat GPT AI에게 질문을 잘 하는 것이 중요
ChatGPT AI는 얼핏보면 구글링 검색과 뭐가 다를까? 하는 생각이 들 수도 있는데요, 돌아가는 내부 사정을 이해하면 구글링과는 매우 큰 차이가 존재한다는 것을 알 수 있습니다.
일단 검색창 같아 보이는 것을 '프롬프터'라고 부르는데요, 여기에 얼마 만큼 구체적이고 체계적인 질문을 던져 넣느냐에 따라서 결과물의 품질이 좌우된다고 보면됩니다. 질문을 잘~ 하는 것이 아주 중요합니다.
옛날 옛적에 '인터넷 정보검색사' 같은 자격증 제도가 있었잖아요?(지금도 있을라나...?)
아마도 가까운 미래에는 'AI 프롬프터 제너레이터'같은 자격증 제도가 생길것이라고 예측을 해봅니다!
각설하고, 저도 잘 못하는 영작 수준이지만 똑똑한 AI 녀석이 문맥에 맞게 해석을 해줄거라는 믿음을 갖고 아래와 같이 프롬프터에 입력을 해보았습니다.
generate HTML, CSS, Javascript code for two button made by radio input type radio element.
HTML, CSS, Javascript 코드를 생성해줘, 2개의 버튼인데 radio input 타입이야.(영어 공부 열심히 할걸...)
그리고 Enter를 팍! 치자마자 ChatGPT가 코드를 생성해서 보여주기 시작합니다.
HTML은 php 문서에서 가져왔나봅니다. 맥락적으로 php랑 HTML이랑 같은 거라고 이해를 하다니!! 똑똑합니다!
CSS는 이렇게 제너레이팅을 해주더군요. label은 inline 요소라 배치를 위해 inline-block 속성으로 변경해주었고, cursor 포인터에도 손가락 모양 변화를 주는 센스를 발휘해주더군요. 사람보다 낫습니다.^^;
자바스크립트 코드도 매우 간결하게 작성해놓았습니다. 이벤트 리스너에 change를 감시하도록 해둔 것도 매우 스마트합니다. 코딩 초보인 저라면 click 부터 넣어 본 후 테스트 하면서 구글링을 통해 발견하게 될 것 같단 생각이 들었습니다.
일단 ChatGPT가 제너레이팅 해준 코드들을 해석할 수 있을 정도로 코딩 공부를 해두었더니, 이건 뭐 살아 있는 참고서 수준의 도움을 받게 되는 것 같습니다. 완전 개꿀입니다!!
코드에 대한 힌트를 얻었으니, 바로 테스트를 진행 해봐야겠죠?
ChatGPT가 생성해준 코드로 테스트 진행
VSCode를 열고 코드를 위치에 맞게 붙여 넣은 후, 미리보기를 해보니 코드가 제대로 동작합니다. 오오오옷!
게다가 아래 Javascript 코드도 addEventListener를 사용해서, console.log로 테스트 바로 해볼 수 있도록 예제 코드를 만들어 놓았더군요.
<style>
input[type="radio"] {
display: none;
}
label {
display: inline-block;
margin: 0;
cursor: pointer;
background-color: #c0d1e1;
color: #111111;
width: 200px;
height: 40px;
text-align: center;
padding-top: 20px;
}
#btn1 {
border-radius: 10px 0 0 10px;
}
#btn2 {
border-radius: 0 10px 10px 0;
}
input[type="radio"]:checked + label {
color: white;
background-color: #163963;
}
</style>
<body>
<div>
<input type="radio" id="radio1" name="radioGroup" value="option1" checked />
<label for="radio1" id="btn1">1번 페이지</label>
<input type="radio" id="radio2" name="radioGroup" value="option2" />
<label for="radio2" id="btn2">2번 페이지</label>
</div>
<script>
const radio1 = document.getElementById("radio1");
const radio2 = document.getElementById("radio2");
radio1.addEventListener("change", function () {
console.log("Option 1 selected");
});
radio2.addEventListener("change", function () {
console.log("Option 2 selected");
});
</script>
</body>
사람이 타이핑 해도 10분 정도는 충분하게 걸릴 코드들을 순식간에 만들어주니, 그 수고를 덜었습니다.
제가 한 일은 입맛에 맛게 스타일을 좀 추가한 것 밖에 없습니다.
Live Server로 구동시켜 브라우저에서 확인을 해보니, 원하는 결과대로 잘 만들어진 것 같습니다.
radio 버튼과 label 엘리먼트를 이용해서 버튼 그룹 형태로 만들어서 사용한다는 사실은 이미 알고 있었기에, 바로 응용이 가능했습니다. AI가 완전 내 상황에 100% 맞게 결과를 가져다 주는 것이 아니기 때문에 그래도 코딩공부는 계속적으로 해두는 것이 좋겠다는 생각입니다.
ChatGPT가 생성해준 코드를 개선해서 실무에 적용
아래는 실무에 적용한 사례입니다. 2개의 조직을 구분하는 탭 메뉴 형태로 사용하였습니다.
radio 버튼의 특성상 checked가 되면 그 상태를 계속 유지하고 있다보니, 선택된 메뉴를 UI적으로 표현하는데 적합해서 이와 같은 방식으로 흔히 사용되는 것 같습니다.
오늘 작업을 ChatGPT 덕분에 수월하게 진행하면서 정말 많은 생각을 해보는 계기가 되었습니다. 물론 ChatGPT가 생성해준 코드 전체를 그냥 가져다 쓴다고 되는 것은 아니고, Javascript를 어느 정도 핸들링 할 수 있는 상태라면, 매우 유용한 도움을 준다는 생각을 지울 수가 없군요.
마치며
오늘 저는 상당히 신선한 충격을 받았습니다. AI에 대한 임팩트가 매우 컸더랬습니다.
앞으로 AI를 활용해서 제가 하는 일을 AI로 대체할 수 있는 영역이 더 있을지를 고민하면서 좀 더 적극적으로 연구해나가야 겠다는 생각을 가지게 되었습니다.
달 나라 화성 이야기라고 예단하지 마시고, AI에 꼭 관심을 가져보시기를 권해드립니다.
즐거운 코딩생활, 즐코딩
KINcoding.
WANTED MBTI
MBTI Girl Match a Lovely Girl Friend 당신과 어울리는 사랑스런 여친을 매칭해드립니다.
app.kincoding.com
'AI' 카테고리의 다른 글
| [IIS] http:// 요청을 https:// 로 Redirection 해주기 - ft. ChatGPT 도움 (1) | 2023.02.15 |
|---|---|
| ChatGPT3 도움 받아서 갤러리 오버레이 버튼 만들기 (0) | 2023.02.05 |
| [AI] ChatGPT 사용해보기(ft. 코딩 초보자에 도움을?) (0) | 2022.12.19 |
댓글