클로드코드 4주 과정 · 작업 쇼케이스
범용 사무용 업무관리 템플릿을 식물오브제를 만들어 파는 브랜드 후후루(HUHURU)에 맞게 재설계한 기록.
제조업 운영의 페인포인트 → 개선 관점으로 정리했습니다.
※ 브랜드 = 후후루 · 윤비서를 대신할 AI 비서(이 시스템) = 비서 후후룽
윤비서는 고객·견적·매출 중심의 범용 사무 업무관리 시스템이다. 반면 후후루는 식물오브제·키링·문진을 직접 제작·재고·출고·수출하는 제조업. "팔기"보다 "만들고 보내기"가 매일의 일이라, 템플릿을 그대로 쓰면 정작 매일 보는 화면이 비어 있다.
이 프로젝트를 떠받치는 가장 큰 불편함은 두 가지였다.
후후루는 판매 채널이 아주 많다 — 자사몰 · 스마트스토어 · 오늘의집 · 카카오 선물하기 · 쿠팡 · 카페24 기반 편집샵들, 게다가 오프라인 팝업 · 수출 · 전시는 또 각각 별도다.
배송은 통합 서비스 '토글'로 일부 모으지만, 어떤 편집샵은 스프레드시트로 주문을 주고 수출건은 또 다른 포맷으로 온다. 결국 매일 채널을 일일이 다 돌며 확인해야 했다. CS는 더 심해서 통합 솔루션 자체가 없어, 플랫폼마다 따로 들어가 답을 달았다.
후후루 팀에서 컴퓨터·스프레드시트에 익숙한 사람은 단 1명뿐이다. 구글시트 같은 범용 도구는 대부분의 직원이 제대로 못 쓰고, 그나마 익숙한 건 네이버 계열 정도.
그래서 정말 필요했던 건 기능 많은 시스템이 아니라, 휴대폰으로 누구나 바로 확인하고 재고까지 기록할 수 있는 — 네이버웍스보다도 우리 일에 꼭 맞게 다듬은 전용 플랫폼이었다.
이 두 전제(흩어진 채널을 한곳에 · 모바일 우선의 초간단) 위에서, 제조업이 실제로 겪는 페인포인트를 먼저 정의하고 그 해결을 기준으로 시스템을 다시 지었다. 아래 7가지가 이 문서를 관통하는 축이다.
범용 템플릿은 메뉴가 일반적인(영업·고객 중심) 순서로 놓여 있다. 디지털에 익숙지 않은 직원에겐, 정작 매일 쓰는 기능이 어디 있는지 매번 찾아 헤매는 것이 가장 큰 장벽이다.
※ 색·로고 같은 디자인 톤은 대표 취향을 반영한 정도로, 핵심은 '우리 업무에 맞는 순서'다.
사이드바 — 재고관리·배송·팝업을 상단에, '영업'에 CS 통합 추가
제작 담당자·CS·배송·대표가 보고 싶은 게 전부 다르다. 화면 하나에 다 욱여넣으면 매출 같은 민감 정보가 전 직원에게 노출되고, 정작 필요한 정보는 묻힌다.
adminOnly)※ 지금은 화면 단위 숨김. 다음 단계 목표는 데이터베이스 단위 차단(RLS)까지 — 직원별 메뉴 접근 권한.
경로 /dashboard/team · 직원이 아침에 가장 먼저 여는 화면. "오늘 뭐부터?"의 답을 한 화면에 모았다.
매일 아침 누군가 주문·재고·CS를 각각 열어 손으로 취합해야 "오늘 뭘 몇 개 만들고 뭘 먼저 답하지"가 나왔다. 사람·시간에 의존하고 빠뜨리기 쉽다.
§1의 채널 파편화를 정면으로 푸는 화면. 수십 채널의 출고·CS를 위→아래 우선순위로 모은다. 모든 상품은 플랜트오브제/베스티쥬/기타 색 박스로 자동 분류.
직원 대시보드 — 오늘 현황·출고·재고부족·CS·출근 타임라인·이벤트 캘린더
가장 깊게 후후룽화한 영역. 윤비서엔 재고 개념이 거의 없었고, 후후루엔 이게 매일의 핵심이다. 4개의 페인포인트를 차례로 해결했다.
완제품(판매상품), 박스·슬리브 같은 부자재, 살아있는 식물(원물)이 완전히 다른 물건인데 한 목록에 섞이면 관리가 불가능하다.
재고관리를 판매상품 · 부자재 · 식물 3개 메뉴(탭)로 분리. 식물은 신규 종류로 추가. 패키지 종류 탭도 별도.
플랜트오브제는 라인(Green/Flower/Rose/Seasonal) × 사이즈(M/L), 베스티쥬는 키링·그립톡·문진으로 옵션 체계가 제각각. '상품명'만 적는 칸으론 못 담는다.
후후루 제품군을 드롭다운으로 선택하게 하고, 입력 순서대로 코드 자동 부여(G01·R01… / K-AW01…). 같은 약어가 라인마다 있어도 코드로 구분.
"GR-M 3개, VE-L 1개…" 숫자 나열로는 뭐가 급한지 한눈에 안 들어온다.
맨 위에 카테고리별 위험레벨 그라데이션 바(0~100, 빨강→파랑). 항목(GR/FD/VE)·사이즈(M/L)별 막대로 쪼개 표시하고, '위험' 개수를 먼저 빨갛게 보여준다.
주문 수량에서 현 재고를 빼 제작량을 매번 사람이 계산. 제작중/제작완료 상태도 따로 기록할 곳이 없었다.
입·출고내역 기능 추가 — 제작중/제작완료=입고, 출고=차감. 출고 − 재고 = 제작 필요분이 직원 대시보드로 자동 연결(§4). 데이터 구조도 신설(inventory·inventory_movements·shipments 등 마이그레이션 8건).
재고관리 · 판매상품 — 카테고리별 위험레벨 + 제품군 구조
출고가 재고·제작과 따로 놀면 "오늘 몇 개 나가는지"와 "그래서 몇 개 모자라는지"가 끊긴다.
shipment_id) 마련팝업스토어는 후후루의 주요 거래유형 중 하나인데, 운영 방식이 가장 주먹구구였다. 직접 겪은 페인포인트를 정면으로 풀었다.
진행중인 여러 팝업을 한 화면에서(위치·기간·운영시간). 카톡방·손사진을 다음 4개의 구조화된 데이터로 대체.
타임라인(시간대 겹침)·휴식구간까지. 파트타이머는 직원이 아니라 팝업마다 새로 채용하므로 PT01·PT02…로 구분.
반입 − 판매 = 잔여를 품목·사이즈별로, 날짜별 입·출고(반입·보충·판매·반출) 내역까지. 팝업 현장재고는 본사 재고관리와 분리해 팝업 고유로 관리.
그날 팔린 품목·금액 → 총매출·일평균·일별 매출 자동 집계.
현장에서 받은 택배 주문을 손영수증 사진 업로드 → 네이버 클로바(CLOVA) OCR 자동 인식(직원 확인 단계 포함)으로 전환. 출고대기 → 발송완료 2단계·송장번호, 건별 요청메모(예: 7/1까지·핑크 진한 것·손카드 동봉), 현장 재고 가능 여부 표시.
손글씨 사진을 확대해 찾던 일이 휴대폰에서 검색 가능한 표로, 카톡 누락은 입력 누락이 한눈에 보이는 화면으로, 그리고 네이버 클로바 OCR이 수기 입력·재검색을 없앤다 — 현장 재고관리 부담이 핵심적으로 줄어든다.
팝업관리 — 파트타임 근무표·현장재고·일별 매출·택배주문건
수출은 발주·출고 일정, 단가, 코드 체계가 국내와 완전히 다르다. 국내 화면에 섞으면 둘 다 엉킨다.
국가별 글로벌 대시보드를 따로(/dashboard/global/japan·/taiwan) — 주문·출고 일정과 발주 현황을 국가 단위로 분리.
글로벌(일본) — 주문·출고 일정 + 발주 날짜별 리스트→클릭 상세
현장은 이미 토글(배송)·네이버웍스(알림/캘린더)·Bolta(세금계산서)를 쓴다. 새 시스템이 이걸 다 대체하라 하면 안 쓴다.
기존 도구를 그대로 두고 연동으로 붙인다. 템플릿 기본 알림이 Slack이었는데 네이버웍스로 교체(테스트 전송 성공).
| 연동 | 용도 | 후후루 방침 | 상태 |
|---|---|---|---|
| 네이버웍스 | 알림 + 캘린더(일정·출근) | Slack 대체 | 테스트 성공 |
| 네이버 클로바(CLOVA) | 손영수증 글자 인식(OCR) | 팝업 택배주문 자동입력(직원 확인) | 예정 |
| 토글 | 배송(출고 주문) | 배송관리 연동 | 자리 마련 |
| Bolta | 세금계산서 발행 | 매출관리에서 호출 | 예정 |
| Gemini(AI) | 입금-매출 매칭·일정 분류·미팅 매칭 | 코드 활용 | 코드 존재 |
| 메일·드라이브(자료실) | 자료실 연동 | 코드 존재 |
화면부터 그리면, 나중에 "이 고객·견적·매출이 같은 건이다"를 잇는 연결고리가 없어 구조를 통째로 다시 뜯게 된다.
먼저 전체 기획서(메뉴 지도·데이터 흐름·작업 순서)를 만들고, 저장할 데이터와 메뉴 간 연결을 확정한 뒤 화면을 손봤다.
뿌리는 시스템설정·직원관리, 영업의 뿌리는 고객관리. 이 셋을 먼저 채우는 순서로 작업 중.
메타 광고로 들어온 커스텀 제작 문의가 설문·견적·고객 정보로 흩어진다. 후후룽 본체와 끊겨 있으면 두 번 입력.
광고 → 상세페이지 → 개인화 견적서를 한 흐름으로 묶고, 리드를 후후룽 '아뜰리에 상담' 화면으로 흡수. 이번에 3개 화면을 실제 배포했고, 후후룽 안에 리드 관리 + 견적서 빌더까지 구현했다.
huhuru-atelier.vercel.app(자동견적) · /quote(개인화 견적서). 공개돼 바로 광고에 연결 가능.da.gd/xxxxx 깔끔 링크로(광고 없는 직접 연결) 만들어 카톡에 전송.브랜드·제작 과정·옵션을 소개하고, 폼에서 수량·옵션을 넣으면 예상 견적을 즉시 보여준다. 하단 '상담 예약하기'로 이름·연락처를 남기면 견적과 함께 이메일로 자동 접수(Web3Forms)된다. AUDI·파리바게뜨·개인 폴리백 등 실제 사례 사진으로 채웠다.
상세페이지 — 소개·자동견적·가격표·고객 레퍼런스·상담 예약(자동 이메일)
고객별 정보를 받아 "고객님, 안녕하세요"로 시작하는 1:1 견적서를 만든다. 후후룽에서 고객마다 옵션을 정해 링크를 만들고, 단축 링크(da.gd)로 카톡에 깔끔하게 보낸다.
개인화 견적서 — 입력값 → 1:1 견적 문서 + '이 견적으로 상담하기'
예약·설문으로 들어온 고객을 후후룽 /dashboard/atelier-leads에서 상태별로 한눈에 본다. 고객을 열면 견적서 빌더(라인·제품·수량·옵션·무드·안내문구)로 그 고객 맞춤 견적서 링크를 만들어 바로 복사한다. 실제 메타 리드(인스타·페북) 4명을 반영해 동작을 확인했다. 예전 '연결 예정'이던 부분이 실제 화면으로 구현됐다.
후후룽 '아뜰리에 상담' — 리드 목록 + 고객별 견적서 빌더·단축 링크
'앞으로 할 일'로 잡았던 세 가지를 후후룽 앱에 실제 화면으로 구현했다. (데이터는 목업 — 실연동은 다음 단계)
🔴 풀던 문제: CS는 통합 솔루션이 없어 플랫폼마다 따로 들어가 답한다(§1).
/dashboard/cs
CS 통합 페이지 — 여러 채널 문의를 미답변 우선으로 한 화면에
🔴 풀던 문제: 대표가 "이번 달 남았나"를 보려면 급여대장·매입 장부를 따로 뒤져야 한다.
/dashboard/office 비용 현황 섹션※ 채널별 매출비중·제품군별 마진·재고자산 등은 다음 단계. 인건비·자재비는 가계부 연동 예정.
경영 대시보드 — 인건비·자재비 현황·월추이·내역
🔴 풀던 문제: 글로벌은 발주 현황 요약만. 건별 상세는 인보이스·PI를 따로 찾아야 한다.
/dashboard/global/*
글로벌(일본) — 발주 날짜별 리스트 → 클릭 상세
범용 업무 템플릿을 제조업에 얹을 때 공통으로 부딪히는 지점과, 후후루가 택한 해법.
| 제조업 페인포인트 | 후후루 개선 | § |
|---|---|---|
| ★ 주문·CS가 수십 채널로 흩어짐(통합 솔루션 없음) | 출고·CS를 한 화면에 자동 취합(CS 30분 동기화) | 1·4 |
| ★ 팀 디지털 친숙도 낮음(컴퓨터 1명·구글시트 못 씀) | 휴대폰 우선·초간단·우리 용어의 전용 플랫폼 | 1 |
| 매일 쓰는 기능을 찾아 헤맴 | 중요·반복 순서로 메뉴 재배치(재고 맨 위) | 2 |
| 재고가 한 종류가 아니다 | 완제품·부자재·식물 3분리 | 5 |
| 제품군마다 옵션 구조가 다르다 | 제품군 드롭다운 + 코드 자동부여 | 5 |
| 위험재고가 숫자로만 보임 | 사이즈별 위험레벨 막대 그래프 | 5 |
| 제작량을 손으로 계산 | 출고−재고=제작 자동, 입출고내역 | 4·5 |
| 역할마다 볼 정보가 다름 | 대시보드 3분리 + 돈 메뉴는 대표만 | 3·4 |
| 매일 현황을 사람이 취합 | 운영 보드 한 화면 자동 취합 | 4 |
| 팝업이 카톡·손글씨로 흩어짐 | 팝업별 통합 대시보드(근무표·현장재고·매출·택배 클로바 OCR) | 7 |
| 이미 쓰는 외부 도구가 있음 | 대체 대신 연동(네이버웍스·토글·Bolta) | 9 |
| 수출이 국내와 다른 흐름 | 국가별 글로벌 대시보드 분리 | 8 |
| 화면부터 그리면 재작업 | 데이터 흐름·연결 먼저 설계 | 10 |
한 줄 결론 — 사무용 템플릿의 진짜 후후룽화는 "화면 색 바꾸기"가 아니라, 제조업의 물리적 흐름(만들고·쌓고·보내고·수출하는)을 데이터로 옮기는 것이었다.
원본: 후후룽 앱 /dashboard · 설계도 docs/후후룽-전체기획.md · 아뜰리에 오더 06-Atelier Order/