안녕하세요. 엔지엠소프트웨어입니다. 오늘은 캠핑장 예약 매크로를 어떻게 만드는지 알아보도록 하겠습니다. 사실, 캠핑장뿐만 아니라 골프 부킹이나 선착순과 같은 곳에도 사용할 수 있습니다. 다양하게 응용할 수 있는데요. 문제는~ 사이트에 피해를주거나 문제가 될만한 곳에는 사용하시면 안된다는 겁니다. 자동화 매크로를 사용하는 경우 불이익을 받을 수 있기 때문입니다. 서비스 회사의 약관을 잘 읽어보시는게 좋겠죠?

 

골프 부킹이나 캠핑장 예약하는 방법을 학습하기 위해 엔지엠 에디터를 실행하고, 새로운 스크립트를 하나 추가하세요. 참고로, 회사 내부 사이트에서 데이타를 크롤링하거나 검증하는 용도로도 많이 사용하고 있습니다. 웹 API 관련한 내용들을 잘 활용한다면 말이죠^^

 

 

캠핑 예약 사이트 주소는 아래와 같습니다.

[ 금수문화공원 야영장 예약 안내 ]

 

사이트 주소를 보면, 연도와 월이 포함되어 있는걸 확인할 수 있습니다. initYear와 initMonth입니다. 오늘 날짜가 2022년 10월 11일인데요. 1개월씩 달력을 보여주기 때문에 년도와 월까지만 GET 방식으로 넘겨주면 됩니다.

https://www.sj.go.kr/gumsu/page.do?mnu_uid=1850&csr_class=0&step=list&cs_uid=0&initYear=2022&initMonth=10#self

 

 

주소에서 다이나믹하게 년도와 월을 입력하도록 할거예요. 그래서, 년월을 저장할 수 있는 변수 2개를 추가 했습니다. 아래 그림을 참고하셔서 변수 아이디(year, month)를 설정하세요. 그리고, 변수 2개 모두 덮어 쓰기 속성을 True로 변경해주세요.

 

 

사용자로부터 년도와 월을 입력 받을겁니다. 이럴 때 사용할 수 있는 액션이 [ 입력 메세지 박스 ]입니다. 값 기본값 속성을 보시면 {N_YYYY}와 같이 되어 있습니다. 월 액션의 기본값은 {N_MM}으로 되어 있구요. 중괄호안에 N_ 로 시작하는 변수는 내장 변수라고 부릅니다. 내장 변수의 자세한 내용은 [ 여기 ]에서 확인할 수 있습니다.

 

 

잘 동작하는지 스크립트를 한번 실행 해볼까요? 아래 동영상처럼 사용자로부터 캠핑장 또는 골프 부킹 예약 년도와 월을 입력 받습니다. 사실 디테일하게 하려면~ 일자까지 추가하시면 좋겠죠? 우선은 간단한 테스트라서 년월만 처리하는걸로 하겠습니다.

 

 

사용자로부터 입력받은 년월 값을 변수에 저장해야 합니다. 변수에 값을 추가하는 방법은 아래 동영상을 참고하세요.

 

 

사이트에 접속하는 방법은 [ 웹 API의 연결 ] 액션을 사용하면 됩니다. 연결 액션의 속성은 아래와 같습니다. 주소를 보면 Year와 Month가 변수 이름으로 대체되어 있는걸 확인할 수 있을겁니다. 변수를 사용할 때 변수 가져오기와 변수 추가하기로 해도 되지만, 변수를 가져올 때는 중괄호안에 변수명을 넣어서 직접 가져올 수 있습니다.

https://www.sj.go.kr/gumsu/page.do?mnu_uid=1850&csr_class=0&step=list&cs_uid=0&initYear={year}&initMonth={month}#self

 

 

아래 동영상은 기본값으로 매크로 스크립트를 실행 해본겁니다. 여러분들은 년도와 월을 바꿔가면서 실행 해보세요. 그러면, 사이트에서 예약 년도와 월이 변경되는걸 확인할 수 있을겁니다.

 

 

캠핑장 예약 날짜를 선택했으면 예약이 가능한지 확인해야 합니다. 그래야 예약하기 버튼을 클릭 후 예약을 계속 진행할 수 있기 때문입니다. 현재 날짜에 예약 가능한 사이트가 있는지 확인하는건 아래 그림과 같이 목록으로 표시 해줍니다. 여러가지 추가 정보도 더 있네요.

 

 

예약하기 [ 버튼 ]을 직접 클릭해도 됩니다만, 실제 클릭이 어떻게 이루어지는지 확인하는 방법과 목록을 가져오는 방법에 대해 알아볼께요. [ 웹 크롤러 ] 액션을 추가하고 아래와 같이 설정하세요. 아래 그림을 봐도 속성에 왜 이렇게 설정해야 하는지 잘 이해가 안갈수도 있습니다. 웹에 대한 지식이 어느정도 있어야 하는 부분이거든요^^;

 

 

우선, 예약 사이트에서 F12를 눌러서 구조를 살펴봅시다. 개발자 도구에서 엘리먼트 선택 도구로 예약하기 버튼을 선택 해보세요.

 

 

우측에 소스를 잠깐 살펴볼까요? a 태그로 되어 있고, 여러가지 어트리뷰트(Attribute: 특성, Property: 속성)를 가지고 있습니다. class는 별도로 ClassName으로 값을 추출할 수 있습니다. 아무튼, 여기서 중요한 부분은 href에 서버로 예약 요청하는 내용이 없다는 것입니다. 그래서, 우리가 가져와야 할 특성은 onclick입니다. 여기에 보면 JavaScript(자바스크립트) 함수명과 사이트 번호가 들어 있습니다. 이 값을 사용해야 합니다.

<a title="예약하기" class="bt_booking_doing" href="#self" onclick="goReserve(278)">예약하기</a>

 

엔지엠 매크로 스크립트를 실행하고, 데이타를 잘 가져왔는지 살펴봅시다. 엘리먼트 컬렉션을 클릭하면 가져온 모든 엘리먼트를 확인할 수 있습니다. 여기서 각각의 엘리먼트를 클릭해보면 값을 확인할 수 있는데요. 이 값이 서버로 예약을 요청하는 자바스크립트 함수입니다. 파라메터도 확인할 수 있죠?

 

 

여기서, 이 값들을 모두 엑셀에 정리 해볼까요? 크롤링한 값들을 저장할 변수(예약 목록)을 하나 더 추가 했습니다.

 

 

웹 크롤러의 변수 추가하기로 예약 목록 변수에 엘리먼트 목록을 추가시켜줍니다.

 

 

마지막에 [ 텍스트 쓰기 ] 액션을 하나 추가하세요. 바탕화면에 "예약 목록.csv"로 저장하게 했습니다. 이 설정은 텍스트 파일 선택 속성을 클릭하여 저장 위치와 파일명을 입력하세요. 아래 그림에서 속성 하나를 설정하지 않았는데요. 파일로 저장하려면 저장 속성을 True로 설정해줘야 합니다^^;

 

 

텍스트 파일에 엘리먼트 목록을 써야 하기 때문에 변수에 저장되어 있는 값을 변수 가져오기로 텍스트 쓰기 속성에 넣어주세요.

 

 

스크립트를 실행하면 바탕화면에 csv 파일이 하나 생성되었을겁니다.

 

 

파일을 열어보면 아래 그림과 같이 예약 버튼의 자바스크립트 함수와 파라메터 값이 들어있는걸 확인할 수 있습니다.

 

 

자바스크립트를 실행만하면 되는데요. 아래 그림처럼 자바스크립트 실행 액션을 마지막에 추가하고, 속성을 설정하세요.

 

 

가장 좋은 방법은 텍스트 파일 또는 엑셀 파일에서 한줄씩 읽어서 자바스크립트를 실행하는겁니다. 하지만~ 이 예제에서는 간단한 테스트라서 복잡하게 로직을 추가하거나 예외 상황에 대한 대처는 처리하지 않았습니다. 이런 부분들은 작업하시면서 직접 처리하는게 좋습니다. 아무래도 속도와 효율이 중요한 작업이기 때문에 최적화에 많은 시간을 들여야 할겁니다. 뭐~ 이정도만 되더라도 누구보다 빠르게 예약하거나 부킹을 잡을 수 있을겁니다^^

※ 이 예제에서 사용된 스크립트는 하단에 첨부되어 있습니다. 파일을 다운로드하고, 에디터에서 열어보세요.

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천1 비추천0