사내 웹 서비스 · 전 직원용
지점 업무 포털
여러 지점의 직원이 게시물 인쇄, 비품 신청, 제작 의뢰를 본부에 묻지 않고 직접 끝내는 셀프서비스 포털.
- 쓰는 사람
- 각 지점과 본부의 전 직원
- 맡은 일
- 기획 · 설계 · 구현 · 운영
- 만드는 것
- 인쇄물 · 물품 신청 · 제작 의뢰 · 안내 정보
- 기술
- Next.js · 사내 통합 로그인 · 스프레드시트 원장 · 브라우저 인쇄
문제
안내문 한 장에도 원본 파일과 기다림이 필요했다
여러 지점에서 일하는 직원들은 휴무 안내, 시간표, 시설 안내 같은 게시물을 수시로 붙입니다. 지금까지는 지점마다 프레젠테이션 원본 파일을 열어 직접 고쳐 만들었습니다. 원본을 열어 보니 공식 색과 비슷하지만 다른 색이 여럿 섞여 있었고, 대체 서체도 남아 있었습니다. 문구도 지점마다 필요 이상으로 길어지는 경향이 있었습니다.
지점 직원
필요한 게시물이 생김
외부 폼으로 의뢰
요청사항 칸이 따로 없음
본부 대기열
시안까지 영업일 2일 이상
시안 왕복
인쇄
비품을 어디서 얼마에 사는지는 공유 폴더와 시트에 흩어져 있었고, 두 곳 모두 링크만 있으면 누구나 고칠 수 있는 상태였습니다. 직원이 스스로 끝낼 수 있는 일과 본부가 해야 하는 일이 섞여 있어서, 쉬운 일도 기다려야 했습니다.
기획
쉬운 일은 그 자리에서 끝내고, 어려운 일만 본부로
게시물을 만드는 길을 난이도에 따라 세 단으로 나눴습니다. 대부분은 첫 단에서 끝나고, 정말 새로 디자인해야 하는 것만 본부로 올라옵니다.
웹 도구
입력하고 바로 인쇄
템플릿 직접 편집
원본 파일 제공
본부 제작 의뢰
새 디자인이 필요할 때만
- 브라우저에서 바로 인쇄하고, A4 한 쪽을 보장한다
- 빈칸을 채우면 옆에서 완성본이 그려지고 곧바로 인쇄합니다. 사람이 늘어 표가 길어지면 행 높이를 계산해 한 쪽에 맞추고, 그래도 넘치면 인쇄를 막습니다. 입력값은 저장하지도 서버로 보내지도 않습니다.
- 글자 수 상한은 편집 규칙이다
- 칸마다 글자 수 상한과 권장 줄 수를 둡니다. 레이아웃을 지키려는 장치이면서, 문구가 길어지는 습관을 도구가 먼저 막는 장치입니다.
- 설명이 필요하면 자리가 틀린 것이다
- 공문과 명함은 처음에 인쇄 도구 목록에 있었는데, '이건 인쇄용이 아닙니다'라는 한 줄을 달아야 했습니다. 설명이 필요하다는 사실을 배치가 틀렸다는 신호로 보고 자료실로 옮겼습니다. 수량도 직접 적게 하지 않고 단위가 붙은 목록에서 고르게 했습니다.
- 로그인은 회사 메일로 받은 인증 코드 하나
- 비밀번호도, 관리자 승인도, 사용자 데이터베이스도 없습니다. 회사 메일 주소로 인증 코드를 받으면 바로 씁니다. 신청 폼의 이름과 메일은 로그인 정보로 채워집니다.
- 이용량은 '요청'이 아니라 '열람'으로 센다
- 화면이 브라우저에 실제로 그려진 뒤에만 신호를 보내고, 실패해도 조용히 넘깁니다. 통계 때문에 직원의 화면이 느려지거나 실패하는 일은 없어야 하기 때문입니다.
결과물
질문으로 들어와서, 그 자리에서 끝나는 포털
- 웹 인쇄 도구
- 18
- 도구 묶음
- 7
- 인쇄 도구의 결과 분량
- A4 1쪽
- 인쇄 도구가 저장하는 입력값
- 0
웹 인쇄 도구 18종, 7개 묶음
- 휴무·운영 변경
- 근무 시간표
- 시설 안내
- 고정 안내문
- 직접 작성
- 고객 배부 안내문
- 발급 서식
쓰이면서 고친 것
- 미리 불러온 링크가 방문으로 세졌다
- 처음에는 서버에서 방문을 셌는데, 프레임워크가 링크를 미리 받아 두는 요청까지 세어 홈을 한 번 새로 고칠 때마다 25건이 쌓였습니다. 오염된 기록을 지우고 브라우저에서 세는 방식으로 바꿨습니다. 그 뒤로는 '누르지 않은 화면은 0건'인지를 같이 확인합니다.
- '5'라고 적었더니 5부가 접수됐다
- 5박스라는 뜻이었습니다. 수량 직접 입력을 없애고 '100부'처럼 단위가 붙은 목록으로 바꿨습니다. 다만 '1박스 = 100부'라고 적지는 않았습니다. 품목마다 한 상자에 든 수량이 달라서, 그 문구가 다음 오해가 될 수 있었기 때문입니다.
- '없음'이라고 인쇄된 비밀번호
- 무선 인터넷 안내문에서 비밀번호 칸을 비우면 흰 칸에 '없음'이 찍혔습니다. 흰 칸은 '적힌 값을 그대로 입력하라'는 뜻으로 읽혀서, 비밀번호가 '없음'인 것처럼 보였습니다. 칸을 없애고 '비밀번호 없이 바로 연결됩니다'라는 문장으로 바꿨습니다.
- 인쇄 여백을 바꾸면 두 쪽으로 갈라졌다
- 인쇄 대화상자에서 여백을 기본값과 다르게 고르면 브라우저가 페이지의 여백 지정을 무시했습니다. 대화상자에서 여백을 바꿔도 인쇄 가능한 영역에 맞춰 줄이도록 고쳤습니다.
회사와 업종, 사람과 브랜드는 밝히지 않았습니다. 화면은 실제 캡처가 아니라 구조를 다시 그린 것이라 문구와 배치가 실제와 조금 다릅니다.