비개발자를 위한 한국형 No-Code 시각화 웹서비스

MAC은 데이터 파일(CSV·XLSX)을 올리기만 하면 누구나 빠르게 차트를 만들고 다듬어서 이미지로 내려받을 수 있는 시각화 편집 도구입니다.

기존 복잡한 분석 툴과 달리, 단계형 사용자 흐름을 통해 비전공자도 쉽게 결과물을 만들 수 있도록 설계되었습니다.

이 저장소는 그중 무료 버전인 MAC Studio입니다.

MAC은 전문가용 분석 툴이 아니다.

MAC은 👉 데이터를 빠르게 시각화하고 👉 원하는 스타일로 쉽게 수정할 수 있도록 돕는

한국형 No-Code 시각화 편집기를 목표로 합니다.

• 차트 생성 → 편집 → 저장 → 다운로드까지 이어지는 Studio 완성
• 이후 MAC Expert(유료)로 차트 종류와 기능 확장
• 베타 출시 일정은 확정되는 대로 이 문서에 기록합니다.

기존 시각화 도구들은

• 영어 중심 UI
• 복잡한 설정 구조
• 과도한 선택지 제공

👉 비전공자가 사용하기 어려움

MAC Studio는 아래와 같은 흐름으로 문제를 해결합니다:

데이터셋 업로드 → 데이터 확인 → 차트 선택 → 편집 → 추출(이미지·CSV) / 저장

• 올린 표가 차트로 만들 수 있는 모양인지 업로드 직후 점검하고, 고칠 수 있는 문제는 자동 수정을 제안합니다.
• 차트는 한 번에 하나씩 만들고, 저장하면 데이터셋 폴더 아래에 쌓입니다.
• 모든 처리는 사용자 브라우저 안에서 이루어져 서버 비용 없이 동작합니다.

👉 사용자는 도구를 배우는 것이 아니라 👉 단계를 따라 결과물을 만드는 경험을 하게 됩니다.

발표·과제·숏폼용으로 빠르게 시각화를 만들고 싶은 비전공자

• 🎓 발표 자료가 필요한 대학생
• 📊 엑셀 데이터 기반 시각화가 필요한 사용자
• 📈 데이터는 있지만 디자인이 어려운 사용자
• 🎥 유튜브/숏츠용 Bar Chart Race 제작자 (Expert 이후 지원 예정)

용량 수치는 확정 전이며 lib/limits.ts 한 곳에서 관리합니다.

Studio가 제공할 차트 목록은 28종(lib/chart-catalog.ts)이며, 현재 구현된 차트는 아래 3종입니다.

나머지 차트는 홈의 차트 목록에 "준비 중"으로 표시됩니다.

Expert는 별도 개발 범위이며, Studio와 구분되는 브랜딩(검정 + 주황)으로 갑니다. 현재 Studio 화면에서는 안내 문구와 주황 포인트로만 드러납니다.

Expert의 상세 기능·요금은 확정되는 대로 갱신합니다.

차트는 “정의(Definition) 하나 = 차트 하나” 구조로 관리합니다. 새 차트를 추가하려면 파일 하나를 만들고 레지스트리에 등록하면 됩니다.

components/charts/
  types.ts        ChartDefinition (이름, 아이콘, 지원 옵션, 컴포넌트)
  registry.ts     제공하는 차트 목록 — 여기에 추가하면 끝
  bar-chart.tsx   차트별 파일 (line-chart, pie-chart …)
  frame.tsx       제목·범례·여백·글꼴 등 모든 차트 공통 틀
  cartesian.tsx   축이 있는 차트의 공통 눈금·축 글자
lib/
  chart-spec.ts   차트 하나의 모든 옵션(ChartSpec)과 기본값
  chart-data.ts   행 선택 → 정렬 → 상위 N 처리
  chart-palette.ts / chart-colors.ts / chart-fonts.ts   색·글꼴 (한 곳에서 교체)

• 차트 확장 용이 (Studio → Expert 차트 추가 동일 방식)
• 유지보수 효율성 (옵션은 supports로 차트마다 켜고 끔)
• FE/BE 협업 구조 통일 (저장되는 것은 ChartSpec JSON 하나)

로그인·이메일 인증·저장은 서버가 없는 데모 구현입니다. lib/auth.ts, lib/email-verification.ts, lib/saved.ts를 서버 호출로 바꾸면 화면 코드는 그대로 쓸 수 있도록 분리해 두었습니다.

npm install
npm run dev      # http://localhost:3000
npm run build    # 프로덕션 빌드
npm run lint

• 🎯 기능보다 사용자 흐름 우선
• 🧩 구조는 단순하게
• 🚀 작은 단위로 빠르게 개발
• 💸 서버 없이 브라우저에서 처리해 비용 절감

app/          페이지 (/, /studio, /studio/editor, /mypage, /guide, /login, /signup, /terms, /privacy)
components/   화면 조각 (차트, 옵션 패널, 업로드·점검, 헤더·푸터 등)
lib/          차트 옵션·데이터 처리, 파일 파싱, 내보내기, 인증·저장
public/       로고·아이콘

Issue 생성 → 브랜치 생성 → 개발 → PR(develop) → Merge → develop → main PR → 배포

• 작업 브랜치는 develop에서 만들고, 작업이 끝나면 develop으로 PR을 올립니다.
• main은 배포용입니다. (Vercel이 main을 배포)

feat: 기능 추가
fix: 버그 수정
refactor: 구조 개선
style: UI 변경
docs: 문서 수정

MAC은 단순한 차트 생성기를 넘어

👉 데이터 시각화의 진입장벽을 낮추는 플랫폼으로 성장하는 것을 목표로 합니다.