개인 시간이 조금 남아서 개발자 커뮤니티를 둘러보던 중 어떤 AI에 대한 칭찬글과 함께 100% AI를 활용해 만든 프로그램을 봤다.
생각보다 너무 예쁘게 꾸며져있고 기능도 적당히 돌아가는 모습을 보고 "나도 해볼까?"라는 생각이 들어 갑자기 시작하게 된 프로젝트다.
어떤걸 만들어볼까 고민을 하다가 예전에 [사업자번호 유효여부]를 검증하는 API를 MES를 만들 때 사용했던것이 떠올라 오랜만에 공공데이터포털에 접속했다.
공공데이터 포털
국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase
www.data.go.kr
접속했을 때 가장 먼저 눈의 띈 API가 한국관광공사에서 제공하는 여행지 API였기에 이걸로 아~주 간단한 웹 사이트를 만들자고 생각했다.
우선 기본적인 화면 디자인을 예쁘게 작성해주는 AI툴에게 어떤 기능을 구현할 것인지 자세히 설명을 하고 나온 메인 페이지이다.
큰 틀의 디자인을 AI가 작성하고 디테일한 이미지, 아이콘 등은 수동으로 변경해주었다.
이제 디자인을 구현했으니 프론트엔드 기능을 구현해보자.
1. 가장 기본적인 API를 호출하는 기능
2. TourApi 활용 가이드에서 제공한 기능별/조건별로 검색하는 기능
이 사이트의 메인 기능은 저 2가지가 전부이다. 2번의 경우에는 1번의 API 호출/응답 방식과 동일하니 사실상 1가지 기능을 세분화 했다고 보면된다.
이렇게 프론트엔드를 구성하고나니 문제가 생겼다.
나 : "어..? API Key값이 일반 사용자한테 노출이 되는데? 어떻게 처리하지? 인공지능아 도와줘!"
AI : "당신은 웹을 만들면서 프론트엔드만 만든것입니까 휴먼? 백엔드는 어디갔죠? 서버는요?"
그래서 급하게 백엔드 코드를 작성하여 서버단에서 API Key를 처리하도록 코드를 다시 수정하였다.
방법을 간단히 설명하자면
1. 현재 배포할 서버는 Cloudflare이다.
2. Cloudflare의 2개의 프로젝트를 생성한다.(프론트, 백엔드(서버))
3. 서버에 백엔드에서 선언한 API 변수와 공공데이터포털에서 받은 API Key 값을 환경변수에 설정한다.
이렇게 하여 정상(?)적인 웹 사이트를 하나 뚝딱 만들었다.
한국 관광 가이드 - 숨겨진 보석을 발견하세요
한국의 아름다운 관광지, 맛집, 숙박시설을 쉽게 찾아보세요. 전통 문화부터 현대적 명소까지 모든 여행 정보를 한 곳에서 확인하세요.
soramiro.pages.dev
아직 계속 수정중이지만 대략적인 기능은 정상 동작하니 궁금하신 분들은 들어가보세요.
(웹 배경지식 하나도 없이 만들어봤는데 이게 만들어지네..)