따다소프트 메일 문의

← 포트폴리오로

artdg.com 옮겨 다시 만들기

지금 운영 중인 종이·미술 재료 쇼핑몰입니다. 그누보드와 영카트로 돌아가던 사이트를 Next.js 정적 사이트로 옮겼습니다. 운영자는 관리자에서 값을 고치고, 발행해야 사이트에 반영됩니다.

네이버페이: 검수 중 테스트용 sandbox에서 보는 단계입니다. 승인이 나기 전에는 실제 주문을 받지 않습니다.

다룬 영역
  • 쇼핑몰
  • 관리자
  • 데이터 이전
  • 결제 연동(검수 중)
  • 배포와 테스트
성격
옮겨서 다시 만든 사이트입니다. 처음부터 만든 것은 아닙니다.
공개 사례
웹으로 공개한 사례는 이 하나뿐입니다. 여러 곳에 납품한 실적은 아닙니다.
규모
커밋 288개, 활동일 8일
링크
실서비스 보기: artdg.com
01이관과 구조

상품 135개를 새 구조로 옮겼습니다

범위는 옛 상품을 새 구조로 옮기고, 손님이 상품을 찾아 수량을 계산하고 장바구니에 담게 하는 것이었습니다. 상품 데이터는 옛 사이트 DB에서 가져왔습니다.

상품 135개, 안내 페이지 5개, 묶음 할인 규칙 2종, 상품정보 응답 52~170ms입니다.

구성 요소
구성내용
사용자 화면Next.js 정적 사이트. 카탈로그, 검색, 분류, 규격·가격·묶음 단위 표시, 수량 계산, 장바구니.
실행 환경Cloudflare Workers와 D1 위에서 동작합니다.
관리자들어가는 길을 따로 두고 접근을 제한합니다. 상품, 설정, 사이트 글을 정해 둔 항목에 맞춰 고치고 발행합니다.
품질자동 테스트, 화면을 눌러 보는 테스트, 코드가 뒤처지면 배포가 멈추는 장치, 운영 문서가 있습니다.

공개 화면

artdg.com · 홈
artdg.com 데스크톱 홈 화면. 분류 메뉴와 검색창, 분류 바로가기가 보인다.
홈 화면입니다. 분류 메뉴와 검색창이 있습니다.
artdg.com · 분류
artdg.com 스케치북 분류 화면. 정렬과 크기 필터가 왼쪽에 있고 상품 목록이 오른쪽에 있다.
분류 화면입니다. 정렬과 크기 필터가 있는 상품 목록입니다.
artdg.com · 상품
artdg.com 상품 화면. 상품 사진 옆에 규격별 권당 가격과 박스 가격 목록이 있다.
상품 화면입니다. 규격별 권당 가격과 박스 가격을 보여 줍니다.
모바일 · 홈
artdg.com 휴대폰 홈 화면. 상단에 메뉴 아이콘, 아래에 검색창이 있다.
휴대폰 홈 화면입니다.
모바일 · 상품
artdg.com 휴대폰 상품 화면. 상품 사진 아래에 규격별 가격 목록이 있다.
휴대폰 상품 화면입니다. 규격별 가격 목록이 있습니다.
02구조와 설계 결정

값을 바꾸는 쪽, 보는 쪽, 주문하는 쪽을 나눴습니다

지금 사이트가 돌아가는 구조와, 왜 이렇게 나눴는지입니다.

운영 값을 바꾸는 쪽

  1. 관리자접근 제한 + 서버에서 토큰 재검증
  2. 설정 저장소 (D1)초안 · 변경 이력 · 버전
  3. 발행 절차검증 후 정적 파일 생성

공개 방문자가 보는 쪽

  1. 콘텐츠 원본 (JSON)상품·분류·안내·규칙
  2. 정적 사이트 (Next.js)빌드 시점에 화면 생성
  3. Cloudflare Workers정적 파일 배포

주문 장바구니와 결제

  1. 브라우저장바구니는 기기에만 저장
  2. API Worker주문 등록 · 상품정보 응답
  3. 네이버페이검수 중 (sandbox)
값을 바꾸는 절차: 운영자 입력, 가격 기준 검사, 초안 저장, 발행, 사이트 반영. 모든 변경에 감사 기록이 남습니다.
값을 바꾸는 절차와 안전장치. 저장은 초안이고, 발행해야 사이트에 반영됩니다.
설계 원칙 네 가지: 경계를 나눕니다, 되돌릴 수 있게 만듭니다, 두 번 와도 한 번만, 동작을 테스트로 고정합니다.
설계 원칙 네 가지. 1번과 2번은 비공개로 만든 일이고, 3번과 4번은 artdg.com에서 볼 수 있습니다.
  1. 공개 화면과 주문 처리를 나눴습니다

    화면은 정적 파일이라 빠르고, 문제가 나도 화면 전체로 번지지 않습니다. 주문 API가 없으면 구매는 닫힌 채로 있습니다. 실패해도 잘못 열리지 않는 쪽으로 기울였습니다.

  2. 관리자는 한 겹 더 막았습니다

    접근 제한 뒤에 두고, 서버에서도 토큰을 다시 검증합니다. 주문 접수를 한 번에 끄는 스위치가 있습니다.

  3. 값을 바꾸는 절차를 남겼습니다

    저장은 초안이고, 발행해야 사이트에 반영됩니다. 변경 이력이 남고, 두 곳에서 동시에 고치면 한쪽이 덮어쓰지 못하게 버전으로 막습니다.

  4. 가격 기준을 한 곳에 뒀습니다

    팔지 말지 정하는 곳, 관리자 입력, 주문 데이터가 같은 하한을 씁니다. 원본가의 50% 아래로는 내리지 않고, 한 번에 깎는 폭은 25%까지입니다. 화면마다 기준이 달라져 가격이 어긋나는 일을 막으려고입니다.

  5. 중복 주문을 막았습니다

    같은 구매에는 같은 키를 붙입니다. 탭이 여러 개여도 등록은 한 번에 하나씩입니다. 결과가 애매하면 다시 넣지 않고, 확인해 달라고 안내합니다.

  6. 배포 실수를 먼저 막았습니다

    코드가 뒤처졌거나 커밋하지 않은 변경이 있으면 배포가 시작되지 않습니다. 단위 테스트, 계약 테스트, 화면을 눌러 보는 테스트, 운영 문서가 같이 있습니다.

03관리자와 안전장치

운영자가 관리자에서 값을 고칩니다

상품과 규칙을 여기서 고칩니다. 저장만 하면 초안이고, 발행해야 손님 화면에 나갑니다. 발행할 때마다 기록이 남습니다.

관리자 화면 범위

상품·옵션, 카테고리, 판매 기준, 구매 규칙, 묶음 할인, 배송, 안내·법적 표기, 사업자 정보, 페이지·리다이렉트, 발행, 연결 점검.

이 목록은 코드를 보고 확인했습니다. 아래 영상과 화면 5장은 운영 화면을 직접 열었고, 나머지는 눌러 보지 않았습니다.

관리자 둘러보기 · 35초 · 소리 없음
2026-11-04에 운영 관리자 화면을 직접 열어 녹화했습니다. 클릭은 왼쪽 메뉴 이동뿐이고 값은 바꾸지 않았습니다. 구간: 상품·옵션 목록 → 구매 규칙 → 묶음 할인 → 배송 → 분류.

관리자 화면 5종

2026-11-04에 운영 관리자 화면을 직접 열어 촬영했습니다. 읽기만 했고 값은 바꾸지 않았습니다.

관리자 · 상품·옵션 · 읽기만 함
관리자 상품·옵션 화면. 상품명 검색창, 판매 상태별 개수, 상품 목록 표가 보인다.
상품·옵션 화면입니다. 상품명이나 id로 검색하고 판매 상태별로 걸러 봅니다.
관리자 · 구매 규칙 · 읽기만 함
관리자 구매 규칙 화면. 기본 최소 수량과 주문 단위, 적용 결과 미리보기 표가 보인다.
구매 규칙 화면입니다. 최소 수량과 주문 단위를 정하고 적용 결과를 미리 봅니다.
관리자 · 묶음 할인 · 읽기만 함
관리자 묶음 할인 화면. 묶음 수별 할인율 표와 실제 적용 결과 표가 나란히 있다.
묶음 할인 화면입니다. 많이 살수록 개당 가격이 내려가는 단계를 정하고, 옆 표에서 적용 결과를 봅니다.
관리자 · 배송 · 읽기만 함
관리자 배송 화면. 박스당 배송비와 무료 배송 기준 금액 등을 입력하는 양식이 보인다.
배송 화면입니다. 박스당 배송비와 무료 배송 기준 금액 같은 값을 입력하는 양식입니다.
관리자 · 분류 · 읽기만 함
관리자 분류 화면. 분류 ID, 분류명, 상품 개수, 사이트 표시명, 발행 상태가 표로 보인다.
분류 화면입니다. 전체 37개 분류의 상품 수와 사이트 표시명, 발행 상태를 한 표로 봅니다.

안전장치

값을 잘못 바꿔도 운영 화면에 바로 반영되지 않게 막는 장치입니다.

안전장치
장치막는 것
가격 인하 1회 25% 이내한 번에 가격을 크게 내리는 입력 실수
원본가 50% 미만 불가원본가의 절반 아래로 내리는 변경
변경 감사 기록누가 무엇을 바꿨는지 알 수 없게 되는 일
버전 충돌 방지두 곳에서 동시에 고칠 때 한쪽이 다른 쪽을 덮어쓰는 일
발행 절차초안 상태의 변경이 사용자 화면에 바로 반영되는 일. 발행 이력이 남습니다.
04주문과 네이버페이

결제는 검수 단계입니다

검수 중

네이버페이는 아직 검수 중입니다. 실제 결제를 받는 단계는 아닙니다. 구매 버튼을 누르면 주문서까지 가는 흐름을 테스트 환경에서 확인했고, 결제가 끝난 건은 확인하지 않았습니다.

아직 없는 기능

  • 취소·반품·교환, 주문 상태 동기화는 아직 만들지 않았습니다.
  • 자체 로그인, 회원, 자체 결제 화면, 주문내역은 만들지 않았습니다.

이 일에는 없습니다.

05납품 방식

넘기는 것과 공개하지 않는 것

소스와 디자인은 다시 쓸 수 있습니다. 고객에게 소스 전체를 넘기는지는 계약마다 정합니다.

  • 착수 전에 기능별 끝난 기준을 문서로 정하고, 1~2주마다 확인합니다.
  • 테스트, 배포 방법, 관리자 매뉴얼을 함께 드립니다.
  • 소스를 어디까지 넘기는지, 무상으로 어디까지 고치는지를 계약서에 적습니다.

공개하지 않는 것

저장소는 비공개입니다. 이 페이지에는 커밋 수, 일한 날, 구조 요약, 화면만 있습니다. 코드와 주문 데이터는 없습니다. 화면도 주문자 정보가 없는 것만 골랐습니다.

구현 상태 보기 · 진행 방식 보기

06구현 상태

기능별로 어디까지 됐는지

만든 것, 검수 중인 것, 아직 없는 것을 나눠 적었습니다.

구현7 검수 중1 미구현3
artdg.com 기능별 구현 상태
기능상태비고
상품 카탈로그·검색·분류구현
규격·가격·묶음 단위 표시구현
수량 계산과 장바구니구현
관리자 상품·옵션·가격 관리구현
묶음 할인·배송·구매 규칙 설정구현
변경 이력·감사 기록구현
정적 배포와 자동 테스트구현
네이버페이 결제검수 중테스트용 sandbox에서 검수 중입니다. 승인이 나기 전에는 실제 주문을 받지 않습니다.
취소·반품·교환·주문 상태 동기화미구현
회원·로그인미구현
자체 결제 화면·주문내역미구현
문의
ddadasoft@gmail.com

만들려는 것을 메일로 알려 주세요. 원격으로, 범위와 결과물을 정해 두고 진행합니다.