5240 화면 한 장의 뼈대다. 왼쪽에 메뉴 트리가 길게 내려오고, 위에 검색과 단추가 놓인 머리띠가 있다. 가운데에는 탭이 여럿 열려 있고 그 아래 표가 촘촘하게 채워져 있다. 오른쪽 아래에 휴대폰 한 대가 같은 정보를 작게 담고 있다. 맨 아래는 5240 로고가 땅처럼 받치고 있다.

5240 MODULE 15 — DESIGN

HR 디자인과 UI/UX

오이사공5240의 화면 설계 기준과 개선 방향을 소개합니다. 화면구성, 그리드 디자인, 모바일, 폰트·컬러까지 인사업무 생산성을 위한 디자인 노하우를 담았습니다.

디자인에 대한 생각

필요한 정보를 한번에 보여주자 vs. 시원하게 보여주자

⭕ 저희는 필요한 정보를 가능한 한번에 볼 수 있도록 구성했습니다.
처음 볼 때 시원한 화면은 인사업무를 할 때 너무 불편해집니다.

왼쪽 판에는 간격이 넓고 정보가 적은 화면 넉 장이 화살표로 이어져 있어 한 장씩 넘겨 가며 봐야 한다. 오른쪽 판에는 화면 한 장에 출퇴근, 근무계획, 게시판, 연차, 근태신청이 함께 놓여 있다.

01

정보량과 화면 이동의 균형

간격도 넓게 하고 정보를 줄이면 시원해 보입니다. 반면에 여러 화면을 오가며 보아야 하고 스크롤이 많이 생기고, 페이지도 많아집니다. 여러 화면을 왔다 갔다 해야 하니 정보를 종합적으로 볼 수도 없습니다.

한 화면오늘 출퇴근과 주간근무계획, 월별 근무현황을 함께 봅니다
근태 요약지각·조퇴·외출·결근 일수를 바로 셉니다
게시판사내 규정과 공지를 같은 자리에서 봅니다

5240 직원 홈 화면이다. 왼쪽에 직원 Self Service 메뉴 트리가 있고, 가운데 위에는 10월 8일 목요일 근무일 직원 카드, 출근시간 08:42와 퇴근시간 18:05, 9시간 근무 막대, 10/08 출근 08:42와 퇴근 18:05 단추가 있다. 오른쪽 위에는 10월 5일부터 11일까지 주간근무계획 막대가 휴게와 근무로 나뉘어 있다. 아래에는 게시판, 월별 근무현황의 근무계획과 근무이력 막대, 지각·조퇴·외출·결근 일수를 센 출근현황, 근태신청서가 한 화면에 놓여 있다.

직원 홈: 출퇴근·주간근무계획·게시판·월별 근무현황·출근현황을 한 화면에

02

결재함도 한 화면에

결재할 문서와 내가 기안한 문서를 탭 이동 없이 한 화면에서 확인합니다. 건수와 목록과 내용을 한 화면에 모았습니다.

5240 결재함 화면이다. 맨 위에 내가 발신결재할 차례 0, 발신 기결재 진행중 24, 내가 수신 결재할 차례 0, 참조함 결재진행중 13, 결재상태 변경문서 0 의 건수가 나란히 있다. 아래에 진행중문서, 전체, 임시저장, 기안문서, 미결문서, 기결문서, 참조문서, 반려문서 갈피가 있고, 휴가신청, 연장근무신청, 휴일근무신청이 한 줄씩 놓인다. 줄마다 문서번호와 결재중 표시, 지난 날수가 붙고, 오른쪽에 결재 단계 번호와 결재대기자가 있다.

결재함: 건수·목록·상태를 한 화면에

건수처리할 결재와 참조를 위에 셉니다
목록문서마다 문서번호·상태·지난 날수가 한 줄에 놓입니다
결재 단계몇 번째 결재에서 누가 기다리는지 줄 끝에서 봅니다

03

신청서도 결재라인과 함께

휴가신청 한 장에 결재라인과 수신참조, 신청 내용이 함께 놓입니다. 발생일수와 잔여일수도 신청하는 자리에서 봅니다.

결재라인기안·결재·수신을 신청서 머리에서 봅니다
잔여일수쓴 날과 남은 날을 보며 신청합니다

5240 휴가신청 화면이다. 맨 위에 현재 결재라인이 기안, 결재, 결재 세 칸과 수신 한 칸으로 놓여 있다. 그 아래 수신참조가 있고, 신청자, 휴가종류 연차, 발생일수 23, 휴가기간, 신청일수, 기사용/잔여일수 8/15, 반차, 휴가사유, 대결자, 비고 칸이 이어진다.

휴가신청: 결재라인·잔여일수·신청 내용을 한 장에

04

아이콘 버튼은 어디까지?

보내기/임시저장/내게쓰기 등 자주 사용하는 버튼을 네이버는 텍스트를 그대로 넣어서 만듭니다. 반면에 구글은 아이콘 버튼을 사용합니다. 아이콘은 기능을 익히는 과정이 필요할 수 있습니다. 텍스트 버튼은 기능을 글자로 설명해 처음 사용하는 사람도 용도를 파악하기 쉽습니다.

같은 단추 셋이 두 줄로 놓여 있다. 위 줄은 글자 단추로 보내기, 임시저장, 내게쓰기라고 적혀 있다. 아래 줄은 아이콘 단추로 종이비행기, 디스켓, 사람 모양만 있고 머리 위에 물음표가 떠 있다.

HR시스템은 화면에 정보를 많이 보여주어야 하고, 인사업무를 위한 버튼도 많습니다. 그렇다보니 복잡하다는 느낌을 갖는 고객이 많습니다.

05

자주 쓰는 버튼은 아이콘으로, 나머지는 더보기로

늘상 사용하는 조회/입력/복사/저장/업로드/다운로드는 아이콘으로 바꾸고, 기억이 나지 않을 수 있으니 툴팁으로 용도를 알게 했습니다. 인사업무용 버튼은 더보기를 누르면 옆으로 나옵니다. 정보를 가리면 안 되니까요.

표 위의 단추 줄이다. 왼쪽에 아이콘 단추 여섯이 있고 그 가운데 하나 위에 저장이라는 툴팁이 떠 있다. 그 옆 점 세 개 더보기 단추를 누르면 오른쪽으로 근태기확정반영, 시간외전환, 일집계마감 같은 글자 단추가 옆으로 펼쳐진다. 아래의 표는 가려지지 않는다.

더보기로 나오는 버튼은 텍스트 버튼입니다. 인사업무는 보편적인 내용이 아니어서 아이콘으로 표시하기 어렵고 연상도 잘 안 되므로, 아이콘으로 하면 편리함보다 불편함이 커질 것으로 판단했습니다. 더보기 버튼은 네이버와 구글 공통이네요. 저희 고객도 이 버튼을 익숙하게 보시지 않을까 싶습니다.

메뉴

메뉴, 트리구조 말고 다른 방법 없을까?

저희는 왼쪽에 트리구조로 둡니다.
메뉴는 900여 개, 권한과 역할에 따라 보여주는 메뉴는 1,200여 개까지 됩니다.

06

메뉴 트리의 뜻밖의 장점

요즘 프로그램은 메뉴를 중앙에 두거나 상단 탭으로 처리하는 경우가 많아지고 있습니다. 900여 개를 중앙 본문에 둔다면 50페이지 정도가 나올 수 있습니다. 제공하는 메뉴와 기능이 매우 적을 때라야 시원한 메뉴구성을 보여줄 수 있습니다.

메뉴 트리 하나다. 인사, 조직, 근태, 급여, 평가, 교육, 복리후생, 채용 가지가 있고, 근태 가지가 펼쳐져 출근현황, 연장근무신청, 휴가신청이 보인다. 자물쇠 표시가 붙은 가지는 권한이 없어 흐리게 그려져 있다.

찾아가는 수고가 없습니다메뉴를 누르고 눌러서 찾아가지 않아도 됩니다
바로 보입니다즉시 메뉴를 볼 수 있어서 좋다고 느끼는 고객도 많습니다
구조가 보입니다인사·조직·근태·급여·평가·교육·복리후생·채용의 메뉴 구조를 파악하기 쉽습니다
권한이 바로 적용됩니다개인정보를 다루니 권한관리가 중요한데, 권한을 적용한 메뉴가 바로 보입니다

저희는 종합HR시스템입니다. 달랑 출퇴근 관리 등 그 많은 인사업무 중 한두 개만 제공하는 시스템과 다르다는 점을 말씀드리고 싶네요.

화면구성

이렇게 했다 저렇게 했다를 반복하여 지금의 형태가 되었습니다.

왼쪽에는 트리구조로 메뉴를 보여주고요.
상단·우측·하단은 어떻게 구성해야 쉽게 쓸 수 있을지 토의를 거듭했습니다.

5240 화면의 뼈대다. 왼쪽에 메뉴 트리, 위에 머리띠가 있고 머리띠 왼쪽은 검색과 자주 쓰는 메뉴, 오른쪽은 알람과 단추들이다. 가운데 본문 위에 탭이 여럿 열려 있고, 탭 아래에 검색조건 칸과 표가 놓여 있다.

07

상단 왼쪽 — 검색과 자주 쓰는 메뉴

처음으로 넣은 것은 검색입니다. 직원검색과 메뉴검색을 할 수 있고요. 직전에 쓴 메뉴와 자주 쓰는 메뉴를 나열해 메뉴를 찾는 노력을 줄였습니다.

구분검색한 칸에서 직원(@)·조직($)·메뉴(#)를 골라 찾습니다
최근·자주 메뉴직전에 쓴 메뉴와 자주 쓰는 메뉴를 나열했습니다
앱 모음결재문서함·To-Do·도움말·AI어시스턴트를 한 판에 모았습니다

머리띠 가운데의 통합검색 칸이다. 칸에 직원, 메뉴 통합검색, 입력후 엔터라는 안내가 있고, 칸을 누르면 아래에 구분 셋이 내려온다. @ 직원은 성명과 직원번호로, $ 조직은 조직과 직책, 직위, 직무로, # 메뉴는 메뉴명으로 찾는다.

머리띠의 앱 모음 단추를 누르자 아이콘 아홉 칸이 펼쳐진다. 메뉴도움말, 배지 1 이 붙은 결재문서함, To-Do, 담당자용 도움말, 사용자도움말, 설정, 패밀리 사이트, 서비스데스크, 그리고 새 표시 N 이 붙은 AI어시스턴트다.

직원·조직·메뉴 구분검색과 앱 모음

08

Time Stamp 와 법인 선택

출근과 퇴근을 처리하는 Time Stamp를 두었습니다. 여러 법인을 관리하는 고객사는 상단 바에서 조회할 법인을 선택합니다.

Time Stamp 창이다. 8월 16일 기본 09:00부터 18:00 근무에 출근 상태가 적혀 있고, 출근 횟수, 연차, 보상, 주OT, 월OT, 주근로가 한 줄씩 놓인다. 아래에 08/16 출근 08:49와 08/16 퇴근 18:02 단추가 있다.

법인 선택 단추를 누르면 COMPANY LIST 가 내려오고 전체, 오이사공, 오이사공유통, 오이사공제조가 놓여 있다.

Time Stamp 와 법인 선택

Time Stamp출근·퇴근과 그날의 근태를 한 창에서 봅니다
법인 선택전체 또는 법인 하나를 골라 봅니다

09

상단 오른쪽 — 알람과 각 버튼

상단의 오른쪽은 알람과 각 버튼입니다. 쓰임이 닮은 단추끼리 묶고 사이에 가는 칸막이를 두었습니다. 해야 할 일의 건수는 배지로 알게 합니다.

세션 시간남은 시간을 분으로 보이고, 누르면 세션 시간을 다시 채웁니다
Time Stamp출근과 퇴근을 찍고 그날의 근태를 봅니다
자주 쓰는 메뉴최근·자주·기간별 메뉴를 엽니다
법인 선택조회할 법인을 고릅니다
앱 모음결재문서함·To-Do·도움말 등 오이사공의 앱들을 모아 두었고, 처리할 건수를 배지로 붙입니다
프로필본인의 프로필입니다

머리띠 오른쪽 끝의 단추 줄이다. 60분이 남았다고 적힌 세션 시간, 칸막이 뒤에 Time Stamp 와 목록 모양 자주 쓰는 메뉴, 다시 칸막이 뒤에 건물 모양 법인 선택과 1 이라는 배지가 붙은 네모 넷 모양 앱 모음, 마지막 칸막이 뒤에 오사공이라고 적힌 빨간 프로필이 차례로 놓인다. 단추는 선 아이콘으로 가볍게 그려져 있다.

머리띠 오른쪽 단추 여섯

10

가운데는 위젯, 그리고 탭

로그인하면 중앙은 여러 위젯으로 주요 정보를 빠르게 조회하고, 휴가신청·연장근로신청 등을 바로 할 수 있게 했습니다. 오이사공5240의 특징 하나는 중앙 본문에 탭(TAB)으로 여러 인사정보를 띄워서 볼 수 있게 한 것입니다.

왼쪽 판에는 브라우저 창 셋이 겹쳐 있고 그 사이를 화살표가 오간다. 오른쪽 판에는 브라우저 창 하나 안에 Home, 직원명부, 출퇴근확정, 휴가신청 탭이 나란히 열려 있다.

탭으로 제공하지 않으면 브라우저를 왔다 갔다 해야 합니다. 사소한 것 같지만 매우 불편해집니다.

11

먼저 보고서형입니다

상단에 여러 검색조건을 둡니다. 하단에 데이터를 표시하는데요. 표 위 단추 줄에서 조회·다운로드·SQL보기·피벗테이블을 바로 씁니다.

검색조건기본조건은 왼쪽, 추가조건은 오른쪽에 두고 접을 수 있습니다
단추 줄조회·다운로드·링크·더보기·SQL보기·피벗테이블이 표 위에 섭니다
조회 시간표 오른쪽 위에 조회에 걸린 시간이 뜹니다

직원명부 보고서형 화면이다. 위 왼쪽에 기본조건으로 기준일자, 재직상태, 재직여부, 소속, 직원번호/성명, 직책, 직위가 있고, 오른쪽에 추가조건으로 직무코드, 직원구분코드, 급여유형코드, 근무유형코드, 입사일, 근속년수, 성별코드, 결혼여부가 있으며 그 아래 접기 단추가 있다. 표 위에는 조회, 다운로드, 링크, 더보기, SQL보기, 피벗테이블 단추가 있고 오른쪽 위에 조회 시간 00:01 이 떠 있다. 표에는 직원번호 성명에 오를 넣어 찾은 여섯 사람이 직원번호, 성명, 회사, 소속, 직위, 직책, 재직상태, 직원구분, 급여유형, 근무유형, 시업시간, 종업시간, 입사일, 그룹입사일, 근속년수, 실근속년수 열로 놓인다.

직원명부: 위는 검색조건, 아래는 표

12

업무별로 조금씩 다른 형태

상단에 한 줄 또는 두 줄로 검색조건을 고르고 데이터를 조회합니다. 기본적으로 이런 형태로 보여줍니다. 화면 구성은 설정으로 합니다. 컬러 등을 본인의 취향에 맞게 설정할 수 있습니다.

인적사항업로드 화면이다. 맨 위 한 줄에 직원번호/성명, 입사일, 재직 검색조건이 있고, 그 아래 조회, 입력, 복사, 저장, 양식다운로드, 업로드, 다운로드 아이콘 단추가 있다. 표에는 직원번호, 성명, 주민번호 앞자리, 성별, 한자성명, 영문성명, 생년월일, 입사일, 퇴직일, 결혼여부, 취미, 특기사항 열이 이어지고 오른쪽 아래에 27 / 4,701 이라고 적혀 있다.

인적사항업로드: 한 줄 검색조건, 아이콘 단추, 표

한두 줄 검색조건업무마다 조건 줄 수가 다릅니다
본인 설정컬러 등을 취향에 맞게 바꿉니다

그리드(Grid)

그리드(Grid), 과연 옛날 방식(old fashion)인가?

예쁜 것보다 업무생산성이 중요하다고 저희는 생각합니다.
그래서 그리드를 쓰고, 디자인을 개선하기로 했습니다.

왼쪽 판에는 카드형 화면이 있다. 넓은 카드 넉 장에 사람 넷이 큼직하게 놓여 시원해 보인다. 오른쪽 판에는 그리드가 있다. 같은 자리에 사람 열둘이 열과 행으로 놓이고, 머리 줄에 정렬 화살표와 필터 칸이 붙어 있으며 엑셀 단추가 있다.

13

그리드를 쓰지 않아서 놓치는 것은?

최근 제품들은 그리드 대신 요즘 디자인인 카드형으로 직접 코딩하는 경우가 늘고 있습니다. 시원해지고 가독성도 좋아지는 것 같습니다. 많은 데이터를 일괄 편집하거나 정렬·검색해야 하는 인사업무에는 그리드가 적합합니다.

엑셀엑셀로 내려받고 업로드하기 어려워집니다
복사·붙여넣기화면에서 복사해 엑셀에서 작업한 뒤 붙여넣기가 안 됩니다
정렬데이터 정렬이 어렵습니다
열 이동·너비컬럼을 옮기고 넓이를 조정해서 보기 힘듭니다
필터·검색필터링도, 정보검색도 잘 안 됩니다

카드형 화면 한 장 둘레에 잃는 것 일곱이 줄 그어진 칸으로 놓여 있다. 엑셀 내려받기와 올리기, 복사해서 붙여넣기, 정렬, 열 이동, 열 너비 조정, 필터링, 정보검색이다.

14

그리드의 일괄 처리 기능으로 반복 업무 줄이기

그리드를 사용하면 퇴근이 빨라질 수 있는데요. 사용하지 않을 이유가 없습니다. 물론 그리드도 누가 만들었는지에 따라 디자인은 달라집니다. 필요한 정보를 빠르게 확인하고 업무를 처리할 수 있도록 화면을 지속적으로 개선합니다.

같은 그리드가 세 번 그려져 있다. 어제는 진한 테두리와 글자 단추가 빽빽하고, 오늘은 선이 옅어지고 단추가 아이콘으로 바뀌었고, 내일은 점선으로 그려져 아직 오지 않았다. 셋 아래로 시계가 6시를 가리킨다.

5240의 그리드는 IBSheet를 기반으로 구성했습니다. 다음 여덟 장은 IBSheet 가 내세우는 기본 기능이고, 그 뒤 넉 장은 오이사공5240이 더한 기능입니다.

15