살다보니 이런 세상이 다 온다.
내가 20대 초반이었던 시절에는
컴퓨터공학과를 나온 고등학교 동창들이 취업하기 정말 쉬운 시대였다
나도 그쪽 계열에서 일을 해본게 아니라
정확한 상황은 모르지만
유튜브에서 본 바..
최근에는 AI의 등장으로 인해
개발자들이 설 자리가 줄고 있다고 한다
(어쩌면 모든 직업이 위협받고 있는 걸지도..)
이제는 비전공자도 조금만 배우면
(간단한 것 정도는)
AI가 코딩을 도와준다고..
이걸 '바이브 코딩'이라고 한단다
2025년 2월에 (불과 2개월 전..)
Andrej Karpathy가 도입한 용어라는데.. 아무튼
인공지능(AI)과 개발자가 협업하여 코드를 작성하는 방식이란다.
물론 AI가 내놓는 코딩 결과가
아직까지 완벽하지는 않다.
아마 약학지식을 물었을 때도
모를때는 이상한 답변을 늘어놓는 것으로 보아
그 엇비슷한 증상이 아닐까 싶다
그래서 앞으로는 간단한 코딩은 빠른 속도를 위해 AI에게 맡기고,
그 결과물을 보고
잘못된 부분을 빠르게 캐치하거나,
원하는 부분을 빠르게 수정할 수 있는 능력이 필요할 것이라고 한다
(해외의 개발자들이 대화하는 영상을 보았다.)
오늘은 이 바이브 코딩을 겉핥기 하면서
어떤 건지만 대~충 알아보려 한다
나는 '코딩알려주는 누나' 라는 채널 영상을 참고했다
오늘 처음 본 영상인데
개발자 친구 왈,
유명한 코딩 선생님이라고 했다.
https://www.youtube.com/watch?v=ollMbEOzofc
유튜브 홍보는 아니고,,
그냥 쉽게 잘 설명해주셔서
나같이 개발쪽으로 뇌가 순수한 사람이 보기에 좋을 듯하다.
(나는 코딩에 대해서
진짜 조금도 정말 티끌만큼도 모르는 비전공자이다..)
일단 이 유튜브 영상에서는
처음부터 너무 어려운 프로젝트를 도전하려 하지말고,
(데이터를 생성하고 저장하는 거)
쉬운 프로젝트부터 시작할 것을 권했다
예를 들면 그냥 보여주기만 하면 되는
포트폴리오, 내용설명서 등의 사이트 등이다.
그래서 오늘은 프론트엔드만 가지고 만들 수 있는 프로젝트를
그냥 단순히 영상 따라 만들어보려고 한다.
바이브 코딩을 위해 꼭 설치해야 하는 아이템 세가지는 아래와 같다
1) Visual Studio Code (코딩 메모장 개념)
2) 커서 (AI 툴)
3) NodeJS
프론트엔드를 만드는 방법에는 여러가지가 있지만
난 여러가지 그런거 모르고
그냥 대표적인 거, 시중에 자료 가장 많이 나와있는거, 많이 쓰는거만 배울란다.
그것이 바로
HTML, CSS, JS(Javascript)이다
이 세가지가 무엇인지는 chat GPT한테 물어봤는데..
HTML은 뼈대를 잡는 코드 (페이지에서 제목이나 내용 등을 표시)
CSS는 디자인 코드 (제목은 무슨색~, 배경은 무슨색~)
JS는 로직 코드(웹사이트의 기능을 담당) (~할 때 ~실행, 예를 들면 아이디 미입력 시 표시 등)
이라고 한다.
이 세가지를 코드로 입력해서 컴퓨터에게 명령하면
프로그램이 돌아가고
NAVER 사이트 화면으로 예를 들면,
NAVER 글자가 제목 부분에서 녹색으로 표현되고,
로그인을 누르면 로그인 창으로 넘어가고,
특정 내용 검색시 화면이 넘어가면서 검색결과가 나오는 사이트가 만들어지는 것이다.
아무튼, 다시 아까 내용으로 돌아와서
커서 AI툴 질문 창에
'메모 앱을 html, css, javascript를 통해 만들어줘' 라고 입력하면
코드를 쫙 생성해준다.
생성된 코드를 재생하기 위해
live server를 다운받고,
재생을 하면 바로 메모 웹사이트가 완성되는 것을 볼 수 있다.
만약 메모 웹사이트의 코드를 보고 싶다면
웹사이트 화면에서 우클릭-설정으로 가면
개발자들의 비밀공간이 나타나고
여기서 코드를 확인할 수 있다.
마우스를 내가 원하는 부분에 갖다 대면 해당되는 부분의 코드가 나타나고,
해당부분의 코드를 수정함으로써, 화면의 특정 부분을 내가 원하는 형태로 수정도 가능하다
만약 코드 중에 내가 모르는 내용이 나온다면
"~의 의미가 뭐야? 중학생도 이해할 수 있는 레벨로 쉽게 설명해줘"라고
챗지피티 등의 AI에게 질문하면서
해당 코드가 무얼 의미하는지도 그때그때 알 수 있다.
html이나 css 코드는 직관적인 표현이 많아서
(예를 들면 green, blue, head(제목))
보면 대충 의미를 짐작할 수 있는데,
웹사이트의 기능을 담당하는 javascript는
기본 개념 정립이 필요한 듯 하다
1) 변수 (=)
2) 조건문 (if)
3) 반복문 (for)
4) 함수 (function)
변수(=)는
값을 담고 있는 박스이다.
모든 내용, 값이 변수가 될 수 있다
조건문(if)은
말그대로 조건이다.
할래 말래?로 생각하면 쉽다
사용자가 입력을 누른다면? -> 내용이 저장되면서 화면 아래에 저장된 내용이 담긴새로운 박스 생성
반복문 (for)은
어떤 행복을 반복을 계속 해주겠다는 뜻이다
예를 들어 메모가 100개가 있으면 100번 반복해서 프린트하겠다는 뜻이다.
함수(function)는
기능 단위이다.
기능별로 묶어놓은 것이다.
메모를 저장하는 함수, 메모를 삭제하는 함수 등이 있다.
함수는 정의만 하는 것이고
이 함수를 사용해야 하는데,
괄호()가 되어 있으면 함수를 실행하는 것이다
(무슨 말인지 모르겠으나..
배우다보면 알게 될거라 생각하고 그냥 넘어간다..)
그렇다면
에러가 났을 때는?
우클릭 - 검사 창으로 개발자툴을 펼친 후
console 부분에 가면 에러가 나와있을 것이다.
여기에서 에러 위치를 알려준다
해당 부분 코드를 복사한 후
AI에게 복사붙여넣기 하여 어디가 문제인지 질문할 수 있다.
이녀석이 알아서 수정해 줄 것이다.
우리는 그걸 다시 적용해서 에러를 수정할 수 있다.
특별히 지정하고 싶은 디자인이 있다거나,
디자인을 수정하고 싶다면
사진이 있으면 좋다
AI에게 말로 설명하기 보다
사진을 그대로 붙여넣기 하여
이런 식으로 만들어 달라고 하면
빠른 시간 내에 코드를 완성해준다
기능을 추가하고 싶다면
여러개를 한번에 하지 않고
한번에 하나씩 디테일하게 AI에게 질문하면 된다
어떠한 기능을 어느 위치에 넣고, 어떤 색으로 원하는지 세부적으로 요청하면
또 그에 맞는 코드를 완성해줄 것이다.
이때 html, css, js 파일을 첨부하면서
이 파일 내에서만 수정해달라고 요청하면
그 범위 내에서만 한정적으로 수정을 해줄 것이다.
완성된 프로젝트가 마음에 든다면
accept all 버튼을 눌러서 마무리 할 수 있다.
만약 특정 요청을 실행하고
다시 전단계로 돌아가고 싶다면
Restore checkpoint 버튼을 통해
전단계 상태로 돌아갈 수도 있다.
가장 최근 상태로 돌아가고 싶다면
해당 부분에서 더블클릭, show option -> reapply 버튼을 누르면
다시 마지막 상태로 돌아갈 수 있다.
이렇게 완성된 웹사이트를
타인이 볼 수 있게 배포하고 싶다면
배포해주는 서비스를 이용해야 한다.
배포 서비스는 다양하게 있는데
해당 영상의 경우 vercel을 소개했다
New terminal을 연 후,
npm install (패키지를 설치하겠다) -g(global하게 설치) vercel를 입력,
(이 명령어가 동작하려면 node를 설치해야 한다.)
vercel login (로그인 해주세요) 입력,
원하는 옵션 설정후 로그인, (success되면 꺼도 됨)
vercel 입력하면
그 뒤로 질문이 쫙 나오는데
그냥 의식의 흐름대로 답변하면 된다.
set up and deploy? y 입력하고 엔터,
기존에 있던 프로그램 있어? no
프로젝트 네임 설정 후,
여기서 부터 시작하는게 맞아? 라는 질문에 엔터,
세팅 중에 고치고 싶은거 있어? no
이 질문에 모두 답하면
이 프로젝트를 배포하기 시작한다
그러고 도메인 주소가 나오는데
control + 링크를 누르고 open 하면
웹사이트가 올라간 프로젝트 세팅 링크가 열린다
프로젝트로 간 후
해당 프로젝트 도메인 주소를 누르면
해당 웹사이트로 연결된다.
이렇게 배포된 링크는
핸드폰에서 열수도, 친구에게 보낼 수도 있다.
이 모든 설명과 코드 생성, 프로젝트 완성에 대한 영상 시간은
약 20분 남짓이다..
간단한 프로젝트는 정말 빠르게 완성될 수 있다는 것이다.
놀라운데,,
그 놀라운 것보다
모르는 걸 A부터 Z까지 (사실 B 근처도 아직 못 간 것 같음)
배우는데 에너지를 너무 많이 써서
매우매우 지친 상태이다.
차라리 약 공부가 더 쉽다...
개발자들 대단해요..
오늘은 여기까지만 해야겠다
이게 어디야.. 이만큼 한게 어디야.. 잘했다..
게시글 다 쓰고 나면 이모티콘도 이쁘게 붙이고
이미지도 적절한거 골라서 붙여보려 했는데
지금 아무것도 못하겠다. 이만.
댓글