주식 물타기 계산기를 엑셀로 만들어 보았는데 엑셀 자체를 변환하여 수식 값 그대로 html로 변경해 보고자 하였습니다. 그러면 만든 계산기를 온라인에서 컴퓨터나 스마트폰으로 바로 사용할 수 있으니까요.
일단 엑셀에서 만든 물타기 계산 수식은 이렇습니다.
1차 매수 '수량'과 '매입 단가'와 2차 매수(물타기) '수량'과 '매입 단가'를 입력하면 보유 총수량과 물타기 후 평단가 주식 총 매입 금액을 보여주는 자동 수식입니다.
이것을 그대로 html로 변환하니 그냥 내용만 보여지고 수식이 살아 있지 않았습니다.
그래서 위 엑셀 내용을 웹상에서 구현 되도록 자연어로 코딩하기 위해 상세히 설명하는 문구를 만들었습니다.
엑셀데이터를 코딩하자! AI를 이용한 자연어 코딩 입력 방법
열은 알파펫 오름차 순으로 표기, 행은 숫자 오름차 순으로 표기한다
A1="매수", B1="수량", C1="매입 단가", D1="매입 금액"
A2="text", B2=숫자를 기입할 수 있게 코딩, C2=숫자를 기입할 수 있게 코딩, D2는 B2와 C2의 곱한 값을 보여준다
A3="text", B3=숫자를 기입할 수 있게 코딩, C3=숫자를 기입할 수 있게 코딩, D3는 B3와 C3의 곱한 값을 보여준다
A4="text", B4="text",C4="text", D4="text"
A5="text", B5=B2,B3 더한 값, C5=D5를 B5으로 나눈 값, D5=D2, D3를 더한 값
표의 가로 픽셀은 모두 200px, 숫자의 정렬은 오른쪽
'숫자를 기입할 수 있게 코딩'이라고 된 곳의 기본 값은 숫자 '0'으로 넣어
숫자는 세자리 수마다 ","를 넣어주고 소수점이 아닌 정수로 보여줘
이것을 html로 코딩해줘
셀(행과 열)에 대해 정의하고 각 셀에 들어갈 값을 최대한 상세히 지정해 주었습니다. 마지막줄에 원하는 형태의 코딩을 주문했습니다.
'Chat GPT'와 'google Bard'를 이용한 자연어 코딩
'Chat GPT'와 'google Bard'를 이용해서 코딩을 시켜봤습니다.
Bard를 이용한 자연어 코딩
<html>
<head>
<title>매입 내역</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 5px;
text-align: right;
}
th {
background-color: #ddd;
}
input {
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th>매수</th>
<th>수량</th>
<th>매입 단가</th>
<th>매입 금액</th>
</tr>
<tr>
<td>text</td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
</tr>
<tr>
<td>text</td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>총합</td>
<td><input type="number" value="0" readonly /></td>
<td><input type="number" value="0" readonly /></td>
<td><input type="number" value="0" readonly /></td>
</tr>
</table>
</body>
</html>웹 브라우저로 확인하면 아래와 같은 화면을 보여줍니다.
화면은 그럴 싸 한데 값을 입력해도 수식이 적용되지 않았습니다. 수식이 적용되지 않으니 코딩용으로 Bard는 사용이 불가능한 것 같습니다. 그냥 간단한 html 코딩정도의 구현이나 수정용으로 사용하면 될 것 같습니다.
ChatGPT를 이용한 자연어 코딩
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 800px;
}
th, td {
border: 1px solid black;
text-align: right;
padding: 8px;
}
th {
background-color: lightgray;
}
td:first-child {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th style="width: 200px;">Quantity</th>
<th style="width: 200px;">Quantity</th>
<th style="width: 200px;">Purchase unit price</th>
<th style="width: 200px;">Purchase amount</th>
</tr>
<tr>
<td>text</td>
<td><input type="text" value="0" onchange="calculateRow(2)"></td>
<td><input type="text" value="0" onchange="calculateRow(2)"></td>
<td><span id="D2">0</span></td>
</tr>
<tr>
<td>text</td>
<td><input type="text" value="0" onchange="calculateRow(3)"></td>
<td><input type="text" value="0" onchange="calculateRow(3)"></td>
<td><span id="D3">0</span></td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td><span id="B5">0</span></td>
<td><span id="C5">0</span></td>
<td><span id="D5">0</span></td>
</tr>
</table>
<script>
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function calculateRow(rowNum) {
var BValue = parseInt(document.querySelector("table tr:nth-child(" + (rowNum) + ") td:nth-child(2) input").value);
var CValue = parseInt(document.querySelector("table tr:nth-child(" + (rowNum) + ") td:nth-child(3) input").value);
var DElement = document.querySelector("table tr:nth-child(" + (rowNum) + ") td:nth-child(4) span");
var DValue = BValue * CValue;
DElement.textContent = formatNumber(DValue);
calculateTotal();
}
function calculateTotal() {
var B2Value = parseInt(document.querySelector("table tr:nth-child(2) td:nth-child(2) input").value);
var B3Value = parseInt(document.querySelector("table tr:nth-child(3) td:nth-child(2) input").value);
var D2Value = parseInt(document.querySelector("table tr:nth-child(2) td:nth-child(4) span").textContent.replace(",", ""));
var D3Value = parseInt(document.querySelector("table tr:nth-child(3) td:nth-child(4) span").textContent.replace(",", ""));
var B5Element = document.getElementById("B5");
var C5Element = document.getElementById("C5");
var D5Element = document.getElementById("D5");
var B5Value = B2Value + B3Value;
B5Element.textContent = formatNumber(B5Value);
var D5Value = D2Value + D3Value;
D5Element.textContent = formatNumber(D5Value);
var C5Value = D5Value / B5Value;
C5Element.textContent = formatNumber(C5Value);
}
// Initial calculation
calculateRow(2);
calculateRow(3);
</script>
</body>
</html>웹 브라우저로 확인하면 아래와 같은 화면을 보여줍니다.
ChatGPT로 코딩된 결과에서는 입력값과 출력 값이 제대로 구현이 되었습니다. 그러데 디자인이 마음에 들지 않아서 수정을 요청하였습니다.
수정된 디자인은 아래와 같습니다. 추상적으로 요청을 하였는데 처음보다는 훨씬 보기 좋습니다. 구체적으로 지시를 하면 좀 더 좋아질 수 있겠지만 어떤 경우에는 직접 코딩으로 수정하는 방법이 더 편할 수 있을 것 같습니다.
ChatGPT를 이용한 자연어 코딩 최종 결과
위에서 코딩된 내용을 조금 디테일하게 수정하였습니다. 항목 이름을 다시 정해주고 표의 컬러를 일부 다시 지정해 주었습니다. 색 변경과 항목 변경같이 간단한 것들은 직접 코드 수정을 하는 것이 훨씬 빠른 것 같습니다.
코딩이라곤 html 조금 할 줄 아는 실력으로 이런 계산기를 웹상에서 구현할 수 있었습니다. AI가 발전하면서 코딩도 편하게 할 수 있게 되었습니다. 앞으로 더 발전하면 좀 덜 상세하게 얘기해도 편리하게 구현될 날이 오겠지요.
저의 경우 자연어를 기계적으로 작성했는데 그림으로 그려가면서 설명하면 더 간단할 텐데... 그렇게 코딩하는 날도 오겠지요? 그림으로 코딩이라... 그럼 그냥 순서도만 그려도 코딩이 된다는 것인데... 생각만 해도 참 편리할 것 같습니다.