-
스택 구성
-
Frontend는 Vue.js & Backend는 DRF(Django Rest Framework)를 사용했습니다.
자바스크립트 기반 웹 프레임워크 Vue.js 파이썬 기반 백엔드 프레임워크 DRF -
웹 프레임워크 사용 모듈
Vuetify Axios(프론트 & 백엔드 통신) Vuex(로그인 & 문진표 상태 관리) -
백엔드 프레임워크 사용 모듈
Json Web TokenDjango Cors Headers
-
> git clone https://github.com/RyanKor/60DB.git
# main/frontend/package.json (Vue.js 모듈 설치 파일 위치로 이동)
> npm install (Vue.js 모듈 설치 진행)
# 60db(python)
> python -m venv 60db (가상환경 설치. pipenv or virtualenv 어떤 것이든 사용가능)
> source 60db/Script/activate
> (60db) pip install -r requirements.txt (백엔드 모듈 관련 부분 설치)
# 60db(node.js)
> main/node-back으로 이동
> npm install
> 설치 완료 후 npm run dev
- 원활한 소프트웨어 활용을 위해 Package.json 과 requirements.txt에 명시된 모듈들을 모두 설치해주십시오.
- 의사들의 정확한 진단을 위해
의학 전문 용어가 사용되었습니다. 60 Decibel에 설문지 및 프로필 작성에 관한 PR을 보내주시는 개발자님들께선 용어 사용에 유념해 코드를 작성해주시면 감사하겠습니다.- 예) survey application 내의 models.py : 복부팽만, 복부종괴 등
- 문진카드 기능 수정 시, '촉진' 등 일부 용어 사용에 대해 수정 시 유념해주십시오.
-
60 Decibel의 초기 개발팀은 개발 경력 6개월 미만의 비전공생들로 구성되었습니다. 따라서 컴포넌트 계층 및 Reusable한 컴포넌트 구성에 관한 기본 지식이 짧은 점 이해해주시기 바랍니다.
-
컴포넌트 구성
-
60 Decibel은 페이지와 기능에 따라 컴포넌트를 구분했다.
aboutPage: 서비스의 목적 및 소개를 안내하는 컴포넌트다.cardPage: 청각장애인의 의사와의 원활한 소통을 위해 포함시킨 문진 카드 기능이 담긴 컴포넌트다.homePage: 페이지 접속 시 등장하는 메인 페이지를 관리하는 컴포넌트다.profilePage: 청각장애인의 프로필을 표시하는 컴포넌트다.profileUploadPage: 청각장애인의 프로필을 업데이트 하는 컴포넌트다.registerPage: 로그인, 회원가입 기능 등을 관리하는 컴포넌트다.resultsPage: 모바일 문진표를 작성하고 난 이후 결과값을 표시하는 컴포넌트다.surveyPage: 모바일 문진표 작성과 관련한 페이지를 관리하는 컴포넌트다.
개발자와 비개발자 모두가 이미 오픈소스에 큰 빚을 지고 있다. 일상생활에선 사물인터넷이 적용되는 가전제품부터 소프트웨어 개발에 직접적으로 영향을 주는 프레임워크 및 라이브러리 등이 필수불가결한 위치에 자리매김하고 있다. 오픈 소스가 환영받는 가장 큰 이유를 들라고 한다면, 오픈소스가 개발자 커뮤니티에 의해 검증되고 서비스 운용에 안정적인 코드를 배포할 수 있다는 점 때문일 것이다. 때문에 소프트웨어가 인간의 삶에 미치는 영향이 커질수록 오픈 소스 생태계도 함께 더 큰 역할을 맡게 될 것이다.
- 병원을 찾는 대한민국 환자들의 병원 평균 진료시간은3분이다.
- 환자도, 의사도 이 짧은 시간 안에 병원 진료를 하는 것에 익숙해져 있으나 사실 OECD 평균 환자의 진료시간은 15분이다.
- 3분이라는 시간 동안 환자와 의사사이의 진료가 정확하게 이뤄지기 어려운 것이 사실이지만, 대학병원에서도 15분 내에 5-6명의 환자가 예약되어 있는 진료 명단을 쉽게 볼 수 있다.
- 이러한 물리적 제약 속에서 의사가 환자를 꼼꼼하게 진찰한다거나 환자의 궁금증에 대하여 알아들을 수 있게 답변한다는 것은 불가능하다.
- 일반 환자들조차 꼼꼼한 진료를 받기 어려운 현재의 의료 체계 속에서 장애인 환자들은 더욱 어려운 상황을 마주한다.
- 특히 청각장애인들은 옆에 의사소통을 도와줄 사람이 없다면 의사에게 자신이 어디가 아파서 왔는지, 의사가 어떤 것을 묻고 있는지 등 진료의 기본이 되는 질문을 듣고 답하는 것조차 어려운 것이 현실이다.
- 결국에는 몸이 아픔에도, 병원을 방문하는 것 자체가 더 큰 불편함이 되어 병원을 찾는 것을 망설이기도 한다.
- 60 decibel팀은 의사의 말을 인지하기 어려운 이들이, 짧은 문진시간 내에 효율적인 의사소통을 바탕으로 원활한 진료를 받을 수 있기를 바라는 마음에서 청각장애인을 대상으로 한 모바일 문진표 소프트웨어를 제작하였다.
- 이를 통해 이들이 부담없이 병원을 찾고, 자신들의 기본적인 권리를 누릴 수 있기를 바란다.
| 60 Decibel | 멋쟁이 사자처럼 7기 | 고려대학교 의과대학 |
|---|---|---|
 |
 |
 |
- 60DB : 고려대학교 멋쟁이 사자처럼 7기 출신으로
전원 컴퓨터공학 비전공자 출신 개발자다. 실질적인 60Decibel 개발을 맡아 진행하고 있다. - 멋쟁이 사자처럼 : 컴퓨터공학 비전공자들도 프로그래밍 기초 지식을 배워 자신만의 웹서비스를 만들 수 있도록 돕는 대학생 중심 프로그래밍 동아리로써 개발에 관한 전반적인 사항에 대해 조언을 얻었다.
- 고려대학교 의과대학팀 : 개발에 필요한 기획을 맡았으며 문진표에 명시되는 용어 및 청각장애인을 대상으로한 베타 테스트 등을 진행했다.
| 팀원 | 역할 |
|---|---|
 |
김승태 고려대학교 영어영문학과 - Vue.js / Django Rest Framework - 오픈 소스 문서화 작업, 배포(AWS) 담당 |
 |
이인우 고려대학교 중어중문학과 - Vue.js / Django Rest Framework - 디버깅 테스트 & 코드 리팩토링, 배포(AWS) 담당 |
 |
박지환 고려대학교 심리학과 - Vue.js / Django Rest Framework - 프론트 코드 리팩토링 총괄 |
 |
최상하 고려대학교 심리학과 - Vue.js / CSS - 프론트 UX/UI 총괄 |
 |
박선영 고려대학교 보건환경과학융합부 - Vue.js / Django Rest Framework - Backend Serializer & Frontend About us 페이지 제작 |
 |
이채연 고려대학교 독어독문학과 - Vue.js - 모바일 간편 진찰 카드 기능 구성 |
- 전국의 보건소 및 청각장애인들의 치료를 중심으로 운영되는 병원 등에 비치된 태블릿 PC에 활용하고자 처음부터 웹앱의 형태로 제작했다.
- 이는 의사에게 진찰을 받기 전, 문진표를 작성한다면 청각장애인 – 의사 사이의 진찰 시 필연적으로 발생하는 의사소통의 어려움을 개선할 수 있으며 의사는 진찰 과정에서 보다 정확한 진료를 해줄 수 있는 장점을 갖는다.
- 11월에 베타테스트를 거치고 앱 형태로 배포할 목적이다. 앱 출시를 염두한 이유는 병원 방문 전에 청각장애인 환자들이 미리 작성해서 가져온 문진표를 환자에게 바로 보여주고자할 요량으로 출시 계획에 포함시켰다.
- 개발자 커뮤니티에 해당 소스를 오픈소스 형태로 다수의 개발자들이 참여한다면 더 높은 수준의 서비스를 제공할 수 있을 것이다.
5.1) Vuex Based on Flux
-
접속하는 다수의 사용자 상태 변경 관리를 목적으로 Flux Design Pattern을기반으로한 Vuex를 채택했다.
-
State에 작성된 상태관리 데이터를 Actions의 Commit을 통해 Mutations에 변화를 유도한다.
-
최종적으로 변경된 상태 관리 데이터가 View Components에 렌더링된다.
5.2) 시스템 구성
-
Client의 주된 접속 경로는 웹 브라우저 및 모바일 애플리케이션이 될 것이다. -
Middleware는 Django 내 settings.py를 반영했다. -
Server는 로컬에서 DRF를, 배포는 AWS EC2 - Ubuntu 환경에서 진행되었다. -
Data는 Sqlite를 Default DB로 Login / Profile / Survey 등 핵심적인 저장 데이터를 명시했다.
-
유연성(Flexibility): 컴포넌트 전역에 걸쳐서 공유해야하는 상태 값들(예: 사용자 인증)을 컴포넌트에 독립적이지 않게 적용할 수 있다. -
확장성(Scalability): MVC(Model–View-Controller) 모델과 다르게 대규모 사용자에 대한 상태 값들을 처리할 수 있다. -
유지보수성(Maintainability): 직관적이고 가독성 높은 코드를 작성하여 오픈소스 커뮤니티에 참여하는 개발자가 이해하기 쉽게 제작했다. -
재사용성(Reusability): Components, Actions, Mutations, State를 각각 분리하여 각 단위별로 재사용 가능하게 구성했다.
- 60 Decibel 팀의 첫 개발 프로젝트로써의 임무를 성공적으로 수행했다.
- 청각장애인 - 의사의 문진 시, 실제 사용과정에서 복통에 관한 의사 전달이 80%까지 가능할 수 있었다.
- 테스트 과정에서 발생하는 오류를 수정하면서 안정적인 코드 작성에 대해 고민해볼 수 있었다.
- 기능별 컴포넌트 작성으로 유지,보수하기 쉽고 재사용 가능한 코드 작성을 할 수 있었다.
- 오픈 소스 개발의 가장 큰 장점은 다수의 개발자에 의해 검증가능하고 안정적인 코드를 작성하는 것에 의의가 있다고 본다. 제작 과정에서 도움을 준 공개개발자 SW센터 멘토님들과 고려대학교를 졸업하고 현업에서 종사 중인 선배님들께 큰 감사의 인사를 드리며, 향후 업데이트를 통해 복통 이외의 설문 조사 내용을 차차 추가해 나갈 예정이다.