컴포넌트 상태
추측 여지 없이 각 상태를 정의
defaulthoverpressedfocuseddisableddestructive
OncoStudio
방사선 치료를 위한 AI 자동 컨투어링 플랫폼
- Role
- Lead Product Designer
- Team
- 디자이너 1 · 개발 4
- Period
2024–2025
약 1년 (집중 2+2개월 + 지속 개선)
- Skills
- 의료영상 UXB2B디자인 시스템복잡한 워크플로우개발 핸드오프
Context
방사선종양학 전문가에게 UI의 변화는 학습 비용이 아니라, 작업 정확도의 문제였다
OncoStudio는 방사선 치료를 위한 AI 자동 컨투어링 솔루션이다. CT 영상에서 종양과 정상 장기를 구분하는 컨투어링을 AI가 수행하고, 사용자가 결과를 빠르게 확인하고 수정한다. 컨투어링을 중심으로 DICOM 연동, ROI 편집, 선량(RT Dose) 검토, 영상 정합(Fusion)까지 영상 작업을 한 화면에서 다루는, 정보 밀도가 높은 전문가용 도구다. 이 제품에서 나는 AI가 생성한 컨투어링 결과를 의료진이 확인하고 수정하는 작업 환경을 설계했다.
기존 제품은 기능 중심으로 성장해왔다. 화면마다 기능은 있었지만, 상태 표시·액션 위치·정보 배치·아이콘 언어가 일관된 기준 없이 흩어져 있었다.
두 가지를 기준으로 삼았다.
- 영상 판단의 흐름을 끊지 않고 필요한 도구에 접근할 수 있을 것
- 화면마다 달랐던 상태와 인터랙션을 하나의 디자인 시스템으로 통일할 것
Design System
제품에 적용할 기준을 먼저 만들었다
버튼 상태, 컬러, 간격, 아이콘이 화면마다 달랐고, 컴포넌트의 구현 기준도 명확하지 않았다. 제품의 복잡도와 다크 UI 환경에 맞게 토큰 구조를 처음부터 정리했다. 시스템은 Primitive → Theme → Semantic 세 단계로 구성했다. 컬러는 Primitive에서 정의하고, Theme에서 Brand와 Feedback 두 역할로 분류했다. 컴포넌트는 Text, Background, Border, Icon 네 가지 Semantic 토큰을 참조한다. 이 구조로 다크·라이트 두 환경에 같은 규칙을 적용했다. 정리된 Figma 문서는 실제 구현 기준으로 사용되었다.
이 시스템은 OncoStudio를 포함해 OncoRPT·OncoFlow에 공통 적용됐고, 제품별 브랜드 모드와 다크 모드를 같은 구조로 지원했다. 프론트엔드는 이 디자인 시스템을 기준으로 토큰과 컴포넌트를 먼저 구현한 뒤 화면 작업에 들어갔다.
Design Decisions
- 01
사라지는 진행 상태를, 다시 확인할 수 있게 했다
DICOM 전송은 전송 데이터 수에 따라 몇 분 이상 걸리는 경우가 많다. 기존에는 진행 상황이 일시적인 프로그레스 바로만 표시되어, 화면을 이동하면 다시 확인할 수 없었다. 전송 상태는 잠깐 보고 사라질 정보가 아니라, 작업이 끝날 때까지 다시 확인할 수 있어야 했다. Transfer Progress를 내비게이션 바 우측 상단의 고정 메뉴로 분리했다. 사용자는 어느 화면에서든 진행 중·성공·실패를 확인하고, 문제가 생긴 데이터를 추적할 수 있다.
AS-IS
진행 상태가 일시적으로 표시되고, 화면 이동 시 사라짐
TO-BE
내비게이션 바에 고정 — 진행·성공·실패를 어디서든 확인
- 02
탐색 영역과 선택 영역을 분리했다
Auto Transfer Targets는 카드가 세로로 쌓인 목록이다. 기존에는 카드 안에서 ROI 목록과 전송 옵션이 위아래로 놓여, 전체 목록을 스크롤하다 포인터가 ROI 영역에 들어가면 바깥 목록 대신 카드 안 ROI 목록이 스크롤되는 충돌이 있었다. 문제는 카드 크기가 아니라 스크롤 영역이 겹친 구조였다. 게다가 ROI는 개수 제한이 없어 수십 개에 이르기도 한다. 카드 높이를 키우지 않으면서 한 번에 보이는 ROI 수를 늘려야 했다. ROI 목록은 왼쪽 탐색 영역, 전송 옵션은 오른쪽 고정 영역으로 분리했다. 겹쳐 있던 스크롤 영역을 떼어내는 동시에, 같은 높이에서 더 많은 ROI가 한눈에 들어오게 했다.
ROI 상태AS-IS
ROI 목록과 전송 옵션이 위아래로 겹쳐 스크롤이 충돌하고, 한 번에 보이는 ROI도 적었다
TO-BE
ROI는 왼쪽 탐색, 전송 옵션은 오른쪽 고정으로 분리. 충돌을 없애고 같은 높이에서 더 많은 ROI 노출
화면 구조 변화
2 → 5
펼쳤을 때 보이는 ROI
2 → 1
겹쳐 있던 스크롤 영역
접어도 카드가 하나 더 보이고, 접힌 상태에서도 ROI 미리보기가 남는다 (3→4 · 0→2).
- 03
모달도 패널과 같은 방식으로 읽게 했다
왼쪽 패널은 영상 시리즈를 카드로 보여줬지만, Fusion 모달은 같은 데이터를 텍스트 표로 표시했다. 사용자는 패널에서 읽은 정보를 모달에서 다른 형식으로 다시 읽어야 했다. 여기서 일관성은 보기 좋게 맞추는 문제가 아니라, 같은 방식으로 정보를 읽게 하는 것이었다. 모달의 데이터 표를 패널과 동일한 카드 형식으로 바꿔, 새 구조를 다시 학습하지 않고 비교 대상을 선택할 수 있게 했다. 또한 일부 사용자만 참고하는 Key·SOP Class는 카드 기본 정보에서 빼고 체크박스로 분리해, 대부분은 핵심 정보만 보고 필요한 사람만 펼쳐 보게 했다.
AS-IS
패널은 카드, 모달은 텍스트 표 — 같은 데이터를 다른 형식으로
TO-BE
모달도 패널과 동일한 카드 형식으로 통일
결과
패널과 같은 카드 형식으로 통일해, 비교 대상을 고를 때 새 구조를 다시 학습하지 않아도 된다.
- 04
가장 많이 쓰는 영역을, 작업의 중심에 놓았다
기존 패널은 선택한 ROI의 속성·편집이 상단을 차지했고, 정작 가장 많이 다루는 ROI 목록은 아래에 있었다. 어느 영역을 실제로 가장 많이 쓰는지 확신할 수 없어, OncoStudio를 가장 많이 사용하는 연구부에 확인했다. 답은 'ROI 항목 영역'이었다. ROI 목록을 상단 주 작업 영역으로 올리고, 선택한 ROI의 속성은 클릭 시 아래에 펼치도록 했다. 또한 ROI 위치로 이동하는 동작이 작업 중 반복적으로 쓰인다는 것을 확인하고, 각 항목 우측에 바로가기를 더해 목록을 읽는 흐름 안에서 이동이 끝나게 했다.
정보 위계 재배치
바로가기 동선 재구성
결과
공식 서베이는 아니지만, OncoStudio를 가장 많이 사용하는 연구부 데이터팀에 직접 확인한 결과 ROI 탐색이 더 수월해졌다는 피드백을 받았다.
- 05
분석 작업의 순서를 화면 구조로 드러냈다
Generate BDVH 모달은 폼 필드·플랜 목록·ROI 매칭이 한 공간에 섞여 있어, 무엇을 어떤 순서로 해야 하는지 드러나지 않았다. 이 화면은 값을 입력하는 폼이 아니라, 여러 조건을 확인한 뒤 실행하는 분석 작업이다. 그래서 이 설정창을 실제로 어떤 순서로 쓰는지를 먼저 파악하고 다시 설계했다.
모달을 General · Plan Selection · Dose & ROI Management 세 영역으로 나누고 각 영역에 레이블을 붙여, '설정값 입력 → 플랜 선택 → ROI 매칭 확인 → 실행' 순서를 화면 구조에 담았다. 필드가 많은 General은 하위 그룹으로 묶어 그룹 제목만으로 무엇에 관한 영역인지 파악되게 했고, 상단의 Import·Add 등 버튼은 아래 폼이 아니라 최상단 모델 선택에 대한 동작이라 그 선택 필드와 한 줄로 묶었다. 각 묶음이 무엇에 영향을 주는지 한눈에 들어오게 했다.
ROI 매칭은 사용자가 의도치 않게 빠뜨릴 수 있어, 행별 상태 아이콘으로 매칭·미매칭을 표시했다. 행이 많을 때 빠진 항목을 찾기 어려우므로 'Some ROIs are not matched yet. Please assign ROIs to proceed.' 토스트로도 알렸다. 다만 실행을 막지는 않는다. 누락이 의도된 것일 수도 있어, 막기보다 분명히 드러내고 사용자가 확인 후 진행하게 했다.
세 영역 + 레이블로 작업 순서를 구조화
결과
화면이 작업 순서를 스스로 드러내, 실행 전에 매칭 상태를 확인하고 분석을 돌릴 수 있다.
Handoff
화면이 아니라, 동작 기준을 넘겼다
화면만 넘기면 구현 단계에서 일관성이 다시 무너진다. 그래서 다음 세 가지를 직접 문서화해 넘겼다.
인터랙션 조건
언제 어떤 동작이 일어나는지 명세
트리거조건결과
토큰 변수
다크·라이트가 같은 변수로 작동
색타이포간격
구현이 한 기준을 따르도록, 이 문서를 기준선으로 넘겼다.
More from OncoStudio
그 외에도 OncoStudio의 주요 화면과 흐름을 함께 설계했다.
Result
이미 있던 제품을, 시스템부터 다시 세웠다
RoleLead Product Designer
Team디자이너 1(나) · 개발 4 · CTO 1
Period약 1년 (집중 2+2개월 + 지속 개선)
Scope
디자인 시스템AI 검토 워크플로우화면 리뉴얼개발 핸드오프
내 작업
40+
화면·모달 재설계
제품 맥락
내가 리뉴얼한 OncoStudio는
FDA 510(k)
2025 승인
60+ 기관
삼성서울 · 세브란스 등
Mayo Clinic Florida
10 licenses
규제 승인·도입은 제품 차원의 성과. 디자인은 1인 체제로 단독 진행했다. 제품 방향과 기술 판단은 CTO·개발팀과 조율했다.
Reflection
새로움보다, 익숙한 흐름을 지키는 것이 중요했습니다
처음엔 더 새롭게 바꾸고 싶었다. 하지만 임상 도구에서 새로움은 곧 재학습이고, 재학습은 현장의 리스크다. 손에 익은 흐름을 흔들면 더 나은 화면도 거부된다. 그래서 바꿀 것과 지킬 것을 나눴다. 구조와 일관성은 다시 짰고, 조작의 결은 남겼다. 좋은 개선이 늘 새로워 보이지는 않는다.