올인원 클라우드 HR시스템의 디자인

어떻게 해야 고객은 편리하다고 느낄지
저희는 끊임없이 고민하고 비교하면서 개선하고 있습니다.

UX / UI

철학까지는 아니지만, 오이사공5240의 디자인에 대한 생각은 이렇습니다. 🧐

간격도 넓게하고 정보를 줄이면 시원해보입니다.

반면에 여러 화면을 오가며 보아야 하고 스크롤이 많이 생기고, 페이지도 많아집니다.
처음 볼 때는 시원해 보이니 좋다고 느낄 수 있습니다. 한 두번은 괜찮지만 인사업무를 할 때는 너무 불편해집니다.
여러 화면을 왔다 갔다 해야 하니 정보를 종합적으로 볼 수도 없습니다.

저희는 필요한 정보를 가능한 한번에 볼 수 있도록 구성했습니다.

보내기/임시저장/내게쓰기 등 자주 사용하는 버튼에 대해서 네이버는 텍스트를 그대로 넣어서 버튼을 만듭니다. 반면에 구글은 아이콘 버튼을 사용합니다.
아이콘 버튼이 그럴 듯하지만 텍스트버튼이 더욱 편리할 수 있습니다. 아이콘은 이미지를 보고 이것이 그것이다를 연상해야 하고 때론 암기해야 합니다. 텍스트는 연상할 필요가 없습니다.

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

그래서 저희는 텍스트 버튼은 줄이고 자주 쓰는 버튼은 아이콘으로 만들자는 생각을 했습니다. 먼저 늘상 사용하는 조회/입력/복사/저장/업로드/다운로드는 아이콘으로 변경했습니다. 혹시 기억이 나지 않을 수 있으니까 툴팁으로 어떤 용도라는 것을 알게 했습니다.
그래도 인사업무용 버튼이 더 있습니다. 이 부분은 를 넣어서 더볼 수 있게 했습니다. 더보기 버튼은 네이버과 구글 공통이네요. 저희 고객도 이 버튼을 익숙하게 보시지 않을까 싶습니다.

더보기 버튼을 누르면 인사업무용 버튼이 옆으로 나옵니다. 정보를 가리면 안되니까 옆으로 나오게 했습니다. 더보기로 나오는 버튼은 텍스트 버튼입니다. 인사업무는 보편적인 내용이 아니어서 아이콘으로 표시하기 어렵고, 연상도 잘 안되므로 아이콘으로 하면 편리함보다 불편함이 커질 것으로 판단했습니다.

요즘 나오는 프로그램을 보면 메뉴를 중앙에 두거나 상단에 탭으로 처리하는 경우가 많아 지고 있습니다.

그런데 저희는 왼쪽에 트리구조로 둡니다. 저희 시스템의 메뉴는 900 여개입니다. 권한과 역할에 따라 보여주는 메뉴는 1,200 여개까지 됩니다. 이걸 중앙 본문에 둔다면 50페이지 정도가 나올 수 있습니다. 상단 탭으로 두는 것은 상상하기 어렵네요.

제공하는 메뉴와 기능이 매우 작을 때 시원한 메뉴구성을 보여줄 수 있습니다. 저희가 제공하는 메뉴트리는 뜻밖에 이런 장점이 있습니다.

  • 메뉴를 누르고 눌러서 찾아가는 수고를 하지 않아도 됩니다.
  • 실제로 이렇게 즉시 메뉴를 볼 수 있어서 좋다고 느끼는 고객도 많습니다.
  • 인사/조직/근태/급여/평가/교육/복리후생/채용 등에 대한 메뉴의 구조를 파악하기 쉽습니다.
  • HR시스템은 개인정보를 다루기 때문에 권한관리가 매우 중요한데요. 권한을 적용한 메뉴가 바로 적용됩니다.

사용하다 보면 메뉴트리 구조의 장점이 많습니다.

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

1. 메뉴 구성

왼쪽 트리 구조로 메뉴 제공, 상단/우측/하단에 자주 사용하는 기능 배치.

2. 상단 버튼들
  • 검색: 직원 및 메뉴 검색 가능
  • 자주 쓰는 메뉴 및 최근 사용한 메뉴 제공
  • 출퇴근 기록을 위한 Time Stamp
  • 법인 선택 기능
3. 상단 오른쪽 기능

알림, 출퇴근 기록 버튼, 자주 쓰는 메뉴 버튼, 법인 선택, 앱 모음, 프로필 버튼 제공.

4. 중앙 본문

위젯으로 주요 정보를 빠르게 조회하고, 휴가 및 연장 근로 신청을 쉽게 접근할 수 있음. 탭(TAB)으로 인사정보 조회 가능.

5. 보고서 형식 화면

상단에 검색 조건, 하단에 데이터와 업무용 버튼, 화면 제어 버튼 배치.

6. 기타 화면 구성

업무별로 맞춤형 검색 조건과 데이터 조회 인터페이스 제공.

7. 개인 설정

컬러 등 화면 구성을 개인 취향에 맞게 설정 가능.

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

1. HR 시스템의 그리드 사용 이유

HR 시스템은 방대한 데이터를 다루기에, 표 형식으로 정보를 조회하는 그리드가 많이 활용됩니다. 최근 카드형 디자인이 늘고 있으나, 그리드는 여전히 업무 연속성에 유리한 솔루션입니다.

2. 비(非)그리드 디자인의 한계

비그리드 디자인은 깔끔하지만 기능이 제한됩니다. 아래와 같은 작업이 어려워집니다:

  • 엑셀로 데이터 복사 및 붙여넣기
  • 데이터 정렬 및 컬럼 이동, 너비 조정
  • 필터링 및 정보 검색 기능
3. 그리드(Grid)로 생산성 향상

그리드는 생산성을 높이고 빠른 업무 처리를 돕습니다. 오이사공5240에서는 기존 그리드의 디자인을 개선하여 기능성뿐만 아니라 미적 요소도 강화하고 있습니다.

오이사공5240의 HR 시스템에서는 다양한 인사정보를 관리합니다. 이 시스템은 총 36개 분류에 걸쳐 400여 개의 인사정보를 포함하고 있으며, 단순 조회뿐 아니라 다음과 같은 정보 관리 기능도 지원합니다:
  • 기본 버튼
  • 추가 버튼
  • 기타 버튼

시스템 인터페이스 개선

기존에는 모든 버튼을 텍스트로 표시하여 화면이 복잡해 보였으나, 이제는 아이콘을 사용해 버튼을 구성하여 깔끔하게 보이도록 개선하고 있습니다.

권한 설정을 통한 보안 강화

HR 시스템에서는 권한 설정에 따라 특정 버튼이 보이도록 설정하여, 보안을 강화하고 있습니다. 예를 들어, 파일 다운로드는 권한이 있는 사용자에게만 표시되며, 권한 없는 사용자는 접근할 수 없습니다.

오이사공5240의 모바일 디자인은 **효율적 정보 조회**와 **입력 최소화**를 최우선으로 합니다.

1. 한 화면에서 모든 정보를 확인

여러 화면을 전환할 필요 없이 출근, 연차, OT, 근로시간 등 다양한 정보를 한 번에 확인할 수 있습니다. 복잡해 보일 수 있지만, 필요 정보를 빠르게 제공합니다.

2. 고객 맞춤형 로고 및 상단 아이콘

상단 로고는 고객사의 로고로 커스터마이징 가능하며, 근무 일정 및 메뉴 이동을 위한 아이콘도 함께 배치되었습니다.

3. 하단 메뉴와 긴급 알림

하단에는 자주 사용하는 메뉴와 언어, 비밀번호 변경 기능이 있으며, 긴급한 공지는 모바일에서 바로 확인할 수 있습니다.

4. 주요 메뉴: 신청과 조회
  • **신청 메뉴**는 입력을 최소화하며, 예를 들어 연장근무는 일자와 시간만 입력하면 됩니다.
  • **조회 메뉴**는 급여명세서와 출근 현황 등 주요 정보를 제공합니다.

Document

저희 오이사공5240은 제공하고 있는 정보가 매우 많습니다. 그 정보들을 조회뿐만 아니라 여러 업무를 처리하기 위한 입력, 복사, 저장 등 여러 기능과 화면들이 있습니다.
저희는 이 복잡한 인사시스템을 보다 편리하고, 깔끔하게 느낄 수 있도록 노력하고 있습니다.

1. 폰트 (feat_nanumbarungothic)
  • 시스템의 전반적인 폰트
  • nanumbarungothic
  • 좌측 메뉴의 폰트
  • NanumSquare
2. 컬러
#60a5fa
Point Color
사용자가 클릭 하거나, 강조되어야할 때 사용되는 컬러
#e0f3ff
Hover
사용자가 컨트롤 가능한 컨텐츠에 마우스를 올렸을 때 사용되는 컬러
#f7f9fc
Disabled
사용자가 컨트롤 불가능한 상태를 나타내는 컬러