Topic : chatgpt calculator programming
안녕하세요. Codinglee입니다.
이번 글은 지난 번 chatgpt 가입하기, Visual Studio Code 설치하기에 이어지는 글입니다.
이어서 계산기 만들기 시작합니다!

이번에는 다음과 같은 순서로 진행해보겠습니다.

1. chatgpt에게 계산기 코드 물어보기

2. Visual Studio Code 에 코드 작성하기

지난 번에 가입했던 무료버전 gpt와 visual studio code를 사용하겠습니다.
gpt 유료버전을 저는 사용하고 있지만, 처음 접하시는 분들을 위해 무료 기준으로 설명합니다.
제가 gpt를 사용해 본 경험 상, 간단한 프로그래밍의 경우에는 큰 차이를 느끼기 어려웠고,
프로그래밍 구조가 복잡해질수록 유료 버전 사용의 중요성을 느낄 수 있었습니다.

그럼 오늘 내용 시작해보겠습니다.

1. chatgpt에게 계산기 코드 물어보기

– 만들 프로그램 정의하기

우리가 함께 만들어 볼 프로그램은 계산기 입니다.
맞습니다. 컴퓨터에도 휴대전화에도 있는 그 계산기입니다. 아주 단순해 보이죠?
하지만, gpt 또는 누구의 도움 없이 혼자서 계산기 코딩을 해보신 분을 아실거예요.
그저 쉽고 단순한 코드는 아니라는 걸…
그래도 기존 계산기와는 차이가 있어야하기에…
친구와 대화를 하며 함께 떠올린 아이디어 하나를 추가합니다.
그건 바로, 시각 장애를 가진 사람도 계산기를 이용할 수 있도록 버튼을 눌렀을 때 소리가 나게 하는 것입니다.

아이디어가 나왔으니 이제 프로그래밍 언어와 구동될 플랫폼을 정해야겠죠?
코딩을 한 번도 해보지 않은 30대 후반의 남자들이기에 가장 쉽다고 생각되는 웹으로 정했습니다.
HTML, CSS, JAVASCRIPT를 사용해서 바로 브라우저에서 결과를 확인할 수 있는 프로그래밍입니다.
이 포스팅을 보고 누구나 따라해도 할 수 있도록 만드는 것이 목표입니다!!

주제와 프로그래밍 언어를 정했으니 내 프로그램의 결과물이 정해졌습니다.
그러면 이걸 어떻게 gpt에게 물어보고 답을 얻어야 할지 프롬프트를 정리해야 합니다.

– chatgpt에 요구할 프롬프트 정리하기

chatgpt에게 프롬프트란 쉽게 말해 “우리가 내리는 명령”입니다.
즉, 채팅창에 입력하는 내용입니다.
뭔 이런 채팅하는 말을 어렵게 사용하나 싶으시죠?
하지만 chatgpt는 사람이 아닌 기계에 불과하기 때문에 프롬프트에 따라 결과가 완전 달라집니다.
프롬프트를 어떻게 잘할 수 있는지 연구해서 적용하는 “프롬프트 엔지니어링”이라는 말도 있습니다.
컴퓨터를 처음 배울 때 들었던 “Garbage In, Garbage Out!”이 딱 어울리는 말이겠네요.
프롬프트가 엉망으로 들어가면 chatgpt역시 엉망인 답을 내어주거든요.
구글에 “프롬프트 엔지니어링”검색하시면 다양한 기술을 볼 수 있습니다.
개인이 제일 잘 할 수 있는 방법은 일단 많이 대화를 시도하는 것입니다.
많이 대화하다보면 경험이 쌓이고 어떻게 질문해야 할지 점점 감이 잡히실 거예요.

그러면 우리가 원하는 최고의 프로그래밍 코드를 얻기 위해서 제가 사용한 프롬프트를 알려드리겠습니다.

안녕, 너는 지금부터 HTML, CSS, JAVASCRIPT를 전문적으로 다루는 웹 프로그래머야.

이제부터 나를 도와 내가 원하는 웹 프로그램을 만들어줘.

내가 만들고 싶은 프로그램은 시각장애인들도 사용할 수 있는 계산기 프로그램이야.

이 계산기는 기본 사칙연산(+,-,*,/)을 할 수 있어.

그리고 결과를 확인할 수 있는 버튼과 계산 식을 알 수 있는 창이 있어야해.

또, 계산이 완료된 후 결과를 지울 수 있는 Clear버튼도 필요해.

시각장애인들이 사용해야 하니 각 버튼을 누를 때마다 해당 버튼과 일치하는 소리가 나와야해.

코드를 파일별로 나눠서 보여주고, 보여줄때 파일이름을 꼭 보여줘.

그리고 줄별로 코드를 설명하는 주석을 모두 달아줘. 고마워. 부탁해.

위 프롬프트를 적용해서 얻은 답은 아래 이미지와 같습니다.
같은 프롬프트를 썼더라도 저와는 답이 다를 수 있습니다.

gpt프롬프트결과Download

2. Visual Studio Code 에 코드 작성하기

이제 gpt에게 코드를 받았으니 Visual Studio Code를 사용해 프로그램을 완성해보겠습니다.
우선 지난번에 설치했던 Visual Studio Code를 실행합니다.

아마 위와 같은 화면이 처음 나오실 거예요. 참고로 저는 맥북을 사용중이라 맥용 화면입니다.
윈도우도 저와 거의 비슷한 화면일거예요. 상단에 메뉴표시줄이 함께 있다는 게 조금 다를거라 생각합니다.

– 폴더 열기


가장 먼저해야 할 작업이 작업할 폴더를 열어주는 것입니다.
컴퓨터 바탕화면이나 본인이 원하는 곳에 폴더를 하나 만들어주세요.
아! 그리고 이제 코딩을 시작하신다면 폴더이름, 파일이름을 무조건 영어로 만드시는 것을 추천드립니다.
가끔 한글 파일명 때문에 동작하지 않는게 있거든요… 무조건 영어!!! 꼭 기억하세요.

폴더를 만드셨으면 폴더를 먼저 열어주시면됩니다.
방법1. 상단 메뉴표시줄 [파일] – [폴더 열기] -> 본인이 만든 폴더 선택
방법2. 위 화면 가운데 있는 [새 파일] 아래에 있는 [열기] 선택 -> 본인이 만든 폴더 선택

위 방법 중 편한 대로 폴더를 열어주시면 됩니다. 저는 ‘test’ 폴더를 만들어서 열어보겠습니다.

폴더 열기를 성공하셨다면 위와 같은 화면이 나올거예요.
반드시 확인해야 할 사항은 왼쪽 탐색기 부분입니다. TEST라는 내가 만든 폴더 이름이 맞는지 확인해주세요.
저기 TEST 폴더 이름이 보이고 파일은 하나도 없는게 보입니다.
이제 저 폴더안에 gpt가 알려준대로 html, css, js 파일 하나씩 총 3개를 만들면 코딩이 끝이 납니다.

– 새 파일 만들기


파일을 하나씩 만들어보겠습니다.
폴더안에 파일을 만드려면

방법1. 화면 가운데 있는 [새 파일] 선택
방법2. [파일] – [새 파일] 선택
방법3. 폴더명 TEST에 마우스 올려서 [새 파일] 아이콘 선택
방법4. 폴더명 아래 빈 공간에 마우스 오른쪽 클릭 [새 파일] 선택

방법4의 예시입니다.
파일 이름을 정해서 다음 세 파일을 미리 만들어 줍니다.

index.html
style.css
script.js

파일 3개를 모두 만든 모습입니다. 파일이름이 틀리지 않도록 꼭 다시 확인해주세요.
폴더이름은 달라도 괜찮습니다만 파일이름은 저와 다르면 동작하지 않을 수 있습니다.!!!

– 코드 입력하기


그러면 이제 index.html, style.css, script.js 파일 내용을 알려드리겠습니다.

<!-- index.html 파일입니다. -->

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>접근성 계산기</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <!-- 계산식과 결과를 보여주는 입력창 -->
        <input type="text" id="display" disabled>
        
        <!-- 버튼들이 있는 그리드 -->
        <div class="buttons">
            <!-- 사칙연산과 숫자 버튼 -->
            <button onclick="playSound('1'); input('1')">1</button>
            <button onclick="playSound('2'); input('2')">2</button>
            <button onclick="playSound('3'); input('3')">3</button>
            <button onclick="playSound('+'); input('+')">+</button>
            <button onclick="playSound('4'); input('4')">4</button>
            <button onclick="playSound('5'); input('5')">5</button>
            <button onclick="playSound('6'); input('6')">6</button>
            <button onclick="playSound('-'); input('-')">-</button>
            <button onclick="playSound('7'); input('7')">7</button>
            <button onclick="playSound('8'); input('8')">8</button>
            <button onclick="playSound('9'); input('9')">9</button>
            <button onclick="playSound('*'); input('*')">*</button>
            <button onclick="playSound('0'); input('0')">0</button>
            <button onclick="playSound('C'); clearDisplay()">C</button>
            <button onclick="playSound('/'); input('/')">/</button>
            <button onclick="playSound('='); calculate()">=</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

/* style.css 파일입니다. */

/* 기본 설정 */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.calculator {
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#display {
    width: 100%;
    height: 50px;
    font-size: 24px;
    margin-bottom: 10px;
    padding: 5px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    width: 100%;
    height: 50px;
    font-size: 18px;
    border: none;
    background-color: #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #ddd;
}

button:active {
    background-color: #ccc;
}
//script.js파일입니다.

// 입력된 식을 저장할 변수
let equation = "";

// 버튼 소리를 재생하는 함수
function playSound(button) {
    const audio = new Audio(`sounds/${button}.mp3`);
    audio.play();
}

// 숫자나 연산자를 입력할 때 호출되는 함수
function input(value) {
    equation += value; // 식에 입력한 값을 추가
    document.getElementById("display").value = equation; // 입력된 식을 화면에 표시
}

// 계산을 수행하는 함수
function calculate() {
    try {
        const result = eval(equation); // 식을 계산 (eval 사용에 주의)
        document.getElementById("display").value = result; // 결과를 화면에 표시
        equation = ""; // 계산 후 식을 초기화
    } catch (error) {
        document.getElementById("display").value = "Error"; // 계산 중 오류가 발생하면 에러 표시
        equation = ""; // 식을 초기화
    }
}

// 입력된 식을 지우는 함수
function clearDisplay() {
    equation = ""; // 식 초기화
    document.getElementById("display").value = ""; // 화면도 초기화
}

위 세 파일 내용을 복사 & 붙여넣기로 visual studio code에 입력합니다. 그러면 기초 작업이 끝납니다.
주의하실 점은 visual studio code에 붙여넣기를 하시고 반드시 “저장!!”하셔야합니다.
저장하지 않으면 동작하지 않습니다.

저장까지 완료하셨으면 지금까지 결과를 한번 확인해보도록 하겠습니다.
visual studio code의 index.html파일을 선택하고 파일이름 위에서 마우스 오른쪽 버튼을 클릭합니다.
그러면 아래쪽에 [Open In Default Browser]를 선택합니다.

만약 나는 [Open In Default Browser]라는 선택사항이 없다면…
내가 만들었던 폴더를 탐색기를 이용해 들어가셔서 index.html파일을 더블클릭해서 실행하시면됩니다.

위 화면같은 결과가 나오셨을 겁니다. ㅠㅠ
버튼은 잘 동작합니다. 하지만 우리가 원하는 배열이 아니네요.
무료의 gpt가 한 번에 좋은 코드를 던져주지 못했네요.

계산기 만들기 어떠셨나요?
이번엔 글이 너무 길어지는 관계로 여기까지 해보겠습니다.
다음 글에서는 gpt가 던져준 코드를 수정하는 프롬프트와 음성추가방법에 대해 알려드리겠습니다.

지금까지 Codinglee였습니다. 감사합니다.

2024년 10월 3일(목) 평창리 집에서 씀.

이전 글 보기1 : “30대 후반 친구들의 경제적 자유 찾기”
이전 글 보기2 : “챗지피티 활용 프로그래밍1 – 계산기 만들기(준비:chatgpt가입, vsc설치)

다음 글 보기 : “챗지피티 활용 프로그래밍3 – 계산기 만들기”

Similar Posts

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다