사내 업무 인트라넷 구축
보험 분야 공공기관 직원들이 내부 업무를 처리하는 사내 인트라넷을 구축했습니다. 공공기관 내부 시스템은 입력하고, 조회하고, 화면을 옮기는 기본 동작이 흔들리면 그 위의 업무가 함께 막힙니다. 인트라넷 화면과 업무 기능, 직원이 따라가는 입력 흐름을 구현했고, 웹 브라우저 안에서 데스크톱 프로그램에 가까운 조작이 되도록 만들었습니다.
웹 브라우저 안에서 데스크톱 프로그램처럼 쓰는 인트라넷
사내 인트라넷은 직원들이 내부 업무를 처리하는 시스템으로, 웹 브라우저에서 엽니다. 인트라넷 화면과 업무 기능을 브라우저 안에서 데스크톱 프로그램에 가까운 조작으로 쓰도록 구현했습니다. 브라우저만 있으면 쓰는 시스템이라, 직원 자리마다 프로그램을 따로 설치할 필요가 없습니다.
기능이 늘어도 길을 잃지 않게 정리한 업무 화면
사내 업무 화면은 기능이 하나씩 붙을수록 어디서 무엇을 하는지 알기 어려워집니다. 직원들이 내부 업무를 처리하는 인트라넷의 화면 구조를 잡고, 업무 기능이 복잡해져도 흐름을 이해하기 쉽도록 화면을 정리했습니다. 기능이 복잡해지는 것은 막을 수 없어도, 직원이 흐름을 놓치지 않게 하는 것은 화면이 맡을 몫입니다.
화면을 따라가며 업무를 마치는 입력 흐름
사내 인트라넷에서 직원이 업무 내용을 적어 넣는 입력 흐름을 구성했습니다. 화면 구조와 입력 순서를 함께 정해, 직원이 화면을 따라가며 내부 업무를 처리하도록 했습니다. 입력 칸의 순서가 업무를 처리하는 순서와 어긋나면, 직원은 화면을 위아래로 오가며 빈칸을 찾게 됩니다.
입력 · 조회 · 화면 전환에서 흔들리지 않는 동작
공공기관 내부 시스템은 입력, 조회, 화면 전환이 안정적으로 이뤄지는 것이 무엇보다 중요합니다. 사내 인트라넷의 기본 화면 부품과 사용자 동작 처리를 하나하나 세심하게 다뤘습니다. 이후 공공기관과 기업의 업무 시스템 화면을 만드는 바탕이 된 작업입니다.
이 작업의 포인트
웹 브라우저에서 데스크톱 프로그램처럼 쓰는 사내 인트라넷
업무가 복잡해져도 따라가기 쉬운 화면과 입력 흐름
입력 · 조회 · 화면 전환의 안정적인 동작
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…