크루 반응형 온보딩 사이트 제작기
팀
팀제이커브
Home
AI Leadership
AI NEWS
AI Native Lab
구독
AI Strategy
카테고리
Empty
배경
팀제이커브에 새로운 크루가 합류할 때마다 온보딩은 매번 즉흥적이었다. 정해진 절차 없이 담당자의 기억에 의존했고, 빠지는 항목이 생기거나 같은 내용을 반복 설명하는 일이 잦았다.
이 문제를 해결하기 위해 온보딩 프로세스를 체계화하기로 했다. 처음에는 SKILL.md라는 업무 설계서 형태로 접근했지만, 작성하다 보니 방향이 바뀌었다.
완성된 결과물 예시
문서에서 웹앱으로 - 피봇하기까지
처음: SKILL.md (업무 설계서)
클로드와 대화하면서 온보딩에 필요한 모든 항목을 정리하기 시작했다. 합류 전 행정 처리부터 계정 세팅, 그라운드 룰, 크루제도, 업무 환경, 고정 스케줄, HR, 업무 맥락까지 8개 Phase로 구조화했다.
정리하면서 각 항목마다 [자동] / [사람] 분류도 함께 했다. "이건 문서 링크 하나로 해결 가능하고, 이건 반드시 누군가가 직접 해줘야 한다"는 구분이었다.
SKILL.md로 정리된 결과물은 꽤 괜찮았다. 그런데 한 가지 질문이 남았다.
"이 마크다운 문서를 어떻게 활용해야 조직 차원에서 쓸 수 있을까?"
전환점: "체험형 온보딩"이라는 키워드
클로드에게 활용 방안을 물었을 때, 두 가지 선택지가 나왔다.
1.
노션 기반 - 빠르게 만들 수 있지만 동적 기능(진행률, 단계별 잠금 등)이 불가능
2.
웹앱 기반 - 인터랙티브한 체험형 온보딩이 가능
노션 페이지에 체크박스를 나열하는 것과, 단계별로 직접 완료하면서 진행률이 쌓이는 웹앱은 온보딩 경험 자체가 다르다. 후자를 택했다.
이 시점에서 SKILL.md는 웹앱의 콘텐츠 기반 문서로 역할이 바뀌었다. 문서가 버려진 게 아니라 역할이 진화한 셈이다.
제작 과정
1단계: 콘텐츠 완성 (SKILL.md)
클로드가 하나씩 질문을 던지고, 답변을 받아 스킬 문서를 채워나가는 방식으로 진행했다.
•
슬랙 채널 목록 및 용도 (all-unit, client, mkt-osmu-raw 등 10개+)
•
노션 주요 페이지 링크 4개 (메인 허브, 주간 기록지, AI Native Lab, 워크숍 DB)
•
휴가/근태 규정, 일일 회의 참석 규칙
•
크루 정보 관리 시트 위치
•
공용 계정(tool/info/agent) 역할 설명
2단계: 기획서로 피봇
SKILL.md가 완성되자 바로 웹앱 기획으로 전환했다. 클로드 Opus 4.6에게 플랜을 짜게 했다.
설계 핵심은 다음과 같았다.
•
3단계 화면 구조: 환영 화면(이름 + 크루 타입 선택) -> 온보딩 대시보드(8 Phase) -> 완료 화면
•
좌측 사이드바: Phase 1~8 진행 현황을 한눈에
•
실시간 진행률: 항목 체크할 때마다 퍼센트 갱신
•
인터랙티브 요소: 메일 자동 작성, 캘린더 초대, Notion 링크 연결, 아코디언 참고/상세
3단계: 구현 (Sonnet 4.6)
실제 코딩은 Sonnet 4.6에게 맡겼다. Opus가 짠 플랜을 기반으로 React SPA를 만들었다.
주요 기능 구현 과정
메일 자동 작성 기능이 가장 많은 반복을 거쳤다.
•
처음에는 window.location.href로 mailto를 실행했는데, iframe 안에서 실행되면서 화면 자체가 날아가는 버그 발생
•
window.open(..., '_blank')로 수정하여 해결
•
•
50개 이상 한국 성씨 테이블을 내장하여 성 + 이름 초성 조합으로 메일 주소 추론
커피챗 스케줄링은 날짜/시간을 선택하면 전체 크루 10명에게 구글 캘린더 초대가 발송되는 구조로 만들었다.
수정의 반복
한 번에 완성된 건 아니었다. 주요 수정 이력을 보면:
1.
WelcomeScreen의 CSS가 빠져서 input 배경이 흰색으로 렌더링되는 문제
2.
하단 버튼이 잘려서 보이지 않는 레이아웃 오버플로우
3.
메일 버튼 클릭 시 하얀 화면(iframe mailto 이슈)
4.
Phase별 세부 내용 조정 (크루 정보 최신화에서 메일 버튼 제거, 메일 시그니처를 담당자 안내 요청으로 변경 등)
5.
크루 타입(CORE/HUB)에 따른 일일 회의 규칙 분기 처리
이 과정에서 스크린샷을 찍어 보여주고 문제를 설명하면 클로드가 원인을 파악하고 수정하는 식으로 진행했다.
결과물: 홍웰컴
최종 배포된 사이트(안): 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별로 보이는 항목을 다르게 구성
'AI Native 백과사전' 구독하기
사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'AI Native 백과사전'을 구독하세요!
Slashpage에 가입하고 'AI Native 백과사전'을 구독하세요!
