뉴스 제목만 오던 텔레그램 봇에 간단한 내용까지 표시해봤습니다

안녕하세요 케이입니다.

앞에서는 텔레그램 뉴스봇에서 관심 없는 단어가 들어간 뉴스는 자동으로 제외하도록 만들어봤습니다.

뉴스 개수도 줄이고, 같은 기사도 어느 정도 걸러내고, 원하는 언론사와 관심 있는 키워드 위주로 정리하니까 처음보다 훨씬 보기 편해졌습니다.

그런데 실제로 사용하다 보니까 또 하나 아쉬운 점이 생겼습니다.

지금까지는 텔레그램에

뉴스 제목

기사 링크

정도만 표시되도록 해놨는데요.

제목만 보고는 내용이 잘 감이 안 오는 기사들이 꽤 있었습니다.

결국 궁금하면 링크를 하나씩 눌러봐야 했습니다.

그래서 이번에는 뉴스 제목 아래에 기사 내용을 아주 짧게 같이 표시해보기로 했습니다.

제가 원한 건 거창한 요약 기능이 아니었습니다.

그냥 링크를 열기 전에

“아, 대충 이런 내용의 기사구나.”

정도만 알 수 있으면 충분했습니다.

검색 결과에 이미 간단한 설명이 들어 있었습니다

처음에는 기사 본문을 직접 가져와야 하는 줄 알았습니다.

그러면 또 새로운 기능을 만들어야 할 것 같아서 조금 부담스러웠습니다.

그런데 제가 사용하고 있던 뉴스 검색 결과를 다시 보니까 이미 기사에 대한 간단한 설명이 같이 들어 있었습니다.

대략 이런 식입니다.

item.title
item.description
item.link

제가 기존에 사용하던 건 주로

item.title

과

item.link

였습니다.

그런데 description이라는 값에 뉴스 내용의 일부가 들어 있었습니다.

처음 봤을 때는 왜 이걸 진작 안 썼나 싶었습니다.

기존 메시지에 한 줄만 추가해봤습니다

기존에는 대략 이런 형태로 보내고 있었습니다.

sendMessage(
  chatId,
  item.title + "\n" + item.link
);

뉴스 제목 다음 줄에 링크를 붙이는 방식입니다.

여기에 설명을 하나 넣어봤습니다.

sendMessage(
  chatId,
  item.title + "\n\n" +
  item.description + "\n\n" +
  item.link
);

이렇게 하면 텔레그램에서는

뉴스 제목

간단한 설명

기사 링크

순서로 표시됩니다.

기능 자체는 정말 단순했습니다.

그런데 실제로 받아보니까 생각보다 차이가 컸습니다.

제목만 있을 때보다 훨씬 판단하기 쉬웠습니다

예를 들어 제목이

국내 기업 AI 투자 확대

라고 되어 있다고 해보겠습니다.

제목만 보면

어떤 기업 이야기인지

투자 규모가 어느 정도인지

새로운 발표가 나온 건지

알기 어렵습니다.

그런데 그 아래에 두세 줄 정도의 설명이 붙으면 링크를 누르기 전에 대략적인 내용을 알 수 있었습니다.

관심 없는 기사라면 굳이 열어볼 필요도 없었습니다.

뉴스를 5개 정도 받아보는 제 사용 방식에서는 이게 꽤 편했습니다.

제목을 보고

설명을 읽고

정말 궁금한 기사만 링크를 누르면 됐습니다.

또 HTML 태그가 보이기 시작했습니다

그런데 바로 문제가 하나 생겼습니다.

앞에서 뉴스 제목을 정리할 때도 봤던 HTML 태그가 설명 부분에도 들어 있었습니다.

예를 들어 이런 식입니다.

<b>인공지능</b> 기술을 활용한 새로운 서비스가...

텔레그램에서 그대로 보여주면 조금 지저분했습니다.

그래서 제목에서 했던 것처럼 설명에서도 태그를 제거했습니다.

var cleanDescription =
  item.description.replace(/<[^>]*>/g, "");

그리고 메시지를 보낼 때

item.description

대신

cleanDescription

을 사용했습니다.

sendMessage(
  chatId,
  cleanTitle + "\n\n" +
  cleanDescription + "\n\n" +
  item.link
);

이렇게 하니까 훨씬 깔끔하게 나왔습니다.

설명이 너무 길어지는 것도 문제였습니다

처음에는 설명을 그대로 붙였습니다.

그런데 어떤 뉴스는 생각보다 설명이 길었습니다.

뉴스 5개를 한 번에 받으니까 텔레그램 화면이 다시 길어졌습니다.

앞에서 뉴스 개수를 5개로 줄인 이유가 무색해질 정도였습니다.

그래서 설명 길이도 어느 정도 제한해보기로 했습니다.

저는 처음에는 100자 정도만 표시해봤습니다.

var shortDescription =
  cleanDescription.substring(0, 100);

이 코드는 처음에도 어렵게 느껴졌지만 의미는 단순했습니다.

설명의 처음부터 100글자까지만 가져오는 방식입니다.

그리고 뒤에

...

을 붙였습니다.

shortDescription += "...";

실제로 사용해보니까 100자 정도면 대략적인 내용을 파악하기에는 충분했습니다.

설명이 짧은 기사에는 점 세 개가 이상하게 붙었습니다

그런데 또 작은 문제가 생겼습니다.

설명이 원래 50자밖에 안 되는 기사에도 무조건

...

이 붙었습니다.

끝난 문장인데도 뭔가 내용이 더 있는 것처럼 보였습니다.

그래서 설명이 100자보다 긴 경우에만 줄이고 점 세 개를 붙이는 방식으로 바꿨습니다.

var shortDescription = cleanDescription;

if (cleanDescription.length > 100) {
  shortDescription =
    cleanDescription.substring(0, 100) + "...";
}

제가 이해한 방식은 이렇습니다.

설명이 100자보다 길면

100자까지만 잘라서 ...을 붙이고

100자보다 짧으면

그냥 원래 설명을 그대로 사용합니다.

이런 부분이 별것 아닌 것 같지만 실제 메시지를 볼 때는 훨씬 자연스러웠습니다.

저는 100자보다 조금 더 길게 써보기도 했습니다

처음에는 100자로 시작했는데 며칠 사용하면서 120자, 150자 정도도 테스트해봤습니다.

너무 짧으면 내용 파악이 어렵고

너무 길면 텔레그램이 다시 복잡해졌습니다.

결국 이 부분은 개인 취향인 것 같습니다.

저는 뉴스 5개 정도를 받는 기준에서는 대략 100~150자 사이가 보기 편했습니다.

숫자를 바꾸는 것도 간단합니다.

예를 들어 150자로 만들고 싶으면

cleanDescription.substring(0, 150)

처럼 숫자만 바꾸면 됐습니다.

이런 부분은 코딩을 전혀 몰라도 직접 조금씩 조정하면서 자기한테 맞는 값을 찾기 좋은 것 같습니다.

메시지 사이에 구분선을 넣어봤습니다

뉴스 제목과 설명까지 들어가니까 기사 하나하나를 구분하는 것도 필요해졌습니다.

처음에는 줄바꿈만 사용했습니다.

그런데 뉴스가 연속해서 오면 어디까지가 한 기사인지 순간적으로 헷갈렸습니다.

그래서 메시지를 이런 식으로 바꿔봤습니다.

var message =
  cleanTitle + "\n\n" +
  shortDescription + "\n\n" +
  item.link + "\n" +
  "--------------------";

단순하게 선 하나를 추가한 겁니다.

디자인이라고 하기에는 별것 아니지만 실제로는 훨씬 구분하기 쉬웠습니다.

나중에는 이모지도 한번 넣어봤습니다.

예를 들면

📰 뉴스 제목

📝 간단한 내용

🔗 기사 보기

같은 식입니다.

다만 너무 많이 넣으면 오히려 정신없어 보여서 저는 최소한만 사용하는 게 좋았습니다.

최종적으로는 이런 형태가 가장 보기 편했습니다

제가 사용하면서 가장 보기 편했던 형태는 대략 이런 식이었습니다.

📰 국내 기업 AI 투자 확대

국내 주요 기업들이 생성형 AI 서비스 개발을 위해 투자 규모를 확대하고 있으며...

🔗 https://기사주소

제목

한두 줄 정도의 내용

링크

딱 이 정도였습니다.

처음에는 텔레그램 봇이면 기능이 중요하다고 생각했는데 계속 사용하다 보니까 메시지를 어떻게 보여주는지도 꽤 중요했습니다.

정보를 많이 넣는 것보다

한눈에 읽히도록 만드는 게 더 편했습니다.

설명이 아예 없는 기사도 있었습니다

테스트하다 보니 description이 비어 있거나 거의 내용이 없는 경우도 있었습니다.

이럴 때는 빈 줄만 나오는 게 조금 이상했습니다.

그래서 설명이 있는 경우에만 넣도록 조건을 추가해봤습니다.

대략 이런 느낌입니다.

var message = cleanTitle;

if (cleanDescription) {
  message += "\n\n" + shortDescription;
}

message += "\n\n" + item.link;

설명이 있으면 붙이고

없으면 그냥 제목과 링크만 보내는 방식입니다.

실제로 사용하다 보면 이런 예외 상황이 하나씩 계속 나왔습니다.

처음부터 이런 걸 전부 예상하는 건 저 같은 초보자에게는 거의 불가능했습니다.

직접 써보고 이상한 부분이 보이면 그때 하나씩 고치는 방식이 오히려 편했습니다.

기사 본문 전체를 가져오는 것과는 다릅니다

여기서 제가 처음에 조금 헷갈렸던 부분이 있습니다.

description에 들어 있는 내용은 기사 전체 본문이 아니었습니다.

검색 결과에서 제공되는 간단한 설명 정도였습니다.

그래서 어떤 기사는 꽤 내용을 잘 알려주지만

어떤 기사는 제목과 거의 비슷한 내용만 들어 있기도 했습니다.

처음에는 기사 본문을 직접 가져와서 보여주면 더 좋지 않을까 생각했습니다.

그런데 그렇게 하려면 각 뉴스 사이트에 직접 접근해서 본문을 가져오는 과정이 필요하고 사이트마다 구조도 다를 수 있었습니다.

저처럼 간단한 개인 뉴스봇을 만드는 입장에서는 너무 복잡해지는 것 같았습니다.

그래서 저는 일단 검색 결과에서 제공되는 설명만 사용하는 쪽으로 정했습니다.

실제로 사용해보니 링크를 누르는 횟수가 줄었습니다

이 기능을 추가하고 가장 크게 달라진 건 이 부분이었습니다.

예전에는 기사 5개가 오면 거의 제목만 보고 하나씩 링크를 눌러봤습니다.

그런데 간단한 설명이 같이 나오니까 굳이 열어보지 않아도 되는 기사가 바로 구분됐습니다.

예를 들어 5개 중에서 실제로 링크를 누르는 건 한두 개 정도로 줄었습니다.

제가 뉴스봇을 만들었던 이유가

뉴스를 더 많이 보기 위해서가 아니라

뉴스 확인 시간을 줄여보기 위해서였는데

이제 조금 그 목적에 가까워지는 느낌이었습니다.

여기까지 만들고 나니 화면이 조금 아쉬워졌습니다

뉴스 제목과 간단한 설명까지 넣으니까 기능은 마음에 들었습니다.

그런데 이제는 메시지 모양 자체가 눈에 들어오기 시작했습니다.

제목

설명

링크

가 모두 비슷한 글씨로 표시되니까 조금 밋밋했습니다.

제목은 굵게 표시하고 싶었고

링크도 그냥 긴 주소 대신

기사 보기

처럼 눌러서 들어갈 수 있게 만들면 더 깔끔할 것 같았습니다.

그리고 뉴스마다 이모지나 줄바꿈을 조금 정리하면 훨씬 보기 편할 것 같았습니다.

그래서 다음에는 기능을 추가하기보다

텔레그램으로 오는 뉴스 메시지를 조금 더 보기 좋게 꾸며보려고 합니다.

뉴스 제목을 강조하고

긴 링크를 정리하고

줄바꿈까지 손봐서 실제로 매일 보기 편한 형태로 바꿔보겠습니다.