텔레그램 뉴스 메시지가 너무 지저분해서 보기 좋게 꾸며봤습니다

안녕하세요 케이입니다.

앞에서는 텔레그램 뉴스봇에 뉴스 제목뿐만 아니라 간단한 설명까지 같이 표시해봤습니다.

기능 자체는 만족스러웠습니다.

제목만 볼 때보다 내용을 훨씬 빨리 파악할 수 있었고, 굳이 모든 기사 링크를 하나씩 눌러보지 않아도 됐습니다.

그런데 또 며칠 사용하다 보니 이번에는 메시지 모양이 신경 쓰였습니다.

제목도 일반 글씨

설명도 일반 글씨

링크도 긴 주소 그대로

이런 식으로 나오니까 기능은 괜찮은데 화면이 조금 지저분했습니다.

그래서 이번에는 새로운 기능을 추가하기보다

텔레그램으로 오는 뉴스 메시지를 보기 좋게 정리해보는 작업

을 해봤습니다.

처음에는 디자인이라고 해서 뭔가 어렵게 생각했는데, 실제로는 줄바꿈과 이모지, 굵은 글씨 정도만 바꿔도 꽤 보기 좋아졌습니다.

기존 메시지는 이런 느낌이었습니다

제가 처음 사용하던 메시지는 대략 이런 식이었습니다.

국내 기업 AI 투자 확대

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

https://example.com/news/12345

틀린 건 없습니다.

내용도 다 들어 있습니다.

그런데 뉴스가 5개 연속으로 오면 어디까지가 제목이고 어디부터 설명인지 순간적으로 잘 안 들어왔습니다.

특히 모바일 화면에서는 더 그랬습니다.

그래서 저는 먼저 항목마다 역할을 조금씩 나눠보기로 했습니다.

제목 앞에 이모지를 하나 붙여봤습니다

가장 먼저 한 건 제목 앞에 신문 이모지를 붙이는 것이었습니다.

📰 국내 기업 AI 투자 확대

별것 아닌데 생각보다 눈에 잘 들어왔습니다.

뉴스 하나가 어디서 시작되는지 바로 보였습니다.

그다음 설명 앞에는 메모 이모지를 붙였습니다.

📝 국내 주요 기업들이 생성형 AI 서비스 개발을 위해...

그리고 링크 앞에는 링크 이모지를 넣었습니다.

🔗 https://example.com/news/12345

이렇게만 바꿔도 기사 하나의 구조가 훨씬 잘 보였습니다.

저는 이모지를 너무 많이 넣는 건 별로 좋아하지 않아서 한 기사에 2~3개 정도만 사용했습니다.

너무 많이 넣으면 오히려 광고 메시지처럼 보이는 느낌이 있었습니다.

줄바꿈도 생각보다 중요했습니다

처음에는 모든 내용을 한 줄씩 붙여서 보냈습니다.

그런데 제목 다음에 한 줄을 비우고

설명 다음에도 한 줄을 비우니까 훨씬 편했습니다.

코드에서는 이런 식이었습니다.

var message =
  "📰 " + cleanTitle + "\n\n" +
  "📝 " + shortDescription + "\n\n" +
  "🔗 " + item.link;

처음에는 \n도 잘 몰랐습니다.

지금은 그냥 줄바꿈이라고 생각하고 있습니다.

\n

은 한 줄 내려가기

\n\n

은 한 줄을 비우고 내려가기

정도로 이해하면 편했습니다.

저는 제목과 설명 사이에는 한 줄을 비우는 쪽이 보기 좋았습니다.

제목을 굵게 만들고 싶었습니다

메시지를 정리하다 보니 제목은 조금 더 눈에 띄게 만들고 싶었습니다.

텔레그램에서는 메시지 안에 HTML 형식을 사용할 수 있었습니다.

예를 들어 제목을 굵게 만들고 싶으면 이런 식으로 만들 수 있었습니다.

var message =
  "<b>📰 " + cleanTitle + "</b>\n\n" +
  "📝 " + shortDescription + "\n\n" +
  "🔗 " + item.link;

여기서

<b>

와

</b>

사이에 들어 있는 글자가 굵게 표시됩니다.

처음에는 HTML이라고 해서 어렵게 느껴졌는데, 이런 정도는 생각보다 단순했습니다.

문제는 이것만 넣는다고 끝나는 건 아니었습니다.

HTML을 쓰려면 메시지 보내는 부분도 바꿔야 했습니다

제가 기존에 사용하던 sendMessage 함수가 단순히 글자만 보내도록 되어 있었다면 HTML 형식을 사용한다는 옵션을 같이 보내야 했습니다.

예를 들어 이런 식입니다.

var url =
  "https://api.telegram.org/bot" + token + "/sendMessage";

var payload = {
  chat_id: chatId,
  text: message,
  parse_mode: "HTML"
};

UrlFetchApp.fetch(url, {
  method: "post",
  payload: payload
});

여기에서 핵심은

parse_mode: "HTML"

이 부분이었습니다.

쉽게 말하면

“이 메시지 안에는 HTML 형식이 있으니까 그렇게 해석해서 보여줘.”

라는 뜻으로 이해했습니다.

이걸 넣지 않으면 <b> 같은 글자가 그대로 보일 수 있었습니다.

긴 뉴스 링크도 보기 싫었습니다

제목을 굵게 만들고 줄바꿈까지 정리하니까 이번에는 긴 뉴스 주소가 더 눈에 띄었습니다.

예를 들어

https://news.example.com/article/20261010/123456789

처럼 긴 주소가 그대로 나오면 메시지가 다시 지저분해 보였습니다.

그래서 링크 주소 대신

기사 보기

라는 글자만 표시하고 싶었습니다.

HTML에서는 이런 방식이 가능했습니다.

<a href="기사주소">기사 보기</a>

코드에서는 이렇게 만들었습니다.

var message =
  "<b>📰 " + cleanTitle + "</b>\n\n" +
  "📝 " + shortDescription + "\n\n" +
  "🔗 <a href=\"" + item.link + "\">기사 보기</a>";

처음 보면 따옴표가 많아서 상당히 복잡해 보입니다.

저도 처음에는 이 부분이 제일 헷갈렸습니다.

그런데 실제 결과를 보니까 꽤 마음에 들었습니다.

텔레그램에서는 긴 URL 대신

기사 보기

라고 깔끔하게 표시됐고, 그 글자를 누르면 실제 기사로 이동했습니다.

메시지가 확실히 깔끔해졌습니다

최종적으로는 대략 이런 형태가 됐습니다.

📰 국내 기업 AI 투자 확대

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

🔗 기사 보기

제목은 굵게

설명은 일반 글씨

링크는 짧게

이렇게 나눠놓으니까 훨씬 보기 편했습니다.

기능이 바뀐 건 거의 없는데 실제로 사용하는 느낌은 꽤 달라졌습니다.

제목 안에 특수문자가 있으면 오류가 날 수도 있었습니다

여기서 또 한 번 막혔습니다.

HTML 형식으로 메시지를 보내다 보니까 뉴스 제목 안에

<

>

&

같은 특수문자가 들어 있을 경우 문제가 생길 수 있었습니다.

텔레그램이 그 글자를 HTML 코드의 일부로 착각할 수 있기 때문입니다.

저는 처음에는 왜 어떤 뉴스만 안 보내지는지 이해가 안 됐습니다.

나중에 보니까 제목 안에 특수문자가 들어 있던 경우였습니다.

그래서 제목과 설명에서 HTML에 영향을 줄 수 있는 문자를 바꿔주는 작업도 필요했습니다.

대략 이런 식입니다.

function escapeHtml(text) {
  return text
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}

그리고 메시지를 만들기 전에

cleanTitle = escapeHtml(cleanTitle);
shortDescription = escapeHtml(shortDescription);

처럼 사용했습니다.

이 코드 전체를 제가 완전히 이해한다고 말하기는 어렵습니다.

저는 그냥

HTML에서 문제를 일으킬 수 있는 글자를 안전한 형태로 바꿔주는 부분

이라고 이해했습니다.

설명이 없는 뉴스는 따로 처리했습니다

앞에서도 한번 다뤘지만 뉴스에 따라 설명이 거의 없는 경우가 있었습니다.

이 상태에서 무조건

📝

을 넣으면

📝

만 덩그러니 표시되는 경우가 생겼습니다.

그래서 메시지를 처음부터 한 번에 만들지 않고 조금씩 붙이는 방식으로 바꿔봤습니다.

var message = "<b>📰 " + cleanTitle + "</b>";

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

message +=
  "\n\n🔗 <a href=\"" + item.link + "\">기사 보기</a>";

이렇게 하면 설명이 있을 때만 설명 부분이 추가됩니다.

이런 작은 수정들이 실제 사용할 때는 꽤 중요했습니다.

기사마다 한 번에 보내는 방식이 저는 더 편했습니다

처음에는 뉴스 5개를 하나의 메시지 안에 전부 넣어볼까 생각했습니다.

그러면 메시지가 한 번만 오니까 알림이 덜 뜰 것 같았습니다.

그런데 실제로 해보니까 저는 기사 하나당 메시지 하나씩 오는 방식이 더 편했습니다.

특정 기사만 따로 열어보기도 편했고

기사 사이 구분도 확실했습니다.

대신 뉴스 개수를 5개 정도로 제한해놨기 때문에 알림이 너무 많다는 느낌도 크지 않았습니다.

이 부분은 사용하는 사람마다 다를 것 같습니다.

텔레그램 미리보기 때문에 화면이 커지기도 했습니다

뉴스 링크를 보내니까 텔레그램이 자동으로 기사 미리보기 화면을 만들어주는 경우가 있었습니다.

사진과 제목이 크게 표시되는 기능입니다.

처음에는 보기 좋아서 그대로 뒀습니다.

그런데 기사 5개가 모두 미리보기를 표시하니까 화면이 굉장히 길어졌습니다.

저는 빠르게 제목과 설명만 확인하는 게 목적이라 나중에는 미리보기를 끄는 방법도 알아봤습니다.

Telegram API에서 메시지를 보낼 때 링크 미리보기를 끌 수 있습니다.

사용하는 방식에 따라 옵션 이름이나 구조가 달라질 수 있지만, 제가 원하는 건 결국

긴 미리보기 없이 글자만 깔끔하게 표시하는 것

이었습니다.

실제로 사용해보니 저는 사진까지 크게 나오는 것보다 텍스트 중심이 더 편했습니다.

처음에는 꾸미는 게 별로 중요하지 않다고 생각했습니다

뉴스봇을 만들기 시작했을 때는

검색만 잘되면 된다

라고 생각했습니다.

그런데 지금까지 계속 사용하면서 생각이 많이 바뀌었습니다.

실제로 매일 사용하는 프로그램은 기능만큼 보기 편한 것도 중요했습니다.

뉴스가 잘 검색돼도

제목과 설명이 붙어 있고

링크는 너무 길고

기사 구분도 안 되면

결국 손이 잘 안 갔습니다.

반대로

제목을 굵게 만들고

설명을 짧게 붙이고

링크를 기사 보기로 바꾸는 것만으로도 훨씬 완성된 느낌이 들었습니다.

여기까지 오니까 제가 만든 봇 같다는 느낌이 들었습니다

처음에는 인터넷에서 코드를 찾아서 붙이고

작동하면 신기해하는 정도였습니다.

그런데 하나씩 불편한 걸 직접 고치다 보니 이제는 조금 다르게 느껴졌습니다.

제가 필요한 뉴스만 나오고

원하지 않는 기사는 걸러지고

중복 뉴스도 줄어들고

메시지 모양도 제가 보기 좋은 형태로 바뀌었습니다.

아직 굉장히 단순한 봇이지만

적어도 그냥 테스트용 프로그램보다는 제가 실제로 사용하는 도구에 가까워졌습니다.

다음에는 자주 검색하는 뉴스 키워드를 저장해보려고 합니다

현재는 뉴스를 검색할 때마다

/news

를 입력하고

다시 검색어를 입력해야 합니다.

예를 들어 제가 매일

인공지능

삼성전자

환율

같은 검색어를 확인한다면 매번 똑같이 입력해야 합니다.

몇 번 해보니까 이것도 슬슬 귀찮아졌습니다.

그래서 다음에는

제가 자주 보는 뉴스 키워드를 미리 저장해두고 필요할 때 한 번에 불러오는 기능

을 만들어보려고 합니다.

매번 검색어를 직접 입력하지 않고 텔레그램 안에서 제가 원하는 관심 키워드를 등록하고 사용하는 방식으로 한 단계 더 바꿔보겠습니다.