소개
교육 담당자 입장에서 뾰족하고, 참가자에게 확실한 결과물을 만들어줄 수 있으면서, 타사에서는 찾아보기 힘든 강의를 만드는 것은 결코 쉽지 않습니다.
- 타사 강의 주제들 리서치
- 직무 / 툴을 고려한 주제 아이데이션
- 나온 주제들 중 가장 매력적인 것을 선택하고 상세페이지 글 쓰고
- 이를 수정하고 다듬어서 시각화하는 과정까지
욕심 가득 욕망 덩어리를 담아서 만들어보았습니다.
진행 방법
크롤링
- 국내외 강의 사이트들을 매일 아침 6시에 자동 크롤링 하도록 세팅
- Playwright MCP를 이용해서 크롤링을 하면서 - 추후에는 playwright mcp를 쓰지 않아도 되도록 크롤링 스크립트를 작성함
- 대부분 강의 사이트는 스크립트로도 잘 크롤링이 되었는데 유*미의 경우 크롤링을 빡세게 막아둔 듯 -> 이 경우는 어쩔 수 없이 Playwright MCP로 크롤링 하도록 함 (클로드코드 헤드리스 모드로 매일 아침 6시 실행)
- 나머지 스크립트화 된 사이트들도 매일 아침 6시에, 스크립트가 실행되어 자동 크롤링되고 - 혹시 사이트 구조 변경 등으로 스크립트에 오류가 나는 경우 자동으로 Playwright MCP가 실행되어 크롤링하고 + 변경 사항에 따라 스크립트도 수정 -> 다음날부터는 에러 안 나게 하기
주제 도출
- 키워드 + 타깃 직군 + 강의에서 쓰고 싶은 툴을 선택하면 무조건 ROI를 개선할 수 있는 주제를 20가도출하게 했습니다.
- 프롬프트는 3단계 LLM으로 돌아가며, (gemini 3.0 pro preview 활용 / 총 소요 시간 약 3분)
- 1차는 관련 주제를 15개 ~ 20개 정도 자동으로 뽑고,
- 2차는 5개의 지표로 위 주제들에 대해 평가를 하고
- 3차는 최종 선정된 3개의 주제와 약식 커리큘럼을 보여줍니다.
- 각 단계별로 어떤 주제들이 후보군으로 올랐는지 확인할 수 있습니다.
- 최종 선정 3개 주제보다, 다른 주제들이 제 눈에 더 매력적일 때도 많더라고요..?
매력적인 주제 아카이브
- 나온 주제들 중 - 강의화 하고 싶은 것들은 북마크 기능을 통해 하나로 모아둘 수 있습니다.
- 직군 및 키워드 별로 모아서 볼 수도 있고요
- 그 중 마음에 드는 것을 '랜딩페이지' 버튼 클릭 > '콘텐츠 미리보기 생성' 버튼을 누르면 랜딩페이지에 들어갈 문구가 자동 생성됩니다.
- 단, AI가 만들어준 초안 커리큘럼이 마음에 들지 않을 수 있으니 아래 쪽 'AI로 재생성' 버튼을 누르면 - 제가 원하는 추가 프롬프트를 입력해서 상세페이지를 뽑을 수 있습니다.
랜딩페이지(상세 페이지? 디자인)
- 초안 쓰고 + 마케터분들 피드백 받은 노션 문서를 md 파일로 저장해서, 해당 문서를 상세페이지화 해달라고 합니다.
- 기존 프로젝트 말고, 랜딩페이지 생성 테스트를 위한 프로젝트 하나를 추가로 만듬
- sample.md를 만들고 여기에 - 랜딩페이지에 들어갈 내용을 추가함 (노션으로 수동 작업한 것)
- 수민님께서 이전에 공유해주신 디자인 시스템 프롬프트를 적용
- 두 파일을 보고 랜딩페이지 만들어달라고 요청
- 결과 -
- 나쁘지 않은데 좀 심심합니다.
- 디자인 개선 요청 - 클로드스킬, 타사 랜딩페이지 사례 포함해서 개선해달라고 등 난리를 쳤지만 결국 원하는대로는 나오지 않았습니다.
- 그래서 21st.dev 에서 히어로만 레퍼런스로 가져와서 초반부 간지만 일단 살리고 ... 일단 넘어가기로 했습니다.
- 그리고 다음부터는 제가 템플릿에 맞춰서 텍스트 문서를 주면 자동으로 위 랜딩페이지 템플릿이 적용되어 시각화 하는 코드를 짜달라고 했습니다.
두개 프로젝트 연결
- 방금전 프로젝트(편의상 B)에서 텍스트를 넣으면 - 자동으로 랜딩페이지 html 이 생성되는 자동화를 완성시켰고
- 기존에 작업하던 프로젝트(A)로 다시 가서 클로드 코드를 켠 후 B 프로젝트의 코드베이스를 읽고, 우리 쪽에서 가져올 텍스트 > 상세페이지 자동화 코드 및 기타 필요한 파일을 가져오라고 해서 합체 시켰습니다.
- 마크다운 문법이 적용된 랜딩페이지 이미지가 보이고, '섹션별 편집 모드로 전환'을 누르면 각 영역 텍스트를 수정할 수 있는데 아직은 사용성은 좋지 않습니다..
- 저장 버튼을 누르면 html 다운로드 가능하고 - 이 코드로 배터모드 게시판에 게시글로 삽입할 수 있습니다.
랜딩페이지 아카이브
- 위에서 저장된 랜딩페이지들은 한 페이지에서 모아볼 수 있고, 이 쪽에서도 각 영역을 추가로 편집할 수 있습니다.
결과와 배운 점
- (대량 생산을 위한) 상세페이지 디자인은 여전히 어렵습니다. - 혹시 더 좋은 방법 아시는 분 도움 요청합니다. 특히 상세페이지 중간중간에 이미지가 없어서 더 밋밋한 것 같습니다.
- 만든 김에 더 잘 쓰고 싶은데 (예) 제가 주제 1차 필터링 하고 마케터분들과 이 화면을 보면서 논의하거나... 각자 편집한 로그가 남거나 -> 그리고 해당 피드백들이 모두 여기에 또 쌓여서 다음에 랜딩페이지 생성할 때는 해당 피드백이 프롬프트로 적용된다거나?
- 그리고 supabase 연결을 처음에 했다가 제가 무지성으로 만들면서 스키마가 꼬인 것 같습니다. 이후부터는 로컬로 쭉 작업을 했고, (아직 안 했지만 예상컨대) 일단 마이그레이션을 로컬 기준에서 쭉 해달라고 하고, 그 다음에 supabase로 옮기면 더 편하지 않을까 생각해봤습니다.
