Sign In
구독

크루 반응형 온보딩 사이트 제작기

팀
팀제이커브

배경

팀제이커브에 새로운 크루가 합류할 때마다 온보딩은 매번 즉흥적이었다. 정해진 절차 없이 담당자의 기억에 의존했고, 빠지는 항목이 생기거나 같은 내용을 반복 설명하는 일이 잦았다.
이 문제를 해결하기 위해 온보딩 프로세스를 체계화하기로 했다. 처음에는 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) 역할 설명
크루제도는 jcurveschool.com의 실제 페이지를 클로드가 직접 읽고 정리했다. CORE, HUB, FREE 3가지 크루 체계와 리더진 정보까지 한 번에 반영됐다.

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')로 수정하여 해결
•
합류자의 이름 석 자를 입력받으면 팀제이커브 이메일을 자동 생성하는 로직 추가 (홍지민 -> jmhong@teamjcurve.com)
•
50개 이상 한국 성씨 테이블을 내장하여 성 + 이름 초성 조합으로 메일 주소 추론
커피챗 스케줄링은 날짜/시간을 선택하면 전체 크루 10명에게 구글 캘린더 초대가 발송되는 구조로 만들었다.
노션 프로필 가이드는 faces.notion.com 접속 -> 페이스 제작 -> 다운로드 -> 담당자 공유의 4단계 프로세스를 모달로 안내하도록 구성했다.

수정의 반복

한 번에 완성된 건 아니었다. 주요 수정 이력을 보면:
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 백과사전
'AI Native 백과사전' 구독하기
사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'AI Native 백과사전'을 구독하세요!
구독
👍
Open channel