원격의료상담 툴 개발일기 3화

이전에 썼던 2화는

https://oflofty.tistory.com/62

원격의료상담 툴 개발일기 2화

좀 오랜만에 개발일기를 쓰는 것 같다. 보고서 제출할 때 필요한 최소한의 기능과 프런트엔드, UI 디자인을 해놓고 나서 번아웃이 와서 한 5일간은 아예 커밋조차도 안 하고 살았다. 번아웃이 본격적으로 온 후에는 새로운 기능들을 개발하는 대신 이전 편에서 말했던 각종 오류들을 해결하고 테스트하는데 초점을 뒀다.

여하튼 자잘한 버그들을 해결한 방법에 대해서 잠깐 이야기하자면 첫 번째로 중복된 ID로 회원가입을 넣으면 서버가 죽는 현상이 있었는데 로그인과 비슷하게 쿼리를 날린 후 DB에서 받아온 데이터의 개수를 따져서 해결할 수 있었다. 만약 중복되는 ID가 있다고 한다면 중복되는 ID가 있다고 alert메시지를 띄워주고 다시 redirect 시켜줬다. 이때 node.js 가 DOM을 지원하지 않아서 조금 헤맸다. 그리고 send나 render 등의 순서에 있어서도 여러 번 사용하면 오류가 발생해서 한 줄에 처리를 해줘야 했다. 이런 방식으로 말이다.

res.send("<script>alert('There are overlapping IDs.');  location.href='/register';</script>");

그리고 화상상담 기능을 로그인시에만 사용할 수 있도록 구현하는 건 session의 is_logined을 확인해서 로그인 상태일 때만 출입가능하도록 구현했다. 이건 크게 어렵지 않았다. 이 정도로 기존 issue들을 해결했다.

그다음에는 마이페이지를 구현했다. 디자인적으로는 역시 적절한 오픈소스 템플릿을 따와서 약간의 수정만 하는 방식으로 사용했다. 그리고 이게 어떤 방식으로 활용하는 게 정석일지는 모르겠지만 나는 세션에 ID같이 고유한 정보들을 마이페이지를 render 할 때 가져와서 마이페이지에 필요한 정보들을 담은 DB 테이블과 연동하는 방식으로 개인정보를 구별해서 띄워줬다. 그런데 혹시 이게 보안에 취약하다면 암호화/복호화를 하거나 다른 방식을 조금 생각을 해봐야 할 거 같았다. 통계 그래픽 같은 경우에는 나중에 의료통계를 분석해서 사용자한테 알려주는 기능을 추가할 예정인데 그때 활용할 공간을 위해서 그대로 남겨두었다. 그리고 마이페이지에서 가장 중요한 기능인 상담내역을 추가했다.

 

사실 구현해본 적이 없는 거라서 '조금 어려울 수도 있겠다.'라고 생각했는데 생각보다 엄청 간단했다. 가장 먼저 게시물에 필요한 정보들을 담은 DB테이블을 설계했다. 그 후 먼저 마이페이지에 뜨는 게시물을 불러와서 띄워줘야 하는데 이거는 select를 이용해서 userID와 session에 담긴 ID를 비교해서 동일한 게시물들을 골라서 띄워줬다. 

 

그리고 게시물마다 상세/수정페이지를 만들어야 했는데 아래 코드처럼 인덱스로 게시물들을 구분해서 띄워줄 수 있도록 설정했다. 사실 기능구현에만 충실해서 예쁘게는 못 만들었는데 시간이 된다면 디자인도 해야겠다.

router.get('/update/:idx',function(req,res,next))

그리고 글 수정은 상세페이지에서 수정을 누르면 DB에 update쿼리를 보내서 수정하도록 설정했다. 

그리고 상담내용을 추가하는 부분에 있어서는 기술적인 문제보다는 어떤 방식으로 글을 쓰는 게 좋을까? 를 정말 많이 고민했다. 상담내역이 있다면 자동으로 DB에 상담내용을 저장한 후 나중에 의사가 글을 쓸 때 상담했던 내용을 토대로 환자한테 보내주는 게 좋다고 생각이 들었기 때문에 나중에 확장을 하려고 한다. 아무튼 일단은 테스트를 위해 간단하게 위에서 보여줬던 UI와 비슷한 글쓰기 페이지를 만들고 일단은 직접 다 쓰도록 만들었다. 추후 시간이 된다면 조금 더 편리하게 만들 수 있는 부분인 거 같다. 여기서 의사/환자 계정을 분리해서 아까 말했던 디테일을 추가해야겠다는 생각이 들었다. 글을 쓰고 나서는 Insert문 쿼리를 보내서 DB에 추가해 주는 방식으로 코드를 작성했다. 

사실 2학년 때 DB를 배워놔서 생각보다는 아는 내용 바탕으로 게시판을 만들어서 '...? 생각보다 쉽네?' 이 생각이 들었던 것 같다. 

그리고 이번 일기에서 가장 구현하는데 고생했던 내용이 바로 실시간 채팅기능이다. 이전에도 webrtc를 이용해서 영상을 띄울 때 socket에 대해서 잘 이해가 안돼서 고생을 했는데 이번에도 socket을 다시 다뤄야 한다니 시작부터 머리가 아팠다. 그런데 막상 어느 정도 이해를 하고 나니 그렇게 어렵지 않게 구현을 할 수 있었다.

우선 서버 부분의 코드는 새로운 유저가 왔을 때 session의 ID를 받아와서 채팅창 이름으로 활용함과 동시에 채팅창에 이름을 띄울 수 있었다. 가장 고생했던 부분은 바로 socket에서 session 정보를 불러오는 부분인데 사실 구글링을 할 때 어떤 키워드로 검색해야 할지 몰라서 온갖 허튼짓을 많이 했었다. jsp에서 session정보를 불러오는 것부터 시작해서 이상한 짓을 많이 했는데 express-socket.io-session을 사용해서 해결할 수 있었다. 간단한 세션 정보들을 설정한 후 

io.use(ios(session,{autoSave:true })); 를 통해서 session과 socket을 연결했다. 그 후 위에 코드처럼 socket.handshake.session 을 통해 불러오고 싶은 세션 정보를 불러올 수 있었다. 그 정보를 받아서 채팅 시 이름을 상대방의 ID로 뜨게끔 할 수 있었다.

그리고 서버에서 emit을 통해서 update event를 발생시키면 상대방에게 자신의 메시지를 띄울 수 있도록 설정한다. 여기서 socket.broadcast.emit은 자신을 제외한 다른 user들에게 전송하는 역할을 한다. 그냥 socket.emit은 통신하고 있는 다른 user와 함께 자신도 포함한다. 여하튼 update가 발생하면 상대방의 이름과 상대방이 쓴 메시지의 내용을 파라미터로 가져와서 상대방에게 띄워주는 방식으로 채팅을 구현하는 데에 성공했다. 

그리고 사실 내가 생각한 기능은 아닌데 성환이 형이 상담 후 교육적인 요소들을 넣기를 바래서 quizlet을 참고해서 간단한 퀴즈를 풀 수 있도록 만들었다. 아직까지 UI 디자인을 하지 않아서 모습 자체는 너무 볼품없긴 하다. 나중에 UI는 고쳐야 할 듯.. 암튼 작동방식은 미리 퀴즈와 문항내용, 답을 정해놓고 순차적으로 띄워준다. user는 정답이라고 생각하는 항목을 클릭하면 다음 문제로 넘어가고 끝나면 종합적으로 결과를 보여주는 창이 뜨도록 설계했다. 

 

사실 의료적인 학습효과가 나는 뭔지 잘 이해를 못 해서 js에 대한 퀴즈를 간단하게 만들었는데 나중에 성환이형하고 상의한 후 퀴즈내용을 수정하면 목적에 맞게 활용할 수 있을 거 같다. 아무래도 나 또한 기능을 설계하는 의도에 대해서 알고 코드를 작성하면 더욱 적절한 코드를 짤 수 있을테니 말이다.

 

그리고 성환이 형이 파일전송기능을 꼭 추가했으면 좋겠다고 해서 이미지 전송기능을 추가했다. 이 기능도 구현에 좀 고생을 했다. 물론 이 친구도 socket으로 데이터를 보내는 거지만 구글링을 해봐도 생각보다 내 맘에 드는 방법이 떠오르지 않았다. 결정적으로 이미지를 보내더라도 그 링크가 상대방한테는 유효하지 않으므로 이미지가 깨진 상태로 전송이 된다. 그래서 생각한 방법이 '서버에 이미지를 저장한 다음 서버를 통해 상대방에게 이미지를 전송한다'라는 방식이다. 서버에 이미지를 저장할 때 사용되는 모듈 multer와 AWS의 S3(AWS에서 제공하는 파일 저장 공간)을 이용해서 이미지 전송을 구현했다. 

https://juhi.tistory.com/9?category=976170 

[Node.js] socket.io로 실시간 채팅 구현하기(2) + 실시간 이미지 전송

사실 이 부분은 내가 잘 몰라서 위의 블로그를 활용해서 구현했다. 참고해서 내가 이해하고 구현한대로 좀 풀어서 쓰자면..

우선 multer.js를 작성한다. aws서버와 연동하기 위해서 awsconfig.json파일을 추가했는데 AWS S3에서 발급받을 수 있는 accessKeyId, secretAccessKey, region 값을 추가해서 연결을 할 수 있다. 이때 키값들은 알려지면 안 되는 정보이므로 .gitignore 설정을 이용해서 github에는 올리지 않았다. 이런 방식을 통해서 생성해 둔 S3 버킷에 이미지를 저장하게 된다. 

채팅창에서 이미지파일을 선택한 후 전송버튼을 누르면 uplodeFile함수를 실행하게끔 했다. 그 후 데이터 설정을 한 후 socket.emit으로 이미지를 상대방에게 보여줄 수 있도록 설정했다. message에는 S3에 저장된 이미지의 경로를 담고 있고, date에는 사진을 올린 시간이 저장된다. 그래서 S3서버에 올라간 이미지경로를 통해서 상대방에게 이미지를 전송하면 깨지지 않은 이미지를 상대방에게 보내줄 수 있다.

그 후 post를 통해서 파일을 AWS S3에 저장을 하면 정상적으로 이미지파일이 버킷에 저장된다. 참고로 이 기능은 유료이므로 참고하세요! 물론 값이 싸기야 하지만 암튼... 그렇게 socket을 이용해서 상대방에게 이미지를 띄워주면 완성!

그리고 마지막으로 캠/마이크 ON/OFF 기능을 구현했다. 사실 여러 화상회의 앱에서 지원하는 기능인데 구현할 생각을 못하고 있었다. 근데 마찬가지로 성환이 형 아이디어를 받고 구현을 시작했다. 나 또한 이야기를 듣자마자 '아 이건 필요하지' 생각이 바로 드는 기능이다. 그래서 webrtc에 대해서 다시 좀 공부를 했다. 

처음에는 localStream에 있는 video, audio 항목을 true/false로 바꾸면 전환이 가능할 거라고 생각했는데 역시나 그렇게 쉽게 되지는 않았다. 그래서 stackoverflow를 전전하다가 localStream에서 track을 얻어온 후에. stop() 함수를 통해서 멈추는 방법이 있었고, 그렇게 적용하니까 다시 replay가 안 되는 버그가 발생했다. 알고 보니 stop() 함수는 영구적으로 멈추는 함수라서 video나 audio track에서 enable여부를 바꾸는 방식으로 적용할 수 있었다.

위 사진은 캠을 끈 모양이다. 사실 버튼은 4개를 두지 않고 video/audio 상태를 불러와서 하나만 띄우고 싶었는데 상태 불러오는 거 당장 하기에는 다른 기능들도 구현이 급한것들이 많았기에 저렇게 4개 기능을 따로 두었다. 나중에 이 부분은 꼭 개선을 해야할 것이다.

 

여하튼 지금까지가 11/3일까지 개발된 항목들이고 글을 쓰는 당일인 11/4에는 좀 쉬면서 부트캠프에서 할 일들을 정리하려고 한다. 원래는 아래처럼 11월 6일까지 개발할 것들 목록이 있었는데 여러모로 수정을 거치면서 여기에 없는 것들을 한 것도 많고 목록에 있는 걸 못한 것도 많다. 

 

꼭 해야 할 것들

- 실시간 채팅기능 구현(O)

- 룸 시각화

- 페이지 완성도 높이기(O)

- README 파일 완성도 높이기

- 데이터베이스 암호화

- 회원가입 시 필요한 정보들 수정

기존:

ID

비밀번호

이름

나이

의사/환자 여부

https://stricky.tistory.com/330

MySQL 양방향 암호화 복호화 insert 및 select 예제

- 마이페이지 구현(O)

*상담내용 열람(O)

 -추후 화상상담 시 DB에 데이터 추가하는 방식으로 진행.

*건강 데이터 관리

 

추가적으로 하면 좋은 것들

- 화상상담 UI 최적화

 

그러면 11/5~6에 할 일들을 정리를 해보자면..

- 데이터베이스 암/복호화

- 회원가입 시 필요한 정보들 수정

- 의사/환자 모드 추가