노코드[No-code] 개발로 7분만에 만드는 나만의 모바일 수술 일기장
0
국립암센터 석준걸
최근 스마트폰 카메라 스펙의 발전으로, 수술 필드의 상황이나 얻어지는 검체를 스마트폰 촬영을 통해 기록을 남기는 경우가 많으며, 이제 막 임상 경험을 쌓기 시작하는 주니어 스텝의 경우 하나 하나의 수술에서 얻어지는 교훈들에 대한 기록이 필요합니다. 다만, 이렇게 수술장에서 촬영된 사진을 정리하는 것은 또 다른 여유 시간의 투입이 필요하기 때문에, 당연하게도 스마트폰으로 촬영을 하는 즉시 정리를 하는 것이 좋습니다. 에버노트(Evernote), 노션(Notion)과 같은 메모장 툴이 한가지 대안이 될 수 있으나, 수술 데이터베이스 측면에서는 불필요한 기능이 많고, 엑셀로 자동으로 정리하기가 어려운 등 제약도 많습니다.
저도 좀더 여유롭게 일하던 시기에는 직접 필요한 앱을 개발하고 앱스토어에도 올려보던 시절이 있었습니다. 그러나 운영체제가 지속적으로 업그레이드되면서 앱도 주기적으로 계속 손을 봐주어야 했기 때문에, 직접 앱을 개발하는 것은 비효율적이며 영속적이지 못했습니다. 그러나 최근 노코드(No code) 개발이라고 하여 코딩 경험이 전혀 없어도, 손쉬운 방법을 통해 어플리케이션을 구축하는 방법이 활용되고 있습니다. 물론, 자신이 생각하는 의미 있는 앱을 개발하려면 최소한의 소프트웨어 디자인에 대한 경험이 필요합니다만, 수술 일기장과 같이 비교적 적은 정보의 입력과 조회만을 요구하는 형태의 어플리케이션은 7분이라는 짧은 시간으로도 만들 수 있게 되었으며, 이를 통해 수술이 종료된 뒤 바로바로 스마트폰을 통해 사진과 기록을 남겨 수술로부터 얻었던 교훈과 생각 등을 정리할 수 있었습니다. 그 경험으로부터 모든 분들이 따라 만들 수 있는 모바일 수술 일기장 개발 방법을 공유 드립니다.
1. MVC 소프트웨어 디자인 패턴
노코드 개발은 코딩에 대한 지식이 전혀 없어도 개발이 가능하다 라는 것을 모토로 삼고 있지만 실질적으로 쓸 수 있는 앱을 개발하려면 최소한의 소프트웨어 개발에 대한 이론이 필요하여, 가장 핵심적인 MVC 패턴에 대해 짧게 소개드리고 넘어가겠습니다.
MVC는 모델(model), 뷰(view), 컨트롤러(controller)를 의미하는 것으로, 각각 ‘데이터’, ‘화면’, ‘행동’ 이라고 간단하게 이해할 수 있습니다. 흔하게 사용하는 인스타그램(Instagram)을 예로 들면, 앱을 구동했을 때 보이는 화면이 ‘뷰’이며, 사용자의 사진을 올리고(create), 보고(read), 수정하고(update), 지우는(delete) 행위가 ‘컨트롤러’로 정의됩니다. 이 4가지 기본 요소를 CRUD라고 줄여 말합니다. 마지막으로, 사진을 올릴 때는 사진 외에도 ‘내용’, ‘장소’ 등 함께 적어야 하는 것들이 있는데 이렇게 하나의 업로드 단위에 들어가야하는 항목들이 ‘모델’로 정의된다고 볼 수 있습니다.
사실상 대부분의 프로그램은 게시판 형태이며, 실질적인 개발 시간은 위의 3가지 요소를 엮는데 발생하는 수많은 버그(bug; 에러코드)를 잡는 것이 주된 과정이 되는데, 노코드 개발은 이러한 과정을 획기적으로 단축하게 됩니다. 예를 들어 “앱의 사용자가 사진을 올리는 기능이 있다” 라고 정의하는 순간 노코드 플랫폼이 사진(image)이라는 모델을 추가하고, 자동으로 제목(name)과 설명(description) 이라는 항목을 만들어 넣습니다. 업로드하는 버튼이 화면(view)에 자동으로 생성되고 업로드(add)하는 컨트롤러가 모델과 뷰를 자동으로 연결해주는 식입니다. 이번 사례에서는 구글에서 제공하는 앱시트(AppSheet) [https://cloud.google.com/appsheet] 라는 서비스를 이용한 노코드 프로그래밍을 함께 진행해보도록 할 예정입니다. 참고로 본 매뉴얼이 작성된 시점은 2022년 12월 22일로, 접속 시점에 따라 아래 작성된 이미지와 다른 화면이 보일 수 있습니다.
2. 수술 일기장의 구성
우리가 만들고자 하는 프로그램은 아주 단순하게 구성되어 있습니다. ‘기록지’라는 모델은 날짜, 수술명, 수술 순서 및 설명 텍스트로 이루어지며, 사용자는 기록지에 대해 CRUD를 할 수 있어야 합니다. 하나의 기록지는 여러 개의 수술 사진(사진 모델)을 가질 수 있습니다. 더불어 기록지 전체를 나열할 때는 수술 날짜와 순서로 정렬이 되어야 하는 것을 기본 조건으로 삼도록 합니다.
3. 구글 앱시트(AppSheet)를 이용한 노코드 프로그램
미리 생각해둔 설계를 구글 앱시트에서 적용해보겠습니다.
https://cloud.google.com/appsheet로 접속하면 좌측과 같은 화면이 출력됩니다. ‘무료로 사용하기’를 이용하면 개인이 개발한 앱을 10명까지 무료로 사용할 수 있습니다. 더 많은 사용자가 예상되는 경우, 유료 계정을 사용해야합니다.구글 계정으로 로그인을 한 뒤, 우측 상단의 [무료로 시작하기] 버튼을 누르게 됩니다.
Google Cloud 가입을 위해 개인 정보 및 카드번호를 이용하여 가입을 완료해야 합니다. 비록 무료라도 카드 정보 입력이 필요한 것은 조금 번거롭기는 합니다.
로그인 및 Google cloud 가입을 마치고, 앱시트 사이트의 시작은 좌측 화면처럼 보입니다.(https://www.appsheet.com/home/apps)
[+ Create] 버튼을 누르고, App을 선택한 뒤, Start with a template을 선택합니다.
App templates 목록 중 우리는 아래의 목록이 아닌, 설명에 적혀 있는 Start with an idea를 클릭합니다.
좌측의 화면이 시작점입니다.우리가 가지고 있는 아이디어로 출발을 합니다.
우리 앱은 ‘수술 기록지’를 등록할 것이므로, record라고만 적으면 아래에 추천 정의문이 보입니다. 이를 클릭합니다.
그러면 이미지와 같이 우측에는 실제 프로그램의 예시가 출력되고, 좌측에는 정의된 사항이 나열됩니다. Record라서 음반 모양의 아이콘이 보이나, 이 부분은 추후 지울 계획입니다.
위에서 말씀드린 Record(기록지)에 대한 CRUD의 요소, 즉 추가, 수정, 삭제 기능입니다. Read 기능은 자동으로 구현되는 것이라 정의가 필요하지 않습니다. 하나씩 클릭해줍니다.
추가해주시면 좌측과 같이 나열됩니다.
그리고 우리의 수술기록지는 날짜와 수술 순서가 필요합니다. Date property와 Order property를 추가해야 합니다. 각각 [a Record has a Date property], [a Record has an Order property] 정의문을 추가합니다.
이후 좌측과 같이 나열됩니다.
이제 다음차례는 하나의 record는 여라 장의 사진(이미지)을 가질 수 있다는 정의를 해야 하여, [a Record has many Images]를 추가합니다.
이미지에 대한 CRUD를 추가합니다.[Users can add new Images]
[Users can edit Images]
[Users can delete Images]
좌측처럼 정의가 종료되면, [Save & Refine] 버튼을 누르도록 합니다.
앱 이름을 적어주시고
좌측의 Customize your App을 눌러 추가 작업을 진행합니다.
다음에는 정의문으로 대강 만들어진 기록지(record) 및 사진(image) 모델을 다듬고, 좌측과 같이 수술 리스트 및 해당 날짜가 달력으로 표시되는 화면을 만들어보겠습니다.
화면 좌측에 Data 아이콘을 누르면 우리가 정의한 두 모델 (Record와 Image)이 나열되어 있습니다.먼저 있는 Image(사진) 모델을 정리하겠습니다.
Image 모델(테이블)사진은 어차피 수술 기록지에 종속되어 있으니, 제목과 설명은 필요 없을 것 같습니다. 4번 Name과 5번 Description에 대해 [Label], [Show], [Editable]의 체크 (총 5개)를 좌측처럼 모두 해제합니다.
Record 모델(테이블)(1) 썸네일 요소가 필요 없기 때문에 여기서 image는 모두 체크를 꺼버립니다. (2) 반면에 Name(수술명)과 Dates(수술날짜)는 Require? 에 체크하여 필수로 기입하도록 합니다. (3) Order (순번)은 Type을 Number로 바꿔 숫자로 입력 받도록 만들어줍니다.
다음은 View를 설정하도록 합니다.첫번째 보이는 Record의 경우 날짜(Date) 및 수술 순번(Order) 순서로 정렬이 필요합니다.
Record view의 수정 사항만 말씀드리면, (1) View type을 table로 합니다.
(2) Sort by 를 Order (수술순서)로 설정하여 Ascending(오름차순)으로,(3) Group by 에서 Add 버튼을 눌러 Date (수술날짜)로 설정하고, Descending (내림차순)으로 설정합니다.
(4) Group aggregate를 COUNT로 설정하면 날짜로 그룹을 지으면서 각 날짜 별 수술 건수가 함께 표시됩니다.
화면 아래쪽에 Display라고 적혀있는 글자를 클릭하여 나오는 화면에서 Display name을 ‘수술리스트’ 라고 입력해줍니다.
수술 날짜를 입력받는 김에 좌측과 같은 달력 화면도 만들어보겠습니다.
좌측의 View 탭에서 Primary Navigation 화면 우측의 + 버튼(Add View)를 클릭합니다.
Date라고 입력하면 바로 위에 ‘Record data의 Date 항목의 Date를 이용한 Calendar view’ 라고 나오고 이를 클릭합니다 (Date가 두번 겹쳐서 조금 이상하지만, 하나는 ‘날짜’를 의미하고 하나는 저희가 지정한 ‘Date’라는 모델 요소를 의미합니다)
달력에 ‘수술명’ 이 나오면 좋을 것 같습니다. Description을 Name으로 바꿔서 수술명이 달력에 나오게 합니다.
앞의 Record 뷰와 비슷하게 Display name에 ‘수술스케쥴’ 이라고 적어줍니다.
우측 상단에 Save 버튼을 통해 저장하면 기본적인 기능을 모두 갖춘 수술 일기장이 완성되었습니다.
이제 구글이나 아이폰의 앱 스토어에서 AppSheet 앱을 다운받고 구동을 시키고, 메뉴의 App Gallery에서 내가 만든 앱을 실행시키기만 하면 끝납니다.
그러나 실행해보시면, 만들면서 계속 보이던 임시로 들어가 있는 초기 내용들이 계속 관찰됩니다. 이 부분을 지우려면 Data 메뉴에서 Record와 Image 테이블에서 각각 View data source를 누르시면, 구글스프레스 시트로 이동됩니다.
Record 및 Image 테이블에서 각각 첫 줄(컬럼명) 이하의 내용을 모두 삭제해줍니다.반대로, 기록된 데이터들은 좌측처럼 자동으로 엑셀로 변환되어 저장됩니다.
그럼 저장된 이미지는 어디로 가 있을까요? 구글 클라우드를 통해 구글드라이브를 사용한다면, 해당 폴더는 좌측과 같이 자동적으로 폴더가 생성됩니다.
4. 맺음말
저는 이렇게 쓰고 있습니다.
노코드 개발은 그 개발된 앱을 구동하는 플랫폼에 종속적일 수밖에 없기에, 그로부터 파생되는 여러가지 락인(lock-in) 문제가 있습니다만, 이 글을 보시는 분들은 개인 용도로 사용하실 것이기에 전혀 이런 부분에 고민을 하실 필요가 없을 것으로 판단됩니다. 유료 가입자의 경우, 본인이 만든 앱을 다수에게 배포하는 deploy 과정을 거쳐야 합니다만, 개인 사용자는 그럴 필요가 없습니다.
비록 저 역시 해당 플랫폼을 막 접한 사람으로, 노코드 개발을 통해 어느 수준까지 개발이 가능한지 자세히 알아보지는 않았으나, 데이터의 통계처리, 주기적인 리포트 작성, 데이터 변경 시 이메일 발송, 인공지능 모델까지도 붙일 수도 있어서 그 활용 범위가 무궁무진 하다고 생각됩니다. 바로 생각해볼 수 있는 아이디어로는 그간 많은 비용을 들이고도 만족스러운 결과를 얻기 어려웠던 모바일 시스템에 탑재가능한 간단한 연구용 CRF(case report form)이나, 각 기관내 전공의들을 위한 수련 시스템도 개발할 수 있을 것 같습니다.
구글앱시트 개발을 배우기 위해 참고할 만한 유명한 유튜버가 ‘코딩하는 약사’ (https://www.youtube.com/@appsheetbook/) 입니다. 약사님도 앱을 개발하시는데, 이비인후과의사들이 못 할 것은 없으리라 생각합니다.
웹진의 분량 및 텍스트라는 전달 도구의 제약으로 수박 겉핥기만 할 수 있었던 것 같습니다. 언제 기회가 된다면 더 재미있고, 다양한 활용법을 보여드릴 수 있기를 바라겠습니다. 감사합니다.