소개
시도하고자 했던 것과 그 이유를 알려주세요.
이번에는 ChatGPT를 단순히 질문하거나 문서를 작성하는 용도가 아니라, 실제로 사용할 수 있는 웹페이지를 만드는 데 활용해봤습니다.
만들고자 했던 것은 재고, 구매, 입고, 출고 내역을 한곳에서 관리할 수 있는 간단한 재고관리 시스템입니다.
기존에는 이런 데이터를 엑셀로 관리할 수 있지만, 품목이 많아질수록 현재 재고를 빠르게 확인하거나 특정 품목을 찾는 과정이 번거로워질 수 있다고 생각했습니다.
그래서 다음과 같은 기능을 가진 웹페이지를 직접 만들어보기로 했습니다.
전체 재고 현황을 보여주는 대시보드
품목 등록
현재 재고 및 최소 재고 관리
품목 검색과 필터
품목 상세조회, 수정, 삭제
입고 및 출고 기록
구매 내역 관리
구매금액 자동 계산
구매 후 입고 처리 시 실제 재고 자동 반영
재고 부족 여부 자동 계산
개발 경험이 많지 않기 때문에 처음부터 완성된 시스템을 만들어달라고 요청하기보다는, 기능을 한 단계씩 추가하면서 직접 실행해보고 다음 기능을 붙이는 방식으로 진행했습니다.
한국 앱 스크린샷
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
이번 작업에서는 크게 세 가지를 사용했습니다.
ChatGPT
화면 구조 설계, HTML, CSS, JavaScript 코드 작성, 오류 원인 확인, 기능 확장에 활용했습니다.
Visual Studio Code
ChatGPT가 만들어준 코드를 직접 붙여넣고 수정하는 용도로 사용했습니다.
웹 브라우저
실제 화면을 실행하고 기능이 정상적으로 작동하는지 테스트했습니다.
별도의 서버나 데이터베이스는 아직 사용하지 않고, 브라우저의 localStorage를 이용해 데이터를 저장했습니다.
먼저 웹페이지의 기본 구조를 만들었습니다
처음에는 다음과 같은 메뉴가 있는 형태로 시작했습니다.
대시보드
전체 재고
구매 내역
입출고 내역
품목 등록HTML에서는 각 페이지가 들어갈 공간을 만들고, CSS로 사이드바와 표, 카드, 버튼 등의 디자인을 만들었습니다.
JavaScript에서는 왼쪽 메뉴를 클릭했을 때 해당 화면만 나타나도록 만들었습니다.
처음에는 HTML 안에 품목 데이터를 직접 작성할 수도 있다고 생각했지만, 그렇게 하면 품목을 추가할 때마다 HTML 코드를 직접 수정해야 했습니다.
그래서 구조를 변경했습니다.
HTML
화면이 표시될 자리만 생성
↓
JavaScript
저장된 데이터를 읽음
↓
JavaScript
품목 개수만큼 표의 행을 자동 생성
↓
브라우저
사용자에게 목록으로 표시이 구조로 변경하면서 품목을 추가해도 HTML 파일 자체를 수정할 필요가 없어졌습니다.
이렇게 진행하니 품목 등록 화면에서는 다음 정보를 입력하도록 만들었습니다.
품목명
분류
보관 위치
현재 수량
최소 수량
구매일
입고일등록 버튼을 누르면 JavaScript에서 새로운 품목 데이터를 생성합니다.
관리번호는 사용자가 직접 입력하지 않고 자동으로 만들어지도록 했습니다.
예를 들어 기존 데이터가 아래와 같다면,
INV-001
INV-002
INV-003INV-004새로운 품목은 자동으로 추가가 되도록 만들었습니다.
처음에는 품목을 추가한 뒤 페이지를 새로고침하면 등록한 내용이 사라졌습니다.
이를 해결하기 위해 localStorage를 사용했습니다.
데이터 흐름은 다음과 같이 구성했습니다.
품목 등록
↓
JavaScript 배열에 추가
↓
localStorage에 저장
↓
페이지 새로고침
↓
localStorage 데이터 불러오기
↓
재고 목록 다시 생성이 기능을 추가한 이후부터는 브라우저를 껐다가 다시 열어도 테스트했던 재고 데이터가 유지됐습니다.
그리고 ! 제일중요한 처음에는 현재 재고 숫자만 수정할 수 있도록 만들었습니다.
하지만 이렇게 하면 나중에 수량이 왜 변경됐는지 확인하기 어려웠습니다.
그래서 별도의 입출고 기능을 만들었습니다.
예를 들어 현재 재고가 10개인 상태에서 5개가 입고되면,
입고 전 재고 : 10
입고 수량 : +5
입고 후 재고 : 15로 변경됩니다.
동시에 입출고 내역에는 아래 내용이 자동으로 저장됩니다.
처리일
입고 또는 출고
관리번호
품목명
변동 수량
이전 재고
처리 후 재고
사유
비고출고 역시 동일하게 작동합니다.
재고가 10개인데 15개를 출고하려고 하면 처리되지 않도록 제한했습니다.
한국사이트 스크린샷
이런형식으로 진행하며 직접 코딩을 해보며 어떤 형식으로 웹페이지가 구상이 되는지
다음기능들을 하나씩 배워보며 기본 구조가 정상작동 확인 하며 순차적으로 진행 한 방법에 대해 전달드렸습니다. . !
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
과정 중에 어떤 시행착오를 겪었나요?
도움이 필요한 부분이 있나요?
앞으로의 계획이 있다면 들려주세요.
처음에는 단순한 재고 목록 화면에서 시작했지만, 품목 등록, 검색과 필터, 입출고 기록, 구매 내역, 재고 자동 계산까지 서로 연결된 형태로 확장할 수 있었습니다.
이번 작업을 통해 HTML은 화면 구조, CSS는 디자인, JavaScript는 데이터 처리와 기능 연결을 담당한다는 점을 직접 이해할 수 있었습니다.
가장 큰 시행착오는 긴 코드에서 수정 위치를 찾는 과정이었습니다. 이후에는 부분 수정 대신 전체 파일을 받아 교체하거나, 코드가 길어지면 txt 파일로 전달받는 방식이 훨씬 편했습니다.
또 하나 배운 점은 기능 하나를 추가할 때도 다른 데이터와의 연결을 함께 생각해야 한다는 점이었습니다. 예를 들어 입고 기능은 현재 재고, 입출고 기록, 재고 상태, 대시보드까지 모두 함께 갱신되어야 했습니다.
결과적으로 AI에게 완성품을 한 번에 요청하기보다, 기능을 작은 단계로 나누고 화면을 확인하면서 하나씩 확장하는 방식이 가장 효과적이었습니다.
다음에는 개인 컴퓨터로 보는게 아닌 도메인 또는 vercel로 추가하여 여러 사람들과 공유해서 확인 할 수 있게 진행해보려고 합니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)
