본인
UI/UX·유저플로우·와이어프레임 기획, 도착 안내와 경고 배지 제안. 정해진 처리 규칙을 화면에 연결하고, 빈 슬롯 비율에 따른 진행률 계산·표시 코드를 직접 구현했습니다. 실제 카트로 목록 갱신을 확인했습니다.
쫄래쫄래
구역에 도착한 순간, 사서에게 지금 정리할 책만 보여주기.
도서관에서 사서를 따라다니며 책 정리를 돕는 자율주행 북카트 서비스입니다. 사서가 태블릿의 웹사이트로 관제 화면을 보는 상황을 가정하고 UI와 유저플로우·와이어프레임을 기획했습니다. 기존 불빛 안내에 도서 정보를 더해, 현재 구역에서 해야 할 작업을 확인하기 쉽게 하고자 했습니다.
도착한 구역의 책만 안내하고, 카트에서 꺼낸 책은 목록에서 사라지도록 구성했습니다.
홈 대시보드
시연 영상
담당 역할과 기여
팀 협의
화면 크기에 따라 위치가 어긋나는 문제를 확인한 뒤, 지도 기준 백분율 좌표로 변경하는 방향을 함께 정했습니다.
AI 활용
재연결 시 이전 소켓의 늦은 이벤트를 차단하는 로직은 AI에 해결을 요청했습니다.
기획적 고민과 의사결정
처음 방식
카트의 불빛으로 작업 대상 안내
선택한 방향
해당 구역의 책 정보와 남은 목록을 화면으로 함께 안내
사서가 현재 해야 할 작업을 한눈에 보고, 책을 꺼낸 뒤에는 남은 작업을 이어서 확인할 수 있도록 했습니다.
구역 도착을 정보 제공 시점으로 정했습니다.
상황·판단
카트에는 이미 불빛 안내가 있었습니다. 화면에서도 책 정보를 보여주면 사서가 작업 대상을 한눈에 보기 쉽겠다고 판단했습니다.
나의 행동
구역에 도착하면 그 구역에 꽂아야 할 책만 팝업으로 보여주자고 직접 제안했습니다.
확인한 점
도착 이벤트와 해당 구역의 도서 안내를 연결했습니다. 팝업은 기존 불빛 안내를 보완하는 역할입니다.
현재 구역에서 정리할 책을 안내하는 구현 화면입니다. 도서 제거에 따른 목록 갱신은 실제 카트로 직접 확인했습니다.
이미지를 누르면 크게 볼 수 있습니다.함께 고민한 결정
한 권씩 꺼내는 행동과 목록 갱신을 맞췄습니다.
사서는 책을 한꺼번에 모두 꽂지 않고 한 권씩 꺼낸다고 생각했습니다.
책 제거·재적재 처리는 정해진 규칙을 화면에 연결했습니다. 카트에서 제거한 책은 팝업 목록에서 사라지도록 구성하고, 대시보드에는 전체 슬롯 중 빈 슬롯의 비율을 계산해 표시하는 코드를 직접 구현했습니다.
실제 카트에서 책을 꺼내며 해당 항목만 사라지고 나머지 목록은 유지되는지 직접 확인했습니다.
팝업을 닫아도 연결 이상을 알 수 있게 했습니다.
연결 끊김 팝업을 실수로 닫으면 오류 상태를 놓칠 수 있다고 생각했습니다.
홈 화면에 연결 이상 경고 배지가 남도록 직접 제안했습니다.
구현 후 팝업을 닫아도 배지가 유지되는지 직접 확인했습니다.
사용자 흐름
- 01구역 도착
- 02해당 구역 도서 안내
- 03카트에서 책 제거
- 04남은 목록 실시간 갱신
결과와 검증
구역 도착부터 도서 제거, 남은 목록 갱신으로 이어지는 안내 흐름을 구성했습니다.
직접 확인
동작 확인: 실제 카트에서 책을 꺼낼 때 해당 항목만 사라지고 남은 목록이 유지되는지 확인했습니다. 연결 끊김 팝업을 닫은 뒤 경고 배지가 유지되는지도 확인했습니다.
검증 범위
태블릿 웹 사용을 가정해 설계했으며 실제 태블릿 검증이나 사서 대상 평가는 하지 않았습니다. 다른 구역의 책을 꺼낼 때 별도 경고는 없습니다. 화면의 완료율은 빈 슬롯 비율이며, 실제 서가에 올바르게 정리됐는지를 검증하는 지표는 아닙니다. 작업 시간·오류 감소는 측정하지 않았습니다.
실시간 데이터의 종류뿐 아니라 사용자가 행동하는 시점과 순서에 맞춰 정보를 구성했습니다.
구현을 이해하는 기획
React · TypeScript
관제 화면과 상태별 UI 구성
WebSocket · API
도서·카트 상태의 실시간 연동