<aside>

부모님은 10년 가까이 운영하시는 교복 매장에서 직접 일해왔습니다. 매년 입학 시즌이 되면 매장은 수십 명의 학생과 학부모로 가득 찼고, 직원들은 종이 대장을 넘겨가며 학생을 호명했습니다. 놓치는 순서, 반복되는 수기 입력, 계절마다 쌓이는 오류. 이 불편함이 너무 익숙해서 오히려 당연하게 여겨졌던 것들을 개선하고 싶었습니다.

시각디자인 전공 중 UI/UX에 빠졌고, 앱 디자이너로 1년 근무하며 실무 감각을 익혔습니다. 이 프로젝트는 그 경험을 모두 꺼내서 기획, 디자인, 개발까지 혼자 담당한 첫 풀사이클 작업입니다.

2027년 입학 시즌에 실제 매장에서 사용하는 것을 목표로, AI를 활용해 프로토타입을 빠르게 제작하고 있습니다.

</aside>

1. 프로젝트 개요

프론트엔드 이유
React 19 + Vite 7 CRA 대비 빌드 속도, React 19의 안정적 기능 활용
TanStack Query 서버 상태와 클라이언트 상태를 분리. 재고/주문처럼 자주 바뀌는 서버 데이터를 캐싱·리페치 정책으로 관리
Zustand Redux 대비 보일러플레이트 최소화. 등록 폼처럼 새로고침에도 살아남아야 하는 상태만 선택적으로 localStorage 영속화

2. 배경 & 문제 정의

교복 매장은 신입생/전학생이 몰리는 성수기에 다음 흐름이 반복됩니다.

image.png

  1. 학생/학부모가 매장에서 순서를 기다림 (종이 번호표/구두 확인)
  2. 근로자는 줄자로 허리 치수를 재고, 허리 기반으로 상의 사이즈는 감으로 결정
  3. 학생은 옷을 입어보고, 교복 사이즈와 구입 개수를 확정하여 수기로 작성
  4. 한 학교의 측정이 완료 되면 기존에 수기로 작성한 정보는 엑셀로 옮겨 데이터화
  5. 공장 주문 이후, 품목별 상황 업데이트는 재고/주문 상태를 나중에 엑셀에서 다시 확인

→ 병목은 대기와 기록 두 가지였고, 이를 자동화하는것이 프로젝트의 목표입니다.

3. 클라이언트 구조

빠른 개발을 위해 클라이언트는 SPA 방식을 채택하였습니다.

Figma MCP 및 Claude Code를 개발 워크플로우에 도입하여 구현 초기의 반복적인 UI 퍼블리싱 시간을 단축하였습니다.

3-1. 학생/학부모 /register → 배포

<aside>

예약시간에 맞춰 매장에 방문한 학생은 자신의 정보와 함께 매장 도착 등록을 해야한다.

</aside>

3-2. 직원 /staff → 배포

<aside>

직원 계정은 관리자의 승인 후 정식 활성화 된다.

도착 등록 시간 순서대로 학생의 교복 사이즈, 구입개수 등 매장에서 취급하는 모든것을 안내 및 확정한다.

직원 한 명은 여러 학생을 응대할 수 있으며, 학생 한 명은 반드시 한 명의 직원에게만 배정된다

</aside>