이연수

의료 플랫폼(WEB PACS) 개발 도전기(2단계)

안녕하세요. 개인 프로젝트로 의료 플랫폼(WEB PACS) 개발에 도전하고 있는 웹개발자(프론트엔드) 이연수입니다. 저번 개발 도전기(1단계)에 이어서 2단계 로그를 남겨봅니다. : )

[목표] 의료(다산업군) AI 연구 지원을 위한 WEB PACS(Workspace, Viewer, AI 연동)

[단계] 2단계

[상태] 의료 영상데이터(파일) - DICOM(.dcm) : Pixel Data 표현, 이미지 압축 해제

[언어] TypeScript(Node), React(라이브러리), Next.js(프레임워크)

현재 의료 영상 이미지를 2D 그래픽으로 표현하기 위해 다양한 시도와 노력을 하고 있습니다. 1단계에서는 2D 그래픽 표현을 위한 속성 값들을 파일로부터 binary marker를 분석하여 프로토콜(규약)에 맞춰 값을 추출하는 작업을 수행하였습니다. 이번 2단계에서는 1단계에서 추출한 pixel data(Uint8Array)를 웹에 그래픽 이미지로 표현하는 작업을 수행하였습니다.

썸네일로 위와 같은 의료영상 이미지를 화면에 표현하였습니다. HTML Canvas(2D)를 이용하여 화면에 출력하였습니다.

의료 영상의 경우 픽셀 데이터의 색상 해석 값(모노크롬1, 모노크롬2, 팔레트 색상, RGB, YBR_SET)을 다음과 같이 별도로 제공합니다. 이에 맞추어 binary 값을 계산하여 표현하지 않을 경우 이미지가 비정상적으로 출력됩니다.

또한 광도를 맞추는 방법이 존재합니다. 모노크롬1과 모노크롬2는 (CT와 같이) 흑백 사진을 표현합니다. 의료영상(DICOM) 파일의 경우 구성하고 있는 pixel이 0~255(0 ~ 2^8 - 8bit 깊이)의 범위만 갖고 있는 것이 아니라 -x ~ +x와 같이 범위가 마이너스로부터 시작되는 경우도 있습니다. 또한 8bit, 12bit, 16bit 등 다양한 bit 깊이로 구성되어 있습니다. 따라서 정규화 된 범위의 색상 표현 값을 구하지 않는다면, 의료영상 이미지가 지나친 검정색 혹은 흰색에 가깝게 표현되어 눈으로 환자의 상태를 식별하기 어려운 상황이 발생합니다. 이런 부분은 알고리즘으로 제공되는 수식(HU-WC/WW)에 맞춰 색상 표현을 바로잡으면 해결이 가능합니다.

의료영상 이미지 출력에 있어 몇 가지 고려 요소가 존재합니다.

설명 드린 내용을 포함하여 정리해 보면 다음과 같습니다.

1). 색상 표현(모노크롬, 팔레트 색상, RGB, YBR_SET 등)

2). 광도 해석(HU - WC/WW)

3). bit 깊이 구성 (8, 12, 16, 32, 64)

4). 프레임 구성(이미지 프레임 존재)

5). 이미지 압축(전송 구문)

다음 소개드릴 내용은 영상 프레임 구성입니다.

의료영상(DICOM) 파일에는 단일 프레임 이미지, 멀티 프레임 이미지, 비디오로 다형의 데이터가 포함 되어있습니다. 특히 멀티 프레임 이미지의 경우 하나의 binary 픽셀 데이터 정보에 다수의 프레임이 규칙적으로 포함되어 있어, 프레임을 정상적으로 분할할 경우 각각의 프레임은 이미지 사이즈(너비 x 높이) 값을 갖게 됩니다.

하지만, 이미지 프레임을 분할하여 계산하면, 생각했던 값과 다른 값이 추출되는 경우가 있습니다. 이러한 현상에 영향을 주는 것이 바로 이미지 압축입니다.

위 이미지는 프레임의 binary 값을 획득하기 위한 offset(여백), position(위치), length(길이)를 추출한 값입니다. 원래라면 프레임의 binary 길이는 (512(너비) x 512(높이) = 262,144)의 길이로 동일한 값이 출력되어야 하지만 이미지 압축으로 인하여 더 작은 값으로 출력되게 됩니다.

이런 현상은 각 이미지 프레임이 아래와 같은 의료영상(DICOM) 표준 전송 구문 규칙에 의해 이미지 압축이 잘 적용되었기 때문입니다.

보기만 해도 구현하기 끔찍해 보이는 압축 기법이 존재합니다. ㅠㅠ...

우선 해당 압축기법 중 가장 쉽고 기본이 되는 JPEG Baseline(압축)을 해제하여 테스트를 수행하였습니다.

[JPEG Baseline 디코딩]

1. Color Scan (색상 스캔)

2. Huffman Decoding

3. IDCT / Quantization Inverse

4. Color Transform (모노크롬 - RGB)

JPEG 압축 해제는 표준화 marker를 분석하여, 각 항목별 필수 작업 수행 함수를 위와 같이 작성하여 실행하였습니다.

현재 보여지는 의료영상 이미지는 Transfer Syntax(전송 구문) 값이 "1.2.840.10008.1.2.4.50"로 JPEG Baseline 압축에 해당합니다. 앞에 간략히 기재한 디코딩을 통해 RGB 값을 정상적으로 확보할 경우 위와 같은 의료영상(DICOM) 이미지를 HTML Canvas에 표현할 수 있습니다.

이상 현재까지 진행된 의료 플랫폼(WEB PACS) 개발 도전기(2단계) 로그를 마치겠습니다.

내용 끝까지 읽어 주셔서 감사합니다. 다음 3단계 글에서 뵙도록 하겠습니다~ : )

(관심 있으시거나, 궁금한 내용이 있으시면 편하게 커피챗 부탁드리겠습니다.)

의료 플랫폼(WEB PACS) 개발 도전기(1단계)

안녕하세요. 개인 프로젝트로 의료 플랫폼(WEB PACS) 개발에 도전하고 있는 웹개발자(프론트엔드) 이연수입니다. 개발 도전에 대한 로그를 남기고 싶어 이렇게 글을 쓰게 되었습니다.

[목표] 의료(다산업군) AI 연구 지원을 위한 WEB PACS(Workspace, Viewer, AI 연동)

[단계] 1단계

[상태] 의료 영상데이터(파일) - DICOM(.dcm) : CT, MRI, PET 등 binary 분석 및 출력

[언어] TypeScript(Node), React(라이브러리), Next.js(프레임워크)

우선 다소 생소하실 수 있는 의료 영상데이터 DICOM(.dcm) 파일을 설명 드리고자 합니다. 다양한 의료 영상촬영 장치(CT, MRI, PET 등)에서 장치로부터 파일(데이터) 표준 프로토콜이 적용된 의료 영상데이터(파일)이 DICOM(.dcm)으로 생성됩니다. 프로토콜은 디지털 영상전송 표준 의원회에서 DICOM 데이터(파일) 표준을 정하여 관리되고 있습니다.

우선, 저는 해당 파일을 오픈소스를 사용하지 않고, 직접 오픈소스와 표준 내용을 참고하여 개발하는 것을 목표로 하고 있습니다. 그렇다 보니 파일의 binary 코드를 확보하여 분석하는 것을 시작하였습니다.

파일을 열어보면, 1byte(8bit)로 파일 바이트 저장 순서(Byte Order)에 맞춰 리틀 에디안(Little-endian)과 빅 에디안(Big-endian)으로 저장됩니다. 순서에 따라 바이트를 읽는 방식이 달라지기 때문에 해당 부분도 유의 깊게 살펴보았습니다.

바이트를 ASCII로 변형된 부분을 확인하였을 때, DICOM 파일은 메타정보에 File Preamble(더미 바이트) - 128Byte, DICOM prefix("DICM") - 4Byte, File Meta Elements(파일 메타 요소) - NByte로 구성되어 있었습니다.

위 정보를 확보 후 웹에서 로컬 DICOM 파일을 로드 할 수 있도록 인터페이스를 다음과 같이 구현하였습니다.

이 후 파일을 ArrayBuffer로 읽어 Uint8Array로 형변환을 하여, BufferStream을 구성하였습니다. 위에서 분석한 파일 binary 길이에 맞춰 데이터 offset(여백)과 length(길이)를 계산하고, DICOM 표준에서 제공하는 File Meta Elements(파일 메타 요소)의 메타 요소 태그(Tag)정보, 요소 유형(VR)정보, 데이터 길이 등을 추출하여, 메타데이터를 확보하였습니다. 태그 정보는 DICOM 표준에서 정의되어 있는데 약 3,400개 정도로 해당 정보의 이름(설명)을 위해 dictionary(사전)을 .json 파일로 만들어 맵핑하는 작업을 수행하였습니다.

해당 정보를 파일 데이터와 맵핑하여 요소 이름을 표현하고, File Meta Elements(파일 메타 요소)에서 추출한 데이터 여백과 길이(offset, length)를 ByteStream에 적용하여, Character(String), Uint16, Uint32, Float, Double 등 요소 유형(VR)정보에 맞춰 데이터 값을 아래와 같이 확보하였습니다.

DICOM 파일의 경우 이미지 영상 데이터를 2D, 3D 표현(추출)하기 위해 포함된 의료정보(환자정보 포함) 및 이미지 Pixel Data에 대한 다양한 정보를 메타정보에 포함하고 있습니다. 따라서 모든 메타정보에 대한 이해와, 그래픽 표현을 위한 색(광학), 압축(이미지), 사이즈, 방향(유클리드 공간) 등 수학적 계산이 필요한 것 같습니다.

지금까지 다소 마이너하지만, 개인적으로 기술을 정리하기 위해 진행하고 있는 의료 플랫폼(WEB PACS) 개발 도전기(1단계)를 로그글로 간략하게 남겼네요.

긴 글 읽어 주셔서 감사합니다. : )

다양한 분야의 AI Vision 영상(이미지) 처리를 연구하며, 개인 프로젝트(기술 정리)를 수행할 것 같아요~ 관련 부분에 관심 있으시면 편하게 커피챗 요청주세요~

프론트엔드 기술 스택 정리하며, 개인 포트폴리오(프로젝트) 준비.

안녕하세요. 웹 개발 7년차에 접어들고 있는 개발자입니다.

최근까지 의료 AI 회사의 플랫폼 개발을 담당하다 퇴사 후 프리랜서로 일을 진행하고 있습니다. 백엔드 개발자로 시작하여, 프론트엔드 개발자로 전향하고, 지금은 기술 스택을 쌓으며 다음 스탭을 준비하고 있습니다.

혼자 프로젝트를 개인 포트폴리오 형태로 준비하고 있습니다. 그동안 업무에서 쌓아왔던 기술을 정리하려고 합니다.

현재는 노션(Notion)과 유사한 기능의 WYSIWYG(Rich Text Editor)를 개발하고자 개발을 진행하고 있습니다. 아래에서 설명 드릴 WEB PACS(의료영상저장전송시스템)가 완성되면, 의료(AI 판독문, 인허가 문서 등), AI 연구, 필요한 문서 템플릿 등을 개발하여 연동하는 작업을 목표로 개발하고 있습니다.

앞에서 말씀드린 의료 AI 관련 분야에서 수행하였던, WEB PACS(의료영상저장전송시스템)을 오픈소스 도움 없이 vision(Graphic) 개발에 .dcm(DICOM)파일을 binary 수준까지 연구하여 표현하는 프로젝트를 진행 하려합니다. 주로 의료 AI를 연구하시는 연구자에게 Data Labeling(ROI - 흥미영역)에 대한 어노테이션 툴과 작업된 의료 AI(모델)을 연결하여 병변 분류, 표시 등이 가능한 연구 플랫폼 구성을 프로젝트에 포함하여 작업 하려합니다.

의료분야에 대해 혹은 의료공학을 전문적으로 배운 것이 아니기에 데이터 전처리 플러그인 개발과 AI(모델)에 서빙과 하이퍼 파라미터 등 전반적인 연동에 필요한 조언이 필요한 상태입니다.

그리고 의료 데이터가 가진 특수성(민감 데이터, 보안)을 고려한 WebRTC(Web Real-Time Communication)을 활용하여 데이터 반출 없이 원격진료, 원격판독 등의 기술 개발도 진행해보려고 합니다.

프로젝트를 진행하고 계신 의료, 산업, 교육 등 다양한 분야의 AI, 웹 관련 개발자 분들과 많이 소통하고 정보를 공유하면 좋겠다고 생각하고 있습니다.

클럽 가입 후 첫 글이라 진행중인 개인 프로젝트 소개와 간략한 제 소개를 하였습니다.

앞으로 잘 부탁드립니다~

(편안하게 스몰톡을 위한 커피톡 환영입니다.)