Prologue&병원 UI/UX 고도화Projects

병원 UI/UX 고도화

병원 자산·재고·인사 업무를
처리하는 사내 시스템

기능이 늘 때마다 화면을 따로 만들어, 같은 시스템인데 화면마다 색과 버튼 크기가 달랐습니다.

재고관리 1차 화면. 가운데 위에 제목과 검색칸이 있고, 연두색 표 머리 아래 행마다 제품 정보가 여러 줄로 쌓여 있으며, 오른쪽 기능 칸에 색이 다른 버튼 다섯 개가 놓여 있다.

제품 정보가 세로로 쌓여 행 하나가 104px, 한 화면에 9행입니다.
한 행의 기능 버튼이 다섯 가지 색입니다.
검색칸과 도구 버튼 높이가 28px부터 40px까지 섞여 있습니다.

01문제

화면마다 색과 크기를 따로 정했습니다

재고와 비품은 원래 양식이 다른 엑셀 파일 여러 개로 관리했습니다. 이를 시스템으로 옮긴 뒤에도 재고, 출고, 의료소모품, 직원명부처럼 요청이 들어올 때마다 화면을 하나씩 더했습니다.

색과 크기는 화면을 만들 때마다 그 자리에서 정했습니다. 화면이 늘수록 제목 위치, 표 머리 색, 버튼 모양이 화면마다 달라졌습니다.

화면	제목 위치	표 머리 색	한 행의 기능 버튼 색
재고관리	가운데	연두#D7F3D4	5
출고내역	가운데	연파랑#DBE4F6	4
묶음 목록	가운데	청록#98F5E4	4
소모품 관리	왼쪽	연보라#EFF2FF	4
폐기내역	왼쪽	연분홍#FEF2F2	–
AED 사용연한 관리	왼쪽	연보라#EFF2FF	3
다시 설계한 뒤 (22개 화면 공통)	왼쪽 위	옅은 회색#F7F8FB	무채색, 폐기·재고 라벨·출고위치만 색

1차 화면 여섯 장을 같은 기준으로 잰 값입니다.

화면 하나하나가 아니라, 화면을 만드는 공통 규칙이 없는 것이 문제였습니다.
고칠 곳을 화면마다 찾아 고치면, 다음에 더하는 화면에서 같은 문제가 다시 생깁니다.

02Before & After

재고관리 한 화면에 12행이 들어옵니다

행 하나가 104px에서 67px로 줄어, 한 화면에 보이는 행이 9행에서 12행으로 늘었습니다. 기능 버튼은 테두리형으로 바꾸고, 색은 폐기와 병원 쪽에서 구분을 요청한 재고 라벨·출고위치에만 남겼습니다.

재고관리 1차 화면. 연두색 표 머리 아래 행마다 제품 정보가 여러 줄로 쌓여 한 화면에 아홉 행이 보인다.

재고관리 다시 설계한 화면. 왼쪽 위에 제목, 그 아래 도구줄, 옅은 회색 표 머리 아래 행이 낮아져 한 화면에 열두 행이 보이고 기능 버튼은 테두리형이다.

Before: 1차 화면→After: 다시 설계한 화면

03정한 규칙

22개 화면에 같은 규칙을 적용했습니다

색, 버튼, 입력칸 높이, 화면 틀, 아이콘을 공통 규칙(디자인 시스템)으로 먼저 정하고, 22개 화면을 이 규칙에 맞춰 다시 만들었습니다. 새 화면도 같은 규칙으로 만듭니다.

출고상세 1차 화면의 하단 버튼 줄. 수정완료, 물품코드수정, 회수, 폐기, 재고확인, 취소가 모두 다른 색이다. — 전은 1차 화면에서 그대로 뽑은 것, 후는 22개 화면에 적용한 규칙입니다.

묶음 목록 1차 화면 윗부분. 가운데 떠 있는 제목, 양 끝으로 벌어진 탭 두 개, 가운데 검색칸, 청록색 표 머리가 보인다. — 전은 1차 화면에서 그대로 뽑은 것, 후는 22개 화면에 적용한 규칙입니다.

재고관리 한 행에 규칙을 적용했습니다

출고, 수정, 수리 버튼은 무채색 테두리로 바꿨습니다. 색은 폐기(빨강)와, 병원 쪽에서 색으로 구분해 달라고 한 재고 라벨(보라)·출고위치(초록)에만 남겼습니다.

전

재고관리 1차 화면의 기능 칸 세 행. 재고라벨, 출고, 수정, 수리, 폐기 버튼이 각기 다른 색으로 칠해져 있다.

후

재고관리 다시 설계한 화면의 기능 칸 세 행. 출고·수정·수리는 무채색 테두리, 폐기는 빨간 테두리, 재고 라벨은 보라 글자, 출고위치는 초록 버튼이다.

04화면

표는 더 많이 보이고, 처리할 일은 위에 놓입니다

같은 규칙을 적용하면서 화면마다 필요한 것도 함께 고쳤습니다.

전에는장비 정보가 칸 안에서 세 줄씩 쌓이고, 카테고리 색이 칸 전체를 칠해 글자가 묻혔습니다.

장비 정보가 두 칸 격자에 정리됩니다

종류·스펙과 제품명·카테고리·시리얼 번호를 두 칸 격자에 고정하고, 긴 제품명은 말줄임으로 줄였습니다. 카테고리 색은 칸 전체 대신 가는 띠로만 남겼습니다.

1제목은 왼쪽 위로 옮기고, 설치일·점검일·점검 구분 고르기를 도구줄 한 곳에 모았습니다.
2장비 정보를 두 칸 격자에 고정했습니다.
3관리 버튼은 크기와 색을 다른 화면과 같은 규칙으로 맞췄습니다.

출고내역 다시 설계한 화면. 장비 정보가 두 칸 격자로 정리되어 한 화면에 열두 행이 보이고, 카테고리는 가는 색 띠로 구분된다.

전에는첫 화면에는 IP 대역과 PC 사양 차트 두 개만 있었습니다.

처리할 일의 건수가 첫 화면 위에 놓입니다

점검 기한 초과, 신고 미완료, 미확인 공지, 내게 온 설문 건수를 위 칸 네 개에 먼저 보여 줍니다. 차트 색은 파란 계열로 맞춰 경고색이 묻히지 않습니다.

1점검 기한 초과, 신고 미완료, 미확인 공지, 내게 온 설문 건수가 첫 줄에 있습니다.
2차트 색은 파란 계열로 맞춰, 위 칸의 경고색이 먼저 보입니다.

메인 대시보드 다시 설계한 화면. 위에 점검 기한 초과 3, 신고 미완료 2, 미확인 공지 2, 내게 온 설문 1 네 칸이 있고, 아래에 파란 계열의 IP대역별 사용 현황 막대 차트와 PC 스펙 분포 원 차트가 있다.

전에는교체할 기기를 찾으려면 행마다 날짜를 계산해야 했습니다.

교체할 기기가 표 맨 앞에 표시됩니다

정상, 교체 임박, 사용 연한 초과 건수를 위에 두고 행마다 상태 배지를 붙였습니다. 행마다 열려 있던 비고 입력칸 세 개는 읽기용 목록으로 바꿨습니다.

1정상, 교체 임박, 사용 연한 초과 건수를 위에 두고 검색은 왼쪽으로 옮겼습니다.
2상태 배지가 표 맨 앞에 있고, 비고는 읽기용 목록으로 바뀌었습니다.

AED 사용연한 관리 다시 설계한 화면. 위에 전체·정상·교체 임박·사용연한 초과 건수 칸이 있고, 표 맨 앞 열에 상태 배지가, 비고는 읽기용 목록으로 놓여 있다.

전에는화면에서 가장 큰 것은 병원 선택 버튼(55px)이었습니다.

명부가 화면의 중심에 옵니다

병원 버튼을 36px로 줄이고, 검색과 부서 바로가기, 동기화 상태를 도구줄 한 줄에 모았습니다.

1병원 선택 버튼을 줄이고, 검색·부서 바로가기·동기화 상태를 한 줄에 모았습니다.
2사진이 없으면 이름 첫 글자를 보여 주고, 부서·이름·직책·내선 순서로 읽힙니다.

직원명부 다시 설계한 화면. 위에 닫을 수 있는 안내 카드와, 병원 선택·검색·부서 바로가기·동기화 상태가 한 줄인 도구줄이 있고, 아래에 부서별 직원 카드가 놓여 있다.

전에는번호표가 좁은 카드 안에 들어가 화면 폭의 절반만 썼습니다.

번호표가 더 넓게 펼쳐집니다

검색과 부서 선택을 넓은 도구줄로 펴고, 즐겨찾기 별을 키워 누르기 쉽게 했습니다.

1검색, 부서 고르기, 즐겨찾기를 도구줄 한 줄에 놓았습니다.
2번호표를 넓게 펴고, 즐겨찾기 별을 키웠습니다.

구내전화표 다시 설계한 화면. 넓은 도구줄에 검색과 부서 선택, 즐겨찾기만 보기 단추가 있고, 아래 번호표가 넓게 펼쳐져 있다.

전에는흐릿한 방울 무늬 위에 옅은 밑줄 입력칸이 놓여 있었습니다.

입력칸이 배경과 또렷하게 나뉩니다

화면을 병원 이름 칸과 입력 칸으로 나누고 장식을 걷었습니다. 글자와 바탕의 명암 차이는 8.06:1로 계산해 정했습니다.

1입력칸과 로그인 버튼을 흰 입력 칸에 모으고, 로그인 버튼은 주 버튼 색으로 칠했습니다.
2왼쪽에는 로고 대신 병원 이름과 서비스 소개를 두었습니다.

로그인 다시 설계한 화면. 왼쪽은 파란 바탕에 A병원 그룹웨어 소개, 오른쪽은 흰 바탕에 사번·비밀번호 입력칸과 로그인 버튼이 있다.

비슷한 문제가 있다면

지금 상황을 한두 줄로 적어 보내 주세요. 이틀 안에 메일로 답장드립니다.

myonghyoyou@gmail.com

다음 이야기교대 근무표

엑셀로 따로 짜서 합치던 근무표를 한 화면에서 짭니다