실시간 환율을 확인할 수 있는 웹 페이지를 개발해보자 (API 활용)

• 이것만은 필요 (사전 지식)

  1) API 개념 2) JSON 3) 환율 API 활용 방법 ★

1) API 개념

API 개념부터 살펴봅니다. API란, Application Programing Interface의 약자로서, 두 개의 소프트웨어의 구성요소가 서로 주고받고 통신을 하는 인터페이스를 말합니다.

...네...뭐, 사실 저도 이 개념을 정확히 이해하지는 못했습니다. 일단 API라는 말은 너무 많이 들었지만, 생각보다 API의 명확한 정의를 결론내리기 어렵다고 하더군요.

우선은 ①상호작용 ②데이터를 주고받음 이라고 생각했습니다. 결국 지금 진행하려는 환율 웹 프로젝트도, 결국에는 환율 실시간 정보, 즉 API를 받아와야 데이터로 사부작거릴 수 있기 때문이죠.

그럼 다음으로 API 활용에 필수적인 JSON과, JSON의 동작 방식을 알아보겠습니다.

2) JSON

JSON은 JavaScript Object Notation의 약자입니다. 직역하면, "자바 스크립트 객체 표기법"입니다.

한마디로 데이터를 교환하고 저장하는 텍스트 기반의 표준 방식이라고 볼 수 있습니다.

JSON의 형태는 Javascript와 아주 흡사합니다.

// 기본 형태
{ Key : Value }

// 예시
{"이름" : "세세님", "나이" : 25, "취미" : "Velog"} 

// 객체 예시
{"Velog" : {"목록" : "환율 API 활용"} }

 // 배열 예시
{"태그" : [개발, Javascript, API] }

네에. 이러한 구성을 가지고 있습니다. 생각보다 단순하면서도 복잡합니다(?) 아마 저 안에 들어가는 객체와 배열이 많을 수록... 크흠, 상상은 그만두겠습니다.

여기서 중요한 건 문자열과 Property를 작성할 시 반드시 큰 따옴표("")를 사용해야 한다는 겁니다.

3) 환율 API 활용 방법

그럼 이제 본격적으로 환율 API를 가져오는 방법을 알아보도록 하겠습니다.

1. 한국수출입은행 환율 API 검색 https://www.koreaexim.go.kr/ir/HPHKIR020M01?apino=2&viewtype=C&searchselect=&searchword=

우선 한국수출입은행 홈페이지 Open API로 찾아갑니다. 대부분의 환율 API는 이 곳에서 인증키를 받아 사용한다고 합니다.

저 또한 '나의 인증키 발급 내역'을 통해,

요렇게 인증키를 받았습니다! (인증키=APK Key는 반드시 노출하면 안된다고 합니다 ㅎㄷㄷ)

자, 그럼 인증키도 받았으니, 본격적인 환율 API를 활용한 간단한 웹 개발을 진행해보겠습니다.

2. 웹 개발 요청 (Cursor AI 활용)

Cursor AI를 통해 아주 간단한 환율 웹 페이지를 요청하였습니다. 저는 무료 버전을 쓰고 있기 때문에, 파일 생성은 안되고 코드만 짜주는 방식입니다.
복잡한 기능 넣었다간 어차피 script 태그에서 아무것도 못 건드릴 게 뻔하기 때문에, 진짜 기초 기능만 넣어달라고 부탁했습니다.

저는 index.html style.css 버전으로 나누어 파일을 생성했습니다. 오늘은 API를 직접 활용해보기만 하는 실습이기 때문에, 제가 사전에 받은 API key를 코드에 넣어보도록 하겠습니다.

index 파일 내 API Key를 넣는 구간을 찾았습니다. 한번 넣어보도록 하겠습니다!

3. 오류 발생

앗. 오류가 발생함과 동시에 환율 API가 제대로 나오지 않습니다. 검색을 해보니, CORS의 문제라고 합니다.

CORS 에러란, 웹 브라우저의 Same-Origin 정책으로 인한 보안 오류로, 즉 출처가 불일치하면 다른 출처로 간주하여 접근을 차단한다고 합니다. (=서로 다른 도메인(출처)에 대한 요청을 보안상 차단함)

정말 보안이라고 하니, 보안 컨설팅러로서 이해는 된다만....

일단 가장 좋은 해결방안은, 서버(백엔드)에서 CORS 정책을 설정하여 출처 요청을 허용해야 하는데... 아시다시피, 전 아직 백엔드 시작조차 하지 못한 초보 개발러입니다.

그리하여 제가 듣는 강의에서 추천해준 방법은 Google Apps Script를 활용한 우회법입니다.

4. Google Apps Script 사용

① Google Apps Script 프로젝트 생성 ② "새 프로젝트" 클릭 ③ 프록시 코드 작성

④ [새 배포] > [웹 앱] > [엑세스 권한이 있는 사용자] = 모든 사용자

배포 관리 > 웹 앱 URL의 링크를 클릭해보니

일단 환율 API는 잘 나오는 것 같습니다. 이제 Cursor AI 코드로 돌아가봅니다.

2. Javascript 구현

<script>
    // 환율 불러오기
    const API_URL = "https://script.google.com/macros/s/${나의 API key}/exec";

    async function exchange(API_URL) {
        try {
            // API 및 JSON
            const response = await fetch(API_URL);
            const data = await response.json();

            let price = {};
            data.forEach(element => {
                let ttb_value = element.ttb.replace(/,/g, '');
                price[element.cur_unit] = parseFloat(ttb_value);
            });
            return price; // 가격만 반환하기(코드 리뷰)

        } catch (error) {
            console.log('ERROR : ', error);
            return null;
        }  
    }

    // 이벤트 리스너
    let exchangeRates = null;

    exchange(API_URL).then(rates => {
        exchangeRates = rates;
    })

    document.getElementById("calculate").addEventListener('click', function() {

        if (!exchangeRates) {
            alert('환율 정보를 불러오는 중입니다. 잠시 후 시도해주세요.');
            return;
        }

        let example = document.getElementById("input_value").value;
        let selectedName = document.getElementById("choice").value;

        if(!example || isNaN(example) || parseFloat(example) <= 0) {
            alert('정확한 금액을 입력해주세요.');
            return;
        }

        let result =  parseFloat(example) * exchangeRates[selectedName]; //지역변수 사용X
        result = Number(result.toFixed(2));

        document.getElementById("result").innerText = result + "원";
    });

    </script>

저는 이렇게 Javascript를 구성하였습니다. 이렇게 구성하고, 연결해보면...

짜라잔. 드디어 환율 계산기를 완성해보았습니다. 어려우면서도 간단한 API 활용을 직접 해보니, API 활용이 얼마나 중요한지 제법 실감했습니다.

마지막으로 프로젝트를 하나 더 해보고 자바스크립트는 일단 마무리해보려고 합니다.

사칙연산과 기타 기능이 가능한 웹 페이지 계산기를 개발해보자.

• 기본 기능 구현 1) 덧셈, 뺄셈, 곱셈, 나눗셈 사칙연산이 가능하다. (*오늘의 주제) 2) 작성된 내용이 모두 삭제되는 Clear 기능이 가능하다. 3) 계산기의 전원을 켜고 끌 수 있어야 한다.

• 심화 기능 구현 (아직은 비활성화) 1) 소숫점 자리를 통한 사칙연산이 가능하다. 2) 백분율 계산이 가능하다.

2. 역할 분담

• HTML/CSS 기본 구성 - Claude AI 활용
• Javascript - 나

큭... Javascript 코드 작성 연습과 DOM API 연습을 위해 Javascript는 직접 작성할 겁니다.

웹 디자인의 솜씨는 저의 비루한 실력을 공개할 수 없어, 신통방통 금방 예쁘게 제작해주는 Claude AI를 활용해보았습니다.

네. 저는 디자인이 안 예쁘면 다음 진행을 못하는 병에 걸려 있습니다. 그런데 이런 저의 병을 단번에 낫게 해줄만큼, Claude AI의 디자인은 약간의 벤치마킹할 요소를 던져주면, 정말 기가 막히게 예쁘게 만들어줍니다.

일단 Claude를 통해 구현한 계산기 디자인과 배치 요소는 다음과 같습니다. 당연히 Javascript 코드는 제가 직접 작성할 거라, script 동작 부분은 일부로 빼달라고 요청하여 실제 동작은 하지 않습니다.

이제 계산기가 동작이 되도록 한 번 코드를 구현해보겠습니다.

3. Javascript 구현

[주의] Javascript 코드는 처음이라, 코드가 다소 비효율적일 수 있습니다.

** * 숫자 입력 (하나씩)**

// 배열로 숫자 버튼 한번에 구현
const arrayBtns = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9];

arrayBtns.forEach(function(btn) {
   btn.addEventListener('click', function() {
      display.textContent = btn.textContent;
   });
});

구현한 결과는 이렇습니다.

어라, 근데 예를 들어 '12' 같이 십의 자리 숫자 이상은 입력이 안됩니다. 그럼 일의 자리만 사칙연산되는 계산기라고 우겨볼까 싶습니다.

하지만 그런 기본 입력조차 안되는 계산기는 아무도 안 쓰겠죠? (^^)

휴 그럼 숫자를 연달아 입력할 때는 줄줄이 숫자가 입력되도록 다시 구현해 보겠습니다.

** * 숫자 입력 (여러 개)**

arrayBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
       if(display.textContent == 0) {
          display.textContent = btn.textContent;
       } else {
          display.textContent += btn.textContent;
       }; 
    });
});

Javascript 강의에서 배웠던 배열과 조건문을 모두 적용해보았습니다.

1) display가 0 (입력X) - 숫자로 변경 2) display가 숫자 (입력O) - 기존 숫자에 새로운 숫자 추가

이제 십의 자리뿐만 아니라 그 이상도 눌러집니다. 신기합니다.

그럼 이제 본격적으로 메인인 사칙연산 기능을 구현해보겠습니다.

** * 사칙연산 기능**

덧셈, 뺄셈, 나누기, 곱셈 계산은 사실 너무나 쉽습니다. 하지만 갑자기 프로그램으로 구현을 하라니까 조금 아니 꽤 막막하군요.

그나마 떠오르는 아이디어는, 사칙연산 버튼을 누르기 전 값과 누른 후의 값을 가지고 어떻게 뚝딱 만들어야 한다는 건데, 이게 감이 안 잡힙니다.

일단 변수부터 선언해보겠습니다.

1) 변수 선언 & 생각하기

pre 이전 값 (첫번째 숫자) curr 현재 값 (두번째 숫자) icon 사칙 연산 기호 저장 isInput 값이 입력 되었는지 확인하는 boolean 변수

let pre = 0;  // 이전 값
let curr = 0;  // 현재 값
let icon = '';  // 사칙 연산 기호
let isInput = false;  // 숫자 초기화

음. 저의 생각은 이렇습니다.

1. 숫자 입력 (첫번째 숫자)
   
2. 사칙연산 버튼을 누르면 1. 입력한 숫자를 이전 값(pre)에 넣는다 2. 사칙연산 버튼의 기호를 기억해둔다 -> 나중에 equal(=) 때 써야함 3. 입력한 숫자를 초기화한다
   
3. 다시 숫자 입력 (두번째 숫자)
   
4. 계산

2) 코드 구현

1. 숫자 입력(첫번째 숫자)

// 기존 코드 활용
const arrayBtns = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9];

arrayBtns.forEach(function(btn) {
   btn.addEventListener('click', function() {
      if (display.textContent == 0) {
         display.textContent = btn.textContent;
      } else {
         display.textContent += btn.textContent;
      }; 
   }); 
});

2. 사칙연산 버튼 구현

const calBtns = [
   {cal_btn : btnPlus, op : '+'},
   {cal_btn : btnMinus, op : '-'},
   {cal_btn : btnMultiply, op : '*'},
   {cal_btn : btnDivide, op : '÷'}
];

// 사칙연산 버튼 누를 때 실행
calBtns.forEach(function(cal) {
   cal.cal_btn.addEventListener('click', function() {
      pre = Number(display.textContent); // display 값을 pre에 삽입
      icon = cal.op; // 사칙연산 기호 넣기
      isInput = true; // 값이 입력됨 -> 초기화 필요
   });
});

3. 다시 숫자 입력 (두번째 숫자)

// 1 코드를 변경
arrayBtns.forEach(function(btn) {
   btn.addEventListener('click', function() {

      if(isInput) { // *추가* 값 입력 시 초기화
         display.textContent = btn.textContent; // 두번째 숫자
         isInput = false;
         } 

      else if (display.textContent == 0) {
         display.textContent = btn.textContent;
      } else {
         display.textContent += btn.textContent;
      }; 
   }); 
});

4. 계산

btnEquals.addEventListener('click', function() {
   curr = Number(display.textContent);

   if(icon === '+') { // 덧셈
      display.textContent = pre + curr;
   } else if (icon === '-') { // 뺄셈
      display.textContent = pre - curr;
   } else if (icon === '*') { // 곱셈
      display.textContent = pre * curr;
   } else if (icon === '÷') { // 나눗셈
      display.textContent = pre / curr;
   }

   isInput = true; // 계산 끝! 다음 입력 준비

  });

5. 기능 작동 확인

10 곱하기 3을 해서 30이 나오는 걸 알 수 있습니다.

... 진짜 간단할 줄 알았는데, 전 반나절 꼬박 걸렸습니다. 다들 그 복잡한 기능의 웹들을 뚝딱 만드시는 거 보면 존경스럽습니다.

아직 지우개 기능이랑 전원 ON/OFF도 안 했는데... 그래도 자바스크립트 동작 패턴과 배열, 조건문을 숙지할 수 있었던 건 큰 수확이군요.

다음은 디스플레이에 나와 있는 숫자를 모두 지우는 clear 기능과 전원을 끄는 기능을 한 번 구현해봐야겠습니다.

🔹다운로드 링크 : https://cursor.com/download

필자는 리눅스 + 윈도우 둘 다 쓰지만, 리눅스는 사양이 좋지 않아 윈도우로 선택해야 합니다.

보니까 권장 사양이 있더라고요? (RAM 8GB 이상, 16GB 권장) 저는 리눅스가 RAM 4GB이고, 윈도우가 RAM 16GB라 끊김없이 이용하고 싶어서 윈도우로 선택🤦‍♀️

② Cursor AI 실행

그나저나 VS code 사에서 만들었다던데 뭔가 UI나 구성, 스타일이 정말 흡사합니다. IT 비전공자 입장으로서 VS code는 그래도 다뤄본 적이 있어서 적응하느라 헤매이지 않아 좋습니다.

③ Google API 키 생성

일단 Google AI Studio에서 API Key를 생성해줍니다. API 개념은 주구장창 들어봤는데, API는 처음 써봐서 약간 어려웠습니다. (찐 초짜인거 티내기)

🔹API 단계

1) File > Preference > Cursor Setting 2) Models에서 Gemini 2.5 flash를 활성화 3) OpenAI API Key 활성화 후 내가 생성한 API Key 복사 붙여넣기

④ Gemini 2.5 Flash를 통한 코드 생성

이제 본격적인 AI 에이전트를 통한 코드 생성 단계입니다.

어라, 근데 계속 Pro 버전이 필요하다고 합니다. 진짜 당황했습니다. 분명 다 Gemini 2.5 flash는 pro 버전 아니어도 된다던데 왜 나만 안되는 거죠? (진짜 결제해야 함? 그런거임?) 그러다가 설마 Agent는 프로 버전이고, Ask로 하면 되는 건 아니겠....

아주 잘됩니다. 저랑 같은 이유로 헤매는 분이 없길 바라면서 글을 써봅니다. Agent는 Pro 버전에서 사용가능하며, 코드 요청은 Ask로도 가능한 듯 보입니다.

Google AI Studio를 통해 API 요청이 실제로 일어난 것을 확인함으로써 제 손가락이 제대로 API를 활성화시켜 Cursor AI와 연결했음을 알 수 있습니다. (→ 너무 쉬운 걸 저는 30분을 헤맸어요🤦‍♂️)

이제 토이 프로젝트(간단)를 시작해보려구 합니다.

드디어 제 첫 개발이로군요. 보안 컨설팅러로 일하고 있지만 본격적인 개발은 처음이라 좀 떨립니다.

초짜 중 초짜지만 한 번 열심히 해보려구 합니다.

[참고한 강의] 'Cursor AI로 만들면서 배우는 Web & Javascript'