브라우저로 텔레그램 챗봇 만들기

보통 파이썬이나 nodejs를 사용해서 텔레그램 챗봇을 만드는데, 그 전에 브라우저만을 사용해서 간단하게 텔레그램 챗봇을 만들어서 테스트해보자. 텔레그램의 챗봇 API의 대부분은 http get method를 사용해서 브라우저에서도 테스트가 가능하다. 챗봇에 들어온 메세지를 확인하고, 메세지를 보내는 것과 커스텀 키보드를 브라우저를 통해서 테스트 해보자.

텔레그램 챗봇 생성

텔레그램 챗봇 생성은 더없이 간단하다. 텔레그램 메신저에 접속해서 BotFather에게 /newbot이라고 메세지를 보내면 생성이 시작된다. BotFather는 챗봇의 이름과 username을 물어보는데, 응답으로 각각의 이름을 전송하면, 챗봇을 컨트롤 할 수 있는 토큰을 준다. 만약, username이 이미 사용 중인 경우에는 다른 이름을 요구할 수 있는데, 다른 이름으로 제출하면 된다. 이름은 화면에 표시되는 용도로 추후에 변경이 자유롭고, username은 챗봇의 고유 이름으로 중복이 허용되지 않는다.

이때 받은 토큰이 있으면 누구나 해당 챗봇을 컨트롤 할 수 있으므로 노출되지 않도록 해야하며 보안을 유지해야 한다고 안내하고 있다. 이 토큰을 이용해서 브라우저에서 챗봇 API를 사용해보자.

/newbot 명령어

토큰은 기본적으로 아래와 같은 형태를 갖는 문자열인데, 앞에 10자리 숫자는 봇의 ID를 의미한다.

1234567890:ABCDEF1234ghIklzyx57W2v1u123ew11

실제 토큰을 사용할 때에는 토큰 앞에 bot을 붙여서 사용하는 것이 중요하다. 매번 깜빡하고 왜 안되지...싶을 때가 많다ㅠ

https://api.telegram.org/bot1234567890:ABCDEF1234ghIklzyx57W2v1u123ew11/<API_이름>

# bot 상태 확인 getMe
https://api.telegram.org/bot1234567890:ABCDEF1234ghIklzyx57W2v1u123ew11/getMe

getMe API를 브라우저의 url 입력창에 넣고 엔터를 치면 아래와 같이 결과를 회신 할 수 있다.

{"ok":true,"result":{"id":1907959359,"is_bot":true,"first_name":"msalt smtm bot","username":"msalt_smtm_bot","can_join_groups":true,"can_read_all_group_messages":false,"supports_inline_queries":false}}

메세지 확인

챗봇의 가장 기본적인 동작은 수신한 메세지를 확인하는 것이다. 챗봇은 일반 사용자에게 먼저 말을 걸 수가 없다. 따라서 일반 사용자가 대화를 시작하면, 그 때 수신한 메세지에 응답하는 방식으로 동작이 가능하다.

아래와 같이 getUpdates API를 호출하면 수신한 메세지 정보를 받을 수 있다.

https://api.telegram.org/bot1234567890:ABCDEF1234ghIklzyx57W2v1u123ew11/getUpdates

JSON으로 반환되는 결과에는 다양한 정보가 있는데, 자세한 내용은 아래 레퍼런스 사이트에서 확인 할 수 있다.

https://core.telegram.org/bots/api#getting-updates

결과 JSON은 update object의 배열을 포함하고 있다. update_id는 순차적으로 증분되는 값으로 getUpdates를 호출해서 수신하는 정보의 기준 시점을 정할 때 사용된다. 아래와 같이 getUpdates를 호출할때 offset 파라미터로 update_id를 넣어주면 그 값 이후의 메세지 정보를 수신할 수 있다.

https://api.telegram.org/bot1234567890:ABCDEF1234ghIklzyx57W2v1u123ew11/getUpdates?offset=402108304

# 수신한 결과값
{"ok":true,"result":[{"update_id":402108304,
"message":{"message_id":1613,"from":{"id":1234567890,"is_bot":false,"first_name":"msaltnet","language_code":"ko"},"chat":{"id":1234567890,"first_name":"msaltnet","type":"private"},"date":1643768530,"text":"1"}}]}

이렇게 특정 값을 넣어주면 이전 업데이트에 대해서는 챗봇이 메세지를 처리한 것을 간주하며, 이후 getUpdates에서 더이상 조회가 안된다. 프로그래밍을 할때는 내가 처리한 update 메세지의 update_id를 기억했다가 +1 된 값으로 getUpdates를 호출하면 매번 처리하지 않은 새로운 메세지를 수신할 수 있다. 이렇게 해주어야 텔레그램 bot API의 long polling 기능도 사용할 수 있다.

long polling은 매번 새로운 메세지를 확인하기 위해서 getUpdates API를 호출하는 것이 아니라 다음 update_id로 getUpdates API를 호출하면, 새로운 메세지를 수신할 때까지 텔레그램 서버에서 응답을 주지 않고 기다리는 것이다. 새로운 업데이트가 있을 때까지 길게 기다리니다는 의미로 long polling이라고 한다. 텔레그램 bot API뿐만 아니라 보편적으로 사용되는 기술이다.

https://kamang-it.tistory.com/entry/Webhttp%ED%86%B5%EC%8B%A0%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%96%91%EB%B0%A9%ED%96%A5-%ED%86%B5%EC%8B%A0%EA%B8%B0%EB%B2%95-long-polling

[Web]http통신을 이용한 양방향 통신기법, long polling

메세지 보내기

일반적인 텔레그램 챗봇은 수신한 메세지를 확인하고, 응답 메세지를 전송하는 것이 기본 동작이다. 메세지를 전송하는 방법은 메세지를 확인하는 방법보다 더 쉽고, 브라우저로도 확인이 가능하다.

아래와 같이 sendMessage API를 사용하면 사용자와의 대화방에 text 메세지를 전송할 수 있다. chat_id는 getUpdates API의 결과 JSON에서 message > from > id 의 값을 사용하면 된다.

https://api.telegram.org/bot1234567890:ABCDEF1234ghIklzyx57W2v1u123ew11/sendMessage?chat_id=<대화상대 id>&text=<보낼 메세지>

크롬 브라우저의 경우 한글도 자동으로 url encoding을 해주기 때문에 브라우저에서도 한글 메세지를 전송할 수 있다. 수신한 메세지 역시 브라우저에서 웹버전 텔레그램을 통해 확인 가능하다.

sendMessage API

커스텀 키보드 메세지 보내기

마지막으로 커스텀 키보드 메세지에 대해서 알아보자. 커스텀 키보드는 챗봇의 특징에 맞는 버튼 형태의 인터페이스를 아주 쉽게 구현할 수 있게 해준다. 정말 미친 아이디어다. 기본적인 개념은 챗봇에서 메세지를 전송할 때 커스텀 키보드 정보를 reply_markup 파라미터로 보내는 것이고, 사용자는 텍스트 응답 외에도 버튼 형태의 커스텀 키보드를 사용할 수 있도록 텔레그램 메신저에서 별도의 키보드를 제공한다.

이 아이디어가 미친 아이디어라는 이유는 구현이 너무 쉽다는 것이다. 상황에 맞는 버튼을 제공하는 것은 사용자 인터페이스의 기본 중의 기본임에도 불구하고 어플리케이션이나 프로그램 개발자는 그 인터페이스를 구현하기 위해서 꽤나 많은 작업을 해줘야 한다. 모양부터 위치까지 아주 귀찮은 작업이다. 그나마 간단한 웹에서도 html tag를 넣어주고, css로 스타일을 입혀주고, js로 동작을 처리해줘야 한다. 안드로이드나 iOS에서 버튼을 만드는 것은 말할 것도 없다. 물론 텔레그램 커스텀 키보드는 매우 한정된 GUI로 구성이 되지만 충분한 사용성을 갖고 있고, 메신저의 사용 경험과도 부합한다는 점에서 아주 훌륭하다. 즉, 커스텀 키보드를 구현하는 사람은 텍스트만을 사용해서 아주 쉽게 구현이 가능하고, 키보드를 사용하게 될 사용자는 메신저로 챗봇과의 대화중에 자연스럽게 상황에 맞는 버튼을 간편하게 사용할 수 있다는 것이다. 텍스트만으로 구성되니 컨텍스트에 맞게 최적화된 형태의 버튼을 제공하는 것도 어렵지가 않다.

https://core.telegram.org/bots#keyboards

커스텀 키보드를 생성하는 방법은 매우 간단하다. 위에 하나, 아래 3개의 버튼을 갖는 텍스트 키보드를 생성하기 위해서는 아래와 같은 JSON 형태의 텍스트를 작성해서 메세지를 전송할때 reply_markup 파라미터에 넣어주면 된다.

// 커스텀 키보드 정보의 json object
{
    keyboard: [
        [{text: "a. test"}],
        [{text: "c. test"}, {text: "d. test"}, {text: "e. test"}],
    ]
}

reply_markup 파라미터에 넣어주기 전에 해당 내용을 문자열로 변환해주자. 자바스크립트에서 JSON의 문자열 변환은 JSON.stringfy 메소드로 간단하게 할 수 있다. 우리에게는 손쉽게 자바스크립트를 실행해볼 수 있는 브라우저가 있다.ㅎ 브라우저의 검사(ctrl + shift + i)창을 열어서 콘솔에서 아래와 같이 문자열로 변환해보자.

이제 아래와 같이 문자열로 변환한 커스텀 키보드 정보를 sendMessage의 reply_markup 파라미터에 추가해서 브라우저의 url 입력창에 넣어서 실행하면, 메세지가 전송되고 커스텀 키보드가 활성화 된다.

{"keyboard":[[{"text":"a. test"}],[{"text":"c. test"},{"text":"d. test"},{"text":"e. test"}]]}

https://api.telegram.org/bot1234567890:ABCDEF1234ghIklzyx57W2v1u123ew11/sendMessage?chat_id=1819645704&text=커스텀키보드&reply_markup={"keyboard":[[{"text":"a. test"}],[{"text":"c. test"},{"text":"d. test"},{"text":"e. test"}]]}

text 형태의 커스텀 버튼은 사용자가 버튼을 선택하면 그 내용의 메세지가 전송되는 단순한 구조다.

마치며

텔레그램 챗봇은 알면 알수록 강력하고 유용하다. 사용 방법이 편리해서 다양하게 응용 할 수 있는 데다가 무료로 제한없이 사용할 수 있다는 점은 더 없이 큰 매력이다. 특히나 개발 방법이 매우 편리하고, 개발자에 대한 배려가 느껴지는 부분이 많아서 더욱 끌린다. 개인 프로젝트나 소규모 집단에서 다양하게 활용하면 그 장점이 더 빛날 것 같다. 한번쯤 알아두면 유용하게 쓸 일이 있을 것이니, 잠깐이라도 시간을 들여서 기능을 알아두길 바란다.