호두클릭 - HODUCLICK
BASIC
TOOLS
Photoshop
Photoshop
Illustrator
Illustrator
Affinity
Designer
Affinity
Designer
Affinity
Photo
Affinity
Photo
2018
회의실 예약 웹 · 탭
디자인 (100%)
퍼블 (100%)
기획 (60%)
HODUCLICK
HODUCLICK
기존에 운영 중인 회의실 예약 앱의 디자인 시스템을 계승하여, 중대형 오피스 환경에 최적화된 웹과 태블릿 버전을 새롭게 구축한 프로젝트입니다. 사내의 수많은 회의실 현황을 실시간으로 파악하고 예약 및 취소를 신속하게 처리할 수 있도록 설계되었으며, 대규모 조직의 사용자가 데스크톱과 현장(회의실 입구)에서 모두 일관된 브랜드 경험을 누릴 수 있도록 개발되었습니다.
기존 회의실 예약 앱의 디자인 시스템을 계승하여 중대형 오피스 환경에 최적화된 웹과 태블릿 버전을 새롭게 구축했습니다. 사내의 수많은 회의실 현황을 실시간으로 파악하고 예약 및 취소를 신속하게 처리하도록 설계했습니다.
대규모 조직의 사용자가 데스크톱과 현장 회의실 입구에서 모두 일관된 브랜드 경험을 누릴 수 있도록 개발 과정에 반영했습니다. 이를 통해 온/오프라인 어디에서나 막힘없는 업무 환경을 제공합니다.
간편하고 정확한 회의실 관리
HODUCLICK
간편하고 정확한 회의실 관리
HODUCLICK
간편하고 정확한 회의실 관리
HODUCLICK
예약하는 사람도, 관리하는 사람도
흐름이 끊기지 않는 경험을 만들었습니다.
예약하는 사람도, 관리하는 사람도
흐름이 끊기지 않는 경험을 만들었습니다.
예약하는 사람도, 관리하는 사람도
흐름이 끊기지 않는 경험을 만들었습니다.
예약하는 사람도, 관리하는 사람도
흐름이 끊기지 않는 경험을 만들었습니다.
1
CONTEXT
1
CONTEXT
모바일 회의실 예약에서
기업용 관리 시스템으로
모바일 회의실 예약에서
기업용 관리 시스템으로
모바일 회의실 예약에서
기업용 관리 시스템으로
모바일 개인 예약 서비스를 실시간 웹 환경으로 확장했습니다. 단순한 화면 확장을 넘어, 사용자 및 관리자 모두의 환경과 흐름에 최적화된 구조를 설계했습니다.
모바일 개인 예약 서비스를 실시간 웹 환경으로 확장했습니다. 단순한 화면 확장을 넘어, 사용자 및 관리자 모두의 환경과 흐름에 최적화된 구조를 설계했습니다.
모바일 개인 예약 서비스를 실시간 웹 환경으로 확장했습니다. 단순한 화면 확장을 넘어, 사용자 및 관리자 모두의 환경과 흐름에 최적화된 구조를 설계했습니다.
A
A
한눈에 파악하기 어려운 회의실 현황
한눈에 파악하기 어려운 회의실 현황
숫자를 일일이 대조해야 빈 공간을 찾을 수 있습니다. 데이터 밀도를 직관적으로 판단해 관리 피로도를 낮출 수 있는 새로운 구조가 필요합니다
회의실 A
회의실 A
예약
7 / 9
회의실 B
회의실 B
예약
3 / 8
회의실 C
회의실 C
예약
2 / 6
A
한눈에 파악하기 어려운
회의실 현황
숫자를 일일이 대조해야 빈 공간을 찾을 수 있습니다. 데이터 밀도를 직관적으로 판단해 관리 피로도를 낮출 수 있는 새로운 구조가 필요합니다
회의실 A
예약
7 / 9
회의실 B
예약
3 / 8
회의실 C
예약
2 / 6
CALENDAR
+
BOOK A ROOM
BOOK A ROOM
CALENDAR
+
BOOK A ROOM
BOOK A ROOM
B
B
끊기지 않는 사용자의 시선
끊기지 않는 사용자의 시선
예약을 등록한 뒤 페이지를 이동해야만 내역을 확인할 수 있어 흐름이 끊깁니다. 등록 정보를 즉시 대조하기 어려워 과정의 번거로움이 발생합니다
CALENDAR
+
BOOK A ROOM
BOOK A ROOM
B
끊기지 않는 사용자의 시선
예약을 등록한 뒤 페이지를 이동해야만 내역을 확인할 수 있어 흐름이 끊깁니다. 등록 정보를 즉시 대조하기 어려워 과정의 번거로움이 발생합니다
C
C
읽기 전에 인지해야 하는 정보
읽기 전에 인지해야 하는 정보
회의실 정보는 멀리서도 한눈에 인지될 수 있어야 합니다. 작은 텍스트와 불필요한 정보는 즉각적인 판단을 늦추고 사용자를 멈춰 서게 만듭니다
OCCUPIED
C
읽기 전에
인지해야 하는 정보
회의실 정보는 멀리서도 한눈에 인지될 수 있어야 합니다. 작은 텍스트와 불필요한 정보는 즉각적인 판단을 늦추고 사용자를 멈춰 서게 만듭니다
OCCUPIED
2
SOLUTION
2
SOLUTION
더 직관적인
예약 경험을 위한 설계
더 직관적인
예약 경험을 위한 설계
더 직관적인
경험을 위한 설계
더 직관적인
예약 경험을 위한 설계
복잡한 관리 절차를 단순화하고 '직관적 인지'에 집중했습니다. 타임라인 기반의 시각화와 단일 화면 내 인터랙션 통합으로, 예약부터 승인까지 끊김 없는 운영 경험을 제공합니다
복잡한 관리 절차를 단순화하고 '직관적 인지'에 집중했습니다. 타임라인 기반의 시각화와 단일 화면 내 인터랙션 통합으로, 예약부터 승인까지 끊김 없는 운영 경험을 제공합니다
Instant
Cognition
Instant
Cognition
Instant
Cognition
Solution A
Solution A
시간 흐름으로 읽는 회의실 사용 현황
시간 흐름으로 읽는
회의실 사용 현황
시간 흐름으로 읽는 회의실 사용 현황
밀도 시각화
실시간 현황
직관적 파악
데이터를 숫자가 아닌 '시간 축' 위에 시각화했습니다. 타임라인 바의 컬러만으로 회의실의 사용 패턴을 즉각 판별하여, 원하는 시간에 빈 공간을 빠르게 확보할 수 있습니다
데이터를 숫자가 아닌 '시간 축' 위에 시각화했습니다. 타임라인 바의 컬러만으로 회의실의 사용 패턴을 즉각 판별하여, 원하는 시간에 빈 공간을 빠르게 확보할 수 있습니다
밀도 시각화
실시간 현황
직관적 파악
데이터를 숫자가 아닌 '시간 축' 위에 시각화했습니다. 타임라인 바의 컬러만으로 회의실의 사용 패턴을 즉각 판별하여, 원하는 시간에 빈 공간을 빠르게 확보할 수 있습니다
1% - 99%
1% - 99%
0%
0%
100%
100%
Background
Background
내 예약
예약 불가
공사 중
Solution B
Solution B
흐름을 끊지 않는 모달 예약
흐름을 끊지 않는 모달 예약
흐름을 끊지 않는 모달 예약
모달 레이어
맥락 유지
운영 연속성
모달 레이어
맥락 유지
운영 연속성
일반적인 페이지 이동 대신, 전체 타임라인을 배경에 그대로 유지하는 모달(Modal) 구조를 고집했습니다. 관리자는 현재 예약 중인 상세 내용과 전체 일정을 한 화면에서 동시에 장악하며, 인지적 공백 없이 정확하게 의사결정을 내릴 수 있습니다.
일반적인 페이지 이동 대신, 전체 타임라인을 배경에 그대로 유지하는 모달(Modal) 구조를 고집했습니다. 관리자는 현재 예약 중인 상세 내용과 전체 일정을 한 화면에서 동시에 장악하며, 인지적 공백 없이 정확하게 의사결정을 내릴 수 있습니다.
Seamless
Transition
Seamless
Transition
Seamless
Transition
Solution C
Solution C
현장에 맞게 설정하는
상태 컬러 시스템
현장에 맞게 설정하는
상태 컬러 시스템
현장에 맞게 설정하는
상태 컬러 시스템
상태 기반 컬러
현장 최적화
운영 유연성
상태 기반 컬러
현장 최적화
운영 유연성
예약 정보를 현장에서도 직관적으로 확인하도록 세 가지 컬러 시스템을 적용했습니다. 회의실의 실시간 상태가 화면에 즉각 반영되어, 사용자 간의 혼선을 줄이고 회의실 이용의 불편함을 최소화했습니다.
예약 정보를 현장에서도 직관적으로 확인하도록 세 가지 컬러 시스템을 적용했습니다. 회의실의 실시간 상태가 화면에 즉각 반영되어, 사용자 간의 혼선을 줄이고 회의실 이용의 불편함을 최소화했습니다.
예약 정보를 현장에서도 직관적으로 확인하도록 세 가지 컬러 시스템을 적용했습니다. 회의실의 실시간 상태가 화면에 즉각 반영되어, 사용자 간의 혼선을 줄이고 회의실 이용의 불편함을 최소화했습니다.
Environment
Adaptive
Environment
Adaptive
Environment
Adaptive
3
TAB VER
현장용 탭 디자인
사용자가 회의실 사용 여부를 빠르게 인지하고, 즉각적인 행동으로 이어질 수 있도록 UX 흐름에 초점을 맞춰 설계되었습니다. Waiting, Occupied, Available의 상태를 컬러로 명확하게 구분하고, 중앙의 원형 타이머를 통해 남은 시간과 진행 상황을 직관적으로 파악할 수 있도록 했습니다.
WAITING
#FFD91B
회의 시작 전 상태로, 예약된 사용자가 체크인을 진행할 수 있도록 유도하는 단계입니다. 남은 시간을 카운트다운 형태로 제공하여 사용자의 행동을 자연스럽게 유도하며, 일정 시간 내 체크인이 이루어지지 않을 경우 자동 취소되는 구조로 회의실 회전율을 고려한 UX를 반영했습니다.
10:52 AM, 유진형 유저의 11:00–11:59 회의가 예정되어 있으며, 대기 상태에서 Check-in을 유도합니다.
OCCUPIED
#FE2E41
회의가 진행 중인 상태로, 현재 사용 중인 시간과 종료 시점을 명확하게 전달하는 데 중점을 두었습니다. 남은 시간을 원형 타이머로 시각화하여 직관적으로 인지할 수 있도록 했으며, 필요 시 즉시 종료(End)가 가능하도록 하여 유연한 사용 흐름을 지원합니다.
11:15 AM, 회의가 진행 중인 상태로 남은 시간을 확인하고 필요 시 종료할 수 있습니다.
AVAILABLE
#0099FF
회의실이 비어 있는 상태로, 사용자가 즉시 예약할 수 있도록 유도하는 단계입니다. 현재부터 다음 예약 시간까지의 여유 시간을 명확하게 보여주어 빠른 판단이 가능하도록 했으며, 즉각적인 예약 액션을 통해 사용자의 흐름이 끊기지 않도록 설계했습니다.
01:00 PM, 회의 종료 후 회의실이 비어 있으며, 다음 예약 전까지 즉시 이용이 가능합니다.
3
TAB VER
3
TAB VER
현장용 탭 디자인
현장용 탭 디자인
사용자가 회의실 사용 여부를 빠르게 인지하고, 즉각적인 행동으로 이어질 수 있도록 UX 흐름에 초점을 맞춰 설계되었습니다. Waiting, Occupied, Available의 상태를 컬러로 명확하게 구분하고, 중앙의 원형 타이머를 통해 남은 시간과 진행 상황을 직관적으로 파악할 수 있도록 했습니다.
Check-in, End, Reservation과 같은 주요 액션을 화면 내에서 바로 수행할 수 있게 하여, 별도의 탐색 없이 빠른 의사결정과 효율적인 이용이 가능하도록 구성했습니다.
사용자가 회의실 사용 여부를 빠르게 인지하고, 즉각적인 행동으로 이어질 수 있도록 UX 흐름에 초점을 맞춰 설계되었습니다. Waiting, Occupied, Available의 상태를 컬러로 명확하게 구분하고, 중앙의 원형 타이머를 통해 남은 시간과 진행 상황을 직관적으로 파악할 수 있도록 했습니다.
Check-in, End, Reservation과 같은 주요 액션을 화면 내에서 바로 수행할 수 있게 하여, 별도의 탐색 없이 빠른 의사결정과 효율적인 이용이 가능하도록 구성했습니다.
WAITING
WAITING
#FFD91B
회의 시작 전 상태로, 예약된 사용자가 체크인을 진행할 수 있도록 유도하는 단계입니다. 남은 시간을 카운트다운 형태로 제공하여 사용자의 행동을 자연스럽게 유도하며, 일정 시간 내 체크인이 이루어지지 않을 경우 자동 취소되는 구조로 회의실 회전율을 고려한 UX를 반영했습니다.
10:52 AM, 유진형 유저의 11:00–11:59 회의가 예정되어 있으며, 대기 상태에서 Check-in을 유도합니다.
10:52 AM, 유진형 유저의 11:00–11:59 회의가 예정되어 있으며, 대기 상태에서 Check-in을 유도합니다.
OCCUPIED
OCCUPIED
#DC414E
회의가 진행 중인 상태로, 현재 사용 중인 시간과 종료 시점을 명확하게 전달하는 데 중점을 두었습니다. 남은 시간을 원형 타이머로 시각화하여 직관적으로 인지할 수 있도록 했으며, 필요 시 즉시 종료(End)가 가능하도록 하여 유연한 사용 흐름을 지원합니다.
11:15 AM, 회의가 진행 중인 상태로 남은 시간을 확인하고 필요 시 종료할 수 있습니다.
11:15 AM, 회의가 진행 중인 상태로 남은 시간을 확인하고 필요 시 종료할 수 있습니다.
AVAILABLE
AVAILABLE
#0099FF
회의실이 비어 있는 상태로, 사용자가 즉시 예약할 수 있도록 유도하는 단계입니다. 현재부터 다음 예약 시간까지의 여유 시간을 명확하게 보여주어 빠른 판단이 가능하도록 했으며, 즉각적인 예약 액션을 통해 사용자의 흐름이 끊기지 않도록 설계했습니다.
01:00 PM, 회의 종료 후 회의실이 비어 있으며, 다음 예약 전까지 즉시 이용이 가능합니다.
01:00 PM, 회의 종료 후 회의실이 비어 있으며, 다음 예약 전까지 즉시 이용이 가능합니다.
4
USERFLOW
페이지 전환 없이
완결되는 예약 구조
페이지 전환 없이
완결되는 예약 구조
모달을 활용해 페이지 이동을 제거했습니다. 전체 스케줄을 확인하면서 동시에 예약 정보를 입력할 수 있어 정보 혼선 없는 빠른 업무 처리가 가능합니다
4
USERFLOW
페이지 전환 없이
완결되는 예약 구조
모달을 활용해 페이지 이동을 제거했습니다. 전체 스케줄을 확인하면서 동시에 예약 정보를 입력할 수 있어 정보 혼선 없는 빠른 업무 처리가 가능합니다
5
UI / INTERACTION
전체 화면
전체 화면
웹과 태블릿 환경의 전체 화면을 한눈에 확인할 수 있도록 구성했습니다. 각 디바이스에서의 화면 구성과 주요 기능을 통해 서비스 전반의 흐름을 직관적으로 파악할 수 있습니다.
웹과 태블릿 환경의 전체 화면을 한눈에 확인할 수 있도록 구성했습니다. 각 디바이스에서의 화면 구성과 주요 기능을 통해 서비스 전반의 흐름을 직관적으로 파악할 수 있습니다.
메인 & 예약 현황
[VIDEO]
회의실 관리 & 처리 모달
[VIDEO]
아바타
[VIDEO]
사용자 관리 & 설정
[VIDEO]
현장용 탭디자인
[VIDEO]
5
UI / INTERACTION
전체 화면
호두 프리미엄 버전 중 성숙한 성격에 맞추어 다크 버전으로 진행하고, 이전 구축한 호두 기본 디자인 시스템을 활용하여, 호두 사용자와 일반 사용자 모두 편리하게 사용가능한 UI를 디자인했습니다.
메인 & 예약 현황
[VIDEO]
회의실 관리 & 처리 모달
[VIDEO]
아바타
[VIDEO]
사용자 관리 & 설정
[VIDEO]
현장용 탭디자인
[VIDEO]