📝 한줄 요약
Claude Code로 대시보드를 만들던 중, 회사 UX/UI 디자이너가 디자인 가이드(MD 파일)를 만들어줬습니다. 적용하려 했는데... 디자인 가이드 파일은 중간에 넣으면 잘 안 된다고 초기부터 적용해야한다는 걸 배웠어요.
그 밖에 구글 계정 기준으로 로그인 기능을 추가하는 등의 기능을 사용해볼 수 있었습니다.
🎯 이런 분들께 도움 돼요
AI 코딩 도구(Claude Code, Cursor 등)로 내부 도구를 만들어보고 싶은 마케터
디자이너와 협업해서 AI로 결과물을 만들려는 분
"디자인 템플릿을 AI한테 어떻게 전달하지?" 고민 중인 분
😫 문제 상황 (Before)
우리 팀 콘텐츠 마케터가 게시글 성과를 확인하려면 매번 Mixpanel에 직접 들어가야 했습니다.
어떤 게시글이 잘 나가는지, 어떤 주제가 반응이 좋은지 한눈에 보고 싶었어요. 좋은 콘텐츠 아이디어를 얻으려면 데이터가 필요하고, 향후 스터디 방향성도 잡아야 하니까요.
문제는 Mixpanel 무료 플랜이라 리포트 기능이 제한적이었습니다. 결국 "직접 만들자"가 됐습니다.
🛠️ 사용한 도구
도구명: Claude Code (CLI)
모델: Claude Opus 4.5
특이사항: 내부 디자이너가 만든 design-guide.md 파일 활용
🔧 작업 과정
STEP 1 : 일단 만들어봐
처음엔 디자인 가이드 없이 시작했습니다. "빨리 돌아가는 걸 보고 싶다"는 마음에 기능 구현부터 요청했어요.
Mixpanel에서 post_viewed 이벤트 데이터를 가져와서 PostgreSQL에 저장하는 파이프라인 만들어줘
Claude가 Mixpanel Raw Export API 연동, DB 스키마 설계, 자동 동기화 엔드포인트까지 한 번에 만들어줬습니다.
다음은 인증이었습니다.
Google OAuth로 로그인하고 관리자만 대시보드 접근할 수 있게 해줘
Auth.js 설정, 미들웨어, 로그인 페이지까지 생겼어요. 바이브코더로써 이런 대시보드를 제작할 때 보안 관련된 이슈를 해결하기 어렵겠다 생각했는데 쉽게 진행되었습니다.
.
STEP 2. : 디자이너가 만들어 주신 탬플릿 활용하기
서버를 구축 다 하고 이제 업무에 활용하기 좋게 UI를 작업 하는 중에 좋은 일이 생겼습니다. 회사 디자이너분이 디자인템플릿.md를 만들어주신 거예요. 색상 토큰, 간격 규칙, 컴포넌트 스타일이 정리된 문서였습니다.
"오, 이거 적용하면 훨씬 깔끔해지겠다!" 싶어서 바로 Claude에게 가이드를 주고 수정을 요청했습니다.
** 저희 직원들은 여기서 템플릿 MD 파일과 CSS 파일을 받아서 활용할 수 있답니다~!
이 디자인 가이드(design-rules.md)에 맞춰서 UI 스타일 수정해줘
그런데 생각보다 잘 안 됐습니다.
Claude가 이미 만들어둔 패턴(색상, 간격, 컴포넌트 구조)을 계속 따라가더라고요. 가이드를 줬는데도 기존 코드 스타일이 관성처럼 남아있었습니다.
결국 일부는 수동으로 고쳐야 했어요.
** 기존 대시보드
** 디자인 가이드 적용 후 대시보드
디자인 가이드의 대시보느는 이것보다 예뻤는데,,, 생각보다 잘 반영이 안 되더라구요.
이때 디자이너에게 여쭈어보고 디자인 가이드는 처음부터 줬어야 했다는 것을 알게 되었습니다.
AI가 한 번 패턴을 잡으면 그걸 기준으로 계속 일관성을 유지하려고 합니다. 나쁜 건 아닌데, 중간에 "아, 이거 말고 저 규칙 따라" 하면 충돌이 생기는 거죠.
STEP 3 기능 완성 + 세부 조정
그래도 핵심 기능은 빠르게 완성됐습니다.
월별 대시보드에 년도/월 선택하는 토글 UI로 바꿔줘. 그리고 월별 추이 그래프도 상단에 넣어줘
월 선택기, Area 차트, SPACE별 TOP 10 막대 차트까지 추가됐어요.
아직 구체적인 기능을 다 넣진 않았는데 그래도 일 / 월 기준의 게시글 조회수를 확인하는 대시보드 까지만들었네요.
✅ 결과 (After)
Before vs After
항목
Before
After
데이터 확인
Mixpanel 직접 접속
대시보드에서 한눈에
이후 구글 콘솔 데이터까지 연동해서 어떤 게시물이 검색 노출이 잘 되는지도 제공할 예정입니다.
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
디자인 가이드가 생기면 처음부터 다시: 작업 중에 가이드가 생겼다면, 기존 코드에 적용하려 하지 말고 새로 시작하는 게 나을 수 있어요. AI는 첫 패턴을 기준으로 일관성을 유지하려 하거든요.
기능 단위로 끊어서 요청하기: "전체 대시보드 만들어줘"보다 "데이터 파이프라인 → 인증 → UI" 순서로 나눠서 요청하니 결과물 확인이 쉬웠어요.
구체적인 레이아웃 설명: "왼쪽에 지표 카드 세로로, 중앙에 차트, 오른쪽에 TOP 10" 처럼 위치를 명확히 말하면 수정 횟수가 줄어요.
이렇 게 하면 안 돼요
진행 중인 코드에 새 디자인 규칙 적용하기: 이미 만든 코드 위에 새 규칙을 적용하려면 충돌이 생깁니다. AI가 기존 패턴을 계속 따라가려 해요.
"예쁘게 해줘" 같은 모호한 요청: AI는 구체적인 지시를 좋아합니다. 토큰명, 색상 코드, 간격 수치를 말해주세요.
🌍 다른 업무에 적용한다면?
마케팅 캠페인 성과 대시보드
고객 문의 현황 모니터링 화면
팀 내부 KPI 트래커
비슷하게 "데이터 수집 → 시각화 → 권한 관리" 패턴이 필요한 곳이라면 이 경험을 그대로 적용할 수 있을 것 같아요.
🚀 앞으로의 계획
디자인 가이드를 넣고 새로 UI 만들어보기 (이번엔 처음부터!)
게시글별 트렌드 분석 기능 추가
알림 기능 (특정 조회수 돌파 시 슬랙 알림)
