직출/퇴제 시행 이후 팀원들이 항상 사무실에서 함께 근무하지 않게 되면서, 팀원들의 일정과 근무 위치를 미리 공유하는 일이 중요해졌습니다. 기존 그룹웨어 캘린더를 통해 각자 미팅 일정은 공유하고 있었으나, 직출/퇴제 시행으로 팀장님은 조금 더 촘촘히 팀원의 status를 공유할 필요성을 이야기 했어요.
누가 사무실에 있고, 누가 고객사를 방문하며, 누가 재택을 하며, 특정 시간대에 사무실을 지키는 인원이 충분한지(최근에 인턴 2명이 입사해서, 사무실에서 OJT 및 케어를 할 선배 직원이 필요하다.)를 알아야 팀의 업무 공백을 줄일 수 있기 때문입니다.
일주일 전에 팀장님이 엑셀로 양식을 만들었습니다. 1주일 단위로 구성원, 날짜, 오전·오후 일정, 근무 위치와 메모 등을 하나의 표에서 관리할 수 있게 엑셀로 만들었고, 이 파일을 OneDrive 저장해서 각자 statuw를 입력하고 관리했습니다.
엑셀은 별도의 시스템을 만들지 않고 바로 사용할 수 있다는 장점이 있었어요. 하지만 실제 운영을 이어가면서 몇 가지 불편함이 생겼습니다.
- 원드라이브 무료버전에 별도의 로그인 아이디 없이 이용해서 가끔 엑셀의 링크가 연결이 안됨
- 모바일에서 파일을 열고 수정하기가 불편
- 자신의 행과 입력할 날짜를 직접 찾아야 함
- 일정 하나를 변경하려고 해도 전체 파일을 열어야 함
- 여러 사람이 동시에 수정하면 데이터가 꼬일 가능성이 있음
- 오늘 팀원들이 어디에서 근무하는지 빠르게 확인하기 어려움
- 사무실에 필요한 인원이 충분한지 별도로 계산해야 함
직출/퇴제를 운영하기 위해 필요한 것은 복잡한 근태관리 시스템은 아닌데, 그렇다고 엑셀만으로는 충분하지도 않고 가끔 불편할때가 있었어요. 그래서 요즘 자신감 붙은 바이브코딩으로, 기존 Excel 운영 방식을 웹 기반의 손쉽게 접근하고 기록할 수 있는 만들어보기로 했습니다. 팀원들이 다음 주 일정을 미리 공유하고, 당일 변경된 일정을 쉽게 수정하며, 팀 전체의 근무 위치를 한눈에 확인할 수 있는 간단한 도구를 만들기로 했습니다.
무엇을 관리할 것인지 먼저 정리했습니다
팀워크 보드에서는 팀이 함께 일하기 위해 필요한 최소한의 정보만 관리하기로 했습니다.
- 누가
- 언제
- 어디에서 근무하는지
- 사무실 근무 인원이 충분한지
하루 일정은 처음에 오전과 오후로 나누어 설계했지만, 실제 사용 흐름을 검토하면서 09~12시, 12~15시, 15~18시의 세 구간으로 세분화했습니다. 오전에는 사무실에서 근무하고 오후에는 고객사를 방문하는 경우도 있지만, 점심시간 전후로 근무 장소가 바뀌거나 여러 일정을 소화하는 경우도 있기 때문입니다.
각 시간대에는 다음과 같은 상태를 선택할 수 있도록 했습니다.
- 사무실
- 고객사
- 외부
- 재택
- 동행
- 휴가
- 기타
고객사나 외부 일정을 선택한 경우에는 장소나 간단한 메모(지역/고객사명)도 함께 입력할 수 있도록 했습니다.
기능보다 먼저 사용 흐름을 설계했습니다
팀워크 보드를 만들면서 가장 중요하게 생각한 것은 기능의 수가 아니라 사용자가 얼마나 빠르게 목적을 달성할 수 있는지였습니다.
목표는 세 가지였습니다.
- 오늘 팀 현황을 5초 안에 파악할 수 있어야 한다.
- 당일 일정 변경을 5초 안에 처리할 수 있어야 한다.
- 다음 주 일정을 부담 없이 미리 입력할 수 있어야 한다.
이 목표를 기준으로 화면을 오늘, 주간, Office로 구분했습니다.
화면1: ‘오늘’
앱에 접속하면 오늘 화면부터 시작합니다. 오늘 화면에서는 다음 내용을 한 번에 확인할 수 있습니다.
- 오늘 팀 전체 일정
- 시간대별 Office Anchor 현황( 사무실 근무하는 선배의 인원 현황)
- 나의 오늘 일정 등록
- 다음 주 일정 입력 여부 및 입력 버튼
팀원 한 명의 일정을 확인하기 위해 표의 행과 열을 찾아갈 필요 없이, 모바일 카드와 상태 배지를 통해 현재 상황을 바로 확인할 수 있도록 구성했습니다. 자신의 일정도 같은 화면에서 선택해 바로 수정할 수 있죠.
화면2: ‘주간’
주간 화면에서는 이번 주와 다음 주 일정을 확인합니다.
노트북에서는 팀원과 요일을 한 번에 비교할 수 있는 표 형태로 보여주고, 모바일에서는 요일을 선택한 뒤 해당 날짜의 팀 현황을 확인하도록 구성했습니다.
작은 스마트폰 화면에 넓은 표를 그대로 넣으면 가로 스크롤이 많아지고 내용을 읽기 어렵기 때문에, 기기별로 정보 표현 방식을 다르게 설계했습니다.
화면3: 다음 주 일정 입력
다음 주 일정은 월요일부터 금요일까지, 하루 세 개의 시간대로 입력합니다.
전체 입력 대상 중 몇 개를 완료했는지 진행률을 보여주고, 같은 상태를 여러 날짜와 시간대에 한 번에 적용할 수 있는 일괄 입력 기능도 추가했습니다.
Office Anchor 기능을 별도로 만들었습니다
이번 팀워크 보드에서 꼭 필요했던 기능 중 하나는 Office Anchor입니다.
직출/퇴제를 운영하더라도 사무실에 일정 인원은 남아 있어야 합니다. 대부분 사무실에 있을 인턴들의 OJT와 케어 그리고 업무 수행에 도움을 주기위해, 선배 구성원이 사무실에 몇 명 있는지를 확인할 필요가 있었어요.
Office Anchor는 시간대별 사무실 근무 선배 인원을 계산하고, 관리자가 정한 권장 인원과 비교해 보여주는 기능입니다.
- 🟢 권장 인원 이상
- 🟠 권장 인원 미만
단순히 사무실 근무자 전체 숫자만 보여주는 것이 아니라, 선배 구성원과 인턴을 구분해 운영 목적에 맞게 계산했습니다.
또한 인원이 부족할 때도 강한 경고나 부정적인 표현을 사용하지 않았습니다. 이 보드는 근태를 감시하거나 출근을 강제하기 위한 도구가 아니기 때문입니다. 현재 상황을 투명하게 공유하고, 필요한 사람이 자율적으로 일정을 조정할 수 있도록 정보를 제공하는 데 목적을 두었습니다.
모바일 사용성을 기준으로 화면을 만들었습니다
기존 Excel 방식에서 가장 큰 불편은 모바일 입력이었습니다.
팀원들은 사무실이 아닌 고객사나 외부에서도 일정을 확인하고 변경해야 합니다. 따라서 팀워크 보드는 모바일 화면을 우선으로 설계했습니다.
- 화면 하단에
오늘,주간,Office메뉴 배치 - 버튼의 터치 영역을 충분히 크게 구성
- 가로 스크롤 최소화
- 상태를 색상만이 아니라 아이콘과 텍스트로 함께 표시
- 자주 사용하는 기능을 화면 상단이나 첫 화면에 배치
- 스마트폰 홈 화면에 추가하면 앱처럼 실행 가능
노트북에서는 화면이 넓다는 장점을 활용해 왼쪽 메뉴와 주간 표를 제공합니다. 같은 데이터를 사용하지만, 모바일에서는 빠른 확인과 입력에 집중하고 노트북에서는 팀 전체 비교에 집중하도록 화면을 구분했습니다.
별도의 설치가 필요 없는 웹앱으로 구현했습니다
팀워크 보드는 HTML, CSS, JavaScript를 기반으로 만든 웹앱입니다.
프론트엔드는 별도의 무거운 프레임워크 없이 구성했고, 데이터 저장과 인증, 실시간 동기화에는 Supabase를 사용하도록 설계했습니다.
데이터는 크게 다음과 같이 구분했습니다.
- 구성원 정보
- 날짜와 시간대별 일정
- 팀명과 Office Anchor 기준 등 운영 설정
- 일정 변경 이력
일정 데이터는 구성원 + 날짜 + 시간대 조합으로 하나만 존재하도록 구성했습니다. 계획 일정과 실제 일정을 따로 쌓지 않고, 사용자가 변경한 최신 상태를 팀원에게 보여줍니다.
대신 변경 전후 내용은 별도의 변경 이력으로 기록해 필요한 경우 관리자가 확인할 수 있도록 했습니다.
여러 사람이 같은 시간에 보드를 사용하더라도 변경된 일정이 다른 사용자의 화면에 반영될 수 있도록 실시간 동기화 구조도 포함했습니다.
일반 사용자와 관리자 기능을 분리했습니다
일반 사용자는 복잡한 회원가입이나 로그인 없이 자신의 이름을 선택해 사용할 수 있도록 했습니다. 한 번 선택한 사용자는 브라우저에 저장되기 때문에 다음 접속부터는 바로 자신의 화면으로 이동합니다. 다른 사람의 화면을 수정하고자 할 때는 사용자 변경 기능을 이용할 수 있습니다.
관리 기능은 일반 화면과 분리했습니다. 관리자는 별도 화면에서 다음 내용을 관리할 수 있습니다.
- 팀원 추가와 수정
- 구성원 활성·비활성 처리
- 선배와 인턴 구분
- 팀원 표시 순서
- 팀명
- Office Anchor 권장 인원
- 일정 상태값
- 공휴일
- 일정 변경 이력
퇴사하거나 팀을 이동한 구성원은 데이터를 완전히 삭제하지 않고 비활성 상태로 처리합니다. 과거 일정과 변경 이력을 유지하기 위해서입니다.
개발 과정에서 실제 사용성을 계속 수정했습니다
처음 설계한 화면은 그대로 사용할 수 없었어요.. 기능을 구현한 뒤 모바일과 노트북 화면에서 직접 확인하면서 여러 부분을 수정했습니다.
- 하루 일정을 두 구간에서 세 구간으로 세분화
- 모바일 주간 화면에 요일뿐 아니라 실제 날짜도 표시
- 하단 메뉴의 터치 영역 확대
- 오늘 화면의 팀 현황을 간결한 상태 배지 형태로 변경
- 긴 메모가 주간 표의 영역을 벗어나지 않도록 개선
- Office Anchor 정보를 시간대 옆에서 바로 확인할 수 있도록 재배치
- 화면을 다시 열면 항상 오늘 화면부터 시작하도록 변경
- 일요일 접속 시 주차가 잘못 계산되는 날짜 오류 수정
- 재택근무 상태 명칭과 화면 문구 정리
- 홈 화면에서 사용할 전용 아이콘 추가
이 과정에서 느낀 점은 함께 일하는 동료를 위한 업무용 앱은 기능을 구현하는 것만으로 완성되지 않고, 사용자가 실제로 어느 화면을 먼저 보는지, 어떤 버튼을 자주 누르는지, 모바일에서 글자가 잘리는지, 날짜가 기대한 주차로 표시되는지 같은 작은 사용 편의성 요소 하나하나를 신경써야 한다는 겁니다.
이유는 바쁜 본 업무를 위해 시간과 에너지를 쏟아부어야 하는데, 불편하고 복잡한 도구를 익혀가며 사용하게 하면 오히려 피해를 주는 꼴이 되버리니깐요.. 회사에서 가장 가까운 동료가 내가 만든 도구로 인해 계속 불편해하고, 시간낭비를 하게 하면 절대 안되니, 프로토타입을 만들고도 수정에 수정을 거듭 했습니다.
엑셀을 웹으로 옮긴 것이 아니라 업무 흐름을 바꿨습니다
이번 작업의 핵심은 팀장님이 만든 1차 엑셀 파일을 웹 화면으로 그대로 옮긴 것이 아닙니다. 기존 업무에서 정말 필요한 정보가 무엇인지 다시 정의하고, 입력과 확인에 필요한 행동을 줄이는 과정이었습니다.
기존 방식은 사람이 표를 찾아 입력하고, 다시 사람이 표를 읽어 상황을 판단해야 했습니다. 팀워크 보드는 구성원이 최소한의 정보만 입력하면 다음 내용을 자동으로 정리합니다.
- 오늘 누가 어디에 있는지
- 시간대별로 어떤 일정이 있는지
- 사무실 근무 인원이 충분한지
- 다음 주 일정이 어느 정도 입력되었는지
즉, 사람에게 의존하던 확인과 계산 과정을 데이터 구조와 화면으로 바꾼 것입니다.
앞으로 확인하고 개선할 부분
현재 팀워크 보드는 핵심 화면과 기능 구현을 마친 상태입니다. 다만 실제 운영 환경에서 추가로 확인하고 개선할 부분도 남아 있을 겁니다. 우리가 사용하면서 지속적으로 불편 사항과 개선 사항을 알려주면, 나는 즐겁게 수정하고 커밋/푸시 할겁니다. 업무용 앱은 한 번 만들어 끝나는 결과물이라기보다, 실제 사용하는 과정에서 계속 다듬어지는 운영 도구에 가까우니깐요.
단순히 일정을 많이 기록하는 시스템이 아니라, 팀이 서로의 상황을 빠르게 이해하고 자율적으로 협업할 수 있도록 돕는 도구로 발전시키려 합니다.