의료 플랫폼(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단계 글에서 뵙도록 하겠습니다~ : )

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