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

이전 1편은 https://oflofty.tistory.com/56?category=895804 

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

암튼 개발한지 이제 한 열흘정도 된 거 같다. 내가 왜 작년 해커톤때 웹을 안했을까... 싶을 정도로 개발 속도가 빠르다. 물론 내가 그때는 싸지방코더라서 정말 열약한 환경에서 개발을 했지만 그걸 감안하더라도 이번 개발은 꽤 괜찮게 진행되는 거 같다. 계획한 일정에서 항상 하루나 이틀정도 빨리 되니까 순조롭게 잘 되고 있다고 생각한다.

 

우선 지금까지 구현한 기능들은 보여주기용 MVP(Minimum Viable Product)를 짜는 데에 초점을 맞췄다. 원격의료상담 툴이니까 가장 중요한 화상회의 기능과 회원가입, 로그인 기능 그리고 프론트엔드 디자인을 했고, 아마 오늘 중으로 이곳저곳에 공모전을 성환이형이 보고서 완성해서 낼 거 같다. 결과물을 한번씩 보자면..

우선 메인페이지 디자인이다. 일단 mvp 단계에서 개발자/기획자 2인팀이 디자인을 하기에는 주어진 시간이 많지 않아 템플릿을 가져와서 사용을 했는데, 의료용 템플릿 치고는 테마색이 주황/검정이라서 성환이형이 약간 아쉬웠는지 파란색 중심으로 바꾸라고 해서 조금 수정을 했다. 

그리고 조금 스크롤을 내리면 템플릿에 있는 화면을 거의 그대로 따와서 서비스 특징들을 꼽아서 소개를 해주는 화면이다. 사실 별다를 게 없어서 바로 넘어가자!

그 다음에는 상담이 필요한 분야를 나눠서 상담을 받을 수 있도록 했는데 사실 이거는 템플릿에서 좀 많이 바꾼 편이다. 원래는 클릭을 하면 dialog가 뜨면서 뭐 구매하는 창이 떴는데 보니까 ...이거 상담창으로 나누면 괜찮겠는데??? 해서 여러 카테고리로 상담을 받을 수 있도록 했다. 근데 밑에 사실 3개가 더 있는데 이건 어떤 상담으로 할지 생각을 좀 해봐야된다.

그리고 사실 카테고리 별로 다른 링크로 출입하도록 작업을 해야하는데 지금까지는 다 똑같은 상담방으로 들어가지는데 그 작업은 추후에 좀 여유있으면 할 생각이다. 당장 엄청 급한 이슈는 아니니까. 또 로그인시에만 상담방을 이용할 수 있도록 비로그인 상태에는 클릭하면 "로그인이 필요한 서비스입니다." 라는 메시지를 띄워주는 작업을 해야한다.

이제 가장 문제가 많은 화상상담이다. 겉으로만 보면 큰 문제가 있나? 싶은데 정말 문제덩어리 파트다. 우선 당장 해결해야 할 문제는 화면인데 css로 비율 조정하는 일이 번거로워서 대충 우측 상단에 표시되는 자신의 화면은 absulute로 적당히 저쪽에 화면이 뜨도록 해놨다. 당연하게도 화면 비율이나 크기, 해상도에 따라서 어긋나는 경우가 생기고 기능 자체는 문제가 없을지 모르겠지만 당연하게도 엄청 대충 만든 티가 나니까 위치를 상대방 우측 상단에 고정되도록 작업을 해야한다.

 

그리고 아직까지 채팅이 자신이 치는것만 보이고 상대방이 쳐도 안보인다. 사실 이건 MVP를 만들 때 화면만 달랑 띄우기에는 너무 부실해보여서 디자인만 가져와서 만들었고 socket 프로그래밍을 하지 않았다. 그렇기 때문에 당연하게도 지금 당장은 상대방하고 채팅을 주고받을 수 없으니까 채팅창 고유의 기능을 다 할 수 없다. 앞으로 가장 먼저 할 일이 이 채팅창을 통해서 접속한 상대방하고 대화를 주고 받는 거를 목표로 한다. 그리고 장기적으로는 로그인하면 그 사람이 이때까지 채팅했던 기록들을 보관해야 하는데 추후에 이 case에 대한 best practice들을 참고해서 개발을 진행하고자 한다. 지금은 socket으로 채팅을 구현해보려고 하는데 혹시 다른 방법이 있는지 조금 더 알아봐야겠다는 생각이 들었다. 그 외에도 가장 최근에 친 채팅이 아래에서 뜨도록 바꿔야 하는 것도 있다. 이거는 그렇게 어렵지는 않겠지만... 여튼 해결해야 할 문제들이 많은 채팅화면이다.

 

그 외에도 화상 화면하고 채팅창만 두기엔 너무 허전해서 header에 현재 상담가능한 전문가들의 방이 뜨도록 했는데 다른 사람이 누가 접속했는지 알아내는 거를 아직 어떤 방식으로 구현해야할지 잘 모르겠다. 역시 내가 웹 백엔드 개발이 처음이라서 너무 미숙하다는 게 느껴진다. 

그 다음은 회원가입 기능이다.  단순한 테스트만 진행한다는 생각으로 입력 항목을 넣었는데 그럼에도 불구하고 너무 부실하다는 생각이 든다. 구현 방식은 회원가입 페이지에 들어오면 Input을 할 수 있는 항목들이 있고 전부 required 속성을 넣어줘서 하나라도 입력하지 않으면 db서버로 post 요청이 가지 않도록 했다. 그래서 다 올바른 값이 들어가면 서버로 post요청을 보내서 ID가 중복되지 않으면 회원가입이 정상적으로 진행되도록 했다. 아 그리고 여기에 심각한 문제가 있는데 만약 중복된 ID로 회원가입을 넣으면 서버가 죽어버린다.... 이거는 당장 이번에 채팅창, 마이페이지 기능 추가하고 나서 바로 해결해야 할 문제다. 다른 사이트들처럼 처음에 사용가능한 ID인지 체크하는 절차가 필요해보인다. 그 외에도 입력 항목들에 대해서 조금 더 고민을 해봐야하는데 어떤 정보들이 필요할지에 대해서 심사숙고해서 회원가입할때 정보를 받아야겠다는 생각이 들었다. 그리고 여담으로 지금 DB를 mysql을 쓰는데 친구한테 물어봤더니 DB를 다른 것도 많이 고려해보라는 이야기를 들어서 나중에 어느정도 mvp가 갖춰지면 mongoDB나 mariaDB도 찾아보면서 공부를 해봐야 할 것 같다.

마지막으로 소개할 기능은 로그인 기능이다. 다행스럽게도 이친구는 ID, 비번을 잘못친다고 해서 서버가 죽지는 않는다. 어떤 차이가 있는지는 잘 모르겠지만 아마도 없는 ID를 친다고 하더라도 회원가입처럼 INSERT 요청을 보내지는 않으니까 그냥 login화면으로 redirect시키는 선에서 처리했다. 물론 이제 틀리면 "ID 혹은 비밀번호가 틀립니다." 라는 메시지를 띄워주는 걸 추가해야된다. 그리고 로그인 화면하고 회원가입 화면이 공유하는 문제인데 화면 해상도나 비율에 따라서 화면이 꽉 차지 않아 이것도 고쳐줘야 한다. 아직 MVP 단계라서 껍데기만 개발이 된 느낌이다.

 

이렇게 글을 쓰니까 너무 오류투성이라서 처음에 개발이 순조롭다는 말이 거짓말같다. 그래도 화이팅해서 열심히 개발하고 공모전에서 좋은 결과가 있었으면 좋겠다.