결과물

🛒 찜마켓 — 안전한 맞찜 플랫폼

라이브: https://zzim-exchange.vercel.app
GitHub: https://github.com/owenleekr/zzim-exchange

카톡으로 맞찜 구하고, 답방 안 오고, 먹튀 당하는 셀러들을 위한 서비스.
스크린샷 인증 + 신뢰 온도 + 크레딧 시스템으로 “진짜 맞찜”만 합니다. 오웬아 오웬아 왜요 클 왜요 클 처음부터 한길을 가지 그랬니

주요 기능:

카카오 로그인 (10초 가입)
- 단순 이메일 인증에서 탈피
에이블리 / 지그재그 / 무신사 셀러 전용
- 서비스 더 뾰족하게 좁힘
- 아직 나한테만 뾰족한듯?
맞찜 요청 → 스크린샷 인증 → 상대 승인 → 완료
- 먹튀 이야기가 커뮤니티 많아서 상호 인증으로 진행
당근 매너온도 방식의 신뢰 온도 (36.5도 시작)
- 당근아 고맙다
먹튀하면 온도 떨어지고, 성실하면 올라감
24시간 내 미이행 시 자동 환불
내 찜마켓 링크 공유 기능
- 셀러오이나 다른 곳에서 공유 어떻게 함
SEO + OG 태그 (카톡 공유 시 미리보기)
- 공유할 때 어떻게 보임?
프리미엄 랜딩 페이지 (대시보드 프리뷰, 다크 솔루션 섹션)
- 디자인 해도해도 이상해지는 것은 내 탓? 다다 공유해준 스티치로 해결

🔧 스킬 2개 제작 (GitHub 공개)

==/briefing — “지금까지 뭐했지?” 자동 브리핑
==/timecheck — 작업 시간 추적 + 병목 분석==

클로드의 위험성은 나의 부족함을 언제나 매워주는 클로드 덕분에 내가 똑똑한 것 아닐까라는 착각을 하게 되는 것에 있음

🔧 새롭게 사용한 스킬

스킬명	스킬 특징	한 것
UltraQA	자동 QA 사이클 (테스트→수정→반복)	10개 이슈 발견 → 2사이클 만에 전부 수정
Claude Preview	실시간 UI 미리보기 + 모바일 확인	배포 없이 바로 디자인 검증
skill-creator	스킬 제작 가이드	briefing/timecheck 스킬 만들 때 활용
update-config	settings.json hook 자동 설정	timecheck용 시간 기록 hook 설정
awesome-design-md	디자인 시스템 MD 파일 적용	Cal.com 디자인 테스트 (롤백했지만 시도 자체가 공부)
hook 설정	SessionStart/PreToolUse 자동 기록	한번 설정하면 모든 세션에서 시간 자

만든과정 및 삽질

1~3주차: WHY가 없던 시절

링크드인에 이렇게 썼습니다:

“솔직히 고백하면, 처음엔 WHY가 없었다. AI 시대에 뒤처지면 안 될 것 같다는 불안감. 대단한 건 아니더라도 뭐라도 만들어내고 싶다는 조급함.”

팀원들이 CRM 자동화, 기사 자동화, 홈페이지 리뉴얼을 뚝딱 만들어내는 걸 보면서… 나는 이메일 로그인 + URL 복붙 수준의 프로토타입만 만들고 멈춰 있음

Pasted image 20260404171723.png

3주차 후반: 멈추고 다시 물었다

“오랫동안 지고 있던 책임감을 내려놓고, 솔로프리너로 서고 싶었다. 항상 나에게 밥 벌어먹고 살게 해줬던 온라인 셀러 분들에게 지금 내가 가진 스킬로 뭘 해드릴 수 있을까?”

방향이 잡히니까 다시 움직일 수 있었습니다.

Group 1.png

4주차: 4시간 만에 MVP → 고도화까지

QA 스킬 써서 제품 검수를 했지만, 실제 유저 사이드에서 사용해보니 불편한 부분이 지속적으로 체크 됨
- - 2개의 테스트 기기로 상호 검증 진행하면서 오류와 ux 보완
지금까지 진행된 서비스 구글 LM 학습 시키고 소개서 제작
- https://notebooklm.google.com/notebook/e1f66fb3-af42-4713-95ed-f5282c9e7b68
1:N 병렬로 신청 안되는 구조 해결
할게 계속해서 보임,,,
- 일단 가벼운(?) 스레드 형태의 커뮤니티 만드는 것 시도
- 가벼운 것 맞나?
  - 문득 이거 나중에 서버비 같은 것들 실질적으로 어떻게 될까?
알림 기능이 없어 알림 기능 구현
- 알림이 있으니 좋다
- 클로드코드에서 시간 오래 걸린다고 진짜 할건지 물어봄
- 사실 오래 안걸림 -

고객은 어떻게 모을거냐?

셀러 오션 카페 셀러인척 잠입
셀러 단톡방 자연스럽게 홍보
유료 결제 태워봄 일 2만원
- 근데 갑자기 방장님 사업 제안함…?!!

Pasted image 20260405153549.png

/timechek skill

뭘 했나	어떻게	얼마나
서비스 설계	brainstorming 스킬로 8개 질문	25분
코드 구현 12개 태스크	서브에이전트 병렬 실행	40분
코드 리뷰 + 보안 수정	code-reviewer가 14개 이슈 발견	20분
디자인 업그레이드	shadcn/ui + Framer Motion	25분
카카오 OAuth + 배포	Supabase + Vercel	50분
서비스 피드백 + 고도화	UltraQA, 리서치, 랜딩 리디자인	1시간
랜딩 페이지 3차 리디자인	레퍼런스 기반 프리미엄 디자인	30분
리브랜딩 (찜마켓) + 로고	텍스트 로고 + 파비콘 제작	15분
SEO + 공유 링크	OG 태그, 메타데이터, 공유 버튼	10분
총		약 5시간 40분

추가로 클라리티 설치 Pasted image 20260405160141.png

설리반에 영감을 받은 오리반 프로젝트

매일 어제 나스닥 및 국제 경제 시황을 토대로 비트코인 분석 해주는 친구
- 자주 보는 뉴스 채널, 자주 참고하는 트레이더들 관점을 학습 시키고 트레이딩 모델 만들어 달라고 함
- 트레이더보다 단기/중기/장기 매매 성향과 보는 차트가 달라서 오히려 섞이니 길을 못잡는 느낌
- ai 종목 추천 서비스는 어떻게 만들어 지는지 원리가 궁금함
오리반 프로젝트(가칭) 에서는 아래 업무를 할당하고자 함
- 캐시 (돈나무 언니) : 전체 경제 시황 분석을 토대로 다양한 투자 포트폴리오 조언
- short (선물 롱/숏 말고) : 단기적 투자처에 대한 브리핑 (주로 알트 자산들)
- 단톡방 스틸러 (클로드 관련 단톡방 내용 복제) : 24시간 안에 벌어진 대화들 중 유의미한 대화 등 요약
- 헬스장 : 개인 다이어트 도우미
위 프로젝트들이 근데 하나의 헌장 등을 같기는 애매한데, 실제로 셀피쉬 오픈 클로 소모임에서도 하고 있는 고민들을 딥하게 해봐야 할듯 -> 같은 일을 하기 위해 각각의 역할을 수행하는 형태일 때, 효율적일텐데 개인의 학습 / 건강 관리 / 투자 이렇게 파편화된 부분에서는 따로 가져가는게 맞을지 그럼에도 불구하고 하나의 트리 안에서 있으면 좋을지 아직 잘 모르겠음.
- 단기 투자 봇은 재앙급…
  - 여기도 역시나 단기 거래 최적화 된 매매법 + 트레이더들 관점 섞었는데 실시간 대응의 관점에서 어려움이 많은 듯 -> 거래 api까지 붙여야 제대로 작동할까 고민?

주요 삽질:

카카오 KOE205 에러 — 비즈 앱 전환 필요 (이걸 몰라서 30분)
- 더 정확히 말하면 시킨대로 비즈 앱 인증 했으면 될것을 그거 하기 싫어 이메일은 권한 빼려다 오히려 스탭 꼬임
shadcn v4가 Next.js 14와 비호환 → v3 컴포넌트로 수동 교체
- 최신 레고 블록이 내 레고판에 안 맞아서, 구버전 블록으로 바꿔 끼운 것 shadcn은 버튼, 카드 같은 UI 부품 세트야. 최신 버전(v4)을 설치했는데, 우리 프로젝트 기반(Next.js 14)이 구버전이라 부품이 안 맞았어. “이 나사가 구멍에 안 들어가네?” 같은 상황. 결국 구버전(v3) 부품으로 하나하나 교체해서 해결.
프로덕션에서만 에러 — render-prop 패턴이 서버→클라이언트 직렬화 불가
- Next.js에서는 서버(백엔드)가 만든 데이터를 클라이언트(브라우저)로 보낼 때, 택배 상자에 넣을 수 있는 것만 보낼 수 있어. 텍스트, 숫자, 목록은 되는데 “함수(기능)“는 택배로 못 보내. 우리가 “이 함수를 실행해” 라는 걸 택배 상자에 넣으려고 했는데, 내 컴퓨터(로컬)에서는 바로 전달하니까 되고, 실제 서비스(프로덕션)에서는 택배로 보내야 하니까 안 됐던 거. 해결: 함수 대신 결과 데이터만 보내도록 바꿈.
- 여기서 유저 핵심 기능인 각자 사진 인즈엥서 오류 많이 발생한 듯.
- 개발을 몰라도 개발을 할 수 있지만, 반복적이고 동일한 에러들 많이 발생할 것 같은데 이걸 사전에 캐치 하는 스킬은 없나?
  - ==1. 코드 구현 후 npm run build && npm start로 프로덕션 모드 테스트==
  - ==2. Playwright E2E 테스트로 핵심 플로우 자동 검증==
  - ==3. Sentry 연동해서 프로덕션 에러 실시간 감지==
Cal.com 디자인 적용했다가 “너무 단순해서 신뢰성이 없다”고 바로 롤백
- 링크드인에서 본 디자인.md 파일 쓴건데 의미 없었음
- 링크드인에 올릴 때 조심해야겠다는 생각
- 기대하고 사용했는데 뭐야… 이럼 다음 커넥트는 없을듯
랜딩 3번 갈아엎음 (다크→라이트→프리미엄)
- 다다가 추천해준 스티치가 디자인 개선에 가장 큰 도움이 됨
- 해당 코드를 다시 갖고 오는 과정에서의 어색함은 있지만, 개선할 방법이 있을듯
- https://stitch.withgoogle.com/projects/18283416601627786620?pli=1

인사이트

1. WHY가 없으면 2주도 부족하고, 있으면 4시간이면 된다

AI가 대신 해줄 수 없는 건 “왜 만드는가” 뿐
- 마인드 셋은 함께하는 aaa 팀원들에게 배웠고 why는 스스로의 시간에서 나왔다

2. 설계 먼저, 코드 나중에

brainstorming 스킬로 8개 질문을 먼저 거치니까 방향이 안 흔들렸음
- 계속 말해도 좋은 인사이트 내가 뭘 어떻게 할 것인지에 대한 방향성 잡기

3. 코드 리뷰는 무조건 해야 한다

“나 혼자 만든 거니까 괜찮겠지” → Critical 이슈 4개 발견
- 일단 만들자에서 처음부터 코드 완성도 높여보자
- 난 코드 완성도 모르는데 어떻게 하지?
  - ultra qa 스킬 사용
+당연하게도 유저 테스트도!
QA는 시간 날때 마다 돌리는데 계속 수정 사항 발생함
- 서비스 업데이트 지속 발생하니까 자연스럽게 발생

**5. 스티치 > 레퍼런스 > 감각 > 노력

3번 갈아엎으면서 배움: 레퍼런스 던지면서 스타일 잡으려고 했지만 실패하고 스티치에서 프롬포트한 디자인 코드를 다시 클로드 코드에게 던지는 식으로 해결

다시 한다면?

처음부터 WHY를 정리하고 시작. “뭐라도 만들어야지”가 아니라 “누구의 어떤 문제를 풀 것인가”를 Day 1에.

외부 서비스 설정 체크리스트 미리 준비. 카카오 OAuth 순서를 모르면 30분 삽질.

랜딩은 레퍼런스 먼저 모으고 시작. 직접 디자인 → 갈아엎기 반복보다, 좋은 레퍼런스 코드를 참고하는 게 5배 빠름.

빠르게 공유하고 피드백 받기. 친구 폰으로 가입 테스트하니까 코드에서 못 잡은 에러 3개가 바로 나왔음.

프로젝트 브리핑 — 찜마켓

생성일: 2026-04-05 | 기간: 2026-04-02 ~ 04-05 (4일) | 총 커밋: 60개

타임라인

작업 세션 단위 분석

세션	날짜/시간	커밋 수	작업 내용	핵심 결과
#1	04-02 15:40~16:02	14개	MVP 코드 구현 (스캐폴딩→배포)	12개 태스크 완성, 빌드 통과
#2	04-02 16:02~16:47	3개	랜딩 디자인 개선 + 보안 수정	Critical 4개 수정, 히어로 섹션 추가
#3	04-03 09:33~12:19	10개	shadcn/ui 설치 + 디자인 리디자인 + 카카오 버튼	전체 UI 업그레이드, 카카오 공식 색상
#4	04-03 17:22~17:35	3개	로그아웃 + 프로필 피드백 + 맞찜 탭	서비스 피드백 반영 6개
#5	04-04 09:50~10:46	8개	High 이슈 수정 + 데모 셀러 + 만료 + 랜딩 카피	고도화 완료, 속도 개선
#6	04-04 10:46~12:27	8개	프로덕션 에러 수정 + 리브랜딩 (찜마켓)	render-prop 에러 해결, 로고 제작
#7	04-04 12:27~17:08	7개	UltraQA + SEO + 공유 + 프리미엄 랜딩	10개 QA 이슈, OG 태그, 레퍼런스 기반 랜딩
#8	04-05 13:48~15:55	7개	알림 시스템 + 가이드 + UI/UX 28개 수정 + 커뮤니티	실시간 알림, 커뮤니티 피드, Clarity 연동

문제 & 해결 (트러블슈팅)

#	문제	원인	해결	커밋 수
1	카카오 KOE205 로그인 에러	Supabase가 email scope 강제 요청 + 개인 개발자 권한 없음	카카오 비즈 앱 전환	1
2	shadcn v4 빌드 에러	@base-ui/react가 Next.js 14 비호환	v3 스타일 컴포넌트로 수동 교체	1
3	맞찜 관리 페이지 500 에러	render-prop(함수)을 서버→클라이언트로 전달 불가	직렬화 가능한 데이터로 사전 매핑	3
4	Supabase 조인 에러	trust_scores 테이블 foreign key 매칭 실패	복잡 조인 제거, 분리 쿼리로 변경	4
5	크레딧 조작 가능 (보안)	RLS가 credits/trust_scores UPDATE 허용	SECURITY DEFINER RPC 함수로 대체	1
6	스크린샷 인증 에러	알림 타입 제약조건에 일부 타입 누락	notifications_type_check 제약조건 업데이트	2
7	페이지 로딩 느림	processExpiredRequests()가 매 페이지 방문 시 실행	만료 체크 제거 + loading.tsx 스켈레톤	2

현재 상태

진행률: 90% — MVP + 고도화 + 커뮤니티까지 완성

완료:

카카오 로그인 + 온보딩
맞찜 요청/수락/거절/인증/완료 전체 플로우
크레딧 + 신뢰 온도 시스템
실시간 알림 (Supabase Realtime)
커뮤니티 피드 (글/댓글/좋아요/팔로우)
프리미엄 랜딩 페이지
SEO + OG 태그 + 공유 링크
가이드 페이지 + 온보딩 배너
UTM 프로모 크레딧
Microsoft Clarity 분석

미완료:

E2E 테스트 (Playwright)
UTM 크레딧 검증 (쿠키 유실 가능성)
실제 유저 대규모 테스트

배운 점 & 인사이트

WHY가 없으면 2주도 부족, 있으면 4시간: 1~3주 방향 없이 헤맴 → 방향 잡고 4시간 만에 MVP
코드 리뷰 ≠ 실제 테스트: code-reviewer가 14개 이슈를 찾았지만 프로덕션 런타임 에러는 못 잡음. 실제 유저 테스트가 최고의 QA
알림은 핵심 플로우를 깨뜨리면 안 됨: createNotification 실패가 맞찜/온보딩 전체를 깨뜨림 → 모든 알림에 try-catch 필수
랜딩은 레퍼런스가 답: 3번 갈아엎으면서 배움. 직접 디자인보다 좋은 서비스 구조를 참고하는 게 5배 빠름

작업 패턴 분석

커밋 습관

평균 커밋 간격: ~10분
가장 활발한 시간대: 09:00~~12:00, 14:00~~16:00
가장 긴 작업 세션: 세션 #5 (04-04 09:50~10:46, 8개 커밋)

병목 구간 식별

병목 영역	증거	개선 제안
Supabase 조인	fix 커밋 4개 (조인 에러 반복)	복잡 조인 사용 금지, 항상 분리 쿼리
프로덕션 에러	fix 커밋 3개 (로컬에서 안 나는 에러)	배포 전 `npm run build && npm start` 테스트
알림 시스템	fix 커밋 2개 (타입 제약조건 누락)	DB 마이그레이션 시 제약조건 전체 확인

효율성 트렌드

feat 커밋: 37개 (62%) — 기능 개발
fix 커밋: 21개 (35%) — 버그 수정
chore/perf: 2개 (3%) — 유지보수

fix 비율이 35%로 높음. 설계 단계에서 Supabase 조인 패턴과 프로덕션 환경 차이를 사전에 고려했으면 fix 커밋 수를 절반으로 줄일 수 있었음.

커밋 건강도 체크

항목	상태	권장
커밋 빈도	높음 (60개/4일)	✅ 양호
커밋 메시지	구체적 (feat/fix 접두어 사용)	✅ 양호
커밋 크기	적절 (대부분 단일 변경)	✅ 양호
브랜치 활용	미사용 (main 직접 푸시)	⚠️ 기능별 브랜치 분리 권장

week 04 오웬 submit

결과물