들어가며
코드 작업을 하다보면 ChatGPT나 Copilot 같은 AI(인공지능)를 활용할 때가 많은데, 처음부터 끝까지 AI 만을 이용해 기능을 만드는 바이브 코딩을 해보고 싶었다.
바이브 코딩(Vibe Coding)이란, AI 언어 모델을 활용하여, 바이브(느낌)에 따라 코딩하는 방식을 말한다.
AI가 "웹사이트에 들어갈 장바구니 기능을 만들어줘" 같은 자연어를 해석하여 코드를 생성하는 방식으로 진행된다.
가끔 구글이나 네이버에서 검색어를 입력할 때 영어로 잘못 입력해도 결과가 잘 나오는 경우가 있었다.
영어->한글로 변환하여 검색하는 게 아닐까 하여 변환하는 기능만 바이브 코딩으로 구현하고자 했다.
ChatGPT 프롬포트 입력(무료 버전)
자바스크립트를 이용해서 ㅎㅏㄴㄱㅡㄹ -> 한글로 변환하는 방법이 있을까
결과로 직접 구현한 간단한 예시와 라이브러리를 알려줬다.
1번 간단한 예시를 적용해서 영어를 입력하고 버튼을 누르면 한글로 변환되는 HTML을 만들어줘
여기서 영어를 입력하고 변환 버튼을 누르면 '잘못된 입력'이라고 나오는 이슈가 있었다.
영어로 gksrmf 이라고 치면 한글 이라고 출력되게 해줘
디자인이랑 기능 알아서 추가해줘
결과로는 영어를 잘 변환해주지만 띄어쓰기가 들어가면 오류가 생겼다.
ahen dkssudgktpdy를 입력하니까 잘못된 입력입니다라고 출력돼
이건 뭘까
ahen dkssudgktpdy 라고 입력하면 몯ㅜ 안녕핫ㅔ요 라고 출력돼
이유는 "글자 조합을 무조건 3글자씩 자른다" 라는 가정이 되어있었고,
코드에 유연한 조합 로직을 추가해줬다고 한다.
처음부터 끝까지 AI로만 구현하고자 했기 때문에, Enter 키를 눌러 변환하는 기능까지 ChatGTP를 사용했다.
Copilot 프롬포트 입력
... HTML 코드
<script> 부분 제외하고 디자인 알아서 추가해줘
결과 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>영문 → 한글 변환기</title>
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: #f5f5f5;
color: #333;
text-align: center;
}
h1 {
font-size: 2em;
margin-bottom: 1em;
color: #4a4a4a;
}
input {
font-size: 1.2em;
padding: 0.5em;
width: 320px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
text-align: center;
background: #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
button {
margin-top: 1em;
padding: 0.6em 1.5em;
font-size: 1.1em;
background-color: #a8c0ff;
color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
button:hover {
background-color: #91b1ff;
}
#output-container {
margin-top: 2em;
padding: 1em;
background: #ffffff;
border-radius: 10px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
}
#output {
font-size: 1.5em;
color: #333;
}
</style>
<script src="https://unpkg.com/hangul-js"></script>
</head>
<body>
<h1>영문 → 한글 변환기</h1>
<input type="text" id="input" placeholder="예: dlfjgrp goqhfrpdy" />
<button onclick="convert()">변환</button>
<div id="output-container">
<div id="output"></div>
</div>
<script>
const keyMap = {
'r':'ㄱ','R':'ㄲ','s':'ㄴ','e':'ㄷ','E':'ㄸ','f':'ㄹ','a':'ㅁ','q':'ㅂ','Q':'ㅃ','t':'ㅅ','T':'ㅆ',
'd':'ㅇ','w':'ㅈ','W':'ㅉ','c':'ㅊ','z':'ㅋ','x':'ㅌ','v':'ㅍ','g':'ㅎ',
'k':'ㅏ','o':'ㅐ','i':'ㅑ','O':'ㅒ','j':'ㅓ','p':'ㅔ','u':'ㅕ','P':'ㅖ',
'h':'ㅗ','hk':'ㅘ','ho':'ㅙ','hl':'ㅚ','y':'ㅛ','n':'ㅜ','nj':'ㅝ','np':'ㅞ','nl':'ㅟ',
'b':'ㅠ','m':'ㅡ','ml':'ㅢ','l':'ㅣ'
};
document.getElementById('input').addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
convert();
}
});
function toJamo(engInput) {
const result = [];
let i = 0;
while (i < engInput.length) {
if (engInput[i] === ' ') {
result.push(' '); i++; continue;
}
const two = engInput.slice(i, i + 2);
const one = engInput[i];
if (keyMap[two]) {
result.push(keyMap[two]); i += 2;
} else if (keyMap[one]) {
result.push(keyMap[one]); i++;
} else {
i++;
}
}
return result;
}
function convert() {
const eng = document.getElementById('input').value.trim();
const jamos = toJamo(eng);
const grouped = [];
let buffer = [];
for (const ch of jamos) {
if (ch === ' ') {
if (buffer.length) {
grouped.push(Hangul.assemble(buffer));
buffer = [];
}
grouped.push(' ');
} else {
buffer.push(ch);
}
}
if (buffer.length) {
grouped.push(Hangul.assemble(buffer));
}
document.getElementById('output').textContent = grouped.join('');
}
</script>
</body>
</html>결론
바이브 코딩은 빠르고 간단한게 코드 구현을 할 수 있다는 점에선 확실하게 좋은 것 같다.
코드를 볼 필요가 없이 결과 화면만 보고, "이 코드가 어떻다"가 아니라 "여기서 이렇게 출력된다."라고 현상만 설명해줘도 코드를 수정해준다. 이건 개발자가 아닌 사람도 기능을 구현할 수 있다는 뜻인것 같다.
하지만 대부분 체계적인 계획이 없고, 코드가 아닌 결과 화면만 보면서 디버깅하기 때문에 코드가 한번 잘못꼬이면 되돌리기 쉽지 않다. (AI가 만든 코드를 분석해야하기 때문에,,)
특히 챗지피티는 새롭게 요청 할때마다 코드를 다르게 보여줘서 유지보수성도 좋지 않고, 품질의 불확실성이 있다.
개인적으로 AI가 개발자를 대체할 수 있느냐에 대해선 나는 아직 먼 이야기라고 생각한다.
실무에서도 히스토리 관리나 회의를 통한 아이디어 제시, 유지보수 등 인간적인(?) 측면에서 AI가 따라올 수는 없다고 생각한다.
현재는 AI를 활용해 게임, 음악, 웹사이트 등을 제작하며 실제로 수익을 내고 있는 사람들이 있다.
지금 제일 중요한건 "누가 좋은 아이디어를 내고, AI를 효과적으로 사용할 수 있는가" 인 것 같다.
'Study > 기타' 카테고리의 다른 글
| [Git] 터미널을 이용한 Git squash 작업 (rebase) (0) | 2025.04.10 |
|---|---|
| [Swiper] 멈추지 않고 흐르는 슬라이드 만들기 (0) | 2025.02.17 |