알록 (Alog)
錄(기록할 록) · LOG · 綠(푸를 록)
알맹상점의 리필 경험을 기록하는 하나의 LOG
알록은 알맹상점의 리필 경험을 소비자와 운영자 모두의 '기록'으로 남기는 스마트 영수증·POS 통합 플랫폼입니다.
"리필 경험은 쌓이지만, 데이터는 쌓이지 않고 있습니다."
- 리필 상품은 판매되고 있지만 정확한 판매 데이터가 체계적으로 남지 않음
- 어떤 상품이 언제, 얼마나 팔렸는지 상품 단위 분석이 어려움
- 매장이 만들어낸 환경·소셜 임팩트를 수치로 설명하기 어려움
- 고객 관리와 재방문 유도를 감각이나 기억에 의존
- 예전에 언제 어떤 제품을 리필했는지 기억하기 어려움
- 사용 중인 제품의 브랜드·성분·정보를 다시 확인하기 번거로움
- 종이 영수증은 받고 싶지 않지만, 구매 기록은 남기고 싶음
- 자신의 리필 행동이 어떤 환경적 의미를 가지는지 알기 어려움
- 리필·순환 소비 경험이 '기억'에만 남고 기록으로 축적되지 않으면 확장되기 어려움
- 데이터가 쌓이지 않으면 → 매장은 성장 전략을 세우기 어렵고 → 소비자는 자신의 지속적인 행동을 인식하기 어려움
- 제로웨이스트·리필 문화가 일상적인 소비로 자리 잡기 위해서는 '기록 인프라'가 필요
알록은 알맹상점의 리필 경험 전 과정을 하나의 LOG로 연결합니다.
-
운영자 POS
- 리필 상품 가격 계산을 더 쉽고 정확하게
- 판매 데이터가 자동으로 DB에 저장
- 고객에게 스마트 영수증 자동 발송
-
스마트 영수증 (카카오 알림톡)
- 구매 상품, 가격, 상세 정보 확인
- 종이 없이도 언제든 다시 열람 가능
- 마이페이지(알맹 히스토리)로 자연스럽게 연결
-
알맹 히스토리 (소비자 마이페이지)
- 내가 리필한 모든 기록을 한 페이지에서 확인
- 리필 횟수, 구매 내역, 환경 기여도 시각화
- 방문 기록에 따라 성장하는 캐릭터 시스템
-
운영자 대시보드
- 매출 추이, 상품별 판매 분석
- 고객별 구매 이력 관리
- 매장이 만들어낸 소셜 임팩트 측정
- 리필 판매 데이터가 자동으로 기록·축적
- 감이 아닌 데이터 기반 매장 운영
- 매장의 환경적 가치를 수치와 기록으로 설명 가능
- 더 이상 "내가 뭘 샀더라?" 고민하지 않아도 됨
- 나의 리필 행동이 하나의 히스토리로 쌓이는 경험
- 캐릭터 성장과 기록을 통해 지속적인 방문 동기 형성
사용자 관점 설명: 매장 직원이 상품을 선택하고 주문을 처리할 수 있는 직관적인 POS 인터페이스입니다. 카테고리별 상품 조회, 검색 기능, 장바구니 관리, 고객 전화번호 입력을 통한 고객 정보 연동까지 제공합니다. 결제 완료 후 자동으로 스마트 영수증이 발송됩니다.
주요 화면:
- 상품 카탈로그 (카테고리별 분류)
- 장바구니 및 주문 관리
- 고객 정보 입력 모달
- 결제 처리
사용자 관점 설명: 고객이 구매 후 받는 디지털 영수증으로, 구매 상세 내역과 함께 환경 기여도(탄소 배출 감소량, 플라스틱 절감량)를 시각적으로 표시합니다. 영수증 링크를 통해 언제든지 구매 내역을 확인할 수 있으며, 캐릭터 레벨업 정보도 함께 제공됩니다.
주요 화면:
- 구매 내역 상세
- 환경 기여도 표시 (CO2 절감량, 플라스틱 절감량)
- 캐릭터 레벨 정보
사용자 관점 설명: 매장 운영자가 매출 통계, 상품 랭킹, 고객 정보를 한눈에 확인할 수 있는 대시보드입니다. 일별/주별/월별 매출 트렌드, 인기 상품 랭킹, 최근 판매 내역, 고객별 구매 이력을 조회할 수 있습니다.
주요 화면:
- 대시보드 홈 (통계 카드, 매출 트렌드 차트)
- 상품 랭킹 페이지
- 고객 관리 페이지 (고객 목록, 상세 정보, 구매 이력)
- 상품 관리 페이지
사용자 관점 설명: 고객이 자신의 구매 내역을 확인하고, 캐릭터 레벨과 배지를 확인할 수 있는 개인 페이지입니다. 누적 구매 금액에 따라 캐릭터가 성장하며(꼬마알맹 → 유아알맹 → 어린알맹 → 학생알맹 → 어른알맹), 환경 기여도도 함께 표시됩니다.
주요 화면:
- 캐릭터 상태 (현재 레벨, 경험치, 다음 레벨까지 남은 금액)
- 배지 컬렉션
- 구매 내역 목록
- 환경 기여도 (총 탄소 절감량)
https://alog-almang.vercel.app/
https://drive.google.com/file/d/15ucp2-r_CIE8FnWrQG-w1kByqHzk1BIH/view?usp=drive_link
https://drive.google.com/file/d/1jaZui3KfF-gAgbiGlWkNSrzDL2O9oK_0/view
| 분야 | 사용 기술 |
|---|---|
| Frontend | React 19.2.0, Next.js 16.0.1 (App Router), TypeScript 5.x, Tailwind CSS 4 |
| Backend | Next.js API Routes (Serverless Functions) |
| Database | Supabase (PostgreSQL) |
| Infra/DevOps | Vercel, Node.js |
| UI Library | Lucide React (아이콘), Recharts (차트) |
아래 절차를 따르면 누구나 실행 가능합니다.
git clone <repository-url>
cd alognpm install프로젝트 루트에 .env.local 파일을 생성하고 다음 환경 변수를 설정하세요:
# Supabase 설정
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
# 애플리케이션 URL
NEXT_PUBLIC_BASE_URL=http://localhost:3000
# 카카오 로그인
KAKAO_CLIENT_ID=your_kakao_client_id
KAKAO_CLIENT_SECRET=your_kakao_client_secret
KAKAO_REDIRECT_URI=http://localhost:3000/api/auth/kakao/callback# 개발 서버 시작 (포트 3000)
npm run dev
# 프로덕션 빌드
npm run build
# 프로덕션 서버 실행
npm start
# 린트 실행
npm run lint브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인할 수 있습니다.
| 이름 | 역할 | 담당 업무 | 소속 |
|---|---|---|---|
| 최주현 | 팀장 · Backend | 서비스 기획 총괄, POS/스마트 영수증 백엔드 설계 및 구현, Supabase DB 설계 | 서울대 자유전공학부(컴퓨터공학, 정보문화학) |
| 권다운 | Frontend | 소비자/운영자 화면 개발, 마이페이지·대시보드 UI 구현 | 서울대 노어노문학과 |
| 김재현 | Frontend | POS 시스템 프론트엔드 개발, 사용자 플로우 구현 | 서울대 경영학과, 정보문화학 |
| 박선민 | Design · Video | 서비스 UX/UI 디자인, 캐릭터·그래픽 디자인, 소개 영상 제작 | 서울대 독어독문학과, 정보문화학 |
| 이소은 | Design · Video | UI 비주얼 디자인, 발표 자료 디자인, 서비스 영상 제작 | 서울대 경영학과 |
- 알맹상점 고금숙 펠로우님: 실제 매장 환경 테스트 및 피드백 제공
- 장지석 멘토님: 기술 아키텍처 및 데이터베이스 설계 조언
- 어떤 상품을, 언제, 얼마나 구매·판매했는지에 대한 정보가 경험이 아닌 데이터로 차곡차곡 축적
- 기존에 남지 않던 리필 상품 판매 기록의 구조화
- 스마트 영수증과 알맹 히스토리를 통해 소비자가 자신의 리필 기록을 한 페이지에서 확인 가능
- 더 이상 어떤 제품을 리필했는지 직접 기억하지 않아도 되는 경험 제공
- 판매 데이터가 자동으로 저장되어 매출 추이 및 상품별 판매 현황을 보다 쉽게 파악
- 개별 상품 단위의 정보 관리 가능성 확보
- 알맹상점 내부 기준에 따른 탄소 절감 수치 제시
- 리필 행동이 환경 보호로 이어진다는 의미를 사용자에게 직관적으로 전달
- 방문 기록에 따라 성장하는 캐릭터와 히스토리 구조를 통해 리필 경험이 일회성이 아닌 **'쌓이는 경험'**으로 인식
알록의 진정한 가능성은 확장성에 있으며,
알맹상점을 넘어 리필·제로웨이스트 생태계 전반으로 확장되는 것을 목표로 합니다.
- 알맹상점을 넘어 다른 리필 스테이션·제로웨이스트샵에서도 사용 가능
- 소비자가 여러 매장의 리필 데이터를 하나의 히스토리로 관리
- 소비자가 자신의 모든 리필 데이터를 한눈에 확인할 수 있는 환경 구축
- 구매 후 기록뿐 아니라, 구매 전 제품 정보 확인까지 전 과정에 걸친 서비스 제공
- 스마트 영수증, 알맹 히스토리, 리마인드 메시지를 유기적으로 연결
- 리필 경험이 자연스럽게 일상에 녹아드는 흐름 설계
- 매장 및 사용자 수 확대에 대비한 다중 서버 환경 전환
alog/
├── public/ # 정적 파일
│ ├── almang_logo.png # 로고 이미지
│ ├── alog_logo.png # 알록 로고
│ ├── product/ # 상품 이미지
│ └── grade*.png # 캐릭터 등급 이미지
│
├── src/
│ ├── app/ # Next.js App Router 페이지
│ │ ├── admin/ # 관리자 페이지
│ │ │ └── dashboard/ # 대시보드
│ │ │ ├── analytics/ # 분석 페이지
│ │ │ ├── products/ # 상품 관리
│ │ │ ├── users/ # 고객 관리
│ │ │ └── settings/ # 설정
│ │ │
│ │ ├── api/ # API 라우트
│ │ │ ├── admin/ # 관리자 API
│ │ │ ├── auth/ # 인증 API
│ │ │ ├── pos/ # POS API
│ │ │ ├── customers/ # 고객 API
│ │ │ ├── products/ # 상품 API
│ │ │ └── receipt/ # 영수증 API
│ │ │
│ │ ├── login/ # 로그인 페이지
│ │ ├── mypage/ # 마이페이지
│ │ ├── pos/ # POS 시스템
│ │ │ ├── checkout/ # 결제 페이지
│ │ │ └── customer/ # 고객 입력 페이지
│ │ ├── receipt/ # 영수증 조회
│ │ ├── products/ # 상품 상세
│ │ ├── privacy/ # 개인정보처리방침
│ │ ├── term/ # 이용약관
│ │ ├── layout.tsx # 루트 레이아웃
│ │ ├── page.tsx # 홈 페이지
│ │ └── globals.css # 전역 스타일
│ │
│ ├── components/ # 재사용 컴포넌트
│ │ ├── POS/ # POS 전용 컴포넌트
│ │ ├── Mypage/ # 마이페이지 컴포넌트
│ │ ├── layout/ # 레이아웃 컴포넌트
│ │ ├── ui/ # UI 컴포넌트
│ │ └── receipt/ # 영수증 컴포넌트
│ │
│ ├── lib/ # 유틸리티 및 라이브러리
│ │ ├── supabase/ # Supabase 관련
│ │ ├── supabase-client.ts # Supabase 클라이언트
│ │ ├── env.ts # 환경 변수 유틸
│ │ ├── carbon-emission.ts # 탄소 배출 계산
│ │ └── character-levels.ts # 캐릭터 레벨 시스템
│ │
│ ├── types/ # TypeScript 타입 정의
│ │ ├── product.ts
│ │ ├── customer.ts
│ │ ├── receipt.ts
│ │ ├── badge.ts
│ │ └── ...
│ │
│ └── auth/ # 인증 관련 컴포넌트
│ └── kakao-login.tsx
│
├── next.config.ts # Next.js 설정
├── tsconfig.json # TypeScript 설정
├── postcss.config.mjs # PostCSS 설정
├── eslint.config.mjs # ESLint 설정
├── package.json # 프로젝트 의존성
└── README.md # 이 문서
- 아이콘: Lucide React - ISC 라이선스
- 폰트: Geist Sans - SIL Open Font License
- 로고 이미지: 알맹상점 제공
본 프로젝트에서 사용된 일부 아이콘은 ISC 라이선스를 따릅니다.
프로젝트에 대한 문의사항이 있으시면 이슈를 생성해주세요.
알맹상점의 리필 경험을 기록합니다
Made with ❤️ by 맹글즈