node.js+socket.io를 통한 간단한 실시간 아이디어 보드
원래 JSP 수업이여서 spring으로 하려고했는데...
spring으로 하기에 시간이 없었기 때문에 간단하고 빠르게 만들 수 있는 node.js에 외부 라이브러리인 socket.io 를
사용하여 아이디어 회의 보드를 만들었습니다.
한쪽이 어떤걸 하면 다른쪽에서 똑같이 보여지는
(어찌보면 미러링과 같은) 역할을 합니다.
1. 전체적인 인터페이스
: 전체적인 인터페이스는 보이는 화면과 같습니다.
2. 채팅과 캔버스 기능
: 왼쪽 위 캔버스와 오른쪽 상단으로 이동할 수 있는 채팅으로 서로 대화하는 모습입니다.
3. youtube(동영상 기능)
: 상대방에게 보여주고 싶은, 아이디어 참고가 될만한 YOUTUBE 영상을 url형식으로 붙여넣기 하면 상대방과 내가 화면에 바로 띄워줍니다. 창 크기 조절을 할 수 있고 오른쪽 버튼을 누르면 메뉴를 사용할 수 있습니다. 드래그 하거나 크기를 조절할 경우 상대방도 같이 조절됩니다.
4. 문서 기능 (Google document 이용)
: 구글 문서에 있는 공유로 올린 파일의 url을 embed형식으로 불러와줍니다.
5. 이미지 업로드, 보여주기 기능
: 보여주고 싶은 이미지를 업로드하면 서버에서 다시 모든 사용자에게 그림을 보여줍니다. 이런식으로 오른쪽 버튼을
누르면 Context menu가 나오게 되어 옵션들을 사용할 수 있습니다.
6. Flow Chart & Mind Map
: go.js를 사용하여 왼쪽 flow chart node를 만들어 사용할 수 있도록 하였습니다.
이것때문에 레이어비슷한 것을 사용하여 클릭하는 순간 flow chart레이어가 맨앞에 오게됩니다.
7. 실제 아이디어 사용하는 모습
: 원래 아이디어 라는게 어디서 어떻게 나올지 모르는 거라서 여러 미디어나 다른 것들을 사용해서 웹을 구성하려고 노력하였습니다. 최대한 요즘 대세인 All in One을 구성하려고 했으나 학부 수준에서는 역시 시간과 많은 제약이( ㅠ_ㅠ )
프로젝트 할 때마다 뭔가 욕심이 생겨서 간단한 걸 만들어야지가 더 광범위해 지네요...
