캡스톤디자인(1)때 간단정리

간단하게 정리해보려 한다.

 

우선 주제는 "메타버스를 활용한 협업툴", 메타버스 + 협업툴을 생각했다. 프로젝트명과 팀명은 ToasTooL이다.

 

크게는 웹사이트에 사용자와의 상호작용을 담당하는 UI부분을 아코디언형식으로 넣고,

웹사이트의 오른쪽에는 게임 부문을 넣었다.(약간 discord 느낌으로)

그리고 게임 안에서 상호작용으로 협업툴 웹사이트를 따로 불러올 수 있는데, 이 부분이 내가 맡은 분야이다.

이곳에서는 사용자들과 코드 협업을 할 수 있다.

 

그래서 일단은 c언어를 왼쪽에 적으면, 다른 사이트에 접속해있는 접속자의 화면에도 c언어가 써진다. (websocket 사용)

그리고 run 버튼으로 오른쪽에 실행 결과를 출력할 수 있고,(spawn사용, post 요청으로 비동기)

quill editor를 사용해서 코드 하이라이팅 (hightlight.js사용), 그리고 quill-cursor를 사용해서 사용자가 어디에 마우스가 옮겨지는지 위치를 확인할 수 있는 커서가 나온다.

 

글로는 이렇고, 현재는 캡스톤(2)를 하면서 더 업그레이드를 시키느라 이때의 모습이 아니다.

그래서.. 지난 학기부터 블로그를 했으면 좋겠지만 지금부터 하고 있기에...

나중에 카테고리로 캡스톤(1)로 따로 빼서 정리를 하려고 한다.

 

일단은 지금은 업그레이드화를 하는 중이라! 지금부터 이곳에는 업그레이드를 하는 글을 작성할 예정이다.