telegram-web-relay-client - Telegram Web UI를 relay 구조로 바꾸다
telegram-web-relay를 만들면서 자연스럽게 두 번째 문제가 생겼다.
서버가 TDLib로 Telegram 세션을 관리한다고 해도, 사용자가 실제로 보는 화면은 결국 브라우저 UI다. 새 UI를 처음부터 만들 수도 있었지만, Telegram Web 수준의 경험을 다시 만드는 것은 현실적이지 않았다.
그래서 Telegram-tt, 즉 Telegram Web A 계열 UI를 바탕으로 삼았다. 그리고 브라우저가 Telegram에 직접 붙는 부분을 걷어내고, 내가 관리하는 relay 서버와 통신하는 방향으로 바꿨다.
그 결과물이 telegram-web-relay-client다.
역할
server와 client를 분리한 이유는 명확하다.
Browser client
|
| HTTP + Socket.IO
v
telegram-web-relay --TDLib/MTProto--> Telegram
이 client는 Telegram 세션을 직접 소유하지 않는다. 인증 세션과 TDLib 데이터는 relay 서버가 가진다. client는 화면, 입력, 이벤트 표시, 파일 요청 같은 브라우저 UI 역할에 집중한다.
왜 새로 만들지 않았나
Telegram Web UI는 이미 훌륭하다. 채팅 목록, 메시지 렌더링, 입력창, 미디어 표시, 반응성 같은 부분을 새로 만들면 relay 구조를 실험하기도 전에 UI 구현에 대부분의 시간을 쓰게 된다.
그래서 새로 만드는 대신, 검증된 UI를 바탕으로 transport 계층을 바꾸는 쪽을 택했다.
다만 내가 원한 구조는 일반 Telegram Web과 달랐다.
- 브라우저에서 Telegram API로 직접 연결하지 않는다
- relay 서버 URL을 기준으로 Socket.IO 연결을 만든다
- production build를 relay 서버가 정적 파일로 서빙한다
- 기존 Telegram Web의 UI 경험은 최대한 유지한다
- 서버와 클라이언트 라이선스 경계를 분명히 한다
그래서 Telegram-tt를 기반으로 하되, transport 계층을 relay 구조에 맞게 바꿨다.
처음에는 내 relay를 위한 전용 client였지만, server repo와 함께 열어두려면 이 client도 별도 repo로 정리하는 편이 맞았다.
실행 흐름
client는 일반적인 React 기반 웹앱처럼 빌드한다.
git clone https://github.com/lisyoen/telegram-web-relay-client.git
cd telegram-web-relay-client
cp .env.example .env
npm install
npm run build:production
relay 서버가 다른 주소에서 동작한다면 .env에서 SOCKET_SERVER_URL을 조정한다.
SOCKET_SERVER_URL=http://localhost:9087
BASE_URL=https://web.telegram.org/a/
빌드 결과물은 dist/에 생성된다. relay 서버의 V2_DIST_PATH가 이 dist/를 가리키면, relay가 client 정적 파일을 함께 서빙한다.
열어두기 위해 신경 쓴 점
개인용 fork를 공개 repo로 바꾸려면 단순히 코드를 올리는 것으로는 부족했다. 최소한 server와 client의 관계, 빌드 방식, 라이선스 경계를 읽을 수 있어야 했다.
그래서 다음을 정리했다.
- relay server와의 관계 문서화
- build와 development 명령 정리
- 환경변수 설명
- 보안 주의사항
- upstream Telegram-tt credit과 GPL 라이선스 유지
- release note와 badge 정리
특히 라이선스는 중요했다. 이 client는 upstream에서 이어지는 GPL-3.0-or-later 프로젝트다. 반면 relay server는 별도 프로세스이자 네트워크 통신 상대라 MIT로 분리했다.
어떤 사람에게 유용한가
이 repo는 일반 사용자용 "바로 쓰는 Telegram Web"이라기보다, self-hosted Telegram Web 구조를 실험하려는 개발자에게 더 맞다.
- Telegram Web UI를 relay 서버 뒤에 붙이고 싶은 사람
- TDLib 기반 서버와 브라우저 UI를 분리해 보고 싶은 사람
- Socket.IO transport를 쓰는 메시징 UI를 연구하는 사람
- Telegram Web A 계열 클라이언트 구조를 읽어보고 싶은 사람
개인 필요에서 출발했지만, 비슷한 실험을 하는 사람에게는 출발점이 될 수 있다고 봤다. 그래서 relay server와 함께 열어두었다.
Repository: