# 크루 반응형 온보딩 사이트 제작기 # 배경 팀제이커브에 새로운 크루가 합류할 때마다 온보딩은 매번 즉흥적이었다. 정해진 절차 없이 담당자의 기억에 의존했고, 빠지는 항목이 생기거나 같은 내용을 반복 설명하는 일이 잦았다. ![https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/c9ba8f406cb0.png](https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/c9ba8f406cb0.png) 이 문제를 해결하기 위해 온보딩 프로세스를 체계화하기로 했다. 처음에는 SKILL.md라는 업무 설계서 형태로 접근했지만, 작성하다 보니 방향이 바뀌었다. ![완성된 결과물 예시](https://upload.cafenono.com/image/slashpagePost/20260325/110715_7ixZImNhmZFxXC2V5M?q=80&s=1280x180&t=outside&f=webp) --- # 문서에서 웹앱으로 - 피봇하기까지 ## 처음: SKILL.md (업무 설계서) 클로드와 대화하면서 온보딩에 필요한 모든 항목을 정리하기 시작했다. 합류 전 행정 처리부터 계정 세팅, 그라운드 룰, 크루제도, 업무 환경, 고정 스케줄, HR, 업무 맥락까지 8개 Phase로 구조화했다. 정리하면서 각 항목마다 **[자동]** / **[사람]** 분류도 함께 했다. "이건 문서 링크 하나로 해결 가능하고, 이건 반드시 누군가가 직접 해줘야 한다"는 구분이었다. SKILL.md로 정리된 결과물은 꽤 괜찮았다. 그런데 한 가지 질문이 남았다. > "이 마크다운 문서를 어떻게 활용해야 조직 차원에서 쓸 수 있을까?" ## 전환점: "체험형 온보딩"이라는 키워드 클로드에게 활용 방안을 물었을 때, 두 가지 선택지가 나왔다. 1. **노션 기반** - 빠르게 만들 수 있지만 동적 기능(진행률, 단계별 잠금 등)이 불가능 2. **웹앱 기반** - 인터랙티브한 체험형 온보딩이 가능 노션 페이지에 체크박스를 나열하는 것과, 단계별로 직접 완료하면서 진행률이 쌓이는 웹앱은 온보딩 경험 자체가 다르다. 후자를 택했다. ![https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/a75f741c098c.png](https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/a75f741c098c.png) 이 시점에서 SKILL.md는 **웹앱의 콘텐츠 기반 문서**로 역할이 바뀌었다. 문서가 버려진 게 아니라 역할이 진화한 셈이다. --- # 제작 과정 ## 1단계: 콘텐츠 완성 (SKILL.md) 클로드가 하나씩 질문을 던지고, 답변을 받아 스킬 문서를 채워나가는 방식으로 진행했다. - 슬랙 채널 목록 및 용도 (all-unit, client, mkt-osmu-raw 등 10개+) - 노션 주요 페이지 링크 4개 (메인 허브, 주간 기록지, AI Native Lab, 워크숍 DB) - 휴가/근태 규정, 일일 회의 참석 규칙 - 크루 정보 관리 시트 위치 - 공용 계정(tool/info/agent) 역할 설명 크루제도는 [jcurveschool.com](http://jcurveschool.com/)의 실제 페이지를 클로드가 직접 읽고 정리했다. CORE, HUB, FREE 3가지 크루 체계와 리더진 정보까지 한 번에 반영됐다. [제이커브스쿨 - 기업을 위한 전문 AI 교육 서비스](http://jcurveschool.com/) ## 2단계: 기획서로 피봇 SKILL.md가 완성되자 바로 웹앱 기획으로 전환했다. 클로드 Opus 4.6에게 플랜을 짜게 했다. 설계 핵심은 다음과 같았다. - **3단계 화면 구조**: 환영 화면(이름 + 크루 타입 선택) -> 온보딩 대시보드(8 Phase) -> 완료 화면 - **좌측 사이드바**: Phase 1~8 진행 현황을 한눈에 - **실시간 진행률**: 항목 체크할 때마다 퍼센트 갱신 - **인터랙티브 요소**: 메일 자동 작성, 캘린더 초대, Notion 링크 연결, 아코디언 참고/상세 ## 3단계: 구현 (Sonnet 4.6) 실제 코딩은 Sonnet 4.6에게 맡겼다. Opus가 짠 플랜을 기반으로 React SPA를 만들었다. ![https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/22d1d86ffb7e.png](https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/22d1d86ffb7e.png) ### 주요 기능 구현 과정 **메일 자동 작성 기능**이 가장 많은 반복을 거쳤다. - 처음에는 `window.location.href`로 mailto를 실행했는데, iframe 안에서 실행되면서 화면 자체가 날아가는 버그 발생 - `window.open(..., '_blank')`로 수정하여 해결 - 합류자의 이름 석 자를 입력받으면 팀제이커브 이메일을 자동 생성하는 로직 추가 (홍지민 -> [jmhong@teamjcurve.com](mailto:jmhong@teamjcurve.com)) ![https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/3d6fa99b0eb6.png](https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/3d6fa99b0eb6.png) - 50개 이상 한국 성씨 테이블을 내장하여 성 + 이름 초성 조합으로 메일 주소 추론 **커피챗 스케줄링**은 날짜/시간을 선택하면 전체 크루 10명에게 구글 캘린더 초대가 발송되는 구조로 만들었다. ![https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/ad97cf9ed689.png](https://raw.githubusercontent.com/teamjcurve-ai/blog-assets/main/images/3229c7b3-864f-8035-835c-dc25463f6ec4/ad97cf9ed689.png) **노션 프로필 가이드**는 [faces.notion.com](http://faces.notion.com/) 접속 -> 페이스 제작 -> 다운로드 -> 담당자 공유의 4단계 프로세스를 모달로 안내하도록 구성했다. [Notion Faces](http://faces.notion.com/) ### 수정의 반복 한 번에 완성된 건 아니었다. 주요 수정 이력을 보면: 1. WelcomeScreen의 CSS가 빠져서 input 배경이 흰색으로 렌더링되는 문제 2. 하단 버튼이 잘려서 보이지 않는 레이아웃 오버플로우 3. 메일 버튼 클릭 시 하얀 화면(iframe mailto 이슈) 4. Phase별 세부 내용 조정 (크루 정보 최신화에서 메일 버튼 제거, 메일 시그니처를 담당자 안내 요청으로 변경 등) 5. 크루 타입(CORE/HUB)에 따른 일일 회의 규칙 분기 처리 이 과정에서 스크린샷을 찍어 보여주고 문제를 설명하면 클로드가 원인을 파악하고 수정하는 식으로 진행했다. --- # 결과물: 홍웰컴 최종 배포된 사이트(안): [jcurve-onboarding.vercel.app](http://jcurve-onboarding.vercel.app/) [팀제이커브 크루 온보딩](http://jcurve-onboarding.vercel.app/) ## 구성 요약 | 구분 | 내용 | | --- | --- | | 기술 스택 | React (SPA), Vercel 배포 | | 디자인 | 다크 모드, 민트/시안 액센트 | | 총 Phase | 8단계 | | 총 체크리스트 항목 | 36개 | | 인터랙티브 요소 | 메일 자동 작성, 캘린더 초대, Notion 링크, 아코디언, 진행률 바 | ## 8개 Phase | Phase | 이름 | 항목 수 | | --- | --- | --- | | 1 | 합류 전 (담당자 액션) | 5 | | 2 | 계정 세팅 (합류 첫날) | 4 | | 3 | 그라운드 룰 | 5 | | 4 | 크루제도 파악 | 2 | | 5 | 업무 환경 세팅 | 8 | | 6 | 고정 스케줄 | 4 | | 7 | HR 안내 | 2 | | 8 | 업무 맥락 | 6 | --- # 제작 방식에 대한 회고 ## Opus로 플랜, Sonnet으로 구현 이번 프로젝트에서 시도한 방식은 **AI 모델 간 역할 분담**이었다. - **Opus 4.6**: 전체 구조 설계, Phase 분류, 기능 기획, 콘텐츠 정리 - **Sonnet 4.6**: 실제 React 코드 구현, 버그 수정, UI 조정 Opus는 "뭘 만들어야 하는지"를 잘 정리해주었고, Sonnet은 "어떻게 만들 것인지"를 빠르게 실행했다. 기획과 구현을 분리한 것이 효율적이었다. ## SKILL.md에서 시작한 것이 핵심 처음부터 웹앱을 만들겠다고 했으면 콘텐츠가 허술했을 가능성이 높다. 마크다운 문서로 전체 내용을 꼼꼼히 정리한 뒤 웹앱으로 전환했기 때문에, 각 항목의 설명, 링크, 담당자 정보가 빠짐없이 들어갔다. 문서 -> 기획 -> 구현 순서가 결과적으로 맞았다고 볼 수 있겠다. 처음에는 스킬을 만들어야겠다는 생각이었지만, 사실상 기획안을 만들게 된 셈이다. ## 사람의 손을 덜 타게 이 프로젝트의 원래 목표는 "온보딩에서 사람의 손이 덜 타게 하기"였다. 완전 자동화는 아니지만, 새 크루가 링크 하나를 받아서 스스로 진행할 수 있는 구조가 만들어졌다. 담당자에게 메일을 보내야 하는 항목도 버튼 하나로 해결되고, 어떤 채널에 들어가야 하는지, 어떤 노션 페이지를 확인해야 하는지도 각 단계에서 바로 안내된다. --- # 향후 개선 가능한 것들 - **진행 상태 저장**: 현재는 새로고침하면 초기화됨. 브라우저 스토리지 또는 DB 연동 필요 - **관리자 대시보드**: 누가 어디까지 완료했는지 한눈에 확인 - **슬랙 알림**: 온보딩 완료 시 채널에 자동 공지 - **크루 타입별 분기 강화**: CORE/HUB/FREE별로 보이는 항목을 다르게 구성 For the site tree, see the [root Markdown](https://blog.teamjcurve.com/.md).