병리 이미지 분석 AI 제품 디자인
루닛의 병리 제품 Lunit SCOPE의 웹 데모 UI 디자인 과정을 공유합니다.
2018년 USCAP(미국캐나다병리학회)에 제품의 데모 시연을 준비하면서, 제품에서 표현하려는 정보를 짧은 기간 내에 UI 디자인을 통해 풀어낸 경험을 공유하고자 합니다.
Lunit SCOPE는 딥러닝 기술을 활용한 분석 툴로, 병리 슬라이드 이미지에서 학습한 알고리즘을 기반으로 세포 조직을 자동으로 분석해 단시간 내 객관적인 분석으로 암 진단에 도움을 주는 제품입니다.
루닛에서는 시장에 존재하지 않았던 제품을 위한 인터페이스를 디자인 할 기회가 많습니다. 참고할만한 다른 제품이 부족하여 어려움을 겪기도 하지만, 전문 지식을 가진 명확한 타겟 유저를 대상으로 하는 도전적인 디자인 과제를 마주할 수 있다는 점이 즐겁습니다.
병리학이란?
병리학은 병의 원인과 발생 과정, 그리고 병에 걸린 조직 구조, 기관의 형태 변화를 연구하는 학문입니다.
일반적으로 병리과는 환자에게서 수술, 생검 등을 통해 채취한 조직이나 세포를 육안이나 현미경을 통해 검사하여, 질병의 원인을 밝히고 진단을 내리며 치료 방침을 결정하거나 예후 판정에 도움을 주는 역할을 합니다.
병리 검사를 위해서는 환자에게서 악성 종양으로 의심되는 부위의 세포 조직을 채취해 염색한 후 유리 슬라이드로 만들고, 염색된 세포를 현미경을 통해 관찰 후 특정 세포의 위치를 파악하거나 개수를 세는 작업을 하게 됩니다. 예를 들어, 슬라이드의 특정 구역을 관심 영역(ROI: region of interest)으로 설정해, 해당 영역 안의 유사분열세포(mitosis)의 개수에 따라 종양의 증식 속도와 암의 진행도를 판단하는 방식입니다.
지금까지는 병리과 전문의가 직접 현미경으로 슬라이드를 수백 배 확대해 분석하였지만, 세포의 개수를 일일이 세어야 하는 방식이 매우 시간이 오래 걸리며, 단순하고 지루한 작업이기 때문에 피로도가 높아져 정확도가 떨어지고, 수작업으로 분류하는 주관적인 방식이라 관찰자 간 편차도 존재하는 등의 한계가 있었습니다.
디지털 슬라이드와 인공지능
최근 조직 슬라이드를 고해상도로 스캔하여 컴퓨터로 분석하는 디지털 병리학(Digital Pathology)이 빠르게 발전함에 따라, 유리 슬라이드의 내용을 스캔하여 디지털 이미지로 변환하는 것이 간편해지며 인공지능을 도입할 수 있는 환경이 마련되었습니다.
디지털 슬라이드로 변환된 데이터를 인공지능으로 분석할 경우, 거대한 슬라이드 이미지 전체를 매우 단축된 시간 내에 분석하는 것이 가능하며 기존의 수고로운 진단 과정을 자동화시킬 수 있다는 장점이 있습니다. 무엇보다도 조직세포의 포괄적인 분석이 가능해 암 조직의 분류 및 정량화가 가능해집니다. 또한 여태까지 병리 조직의 분석은 주로 암의 진단에만 쓰였으나, 인공지능을 통해 정제된 데이터는 추후 암 치료에도 활용될 수 있는 바이오마커로 사용될 수 있습니다.
디자인 배경
병리 이미지를 분석하는 인공지능의 알고리즘이 개발되었지만 제품의 형태는 아직 없는 개발 초기 상황에서, 루닛은 USCAP이라는 학회에 참가하여 처음으로 제품을 선보일 기회가 생기게 됩니다. 해당 학회에서 병리학자들을 대상으로 루닛의 알고리즘이 어떤 방식으로 병리이미지를 분석하는지 시각적으로 보여줄 수 있는 데모를 제작하기로 결정하였습니다.
의료 데이터 수급 일정 상 타이트한 일정으로 제작할 수 밖에 없게 되었고, 학회의 브랜딩과 출력물 디자인 등의 일정을 병행해야 하는 등 자원의 제한이 있었습니다. 대략 3주 가량의 제작 일정 중 첫째 주는 수집 데이터 확정, 둘째 주부터는 UI디자인과 구현, 셋째주는 피드백을 활용한 개선안 적용과 퍼블리싱이 진행되었습니다.
특수한 상황을 위한 UI 디자인
불특정 다수를 위한 B2C가 아니라 매우 특정한 시연 상황과 지정된 디바이스와 타겟 유저가 있었으므로 사전에 제반 사항을 꼼꼼히 점검하였습니다.
- 자유로운 컨트롤에 중점을 둔 인터페이스 디자인: 병리 슬라이드 이미지와 알고리즘으로 도출된 정보들을 줌 인/줌 아웃/이동을 자유롭게 컨트롤하며 볼 수 있는 인터페이스 디자인이 필요합니다.
- 전문가 집단을 위한 디자인: 주로 병리학자들을 대상으로, 1:1 또는 소규모 그룹 앞에서 직접 시연하거나 유저에게 사용해보게 할 예정입니다.
- 특수한 시연 환경: 학회에 참가하여 부스에서 시연할 예정이며, 아이맥을 중심으로 아이패드 프로 12.9inch 미러링도 사용될 예정입니다.
- 로컬 서버 이용: 병리 Whole Slide Image는 약 10만x20만 픽셀 해상도의 고용량 이미지 파일입니다. 클라우드를 이용할 시 학회장의 인터넷 환경에 영향을 받을 위험이 있고, 이미지를 로드할 때 시간이 지연되면 유저에게 신뢰를 주기 어려우므로 직접 서버를 들고 가기로 결정되었습니다. 데이터는 로컬에 있지만 구현 부분은 실시간으로 이루어집니다.
이렇게 특정한 상황만 대응하는 경우는 다양한 환경과 기기 대응을 할 필요가 없어 마음이 편하지만, 추후 제품화까지 고려한다면 어느정도 유연함은 확보해두면 좋겠다고 판단했습니다. 다행스럽게도 거대한 병리 슬라이드 이미지를 다루는 경우엔 대부분 큰 디스플레이를 사용하게 될 것으로 예상되어, 작은 해상도와 패드 이하의 모바일 기기는 대응할 필요가 없을 듯 합니다. 반응형을 고려하지 않는 대신 정보를 정확히 전달하는 과정에 조금 더 신경을 쓰기로 하였습니다.
빠른 와이어프레이밍과 프로토타이핑
1. 표기 정보
표기해야 할 정보를 전달받고 정보의 형태를 간단히 구분해보았습니다. 세부 사항과 각 항목들의 요소 갯수는 변수를 고려하고 진행해달라는 요청을 받았습니다.
- 슬라이드 이미지 (dynamic)
- 시연할 슬라이드 리스트 (dynamic)
- 인공지능이 자동으로 태깅한 요소들을 on/off로 보여주기 (dynamic)
- zoom in/out 컨트롤 (dynamic)
- 인공지능이 파악해낸 각 Feature 들의 분석 정리 (static)
먼저, 모든 화면에서 가급적 스크롤 바를 사용하지 않고 한 눈에 정보를 볼 수 있도록 레이아웃을 변경하기로 결정합니다. 또한 on/off 로 표시하려던 정보 목록은 표시할 항목이 추가되면서 목록화시키고, 따라서 토글이 아닌 체크박스 형태가 적절하다고 판단되어 변경하였습니다.
또한 큰 이미지에서 현재 보이는 영역의 위치를 표시하고 자유로운 이동을 돕기 위해 네비게이션을 추가하게 되어 조금 더 맵 디자인과 같은 형태를 띄게 됩니다.
2. 줌 레벨
거대한 병리이미지에서 모든 정보를 한눈에 보여주기는 어려울 뿐더러 로딩에도 문제가 생깁니다. 구현 상의 편의와 유저가 식별할 수 있는 정도를 고려해, 줌 레벨에 따라 정보가 표시될 단계를 설정하기로 하였습니다.
조직의 정보는 3가지 카테고리로 나눌 수 있었습니다:
- 종양 조직 영역 (Tissue)
- 각 기관 (Structure)
- 세포 (Cell)
카테고리별로 기준이 될 현미경 배율을 무배율 / 10x / 40x의 세 단계로 나누고, 각 정보의 혼선을 피하기 위해 각각 다른 표기 형태를 채택합니다.
Tissue 패널은 암 상피, 기질 부분을 나타냅니다. 암 조직 영역 대부분에 색칠되듯이 표현되므로 모든 배율에서 보이게 하였습니다. 40x 이상의 레벨에서는 Structure와 Cell 정보를 강조하기 위해 오퍼시티를 낮추어 보여주었습니다.
Structure 패널은 혈관, 신경 등을 나타내는 항목입니다. 10x배율 이상부터 보여지고, 불규칙적인 직사각형 테두리로 표현됩니다.
Cell 패널은 림프구, 세포분열, 암세포 등의 세포 위치를 나타내는 항목입니다. 40x배율 이상에서만 보여지는 가장 작게 표기되는 항목입니다. 세포를 담은 정사각형 테두리로 표현되며 Structure 패널과 서로 다른 stroke weight를 가지도록 하였습니다.
3. 컬러 코딩
표기할 정보별로 컬러 코딩을 합니다. 병리이미지의 색상과 충돌을 일으키지 않으면서 동시에 여러 종류의 옵션을 켜더라도 서로 색이 겹치지 않게 하여, 최대한 많은 정보를 색상으로 구별 가능하도록 분배하였습니다.
주로 보여줄 슬라이드 이미지는 H&E염색약을 사용해 분홍색과 보라색이 주가 되지만, 추후 제품화를 고려했을때 IHC 염색약을 사용한 푸른 이미지에서 쓰일 것도 염두에 두었습니다. 그래서 염색약의 색상인 분홍계열과 푸른 보라색 계열, 그리고 지방 등으로 비어보이는 공간에 쓰이는 흰색을 주의하며 선정하였습니다.
특징적인 점이라면 암 세포(Cancer cell)는 그레이드별로 암 증상에 대해 의미하는 바가 크므로, 점차적으로 바뀌는 색상을 이용해 표현했습니다.
4. UX 터치
로더
실제 구현을 진행하다 보니 ux적 디테일이 필요한 부분들이 발견됩니다.
워낙 큰 용량의 이미지를 불러오는지라 시각화를 위한 로딩 시간이 꽤 오래 걸린다는 개발자님의 제보가 들어옵니다. 성능 개선을 할 수 있는 타이밍도 아니었거니와 로딩 시간을 줄이는 것에도 한계가 있었기 때문에, 유저를 이해시키는(양해를 구하는) 로더를 도입하는 것이 적절할 것 같았습니다.
시각화 중에는 cpu를 최대한 끌어 쓰므로 진행도를 실시간으로 표기하는 로더를 도입하기는 어려웠습니다. 하여 현재 어떤 작업을 하고 있는지 알려주는 텍스트와, ui 분위기에 맞는 레디메이드 로더를 붙여보았습니다.
최종 시안+마치며
작업된 지 꽤 많은 시간이 흐른 디자인이라 되돌아보니 개선해야 할 점이 꽤 보입니다. 특히나 인터페이스의 도입부분이나 줌 레벨 조작의 용이성 등의 UX적인 측면은 시연자의 역량을 믿으며 무시된 부분이 있었던 점이 안타까웠습니다.
선두주자가 없는 새로운 제품의 개발은 항상 레퍼런스가 부족한 것이 아쉽지만, 쉽게 경험할 수 없는 챌린징한 UI디자인을 해볼 수 있어 즐겁습니다.
Lunit SCOPE의 간소화된 데모는 다음에서 보실 수 있습니다. https://scope.lunit.io/
루닛과 함께 인공지능 기술을 통한 의료 혁신에 기여할 분을 찾습니다.
채용공고 바로가기
