만들고 나서가 진짜 시작이었다 — 렌탈 시스템 개선기와 서버 이전 계획

렌탈 시스템 개선의 시작

시스템을 만들자마자 버그가 터지고, 기능이 부족한 걸 깨달았다. 로그인 시스템을 붙이고, 대시보드를 인터랙티브하게 바꾸고, 드롭다운 버그를 잡는 과정. 그리고 앞으로 Mac mini 서버로 데이터를 옮겨야 하는 이유까지.

문제 해결 과정

첫 번째 글에서 렌탈 관리 시스템을 만들었다고 했는데, 실제로 쓰려고 하니까 바로 문제가 쏟아졌다.

제일 큰 문제는 이거였다:

“이 페이지, 나 말고 다른 사람도 써야 하는데?”

직원이 출고 처리를 해야 할 때 내 컴퓨터를 빌려야 한다. 각자 계정이 있어야 하고, 관리자만 할 수 있는 것과 직원이 할 수 있는 것이 달라야 한다. 그리고 직원이 실수로 상품을 삭제하면 안 된다.

두 번째 문제:

“대시보드 숫자를 보고 나서, 클릭하면 그 목록만 나와야 하지 않나?”

숫자 카드(재고 7 / 렌탈중 3 / 수리 2)를 만들어뒀는데, 그냥 보여주기만 할 뿐이었다. “렌탈중 3”을 누르면 렌탈중인 장비 3개만 보여줘야 하는데, 아무 반응이 없었다.

세 번째 문제:

“대분류 고르고 소분류 누르면 목록이 사라진다”

이건 버그였다. 해킨토시를 고른 뒤 소분류를 클릭하면 목록이 비어버리는 현상. 처음엔 내가 뭔가 잘못 했나 싶었는데, 반복해서 재현됐다.

문제 해결 방법

로그인 및 권한 시스템 추가

처음 Claude Code한테 이렇게 말했다:

Open optionsauto

로그인 기능을 추가해줘.
- 이름, 직함, 전화번호, 아이디, 비밀번호로 가입
- 관리자가 가입 승인해야 접속 가능
- 기본 관리자: admin / =====****
- 상품 삭제, 사이트 삭제는 관리자만 가능
- 직원은 입출고 처리와 상품 조회만
복사

그랬더니 로그인 화면부터 가입 승인 관리까지 한 번에 만들어줬다. 내가 따로 배운 게 없는데 비밀번호가 “해시”(암호화)로 저장된다고 했다. 나중에 물어보니 SHA-256이라는 방식으로 처리하는 거라 원본 비밀번호는 어디에도 저장이 안 된다고.

결과:

• 관리자로 들어가면 상품 행을 눌러서 수정·삭제 가능

• 직원으로 들어가면 같은 행을 눌러도 읽기 전용 보기만 가능

• 가입 신청 목록이 관리자 화면에 표시됨

버튼 반응 문제 해결

로그인 기능을 추가하면서 이상한 점을 발견했다. 분류 추가 버튼, 삭제 버튼들이 전혀 동작하지 않았다. 눌러도 아무 일이 없었다.

Claude Code가 원인을 찾아보더니 이렇게 설명해줬다:

“이 페이지는 로컬 미리보기 환경에서 실행 중이라 prompt()와 confirm() 같은 브라우저 기본 팝업이 막혀 있어요. 코드는 맞는데, 팝업이 뜨지 않아서 아무것도 안 된 것처럼 보이는 거예요.”

쉽게 말하면: 원래 “상품명을 입력하세요” 같은 입력 창이 브라우저 기본 팝업으로 뜨게 되어 있었는데, 그게 차단된 것. 해결책은 팝업을 직접 만드는 것이었다.

그래서 페이지 안에 직접 그린 대화상자(uiAsk, uiConfirm, toast)로 전부 교체했다. 이 하나의 변경으로 먹통이었던 기능들이 전부 살아났다.

배운 점: 기능이 안 된다고 내가 뭔가 잘못한 게 아닐 수 있다. 환경 문제일 수도 있으니, 오류 메시지를 그대로 Claude Code에 주면 원인을 찾아준다.

드롭다운 버그 수정

이 버그의 원인도 Claude Code가 찾아줬다.

“이건 <input list>라는 자동완성 방식을 쓰고 있어서 그래요. 한 번 값을 고르면, 그 값과 관련 없는 항목들이 걸러져서 다시 열었을 때 목록이 비어 보이는 거예요. <select> 방식으로 바꾸면 몇 번을 다시 열어도 전체 목록이 유지돼요.”

바꿨더니 바로 해결됐다. 덤으로 소분류가 대분류에 맞게 자동으로 좁혀지는 기능도 생겼다. 해킨토시를 고르면 소분류로 ‘워크스테이션’만 나오는 식으로.

대시보드 인터랙티브 개선

이건 요청하자마자 됐다:

Open optionsauto

재고현황 숫자 카드를 클릭하면 해당 상태 장비만 목록에 나오게 해줘.
눌린 카드에 파란 테두리 표시, 다시 누르면 전체로 돌아가게.
복사

추가로 필터 바도 만들었다:

• 대분류 / 소분류 — 특정 카테고리만 보기

• 상태 — 재고 / 렌탈중 / 데모중 / 수리·문제

• 워런티 — 유효 / 90일 이내 임박 / 만료

• 나가 있는 사이트 — 특정 현장 장비만 보기

• 정렬 — 상품코드 / 상품명 / 위치 / 워런티 임박순 / 상태 / 사이트

목록 위에 “장비 목록 — 2개 (전체 12개 중)” 같이 필터 결과 수도 표시된다.

상품명 자동 생성 기능

상품을 등록할 때 이름을 직접 입력하지 않아도 되게 됐다.

대분류(해킨토시) + 소분류(워크스테이션) + CPU + 메모리 + 시스템디스크를 조합해서 자동으로 만들어준다:

Open optionsauto

✏️ 자동 생성될 이름: 해킨토시 워크스테이션 i9-14900K 256GB 8TB NVMe
복사

이름 칸을 비워두면 이걸 그대로 쓴다. 대분류만 골라도 저장이 된다.

서버 이전 계획

해결책은 데이터를 서버에 올려두는 것이다.

사내에 Mac mini를 한 대 두고, 거기에 서버를 돌리면 같은 와이파이 안에서는 어느 기기에서든 접속해서 같은 데이터를 보고 입출고 처리를 할 수 있다.

Claude Code와 단계를 정했다:

Phase 1 — 지금 컴퓨터에서 서버 먼저 만들기

• Node.js + Express로 API 서버 만들기

• SQLite 데이터베이스로 교체 (localStorage 대신)

• 기존 HTML 페이지가 서버와 통신하도록 수정

• 지금 localStorage에 있는 데이터 그대로 옮기기

Phase 2 — Mac mini 도착하면 이전

• 만들어둔 서버 프로그램을 Mac mini에 복사

• Mac mini에서 서버 실행

• 직원들 기기에서 Mac mini 주소로 접속

Phase 3 — 필요하면 외부 접속 추가

• 현장에서도 접속해야 한다면 그때 검토

Phase 1이 완성되면 지금 페이지와 동시에 운영하면서 비교 테스트를 할 수 있다. 재고 관리가 멈추지 않게 순차적으로 전환하는 방식이다.

실제 사용 후 요구사항 변화

처음 만들 때는 몰랐던 것들이 써보면서 나왔다:

이게 소프트웨어 개발에서 “요구사항은 쓰면서 발견된다”고 하는 이유인 것 같다. 처음부터 완벽하게 만들려 하지 말고, 일단 만들고 써봐야 진짜 문제가 뭔지 나온다.

Claude Code 덕에 이런 변경들을 직접 코드를 못 짜는 상태에서도 계속 반영할 수 있었던 게 핵심이었다.

도움 받은 자료

• 첫 번째 글 — 처음 시스템을 만든 과정

• Node.js, Express, SQLite — 서버 이전에 쓰게 될 도구들 (다음 글에서 다룰 예정)