소개
우선, 결과물부터
https://onerdot-portfolio.vercel.app/
AI 강사로서의 퍼스널 브랜딩 사이트를 만들었습니다.
지금까지 리틀리를 연동해놨었는데, 이번 기회에 사이트로 만들었어요.
저번 시간을 돌아보니,
제가 가장 하고 싶었던 부분은
다음의 선 순환이었어요.
AI/새로운 정보를 알기 쉬운 용어로 가공하여 영상/강의/인포그래픽/디자인 등 제작 (내가 만드는 것)
↓
그 분야에 대해 생소한 사람들이 접함 (누구에게 전달)
↓
사람들의 이해와 인정 → 설명력, 관련 지식, 강의 경력, 발표 실력 축적 (쌓이는 것)
↓
강의 경력으로 인한 강의 기회 증가 (그래서 생기는 기회)
↓
더 많은 사람들을 도울 기회 (나에게 축적되는 것)
↓
→ 다시 처음으로 (더 좋은 강의/콘텐츠)
이걸, 클로드의 show me 시각화로 보이면 이렇게 됩니다.
(참고로 제미나이에게도 시켜봤더니 이런 결과가..... 제미나이가 더 나은 것 같죠?ㅎㅎㅎ)
제가 착한 사람이라서가 아니라, 이런 과정을 통해서 제가 원동력을 얻는다는 것을 깨달았어요.
그래서 스타트업실험실에 나오고, 누군가에게 리액션하는 것을 즐기고, 누군가를 돕는 것을 즐기는 사람이라는 것을요.
이런 부분은 안보여주고, 항상 전문성, 경력같은 정량적인 것들만을 내세우려하니, 무언가 맞지 않는 느낌이었어요. (ㅎㅎㅎㅎ... 이런거 남에 비해서 내세울 것도 없었는데 말이져...)
게다가 강의를 할 때, 저의 가장 큰 강점은 반응을 유도하고 참여를 유도하는 것이라고 생각했기 때문에.. 제가 목표로 하는 타겟층에게는 정량적인 부분은 와닿지도 않을 것 같았구요.
이 부분은 저번주에 진행한 스스로 돌아보기 과정에서 깨달았어요.
전체 내용도 참고하라고 시키긴 했지만, 핵심 내용은 별도로 언급하여 반영하고 웹사이트를 제작했습니다.
진행 방법
클로드코드 - 에이전트 팀 (팀메이트 소환)으로 제작했습니다.
전에는 러버블이나 윅스, 스티치 등의 노코드 툴을 사용했는데, 예전보단 훨씬 바이브코딩의 장벽이 낮아졌기 때문에 클로드코드를 조금 만져봤습니다 =)
그래서, 이번에는 바이브코딩으로 진행했습니다.
팀 에이전트를 만들고 싶어. 웹페이지 디자인 및 웹사이트 구축팀을 만들고 싶은데, 그 구조에 QA 세션이 있어서, 실제 클라이언트가 느꼈을 때 단순한 템플릿 느낌을 탈피할 수 있는 방식으로.이렇게, 팀 에이전트 기능 (병렬 소환 가능한 팀메이트 에이전트 기능)을 사용하여 최대한 짧은 시간 내에 여러 에이전트가 투입되도록 진행하였습니다.
그리고, 제가 정보를 주기 전에, 우선 팀 에이전트를 만들고, 필요로 하는 정보를 하나씩 주는 방식으로 진행했습니다.
제가 사전에 claude 지침에 '사용자가 스스로 생각하고 판단할 수 있도록, 혼자 결론을 내리지 말고 먼저 생각하도록 유도하라'라고 넣어 놓았기 때문입니다.
(요즘 너무 제가 생각을 안하고 '해줘', '해줘' 하면서 초안 자체를 생각하는 것 자체를 귀찮아하는 느낌이라 반성하고자.....ㅎㅎㅎㅎ)
Agents: Think First 체크리스트 제시 (목적, 초안, 핵심판단, 완성기준)이런 답변이 나왔습니다. (당시 스크린샷을 찍지 않아 세션을 저장한 내용 바탕으로 올립니다...ㅜ)
체크리스트에는 팀을 만드는 목적과, 어떤 방식으로 운영되길 원하는지, 특별한 클라이언트가 있는지, 결과물은 어떻길 원하는지 질문을 받았습니다.
1.팀 프로세스 자체를 만들어두려는 것 / 2.실제 사용자 관점 시뮬레이션 + 디자인 이론 설명 / 3.범용 팀 구조 / 4.배포 가능 사이트+프로세스 문서+디자인 시안 모두우선, 구성 내용 자체는 기획을 했기 때문에,
바로 디자인 단계로 들어갔습니다.
제가 생각하는 디자인의 기본은,
하늘 아래 새로운 디자인이란 없다.
예요.
따라서 레퍼런스 수집이 선행되어야하기 때문에,
phase에 따라 진행했습니다. 이건 전체 세션이 너무 길어서, 요약해서 저장한 대화입니다.
phase는 1-7까지인데, 우선 이런 식으로 진행했다는 것을 보 여드리기 위해 일부를 보여드립니다.
## Assistant
**[TeamCreate]** web-onerdot 팀 생성
**[TaskCreate]** Phase 1~7 태스크 7개 생성 + 의존성 설정
### Phase 1: 클라이언트 분석
**[Agent:analyst]** client-analyst 소환 → client-brief.md 작성
- 강의 주제 확정: 생성형 AI, AI 리터러시, AI 업무 자동화, 소상공인 콘텐츠 자동화
- 수강후기 섹션 제거, CMS: Markdown 직접 수정
- 전환 목표에 신뢰도 향상 추가
### Phase 2: 레퍼런스 수집
**[Agent:ref-design]** 디자인 레퍼런스 11개 (annhandley, emmagannon, pjrvs, vanschneider 등)
**[Agent:ref-motion]** 모션 레퍼런스 10개 (GSAP/Framer Motion 기반)
**[Agent:ref-industry]** 업종 레퍼런스 15개 + 강사 포트폴리오 3개 공통점 분석
### Phase 3: 역할별 토론
**[Agent:pm]** UX흐름, 사이트맵, B2B/B2C 이중동선, CTA 전략, 블로그 정보설계
**[Agent:marketer]** 히어로 메시지, CTA 이중타겟, 후기없이 신뢰구축 5가지, SEO 전략
**[Agent:developer]** Next.js 14 + Tailwind v4 + Framer Motion, Contentlayer2+MDX, 성능예산
**[Agent:designer]** Warm Academic Editorial, 컬러 60-30-10, 타이포 스케일, 모션 가이드라인, 템플릿 탈피 6가지
교차 토론 완료 → 합의: 크림+테라코타, Noto Serif KR+Pretendard, 단일페이지+블로그 라우트
### Phase 4: 구축 계획서
**[Write]** build-plan.md — 10개 섹션 종합 계획서
결과와 배운 점
결과물입니다.
https://onerdot-portfolio.vercel.app/
이 과정에서 배운 것.
바이브 코딩이라고 해도, 제가 제대로 된 내용을 입력해야 원하는 바를 반영해주는 것이란 것. (항상 느끼는거죠...)
레퍼런스를 쓰고 안쓰고에 따라 퀄리티가 엄청나게 차이납니다.
실제 웹디자인 업무를 할 때 클라이언트에게 받았던 피드백(번들, 템플릿 느낌이 난다)을 반영하여 수정하니 훨씬 더 나은 결과물이 나왔어요.
위의 내용은 디자인적인 부분이었습니다.
나의 강점이 뭔지 알아야 내 강점을 원하는 타겟을 설정해서 타겟 맞춤으로 보여줄 수 있다.
이번에는 드디어!!!!! 결과물을 만들었다!!!><
이걸 유지하고 지속적으로 내용을 업데이트하기 위해서는 어떤 식으로 시스템을 만들어야 할까 고민하는 것이 다음 스텝인 것 같다.
위의 내용은 4주간의 과정을 거치면서 배운 점이었습니다.
그 중에서, 3번은 이후의 방향을 고민하는 것이긴 합니다.
항상 만들고 끝이었으나, 이번에는 사이트에 컨텐츠를 업데이트하는 부분까지도 넣었기 때문에, 지속적으로 블로그 글을 업데이트하도록 시스템을 짜려고 합니다. 우선 지금은 클로드코드 스킬로 /save-session 으로 매 대화 세션을 md 파일로 저장하고 있습니다. 해당 볼트에 저의 활동, 대화, 모든 작업 내용 텍스트를 모두 저장하여, 그 안에서 노드를 연결하여 지식을 연결하고자 합니다.
사이트 만드는 것이 끝이 아니라,
이제 시작인 것 같습니다. 😄
앞으로 할 일이 더 많은 것 같구요ㅎㅎㅎㅎ
