🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Tips and Tricks for Vibe Coding Websites의 핵심은 AI로 웹사이트를 고치기 전에 브랜드 가이드와 이미지 가이드를 먼저 만들고, 고성능 모델은 방향 설정에, 저렴한 모델은 반복 구현에 나누어 쓰는 것이다.

📌 핵심 요점

1. 기존 boxmining.com의 문제는 단순히 낡은 디자인이 아니라 1,000개 이상 누적된 글, 불일치한 이미지, 높은 WordPress 운영비, AI 생성물처럼 보이는 인상까지 겹친 구조적 문제였다.
2. 성공적인 vibe coding 웹사이트 개편은 바로 코드부터 고치는 것이 아니라, 밝은 테마·친근한 분위기·여백·색상 체계·기사 유형별 구분 같은 브랜드 기준을 먼저 고정하는 데서 시작한다.
3. 스크린샷과 선호 레퍼런스를 AI에 제공하면 색상, 폰트, 브랜드 액센트, mock-up을 포함한 브랜드 가이드를 만들 수 있고, 이는 이후 에이전트 작업의 공통 기준이 된다.
4. 실제 구현 전에는 HTML 렌더나 mock-up으로 레이아웃과 분위기를 먼저 검증하고, 기대와 다를 경우 더 강한 프롬프트와 명확한 one-to-one 레이아웃 지시가 필요하다.
5. 디자인 판단은 Claude Opus 같은 고지능 모델에 맡기고, 대량 반복 작업과 이미지 재작업은 MiniMax 같은 저렴한 모델과 에이전트 팀에 맡기는 분업이 비용과 속도 면에서 유리하다고 제시된다.

🧩 배경과 문제 정의

• boxmining.com은 2016년부터 누적된 AI·크립토 기사 아카이브가 1,000개 이상인 사이트로, 오래 쌓인 글과 일관되지 않은 이미지·레이아웃 때문에 전체 인상이 낡고 정돈되지 않아 보이는 문제가 있었다.
• WordPress 기반 운영은 사이트 규모, 연결 구조, 사용자 수 때문에 월 200달러 수준까지 비용이 올라갔지만, 비용 대비 시각적 완성도는 만족스럽지 않았다.
• 이 영상의 핵심 문제의식은 단순히 테마나 스킨을 바꾸는 것이 아니라, 브랜드 가이드·레이아웃 방향·이미지 규칙을 먼저 정해 AI 코딩과 디자인 작업이 같은 기준으로 움직이게 만드는 데 있다.
• 고지능 모델은 브랜드 방향, 디자인 판단, 가이드 수립처럼 기준을 세우는 작업에 쓰고, 저렴한 모델과 에이전트는 반복적인 구현·이미지 수정·사이트 전반 적용에 투입하는 분업 구조가 중요하게 제시된다.

🕒 시간순 섹션별 상세정리

1. 낡은 사이트의 구조·비용·브랜드 문제

• 기존 boxmining.com은 AI와 크립토 정보를 다루는 기사 사이트였지만, 2016년부터 쌓인 1,000개 이상의 글과 제각각인 이미지 때문에 전체 레이아웃이 지저분하고 오래된 느낌을 주게 됐다 [00:23]
• WordPress 기반 운영은 사이트 규모와 연결 구조, 사용자 수 때문에 월 200달러 가까운 호스팅 비용이 들었고, 높은 비용을 내면서도 결과물의 시각 품질은 여전히 만족스럽지 않았다 [00:46]
• 첫 번째 리메이크 이후 현재 버전은 이전보다 더 깔끔하고 현대적인 인상으로 바뀌었지만, 일부 이미지는 여전히 깨져 있고 전체적으로 추가 개선할 여지가 남아 있었다 [01:22]
• 새 리디자인의 방향은 기존의 어두운 테마보다 밝고 친근한 느낌, 넓은 여백, 다른 색감, 기사 유형별 색상 구분을 통해 더 생동감 있는 사이트를 만드는 쪽으로 설정됐다 [01:37]

2. 스크린샷과 선호 레퍼런스로 브랜드 가이드 만들기

• 현재 웹사이트 스크린샷을 AI에 넣고, 사이트가 너무 AI 같고 기술적으로만 보이며 친근하지 않다는 문제를 함께 전달하면 개선 방향을 더 구체적으로 잡을 수 있다 [02:18]
• 첫 단계는 엄격한 브랜드 가이드를 요구하는 것이며, 사용자가 직접 모든 가이드를 쓰지 않아도 AI가 선호 색감·분위기·레퍼런스를 바탕으로 기준 문서를 만들 수 있다 [02:39]

3. 코드 변경 전 HTML 렌더로 레이아웃 검증하기

• 브랜드 가이드를 만든 뒤에는 실제 코드 변경에 바로 들어가기보다, HTML 문서 형태의 초기 웹사이트 렌더를 만들어 원하는 레이아웃과 분위기에 맞는지 먼저 확인한다 [04:04]
• 밝은 테마와 친근한 인상을 우선한 이유는 기존 다크 테마가 과거에 머무른 느낌을 줬고, 새 사이트에는 더 열린 분위기와 접근성이 필요하다고 판단했기 때문이다 [04:16]

4. 실제 구현에서 모델 비용과 프롬프트 강도 조절하기

• 브랜드 가이드와 원하는 웹사이트 모습을 AI에 넘겨 전체 makeover를 요청했지만, 초기 산출물은 상대적으로 못생겼고 기대한 수준의 레이아웃 변화가 바로 나오지는 않았다 [05:27]
• 디자인 계획을 만드는 과정만으로 Claude 사용량 크레딧의 절반가량이 소모됐고, 이후 무거운 구현 작업에는 더 저렴한 MiniMax 같은 중국 모델을 쓰는 방향으로 전환됐다 [06:11]

5. 토큰 대량 투입과 이미지 가이드로 사이트 전체 품질 끌어올리기

• 하루 동안 거의 8억 토큰을 사용했고, max plan과 API 크레딧까지 동원해 에이전트 팀이 사이트 안의 작업 대상을 찾아 브랜드 가이드를 적용하게 했다 [08:37]
• 디자인 판단에는 Opus 같은 고지능 모델을 쓰고, 실제 반복 작업은 더 저렴한 모델이 채우는 분업이 효과적이며, 두 번째 핵심 산출물은 featured image용 이미지 가이드였다 [09:31]

6. 브랜딩 가이드라인과 24시간 개편 범위

• 좌측 영역이 대체로 정리되어 있어 AI가 접근하기 쉬웠고, 브랜딩 가이드라인이라는 키워드가 디자인 방향을 잡는 데 중요한 단서가 됐다 [12:02]
• 목표는 보기 나쁜 상태를 완벽하게 다듬는 것보다, 24시간 안에 가능한 한 많은 AI 작업을 투입해 사이트 개편을 빠르게 끝내는 쪽에 가까웠다 [12:17]

7. 로컬 실험, 미완성 보완, 비용 대비 학습 전략

• 개편 결과는 곧바로 production에 올릴 수도 있지만, 부담이 크면 로컬에서 먼저 시도하며 느낌을 확인할 수 있고, AI는 디자인 감각을 빠르게 시험하게 해주는 도구로 활용될 수 있다 [13:18]
• 긴 바, 여백, 박스 크기, 팝업 같은 세부 요소는 아직 비어 있거나 과한 부분이 남아 있으며, 왼쪽에서 오른쪽으로 이어지는 흐름을 보완하는 일이 후속 과제로 남는다 [13:32]
• 제공된 section-detail 기준으로 확인되는 마지막 마무리 논지는 완성본을 절대적인 결과물로 보지 않고, 빠른 실험과 비용 대비 학습을 통해 웹사이트 디자인 감각과 개편 방향을 계속 조정해야 한다는 점이다 [13:47]

8. 후속 보완보다 중요한 절차의 단순화

• 빈 공간과 미완성 요소는 나중에 고치면 되며, 팝업과 왼쪽에서 오른쪽으로 이어지는 흐름도 후속 조정 대상으로 남겨뒀다 [13:55]
• 마무리에서는 바이브 코딩에 도움이 되려면 절차를 제대로 잡는 것이 중요하다고 정리했다 [14:02]
• 핵심 방법은 직접 많은 글을 쓰는 것이 아니라 두 개의 문서를 AI에 보내고 작업하게 하는 단순한 흐름이라고 설명했다 [14:10]

9. 반복 실험으로 배우고 비용을 줄이는 결론

• 이번 작업에는 M3도 충분했지만, 토큰 비용 자체는 싸지 않다는 점을 덧붙였다 [14:21]
• AI를 여러 작업에 계속 써보며 실수하고, 마음에 들지 않는 디자인은 버리는 방식이 배우기에 가장 좋다고 말했다 [14:44]
• 마음에 드는 결과가 나오면 외부 컨설턴트나 디자이너 비용을 크게 아낄 수 있다는 점을 사례로 강조했다 [15:02]
• 그렇게 시도하면 좋은 상태에 도달할 수 있다며 감사 인사와 함께 영상을 마무리했다 [15:07]

🧾 결론

• 이 영상의 결론은 AI 웹사이트 리디자인에서 가장 중요한 산출물이 코드가 아니라 브랜드 가이드와 이미지 가이드라는 점이다.
• AI 에이전트는 기준이 모호하면 단순 reskin이나 어색한 결과를 내기 쉽지만, 색상·폰트·이미지 규칙·레이아웃 목표가 명확하면 전체 사이트 품질을 더 일관되게 끌어올릴 수 있다.
• WordPress처럼 구조가 복잡하고 AI가 다루기 어려운 환경보다, Astro처럼 코드 구조가 비교적 읽기 쉬운 사이트가 AI 기반 대규모 리디자인에 더 적합하다는 경험이 공유된다.
• 완성도 100%를 목표로 하기보다 24시간 안에 큰 방향 전환을 만들고, 이후 긴 바·여백·박스 크기·팝업 같은 세부 요소를 보완하는 방식이 현실적인 접근으로 제시된다.
• 영상 속 비용 수치와 토큰 사용량은 발표자의 사례에 기반한 것이므로, 다른 사이트에 적용할 때는 실제 호스팅 구조, 모델 요금, 작업 범위를 별도로 검증해야 한다.

📈 투자·시사 포인트

• AI 웹사이트 제작 도구의 가치는 단순 코드 생성보다 브랜드 가이드, 시각 기준, 이미지 규칙을 운영 가능한 형태로 만드는 워크플로우에서 커질 가능성이 있다.
• 고성능 모델과 저비용 모델을 조합하는 방식은 AI 비용 최적화의 핵심 패턴으로 보이며, 기업이나 개인 프로젝트 모두에서 모델 라우팅 전략의 중요성이 커질 수 있다.
• 오래된 CMS 기반 사이트를 현대적 정적 사이트 구조로 옮기려는 수요가 늘면, Astro 같은 구조화된 프레임워크와 AI 에이전트 친화적 코드베이스의 실용성이 부각될 수 있다.
• 이미지와 디자인 에셋을 대량으로 정리해야 하는 콘텐츠 사이트에서는 AI가 외부 브랜딩 컨설팅 비용을 일부 대체할 수 있지만, 최종 품질 관리를 위한 사람의 판단은 여전히 필요하다.
• 검증 필요: 영상에서 언급된 월 200달러 WordPress 비용, 하루 8억 토큰 사용, 컨설팅 비용 5천 달러 수준은 특정 사례이므로 일반적인 투자 판단이나 비용 절감 효과로 바로 일반화해서는 안 된다.

⚠️ 불확실하거나 확인이 필요한 부분

• WordPress 운영비가 월 200달러 가까이 들었다는 수치는 발표자의 경험 기준이며, 실제 비용 구조는 호스팅 청구서·트래픽·플러그인·DB/미디어 저장소 사용량으로 별도 확인이 필요하다.
• “하루 8억 토큰 사용”, “Claude 크레딧 절반 소모” 같은 사용량·비용 수치는 작업 규모를 보여주는 핵심 근거지만, 실제 재현 가능성은 플랜·API 요금·에이전트 구성에 따라 크게 달라질 수 있다.
• MiniMax가 Claude Code harness 안에서 비용 대비 안정적인 구현 품질을 냈다는 평가는 해당 사이트 개편 사례에 한정되며, 다른 코드베이스에서도 같은 품질이 나올지는 별도 테스트가 필요하다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 기존 사이트의 스크린샷, 주요 페이지, 문제 이미지, 낡아 보이는 레이아웃을 먼저 수집해 AI에 줄 입력 자료를 정리한다.
• 코드 수정 전에 브랜드 가이드부터 만든다: 색상, 폰트, 분위기, 기사 유형별 시각 규칙, 참고 사이트, 피해야 할 인상을 명시한다.
• 실제 코드 변경 전 HTML 렌더나 mock-up으로 새 레이아웃과 톤이 맞는지 검토한다.
• 고성능 모델은 디자인 판단·가이드 작성·초기 방향 설정에 쓰고, 반복 구현·이미지 재작업은 더 저렴한 모델이나 에이전트에 맡기는 구조를 설계한다.

❓ 열린 질문

• 브랜드 가이드를 만들 때 Claude 같은 친근한 레퍼런스 외에 어떤 사이트나 디자인 패턴을 추가로 참고하면 BoxminingAI의 AI·크립토 정체성을 더 잘 살릴 수 있을까?
• 24시간 안에 많은 에이전트 작업을 밀어 넣는 방식과, 적은 범위부터 단계적으로 검수하는 방식 중 실제 운영 리스크가 더 낮은 쪽은 무엇일까?
• 기사 1,000개 이상을 가진 오래된 사이트에서 이미지 가이드를 일괄 적용할 때, 어떤 페이지나 글 유형부터 우선순위를 잡아야 할까?