챗GPT를 활용하면 티스토리와 같은 블로그 또는 웹사이트상에 인사이드로 간단한 앱을 추가할 수도 있다. 전문적인 프로그래밍 기술이 없더라도 코드를 조금만 볼 줄만 안다면 누구나 쉽게 구현이 가능하다.
이번 글은 챗GPT를 활용하여 쉽게 구현 가능한 앱을 찾아보다가 쉬운 예 중 하나인 '간단한 날씨 앱'을 구현해 본다.
목차
먼저 구현이 완료되면 아래의 링크처럼 위치 기반의 날씨 정보가 텍스트로 보여준다. 아래 이미지는 2023년 7월 4일 수도권의 위치기반으로한 날씨 정보이다. 이날 출력된 날씨 데이터는 전날 폭염이었던 35도에서 많이 내려간 온도인데, 비가 조금 내렸고 오후부터는 많은 비가 예상되는 날씨라 무더위가 꺽인 기온을 보여준다.
챗GPT로 만든 간단한 날씨 앱
챗GPT 간단한 날씨 앱 날씨 확인하기
drawfreeman.tistory.com
챗GPT 간단한 날씨 앱 만드는 방법
너무 간단해서 이걸 방법이라고 설명하기도 살짝 민망할 수준이긴 하다. 어쨌든 방법을 설명하자면, 챗GPT를 활용하는 꿀팁이라면 역시 프롬프트의 활용이 중요하다는 생각이다. 코드를 구현하고 분석하는 것도 중요하지 않은건 아니지만, 챗GPT를 알면 알수록 그 보다는 프롬프트를 어떻게 활용하느냐가 더 관건으로 결과물의 완성도 차이를 확실히 체감할 수 있었다.
이 글에서 구현 예시로 든 간단한 날씨 앱 뿐 아니라 대부분의 웹기반 인사이드 앱을 만드는 방법은 크게 다음 세 단계의 절차로 진행될 듯 싶다. 참고로 개발자를 위한 프롬프트를 활용하는 구체적인 방법과 예시는 이전 글에서 한번 다뤘으니 궁금하면 먼저 참고하기 바람.
개발자를 위한 chatGPT 프롬프트 엔지니어링
개발자 관점에서 chatGPT 프롬프트 엔지니어링이란 무엇일까? 그리고 효과적으로 사용하려면 어떡해야 할까? 본 글에서 고품질의 출력값을 얻기 위한 chatGPT 프롬프트 엔지니어링 활용 팁을 공부
freernd.tistory.com
Step 1 프롬프트 입력
웹페이지에서 구현 가능한 프로그램을 작성하려고 합니다. 사용자의 위치를 기반으로 현재 날씨와 일주일 날씨 예보를 보여주는 간단한 인사이드 프로그램을 생성해 주세요.
다음과 같은 예제 코드를 생성해 줍니다. 해당 날씨 정보 API 서비스를 제공하는 OpenWeatherMap 이라는 사이트의 API(OpenWeatherMap API)를 활용하여 현재 날씨, 일주일 날씨 예보등을 보여주는 프로그램의 예제 코드를 생성해 보여줍니다.
Weather API - OpenWeatherMap
Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections.
openweathermap.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 날씨 앱</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#weather-container {
display: none;
}
</style>
</head>
<body>
<h1>간단한 날씨 앱</h1>
<button onclick="getLocation()">씨 확인하기</button>
<div id="weather-container">
<h2 id="city-name"></h2>
<p id="current-weather"></p>
<p id="forecast"></p>
div>
<script>
const API_KEY = "YOUR_API_KEY";
const weatherContainer = document.getElementById("weather-container");
const cityName = document.getElementById("city-name");
const currentWeatherElement = document.getElementById("current-weather");
const forecastElement = document.getElementById("forecast");
function getLocation() {
navigator.geolocation.getCurrentPosition((position) => {
getWeather(position.coords.latitude, position.coords.longitude);
}, (error) => {
alert("위치 정보를 가져올 수 없습니다. 브라우저의 위치 서비스를 확인해 주세요.");
});
}
async function getWeather(lat, lon) {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`);
const weatherData = await response.json();
const forecastResponse = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`);
const forecastData = await forecastResponse.json();
displayWeather(weatherData, forecastData);
}
function displayWeather(weatherData, forecastData) {
cityName.innerText = weatherData.name;
currentWeatherElement.innerText = `현재 날씨: ${weatherData.weather[0].description}, 온도: ${weatherData.main.temp}℃`;
let forecastString = "일주일 날씨 예보:";
forecastData.list.slice(0, 7).forEach(day => {
forecastString += ` ${day.dt_txt.split(" ")[0]} - ${day.weather[0].description}, 온도: ${day.main.temp}℃;`;
});
forecastElement.innerText = forecastString;
weatherContainer.style.display = "block";
}
</script>
</body>
</html>
코드가 어떻게 구성되어 있는지 확인해 본다. 크게 두 부분으로 구성된 것을 확인할 수 있다.
1. <head>
제목과 style, 즉 User Interface 에 해당되는 부분이 head에 포함되어 있다.
2. <body>
실제 날씨 앱의 function(기능)에 해당한다. 즉 해당 날씨 정보 사이트의 정보를 처리하는 script가 실행되는 부분으로, 해당 사이트에서 부여받은 API Key값으로 현재의 날씨 정보, 여기서는 현재 날씨, 일주일 날씨 예보 세부적으로는 온도등의 정보를 받아서 각각의 인자로 받아와 파싱해주는 코드로 구성되어 있다. 그런데 티스토리 웹페이지의 구조를 보면 글쓰기의 웹페이지는 HTML모드로 보면 head는 HTML 스킨편집에서 공통으로 적용되는 부분이기 때문에 실제 날씨 앱의 기능만 적용하려면 해당 페이지의 <body>에만 적용해야 한다. 따라서 챗GPT에게 인사이드스타일로 적용하는 코드로 변환을 요청하여, 위의 스타일에 해당하는 코드의 위치를 <body>부분에 적용해 줘야 한다. 그렇게 스타일 부분을 변환해서 적용한 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 날씨 앱</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center;">
<h1>간단한 날씨 앱</h1>
<button onclick="getLocation()">날씨 확인하기</button>
<div id="weather-container" style="display: none">
<h2 id="city-name"></h2>
<p id="current-weather"></p>
<p id="forecast"></p>
</div>
<script>
const API_KEY = "YOUR_API_KEY";
const weatherContainer = document.getElementById("weather-container");
const cityName = document.getElementById("city-name");
const currentWeatherElement = document.getElementById("current-weather");
const forecastElement = document.getElementById("forecast");
function getLocation() {
navigator.geolocation.getCurrentPosition((position) => {
getWeather(position.coords.latitude, position.coords.longitude);
}, (error) => {
alert("위치 정보를 가져올 수 없습니다. 브라우저의 위치 서비스를 확인해 주세요.");
});
}
async function getWeather(lat, lon) {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`);
const weatherData = await response.json();
const forecastResponse = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`);
const forecastData = await forecastResponse.json();
displayWeather(weatherData, forecastData);
}
function displayWeather(weatherData, forecastData) {
cityName.innerText = weatherData.name;
currentWeatherElement.innerText = `현재 날씨: ${weatherData.weather[0].description}, 온도: ${weatherData.main.temp}℃`;
let forecastString = "일주일 날씨 예보:";
forecastData.list.slice(0, 7).forEach(day => {
forecastString += ` ${day.dt_txt.split(" ")[0]} - ${day.weather[0].description}, 온도: ${day.main.temp}℃;`;
});
forecastElement.innerText = forecastString;
weatherContainer.style.display = "block";
}
</script>
</body>
</html>Step 2 구현 코드 적용 및 테스트
티스토리 웹페이지에 적용하기 전에 먼저 로컬서버(http://[::]:8000/)에서 전체 코드가 제대로 실행되는지 확인해 본다. 물론 굳이 귀찮으면 바로 티스토리의 글쓰기로 들어가서 HTML 모드로 전환후 <body>부분만 삽입하여 '미리보기'로 확인할 수 있다.
하지만 발행을 한 이 후에 수정을 하려면 매번 HTML모드로 변환하여 수정된 코드를 적용하여 확인해야 하기에 번거로움이 있기에, 필자는 VS Code 편집툴을 사용하여 구현된 코드의 확인 및 테스트 과정을 거친 후에 실제 발행할 웹페이지인 티스토리에 적용하는 방법으로 진행하고 있다. 다시 정리하면 코드가 자신 있다면 바로 웹사이트에 적용해서 발행 해도 되지만, VS Code와 같은 편집툴에서 충분히 디버깅 후에 적용하는 방법이 효율면에서 더 좋기에 이 방법을 더 선호하는 편이다.
Step 3 실제 적용 및 발행
코드 확인까지 완료가 되었다면 위에서 언급한 웹사이트(티스토리)의 글쓰기로 들어와서 HTML 모드로 변환후 <body> ~ </body> 에 해당하는 script를 복붙 한 후 미리보기로 확인 해본다. 미리보기까지 확인이 되었다면 적용해서 확인한 후 발행하면 하나의 하나의 페이지상에서 간단한 날씨 앱이 만들어 진다.
이 블로그의 다른 글 보고
'AI' 카테고리의 다른 글
| PyTorch, 맥북 프로 M2칩셋 CUDA 지원 안됨 해결 방법 (0) | 2023.07.20 |
|---|---|
| 허깅페이스(Hugging Face) 디퓨저(Diffusers) 설치 방법 (0) | 2023.07.15 |
| 뤼튼 AI, 한국어 초거대 콘텐츠 생성 AI (0) | 2023.05.19 |
| 딥엘 번역기 사용법: 정확하고 독보적인 AI 번역 서비스 (0) | 2023.05.18 |
| 구글 바드 Bard 코딩 활용 방법 (0) | 2023.05.16 |
댓글