Web · Ops
SHOWNIVERSE OS
업무 요청과 프로젝트 진행, 고객·서류·근무 일정을 함께 관리하는 팀 업무 시스템.
서비스와 화면 설계
쇼니버스 재직 중 제작한 프로젝트입니다.
개인의 할 일에서 팀 프로젝트와 고객 업무로 이어지는 구조입니다. 업무에는 담당자와 기한·진행률을 두고, 프로젝트와 연결합니다. 고객 관리에서 접촉 이력을 살피고 서류를 준비하며, 근무·연차 일정은 팀의 가용 시간을 확인하는 화면으로 분리했습니다.
오늘 할 일과 다가오는 마감
개인 할 일과 받은 요청을 왼쪽에, 팀의 마감 항목을 오른쪽에 나누었습니다. 아래 달력까지 이어져 오늘의 업무와 날짜를 함께 살핍니다.
업무 목록과 주간 일정
업무별 진행률과 관련 프로젝트를 행으로 표시하고, 아래에는 일주일의 작업 기간을 가로 막대로 펼쳤습니다. 요청받은 일은 별도 영역에서 확인합니다.
프로젝트별 상태와 담당자
프로젝트 이름 오른쪽에 상태와 담당자 표시를 모아 짧은 행으로 정리했습니다. 상단의 분류와 담당자 필터로 확인할 항목을 좁힙니다.
카드로 비교하는 고객 단계
고객 카드마다 담당자와 연락 정보, 진행 상태를 묶고 색과 막대로 차이를 보여줍니다. 목록 위에는 전체 현황과 단계별 필터를 두었습니다.
제안서와 계약서의 시작 화면
위쪽에서 제안서 또는 계약서를 선택하고, 아래에서 문서 상태별로 목록을 걸러 봅니다. 이 화면은 문서가 아직 없는 빈 목록 상태입니다.
휴가 종류와 날짜 입력
근무 화면 위에 작은 신청 창을 열어 대상자와 휴가 종류, 시작일·종료일을 입력합니다. 배경을 흐리게 처리해 현재 작성 중인 신청서에 집중하도록 했습니다.
개발 구조 자세히 보기
업무·프로젝트·고객의 연결
할 일을 독립된 메모로 두지 않고 관련 프로젝트와 고객에 연결합니다. 목록마다 같은 업무 맥락을 이어서 확인할 수 있습니다.
요청과 담당 업무의 구분
다른 사람에게 요청한 일과 그 사람이 수락한 일을 나눠, 누가 맡았는지를 진행 상태로 확인하도록 구성했습니다.
기본형 데모의 확인 범위
업무·프로젝트·고객·서류·근무 화면과 입력 흐름을 확인했습니다. 실제 조직의 운영 자료와 서버 저장 결과는 포함하지 않았습니다.
사용 기술
- 언어
- JavaScript · TypeScript · HTML · CSS
- 주요 기술
- Electron · Node.js · Fastify · Vite
- 데이터·연동
- PostgreSQL · Prisma · pg-boss · Google OIDC