[과제]학부 졸업작품 설명서&논문

졸업작품을 제작하고 전시하는 것 까지 끝났음에도 불구하고 논문을 쓰라고 하는 괴소문을 들었다. 그리고 그 괴소문은 사실이었다.

 

당부하지만, 이 논문을 보고 내가 만든 졸업작품을 제작할 수는 없다. 논문은 이런 형식으로 쓰는 것이다 라고하는 흉내만 냈을 뿐이다. 실제로 교수님들도 형식만 맞게 만들어 오면 대부분 OK사인을 주셨던 것 같다. 다른 과제들과 다르게 논문은 만들 때 지켜야할 규칙이 꽤 많았던 것 같다.

 

다음은 졸업작품 전시화(=산업기술대전) 때 설치했던 설명서다. 무엇을 읽어야할지 모르겠다면 우측 아래 한문장만 보면 된다.

 

 

 

 

논문의 보이는 원래의 형태는 좌우 두 라인으로 나뉘어져 있으나 인터넷 문서에서는 구현하기 복잡하므로 하나의 라인으로 적어본다. 그래서 이미지가 작은데, 크게 늘려서 올리려니 화질이 좋지 않다. 또 가독성을 위해 글자체와 크기를 임의로 조정했다.

 

웹&모바일 기반 M:N 토론형 채팅프로그램

장용하 임형진 공기석 최종필

한국산업기술대학교 컴퓨터공학과

{커피두잔^O tyche, qwe885}@kpu.ac..kr

M:N discussion type chat program
based on Web & Mobile

Yong-Ha Jang⁰ Hyung-Jin IM Ki-Sok Kong Choi-Jong pil

Dept. of Computer Engineering, Korea Polytechnic University

요 약

매년 증가 하는 토론에 대한 관심을 충족하기 위하여 이 프로그램을 창안하였다. 사용자가 토론 주제에 대하여 정해진 규약에 맞춰 토론을 진행 할 수 있다. 주를 이루는 1:1 토론 방식과 M : N토론 방식을 따로 두어 선택적으로 토론을 할 수 있다. 특히 1:1 토론 방식에서는 직접 개발한 알고리즘(TT)을 통하여 토론을 할 수 있으며, 이는 대화 복잡도를 알고리즘에서 잡아주기 때문에 사회자가 필요하지 않다. 또한 토론자들끼리의 토론을 실시간으로 볼 수 있는 게스트들은 토론을 보며 서로 대화하며 의견을 공유할 수 있다. 이 프로그램은 스마트 폰에서도 진행 할 수 있도록 구성되어 있다.

 

 

1. 서론

   구글 트렌드를 통해 토론에 대한 검색어 추이를 보게 되면토론에 대한 일반 대중들의 관심이 매년 27%씩 증가하고 있다는 것을 알 수 있다. 아래의 (그림 1)은 위에서 말한 구글 트렌드를 통한 통계 자료이다[1]. 이는 일반인들에게 있어서  토론이란 것이 하나의 관심사로 자리 잡고 있음을 유추할 수 있는 자료다.

 

(그림 1) 토론 검색어의 변화 추이[1]

 

   이렇게 토론에 대한 관심이 높아짐에 따라 토론의 장의 필요성은 생겨났지만 마땅히 토론의 장을 열 수 있는 공간과 규율이 부족하다는 점에서 이 프로그램을 계획하게 되었다.

   인터넷에서 토론을 하는 곳은 대부분 게시판을 이용하게 되는데 게시판에서는 사회자란 중요한 부분이 없기 때문에 토론의 대화 주제에 벗어난 말을 한다 던가 발언의 실시간성이 부족하기 때문에 각자 다른말을 하는 경우가 빈번하다. 이러한 점을 보안하고 토론을 말로하는 것이 아닌 글로 하는 것이기에 글로써 하는 토론의 장점을 십분 활용하는데에 초점을 맞추어 프로그램을 개발하였다.

 

2. 관련 연구

2.1 기존 유사 프로그램 및 사이트들과의 비교

  아래의 <표1>은 본 프로그램과 유사한 채팅 프로그램과 토론프로그램에 대해 소개하고 있다.

<표 1)> 유사 프로그램 및 사이트들 소개

 

 

유사 사이트들의 경우엔 토론의 장을 만든다는 점은 같으나 토론의 주체자들만 존재하고 중재자는 여전히 존재하지 않는다. 이러한 결점을 보안하여 주체자들의 토론을 돕기 위해 본 프로젝트가 개발되었으며, 인터넷 어디라도 이 프로그램을 가져와 쓸 수 있도록 웹 서비스로 개발 하였다.

 

2.2 Node.JS

   본 프로그래밍에서 서버측 프로그래밍을 위해 Node.JS를 활용 하였다. 아래의 <표2>는 Node.JS의 특징을 설명한 것 이며, (그림 2)는 Node.JS의 아키텍쳐로 Node.JS가 어떻게 만들어지고 이루어져있는지를 알 수 있다.

 

<표 2> Node.Js의 특징[5]

 

 

 

(그림 2) Node.JS 아키텍쳐

   

   Node.JS는 서버환경에서 자바스크립트로 애플리케이션을 작성할 수 있어서, 기존에 클라이언트측 개발자들에게 접근성이 높아 큰 인기와 주목을 받고 있다.

  기존의 서버환경 프로그래밍의 경우 다수의 스레드를 만들어 작업을 하였지만 Node.JS는 하나의 스레드로 동작한다. 싱글 스레드가 모든 작업을 직접 처리하는 대신 작업을 위임하고 완료 되었다는 이벤트가 발생하면 결과를 받아 처리한다. 작업이 처리되는 동안 기다릴 필요가 없으므로 스레드가 효율적으로 작동한다. 이벤트 기반의 프로그래밍은 넌 블로킹(비동기식)I/O와 함께 동작하여 그 효율이 극대화 된다.

 

2.3. 개발환경

   본 논문의 어플리케이션은 윈도우 7 환경에서 개발되었다. 또한 Java SE Development Kit (JDK6), JQueryUI 설치, node-v0.10.7 (node.js)설치, Eclipse IDE 설치 한 뒤 Eclipse IDE 에 Express모듈, Socket.io 모듈, EJS모듈을 추가적으로 설치하여 개발 환경을 구성하였다.

 

3. 세부 설계 및 구현

3.1 시스템 구성

   아래 (그림 3)은 전체적인 소프트웨어의 구조를 보여준다.

 

(그림 3) 컴포넌트 다이어그램

   이 어플리케이션의 기본적인 동작방식은 클라이언트와 서버간의 통신 방법이다. 서버에는 일반적인 채팅의 역할을 위한 모듈인 Chat Module 이 있고 이외에 이 소프트웨어를 위해 3개의 모듈이 더 추가되었다. 클라이언트도 일반 채팅 소프트웨어보다 더 복잡하다. 링크화와 구조화를 뒷받침하기위한 기능을 추가하기위해 Event Process 모듈이 추가되었다.

3.2 핵심 알고리즘

3.2.1 UI 구성

  HTML5를 기반으로 두고 있는 JqueryUI, KendoUI를 사용하면 깔끔할 뿐만 아니라 애니메이션 효과도 비교적 쉽게 사용할 수 있다[6]. 아래 (그림 4)는 대표적인 UI설정관련 소스를 나타내고 (그림 5)와 (그림 6)은 본 작품의 UI중 일부를 나타낸다.

 

(그림 4) UI구성 예시

 

(그림 5) PC방식의 UI

 

(그림 6) 모바일방식의 UI

 

3.2.2 비동기 이벤트 루프식 코딩

  비동기 이벤트 루프를 이용하면 시간이 오래 걸리는 매체 접근과 CPU의 작동을 따로 처리할 수 있기 때문에 서버의 경우 쓰레드가 한 개만 존재해도 멀티쓰레드보다 효율이 높다. 일단 매체에 접근을 시켜 놓은 뒤 해당 잡업이 다 끝나면 다 끝났다고 이벤트가 발생하도록 하는 방식. 이 이벤트가 발생하기 전엔 CPU는 다음 작업을 계속 진행할 수 있다. 아래 (그림 7)은 비동기 방식의 대표적 예시며 readFile함수 마지막 파라미터로 function이 주어지는데 이 파라미터는 매체접근이 끝난 이후 맨 마지막으로 실행된다. 그렇기 때문에 매체접근시에는 또 다른 처리작업을 지속적으로 진행할 수 있게된다.

 

(그림 7) 비동기방식 소스 예시

 

3.2.3 링크화 & 구조화

  전체적인 대화를 구조화하여 복잡 도를 제거해보자는 컨셉이었다. 전체적인 모양을 형성하기 위해선 구조화라는 작업이 필요하며 이 구조를 사용하기 위해서 링크화라는 개념을 도입하였다[7]. 아래 (그림 8)은 문자열을 링크로 만들 기전 색깔과 몇 가지 경우의 수 등을 위한 설정 부분이다.

 

 

(그림 8) 링크화 예시

 

(그림 9) 링크화, 구조화 개념도

  전체 대화내용은 주제별로 하나씩 구분된다. 각 구분된 개체들은 트리구조의 노드로 생각하며, 어느 노드에서 해당 주제가 시작되었는지에 따라 부모 자식관계가 결정된다.

  노드 생성을 위해서는 해당 텍스트를 링크로 바꾸고 그 링크 속으로 들어간다는 개념을 사용하였다. 이는 트리의 구조가 생성됨과 동시에 운행되는 모습을 보인다. 상위 노드로 올라올 땐, 당연하겠지만 이전의 채팅내용들이 보존되며, 이어서 계속 채팅을 할 수 있다. 이상은 (그림 9)에대한 설명이다.

 

3.3 구현

  결과적으로 3.2에서 말한 주요 알고리즘들과 기본적인 채팅 어플리케이션이 결합되면 구현이 된다. 아래의 (그림 10)은 실제 구현된 상태에서 토론을 하는 경우를 보여준다. 해당 글자에 링크를 걸 수 있고 링크를 통해 노드들이 생성되며(링크화), 우측의 트리 모형에서 현재 대화의 진행정도와 깊이 그리고 해당 노드에서 어떤 이야기들이 오고갔는지 알 수 있다(구조화).

  여기서 중요한 점은 웹을 기반으로 둔 다양한 소켓들이 서로 소통할 수 있다는 점이다. 현재 가장 최신 기술의 소켓인 웹소켓의 경우 가장 빠르고 안정적인 접속과 메시지통신을 수행하며 이외에 플래시소켓, 폴링소켓, htmlfile소켓 방식으로도 제 역할을 수행할 수 있고 서로 다른 소켓끼리 연결 또한 가능하다 다만 각 소켓별로 상이한 특징들에 대해서는 Node.js기술과 함께 참고하여야 문제가 생기지 않고 언급한 이야기들은 참고 문헌을 참고하면 보다 자세히 알 수 있다[9].

 

 

(그림 10) 구현 완료 샘플 예시

 

4. 결론 및 향후 연구과제

  이러한 대화의 복잡도를 잡겠다는 개념은 사실 어제 오늘일이 아니었다. 수십 년 전부터 수많은 기관에서 고민해왔던 것이고 때문에 수십 가지의 토론방식이 고안, 책정, 평가되어왔다[8].

  그리고 CEDA방식의 토론이 현재 대표적으로 자리 잡고 있는데, 좋아서가 아니라 그나마 쓸 만하기 때문이다. 그렇기에 수많은 문제점들이 지적되어오고 있으며 앞으로 새로운 방식이 필요할 것이 분명하다.

  우리는 이러한 상황에서 컴퓨터공학도의 입장에서, 대화 내용을 정보의 단위로 보고 체계적으로 구조화를 시킬 수 있는 알고리즘을 개발해보자는 생각을 했다. 그 결과 현재의 작품을 탄생하게 되었다.

  단, 아쉬운 점은 이론적으로는 훌륭하나 실제로 설득력 있게 사람들의 귀에 들어오기 위해서는 수많은 실제 사용에 관한 수치적인 데이터가 필요한데, 그것을 마련하는 데는 최소 매일 100여명의 이용자가 한 달여간 이용하는 정도의 표본이 필요하다. 그러나 그런 여건이 안 된다는 것에 유감을 표하고 싶다. 다만 이론적으로는 기존의 CEDA토론 방식보다 체계적인 접근을 하고 있고, 더 유연하며 나아가 사회자의 역할을 제거해버리는 등 토론의 간결화 및 효율을 높이는데 그 가능성을 볼 수 있었다.

  이를 위해, 접근성을 높이기 위해 웹 기반의 기술을 사용했다. UI구성과 비동기식 방식을 처음 접했고 교육과정에서 배우지 않았던 언어를 두 개나 배웠다. API검색을 위한 영어문서 해석과 찾는 것 그 자체 또한 많이 연습을 했다. 이러한 과정을 겪으면서 사소하지만 중요한 자잘한 수많은 오류들 때문에 현업에서 겪을 수많은 문제에 대해서도 간접적인 그 고통을 느낄 수 있었다.

 

참고문헌

[1] 구글 트렌드, “http://www.google.com/trends”

[2] 변정훈 지음, Node.JS 노드제이에스 프로그래밍 (클라우드 컴퓨팅 시대의 고성능 자바스크립트 플랫폼), 에이콘, 2012.02.17

[3] 랜덤채팅, “http://www.gagalive.kr/livechatr.swf”

[4] 토닥토닥, “http://todoctodoc.co.kr”

[5] 다음 아고라 토론 광장, “http://agora.media.daum.net/”

[6] JQuery UI : “http://jqueryui.com/“

[7] 비슷한 개념의 Logic tree : “http://terms.naver.com/ entry.nhn? docId=77342&cid=2053&categoryId=2053”

[8] NFA의 CEDA토론에 대한 의견 : “http://www.nationalforensics.org/journal/vol4no2-3.pdf”

[9] Socket.io : http://socket.io/