동료 스터디에 앞서 공인중개사가 먼저 만들어 본 'Claude Cowork 5분 입문' 대시보드 ✨

하모니카 · 에이전트 / 노코드 자동화 · · 좋아요 0 · 답글 0

연재 강의 기획과 자료 자동화 1/1편

부동산 스터디에 앞서 공인중개사가 먼저 직접 만들어 본 'Cowork 5분 입문' 대시보드 ✨

🌐 결과물 미리보기: https://sachol.github.io/cityuncle-cowork-intro-dashboard/
📦 코드 저장소: https://github.com/sachol/cityuncle-cowork-intro-dashboard

🌐 대시보드 개선/확장 사례글: https://github.com/sachol/cityuncle-cowork-intro-dashboard/blob/main/case-study-v2.md

배운 점

  1. 🚨 검증 게이트가 이번 사례의 가장 큰 배움입니다. 결과물이 거의 완성된 시점에도 "의도와 맞나? 사실은 정확한가?" 한 번 더 묻는 단계만으로 5~6곳의 외부 사실 오류가 잡혔습니다. 그대로 게시되었다면 수강생분들이 따라할 수 없는 자료가 됐을 텐데, 한 줄 질문이 결과물의 신뢰성을 통째로 구했습니다.

    이 경험을 운영 규칙(CLAUDE.md)에 "기획의도 검증 게이트" 로 새겨, W2~W4 다음 결과물에도 자동 실행됩니다. 같이 공부하시는 분들도 본인 결과물 게시 직전에 4개 항목(의도 일치 / 사실 정확성 / 청자 가치 / 본질 흐림) 한 번씩 점검해 보시기를 권합니다. AI로 빠르게 만들수록 이 단계가 더 중요해집니다.

  2. 🧩 첫 사례부터 메인·서브 구조로 분리한 게 가장 잘한 결정이었습니다. 결과물 디렉터리·문서·사례글이 한 폴더 안에서 깔끔하게 묶입니다.

  3. ✨ 강사가 먼저 직접 적용해 검증한 결과물 한 장은 슬라이드보다 강한 신뢰가 됩니다. "직접 만들어 본 거예요"가 OT 자료의 기둥이 됩니다.

  4. 🌗 다크 모드는 CSS 변수 + [data-theme="dark"] 오버라이드만으로 +80줄입니다. 디자인 시스템을 토큰화하면 추가 비용이 거의 없습니다.

  5. 🎨 네오브루탈 톤은 굵은 검정 보더·그림자가 핵심이라 라이트/다크 양쪽에서 잘 어울립니다. 같은 톤을 다음 결과물에 그대로 재사용할 수 있는 자산이 됐습니다.

  6. 🔁 "📱 폰 → 💻 데스크탑 → 📲 폰" 흐름(Cowork Dispatch 베타)을 한 번 정확히 시연해두면, 외근·임장 중 활용이라는 핵심 가치가 즉시 전달됩니다. W4 크롬 확장 단계에서도 이 컨셉을 그대로 확장할 수 있습니다.

시행착오

  • 다크 모드에서 워커 카드 가독성: 첫 진입 시 opacity 0.15 → 0.65로 올리고 채도·스케일로 인터랙션 차별화. 라이트 모드 검증만으로는 발견 못 했습니다.

  • 💡 강조 박스가 묻힘: rgba 흐릿한 톤 → 노랑 채움 강조 토스트로 변경. "강조하고 싶다면 명도 차이가 분명해야 한다"는 단순한 원칙을 다시 확인했습니다.

  • HERO 카피의 추상성: "사무소 일"이 막연 → "공인중개사 업무"로 구체화. 도메인 어휘를 그대로 쓰는 게 공감대를 더 만들었습니다.

  • 외부 기능명을 임의로 명명한 큰 실수 (가장 중요): 초안 단계에서 "Dispatch"를 fan-out 메타포로 잘못 명명했고, 가입 경로·플랜 등도 추측으로 채워둔 상태였습니다. 게시 직전에 한 번 더 검증을 거치며 공식 문서를 확인했더니 5~6곳이 사실과 달랐고 모두 정정했습니다. 구체적 정정 표·발견 과정·운영 규칙화는 위 진행 방법 7단계에 자세히 정리해 두었습니다 — 이 사건이 검증 게이트 도입의 계기였습니다.

앞으로의 계획

이 미니 사례는 22기 4주 마일스톤의 첫 주에 만든 "주차별 본 사례 옆에 두는 1장 견본" 입니다. 다음 회차들에서는 본 사례·강의자료·대시보드 결과물이 차례로 이어질 예정이고, 그때마다 사례글로 따로 공유해 보고자 합니다. (시간이 되는 한....)

가까이는, 이 작은 사례를 다음 회차에 강의자료 1차시로 변환해보면서 — 한 장 페이지가 어떻게 슬라이드·워크북·퀴즈 1세트로 자연스럽게 풀리는 지를 확인할 계획도 있습니다.

도움 받은 글 (옵션)

태그: #강의자동화 #OT과제