Web Terminal을 만들어보자! - 기초 지식편

엄기훈·2024년 10월 7일
0

웹 터미널이 뭔데?

AWS EC2에 접속하기 위해 브라우저 환경에서 터미널에 접속해 보신적 있으신가요?

이렇게 브라우저 환경에서 외부 컴퓨터의 터미널에 접속하여 실제 터미널 UI처럼 동작하도록 만든 것이 웹 터미널(Web Terminal)입니다!

매번 별 생각없이 사용하다보니 어떻게 동작하고 구현은 어떻게 되어있는지 항상 궁금했었는데요,
이전 인턴 다니던 회사에서 구현해 볼 수 있는 기회가 생겨 실제로 구현해보았고, 글로 남겨보고자 합니다.

TTY, PTY, PTS?

브라우저에 터미널을 올리기에 앞서 우선 터미널이라는 것이 어떻게 동작하는지를 알아보겠습니다.

터미널에 대해 찾아보니 TTY, PTY, PTS라는 단어들이 많이 보이는데요, 비슷한 단어 같으면서도 다른 뜻을 가지고 있어 개념이 헷갈리기 쉽습니다. 우선 TTY에 대해서 알아보도록 하죠.

TTY

현대에는 컴퓨터의 입출력 장치가 전부 소형화 되어있고, 사용하기도 편하게 만들어져있습니다.
하지만 과거에는 거대한 기기를 컴퓨터에 연결하여 이를 입출력 장치로 사용했다고 합니다.
카드에 구멍을 뚫어 이를 입출력 기계에 넣어 컴퓨터를 조작하였습니다.

이후 전신타자기(Teletypewriter)가 발명되어 키보드로 입력하고 종이로 출력되는 형식으로 컴퓨터의 입출력이 능하게 되었습니다.

이 Teletypewriter, 전신타자기가 과거의 CLI로 동작하였고 이것이 현재까지 이르러 터미널을 지칭하는 단어로 사용되고 있는 것입니다.

현대 컴퓨터에서 TTY는 커널에 통합되어 소프트웨어의 형태로 남았습니다.
과거의 물리적인 형태가 사라져버린 것이죠.

PTY, PTS?

그럼 PTY와 PTS는 무엇일까요?

리눅스에 대해 조금이라도 알고 계신 분들이라면 커널 스페이스에 사용자가 접근하는 것은 어렵다는 것을 알고 계실겁니다.
그렇기에 커널 스페이스에 있는 TTY를 유저 스페이스와 중개해줄 가상의 소프트웨어가 필요할텐데요.
이것이 PTY(Pesudo TTY)입니다.
우리가 보는 터미널은 실제 TTS가 아닌 TTS를 GUI 환경에 에뮬레이션한 PTY를 보고 있는 것인거죠.
PTY는 TTS와 중개하기 위해 두 쌍의 master/slave 쌍의 프로세스를 생성합니다.
이때 master 프로세스르 PTM, 그리고 slave 프로세스를 PTS라 지칭하는 것이죠.

PTM은 터미널을 에뮬레이션하는 xterm과 같은 프로세스와 연결되어 있고 PTS는 TTY Driver와 연결되어 있습니다.
PTY 프로세스는 아래 순서대로 사용자의 입력을 처리합니다.

  1. 사용자가 ls를 입력함
  2. 터미널 에뮬레이터가 PTM에게 ls를 전달
  3. PTM이 TTY에 ls를 전달
  4. TTY는 PTS에 ls를 전달
  5. PTS는 Shell(bash, zsh 등)에 ls를 전달

물론 출력은 역방향으로 진행됩니다.

이렇게 TTY의 역사부터 PTY(PTS)까지 알아보았습니다.
물론 여기까지는 터미널에 깊은 지식을 다루기에 굳이 완전히 이해하고 보실 필요는 없습니다.

이제 원격 접속을 위한 SSH에 대해 알아볼까요?

SSH

SSH(Secure SHell)은 원격지에 있는 컴퓨터의 Shell에 접속하기 위한 통신 프로토콜입니다.
과거 원격지의 컴퓨터에 접속하기 위해서 Telnet이라는 통신 프로토콜을 사용하였는데요.
암호화가 전혀 되어있지 않은 채로 통신이 이루어져있어 보안에 취약하다는 문제점이 있었습니다.
SSH는 이 단점을 보완하여 나온 프로토콜로 모든 통신이 암호화되어 이루어진다는 특징이 있습니다.

SSH는 비대칭키 방식으로 두 호스트 간 인증을 진행합니다.
서로 인증된 호스트임을 확인하면 대칭키 방식으로 통신 내용을 암호화하여 통신하게 됩니다.

이런 과정을 잘 도식화해둔 이미지가 있어 같이 올려봅니다!

결론

이번 시간에는 웹 터미널을 구현해보기에 앞서 간단하게 기초 지식에 대해 설명하였습니다.
다음 시간에는 본격적으로 웹 터미널을 구현해볼 예정이고, 프런트부터 차근차근 만들어보겠습니다.

Reference

https://velog.io/@preeded/TTY%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%EA%B7%B8%EB%A6%AC%EA%B3%A0-ptsdevpts
https://gwonbookcase.tistory.com/56

profile
한 번 더 고민해보는 개발자

0개의 댓글