n봇 개발 이야기 - [1일차:대화형 인터페이스에 눈을 뜨다]

 스마트폰 개발자가 사용자들에게 서비스를 제공해 줄 수 있는 방법이 점점 다양해지고 있습니다. 초창기에는 네이티브 앱, 중반기에는 웹 페이지를 애플리케이션처럼 꾸민 웹 앱, 이제는 대화형 인터페이스를 이용한 봇과 같은 개념이 등장하게 되었지요.
 네이티브 앱은 스마트폰의 기능을 자유롭고 가장 최적화된 상태로 사용할 수 있지만, 스마트폰의 운영체제와 버전에 따라서 개발을 다시 해야하는 불편함이 있었습니다. 웹 앱은 스마트폰의 운영체제와 버전에 상관없이 개발할 수 있다는 장점이 있지만, 네이티브앱보다 최적화가 덜 된 경우가 많고, 스마트폰의 기능 사용에 제약이 좀 있습니다. 그리고 최근에 나오게 된 대화형 봇은 추가로 애플리케이션을 다운받을 필요가 없다는 점과 UI 디자인에 많이 신경을 쓸 필요가 없다는 장점이 있죠.
 그러한 이유로 최근 봇 개발에 관심이 많아지게 되었는데, 봇으로 할 만한 재미있는 주제가 생갔났습니다. 바로 돈 정산입니다. 학교에서 선배들과 친구들이 놀러나가다 보면 돈을 쓸 일이 자주 생기는데, 주로 카톡방에 톡을 생성해서 자신이 쓴 돈을 올리고, 나중에 검색 기능으로 정산을 수동으로 하는 방식을 사용합니다. 그러나 돈이 많이 왔다갔다하거나 인원이 많아지면 그 작업이 어려워지는 단점이 있습니다. 그래서 저는 "카톡방에 쓴 돈을 올리면 나중에 자동으로 계산을 해주면 어떨까?" 라는 생각을 했고, 이걸 카카오톡의 옐로아이디를 이용해서 만들어보려고 했습니다.
 그런 생각에서 n봇이라는 프로젝트가 출범하게 되었고, 지금부터 그 프로젝트의 진행과정과 동작 원리에 대해서 포스팅을 하겠습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

PhantomJS로 Blogger댓글 조회 프로그램 작성하기

이미지
Jpub의 <자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉>이란 책의 소스코드를 참고했습니다. 책을 읽던 중 티스토리 관리 페이지에 로그인해서 새 댓글을 확인하는 프로그램을 만드는 부분을 보게 되었습니다. 그러나 저는 티스토리 초대장이 없는 관계로 책의 소스를 응용해서 Blogger의 새 댓글을 확인하는 프로그램을 만들어 보았습니다. 우선 PhantomJS와 CasperJs를 컴퓨터에 설치해줍니다. npm install -g phantomjs npm install -g casperjs 이 프로그램을 만들 때 가장 먼저 해야하는 작업이 Blogger에 로그인하는 것입니다. 구글 계정으로 로그인되어있지 않은 상태로 다음 URL로 들어가게 되면 로그인 창이 뜨게 됩니다. https://accounts.google.com/ServiceLogin/identifier?hl=ko&passive=true&service=blogger&ltmpl=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Fhome&flowName=GlifWebSignIn&flowEntry=AddSession 일단 우리의 목표는 저 입력창에 이메일을 입력하는 것입니다. 크롬 창에서 F12 를 눌러 개발자 모드를 켠 후, Ctrl+Shift+C 를 누르고 입력창을 가리키면 입력창의 CSS 선택자 속성이 뜨게 됩니다. 조사해 보니 이메일 input 태그의 name 속성은 identifierId  이고 form 태그의 선택자 속성은 form.RFjuSb.bxPAYd.k6Zj8d 입니다. 지금까지의 코드를 정리해 보겠습니다. var casper = require('casper').create({ verbose: true, loglevel: 'debug'}); var urlLogin = "구글 로그인 주소"; ...
자세한 내용 보기

PhantomJs와 CasperJs

이미지
웹사이트를 돌아다니며 정보를 긁어오는 프로그램을 작성할 때는 여러 가지 고려할 요소가많습니다. 로그인을 한 후의 데이터를 얻거나 봇이 접근하기 어렵게 짜여져 있거나 웹페이지가 렌더링된 다음의 데이터를 얻어야 하는 경우들이 그 예이죠. 그런 상황들을 쉽게 컨트롤 할 수 있게 하는 몇 가지 도구들이 있는데 그것들이 바로 PhantomJs와 CasperJs입니다. PhantomJs는 화면이 없는 상태에서 커멘드 라인드로 사용하는 브라우저이고, CasperJs는 PhantomJs를 쉽게 쓸 수 있게 하는 라이브러리입니다. PhantomJs는 렌더링 엔진으로 WebKit엔진을 사용하는데, 이 말은 애플의 사파리 브라우저와 거의 동일한 환경이라는 뜻입니다. PhantomJs에서 할 수 있는 일에는 여러 가지가 있는데, 특정 URL로 접속했을 때의 스크린샷을 찍을 수도 있고 화면의 특정 엘리먼트를 마우스 클릭하는 이벤트를 실행할 수도 있습니다. PhantomJs의 공식 웹사이트는 다음과 같습니다. http://phantomjs.org/ CasperJs는 PhantomJs를 사용할 때 보다 쉽게 사용할 수 있도록 하는 라이브러리입니다. CasperJs의 공식 웹사이트는 다음과 같습니다. http://casperjs.org/ Node.js가 컴퓨터에 설치되어 있다고 가정하고 cmd를 켜서 다음의 명령을 입력합니다. npm install -g phantomjs npm install -g casperjs 이제 casperJs를 이용해서 간단한 화면 캡쳐 프로그램을 작성해 보겠습니다. var casper = require('casper').create();  //casper 객체를 생성합니다. casper.start(); casper.open('https://sidea510.blogspot.kr/');  //페이지를 엽니다. casper.then(function(){     casper.capture('sc...
자세한 내용 보기

CasperJs로 Pixabay 크롤러 만들기

이미지
  Pixabay, UnSplash.com, Flicker... 여러분들 모두 발표자료를 준비하면서 고퀄리티의 이미지를 구하기 위해 한 번쯤은 저 사이트에 들어가보셨을 겁니다. 여러분들은 저 사이트에서 다운받은 이미지들을 어떻게 관리하시나요? 혹시 한번 사용한 후 나중에 다시 그 이미지를 구하러 컴퓨터 이곳저곳을 헤집거나, 다시 다운받지 않으신가요? 혹은 여러 이미지들을 일일이 손으로 누르면서 다운받고는, 발표자료랑 어울리지 않는다는 느낌이 들어서 다시 다른 이미지를 다운받지 않으신가요?  저 같은 경우에는 그러한 일을 많이 겪었습니다. 그러던 어느 날, 재밌는 생각이 들었습니다.  '고양이'라는 검색어를 치면 나오는 이미지들을 컴퓨터에 체계적으로 다운받아서 정리해주는 프로그램을 만들면 어떨까? 그러면 처음 한 번 다운받아놓고 나중에는 골라서 쓰면 될텐데   라는 생각이죠. 생각이 떠오른 순간 Node.js로 크롤러를 만들어서 시험을 해봤습니다. 일이 거기서 끝났으면 정말 편했었을텐데요. 아쉽게도 Pixabay는 일반적인 방식으로 크롤링이 되는 사이트는 아니더군요. 그러나 여기서 포기하기에는 아직 멀었습니다. 우리에게는 웹 크롤링을 편리하게 해주는 CasperJs 라는 강력한 툴이 있기 때문이죠. *여기서 잠깐! CasperJs나 CSS 선택자 속성에 대해서 잘 모르시는 분들은 이전 포스팅인 PhantomJs로 Blogger 댓글 조회 프로그램 작성하기 나 PhantomJS와 CasperJS 를 읽고 와주세요.  먼저 크롤링이 가능한지 확인하기 위해서 저번 시간에 짰던 스크린샷을 찍는 코드를 이용해서 테스트를 해봤습니다.   네, 결과는 완벽했습니다. 크롤링이 가능했죠. 그럼 이제부터 본격적으로 코드를 짜기 시작했습니다. 가장 처음에 해야 할 일은 바로 이미지 하나하나의 CSS 선택자 속성을 찾는 것 입니다. 지난 시간에 썼던 방식을 그대로 사용하겠습니다. ...
자세한 내용 보기