About me Op-eds

01410.coroke.net 개발기록

서비스의 사용자 경험이 역사로 보존될 수 있을까요?

01410.coroke.net은 PC통신으로 불리우는 VT서비스의 UI를 체험해볼 수 있는 서비스입니다. 월드와이드웹이 한국에 보편화되기 전, 1984년 시작된 천리안, 1986년 시작된 하이텔, 1994년 시작된 나우누리 등, 모뎀과 전화회선 또는 ISDN을 통해 연결하는 전국단위 네트워크 서비스가 있었습니다. MS-DOS에서 가동되는 ‘이야기’라는 프로그램이, 이후 Windows가 보편화된 이후에는 ‘새롬데이터맨’등의 프로그램이 이들 PC통신에 접속할 수 있는 프로그램이었습니다. 이후 월드와이드웹이 보편화되고, 전화가 아닌 ADSL 통신망이 보급되면서 01410 01411 01412 01443 등의 전화번호로 접속하던 VT서비스 형태의 PC통신은 역사속으로 사라졌습니다.

PC통신은 역사속으로 사라졌지만, PC통신에서 생겨난 역사적 사건과 콘텐츠는 결코 적지 않습니다. 웹소설의 전신이나 다름없는 PC통신문학, 특히 판타지 소설이 폭발적으로 생겨난 곳도 PC통신이었습니다. 영화 <엽기적인 그녀>의 원작도 나우누리 게시판에 연재되었던 것입니다. 온라인 아이돌 팬클럽도 PC통신에서 시작되었습니다. 여러 민주주의 시민운동도 PC통신에서 더 빠르게 조직되곤 했습니다. 전국교직원노동조합(전교조) BBS의 이름마저 그 유명한 ‘참교육’ 이었습니다. 온라인 커뮤니티에 대한 이해가 없었던 공권력은 PC통신 운영사에 들이닥쳐 한총련 방이 몇호냐고 묻기도 했습니다. PC통신에서 만나 가정을 꾸린 분들 중에는 이제 중년을 넘어 노년으로 접어드는 분들도 있습니다.

월드와이드웹이 보편화된 이후, PC통신을 흉내낸 웹서비스가 일부 생겨나긴 했지만 더는 관리되지 않는듯 했습니다. 마침 새 회사 출근 전까지 Kotlin/Spring을 새로 익혀볼까 하고 새로 공부하던 중이었습니다. 저 역시도 커뮤니티 사이트를 운영할 적에 비슷한 UI를 흉내내어 만들어본 적이 있어서, 당시 기억을 되살려 파란 화면의 PC통신 UI를 다시 구현해보아도 괜찮겠다는 생각이 들었습니다.

그렇게, 01410.coroke.net을 새로 만들었습니다.

coroke.net 은 9년 전 충격고로케라는 서비스를 만들면서 이런 저런 장난감같은 서비스를 만들 때 쓰던 도메인이었습니다. 스타트업을 꾸리면서 운영하던 서비스들을 모조리 정리하고 닫은 이후에는 돈만 내고 있었는데, 다시 재활용해야겠다 싶어 이 서비스의 도메인으로 연결했습니다.

01410.coroke.net의 백엔드는 Kotlin/Spring 이고 프론트엔드는 그냥 Javascript입니다. 흔히 VanillaJS라 부르는 그것입니다. 프론트엔드 랜더링은 그저 텍스트를 받아 <pre> 에 넣는 것 외에는 아무것도 필요치 않았습니다. 그래서 웹 프레임워크나 모듈 번들러도 쓰지 않았습니다. 큰 커뮤니티 사이트를 만들 생각은 없고 체험판 UI 정도로 만들고자 했던거라 서버사이드랜더링은 고려하지 않았습니다. 즉, 요즘의 최신 웹기술 같은건 쓴게 없습니다.

기술적 난관

JSON을 받아오는 API가 아니라 text/plain 그 자체를 받아오는 API를 구현하고, 상황별 프롬프트만 클라이언트에서 적당히 구현토록 했습니다. 도움말과 같은 고정된 화면 역시 .txt 파일을 고스란히 받아오도록 했습니다. 이정도면 취미로 간단히 만들고, 재미로 서버를 띄워보는 데에는 무리가 없다고 보았습니다.

기술적 난관은 다른 곳에서 발견되었습니다.

PC통신 VT서비스가 출력하는 텍스트는 고정폭 폰트로 모니터에 그려집니다. DOS와 같은 CUI 환경에서 PC통신이 시작되었으니 당연한 일입니다. 20세기는 가변폭 폰트를 쉽게 구현할 수 있는 시대가 아니었습니다. DOS 환경에서 한글은 전각, 영어는 반각이라 부르는 고정폭으로 그려졌습니다. 가로 80자, 세로 25자를 담는 텍스트 환경 또는 그와 유사한 640x480 해상도에서 고정폭 폰트로 표현됩니다. WIndows 95라는 운영체제는 이름 그대로 1995년에서야 나왔습니다. Windows 3.1의 가변폭 폰트 표현도 워드프로세서를 제외하면 매우 제한적으로 적용되고 있었습니다. 그래픽 구현이 쉽지 않던 시기였기 때문에 상자 그리기 같은 간단한 표현조차 ASCII 또는 KSC5601의 특수문자 코드로 제한적으로 구현되었습니다. 이를 선 특수문자 또는 Box-drawing character 라고 부릅니다. 이렇게 생긴 특수문자입니다.

─│┌┐┘└├┬┤┴┼

다음과 같이, 이어진 선인 척 하는 특수문자를 잘 배치하여 네모를 그리는 식입니다.

┌─┐
└─┘

21세기에는 KSC5601 코드도 UTF-8 체계 안으로 들어온데다 그저 호환성을 위해 포함된 수준이어서 이들 특수문자에 대해 정확한 고정폭 표현을 지원하는 폰트가 많지 않습니다. 레트로 폰트가 자주 유행하긴 하지만, 선 특수문자까지 한글과 동일한 폭으로 표현하는 폰트는 흔치 않았습니다. 특히 경량화된 한글 웹폰트의 경우 별, 하트와 같이 자주 쓰이는 특수문자를 제외하면 대부분의 특수문자를 제거해버리곤 합니다. 그래서, 윈도 환경에서는 Fixedsys 폰트로 고정폭 특수문자를 간단히 표현할 수 있지만, 윈도 점유율이 낮아진 21세기에는 이 또한 적절한 선택이 아니었습니다.

퍼블릭 도메인으로 공개된 ‘둥근모꼴’ 웹폰트가 흔히 PC통신 폰트로 알려진 폰트입니다. 이 폰트 역시 선 특수문자를 모두 정확하게 지원하지는 않고 있었습니다. 경우에 따라서는 선 특수문자가 반각으로 표현되기도 했습니다. 정말 다행히도, MIT라이센스로 공개된 ‘삼국지3’ 웹폰트가 유일하게 선 특수문자를 정확하게 전각으로 표현했습니다. 그래서 01410.coroke.net에서는 두 폰트를 함께 활용토록 했습니다. 이 폰트조차 없었다면 아마 선 특수문자 구현을 위한 웹 폰트까지 새로 만들었을지도 모르겠습니다.

웹 환경은 적절한 읽기 경험을 위해 줄간격을 조정하곤 합니다. 대개 한글은 1.5~2.5em 정도의 line-height를 두는 것이 권장됩니다. 이 경우, PC통신 화면에서는 세로 줄 사이가 끊어지곤 합니다. 그래서 선 특수문자에 한하여 transform:scaleY(1.5) CSS를 걸어 선이 끊어지지 않도록 했습니다.

이러한 과정을 거치고 나서야 선 특수문자를 정확히 구현할 수 있었습니다. 이제, 실제 서비스에서 쓰일 화면을 만들어 볼 차례입니다. 즉 선으로 네모를 그리는 일을 해야합니다.

선 그리기 에디터 개발

선 특수문자는 가로 선─, 세로 선│, 왼쪽으로 연결된 선┤, 오른쪽으로 연결된 선├, 꺾인 선┐ 등 다양한 선 특수문자를 배치하여 줄을 긋도록 되어있습니다. 글자를 적재적소에 하나하나 배치하는 것은 퍼즐 조각 맞추기와도 같습니다.

DOS를 쓰던 시절에는 이와 같은 선 그리기가 매우 일반적이었기때문에, 아래아한글 1.5 버전과 같은 워드프로세서에서 기본적으로 선그리기 기능을 제공하고 있었습니다. 화살표키를 요리조리 누르면 문서에 선이 그려지는 기능입니다. 다음과 같이 말입니다. -

21세기에는 선 특수문자로 선을 그리는 일이 거의 없기 때문에 더는 특수문자로 선을 그리는 에디터가 없습니다. 그래서 아래아한글 1.5버전을 구해 DOSBOX에서 기동해본 뒤, 웹브라우저에서 KSC5601 특수문자 선을 그릴 수 있는 에디터를 다시 만들었습니다. 원리는 간단합니다. 먼저 <textarea>에 빈칸을 가득 채워 아래아한글 1.5와 같은 전체화면 에디터로 작동하게끔 합니다. 커서가 움직이는 시점에 좌우상하에 연결해야할 선이 있는지 찾습니다, 이후 상황에 따라 연결된 선 특수문자로 현재 커서의 글자를 바꾸어줍니다. 아래아한글 1.5는 ASCII 반각 코드로 선을 그렸지만, 01410.coroke.net에서 원하는 선은 KSC5601 전각 코드로 선을 그리기 때문에 관련 처리를 더 추가했습니다. DOS 시기에는 박스형 커서가 일반적이었지만, Windows와 Mac으로 이어지면서 막대식 커서로 바뀌었기 때문에 그로 인한 경험 차이도 컸습니다. 그래서, 경우에 따라서는 selection으로 커서가 박스처럼 움직이게 바꾸었습니다.

간단히 작동하는 선 그리기 에디터를 마련하고 나니, 필요한 화면을 어렵지 않게 그릴 수 있게 되었습니다.

오픈소스 공개

이쯤 되니 DOS시기의 문서 편집이나 PC통신 사용경험을 유산으로 남겨야하는게 아닐까라는 생각이 들었습니다. DOS와 PC통신을 써보았던 세대가 이제는 정말로 사라지고 있기 때문입니다. 박물관이나 영상 아카이브로 DOS와 PC통신의 모습을 살펴볼 수야 있겠지만, UI 사용 경험, 그리고 그 안에서 사람과 연결되어있다는 경험을 직접 해보는 것은 이제 쉽지 않은 일이 되었습니다. 파란 화면의 제한된 환경에서도 사람들과 연결되어있다는 감정을 21세기에 다시 체험해볼 수 있을까요? HTML 과 JavaScript로만 돌아가는 웹 어플리케이션은 20세기의 체험에 여전히 유효한 도구로 보여졌습니다.

그래서, 01410.coroke.net 서비스와 선 그리기 에디터의 소스코드를 오픈소스로 공개하기로 했습니다. 재미삼아 만든 코드들이지만 실은 사라져가는 경험을 재현하는 과정들이었습니다. 그래서 저의 서버가 꺼지더라도 누군가는 다시 되살렸으면 하는 마음이 생겼습니다. 유사한 서비스가 더 생겨나도 좋을 것입니다. 서버는 Kotlin/Spring 으로 연습삼아 만든 코드입니다. 소셜 로그인을 제외한다면 간단한 CRUD만 기능하는 코드이니 다른 언어로 바꾸는 건 어렵지 않아 보입니다. JavaScript는 좀 더 깔끔하게 다듬을 여지가 없을까 하는 고민이 잠시 있었습니다. 참고가 될까 하여 C 로 만들어진 사설BBS 서버 코드를 발굴해보았는데, if else로 가득찬 코드를 보니 그때나 지금이나 코드 상태가 비슷해보였습니다. 그래서 JavaScript 코드도 그냥 공개하기로 했습니다.

두 소스코드는 MIT 라이센스로 배포합니다. 과거의 기억을 되살려 고쳐도 좋고, 새로운 무언가로 다듬어 만들어도 좋을 것입니다.

모뎀 사운드는 인터넷에 공개 라이센스로 배포된 버전을 짧게 편집한 것입니다. 모뎀의 전화 접속 소음의 원리는 다음 YouTube 영상과 다음 글 에서 자세히 알아볼 수 있습니다.

과제

게시물은 순수한 텍스트만 처리됩니다. ASCII Art라 불리우는 그림, 애니메이션은 <pre> 태그 랜더링으로는 구현할 수 없습니다. ASCII escape code가 여전히 잘 처리되는 터미널 환경의 텔넷 서버를 다시 구현한다면 가능할수도 있겠습니다만 AI가 그림을 그리는 시대에 누가 뭐하러 또 ASCII Art를 짜겠나… 라는 생각에서 접었습니다. 아카이브만 열심히 발굴하는게 유익해보입니다.

01410.coroke.net 서비스의 단축키는 나우누리의 그것을 참조하였습니다. 따라서 하이텔 천리안과는 다소 다를 수 있습니다.

글 수정, 삭제기능도 없습니다. 역시 서비스 사용자가 많아지는 일이 혹여나 생기면 그때 추가하겠습니다. 지금은 그저 ‘체험’에 방점을 두고 개발했습니다.

재밌게 즐기십시오.