웹서비스운영 중1인 개발2026-07 ~ 08 루프공방 (LoopLab)
바이브코딩, 해 봤는데 막힐 때 보는 공방 — 학습 · 카탈로그 · AI 질의 · 결과물 공유
NaDa· 게스트2026년 7월 12일조회 28
story · how it was built
설명
무엇을 (문제·대상)
바이브코딩을 한 번쯤 해 본 사람이 대상입니다. 처음이 아니라 「해 봤는데 서툰」 단계가 가장 정보가 없습니다. 무엇을 더 배워야 하는지, 어떤 도구가 실제로 쓸 만한지, 남들은 어디서 막혔는지를 한 곳에서 볼 수 있게 만든 학습 허브입니다.
주요 기능
- 배움기 — 입문, 개발 기초, 첫 바이브, 프론트엔드 디자인, 제로투십, 프롬프트까지 단계별 가이드.
- 카탈로그 — 코딩 도구 · MCP · Skills · Hooks · Plugin 을 공식 문서와 저장소 기준으로 정리하고, GitHub 등록 항목은 스타 수를 붙입니다.
- AI 질의 — 사이트 문서를 근거로 답하는 도우미. 문서에 없으면 모른다고 답하고, 답변마다 출처를 함께 냅니다.
- 공유 — 만든 것을 올리고 구조화 피드백(좋았던 점 · 개선 · 질문 · 버그 · 아이디어 · 스택)을 받습니다. 이모지 난장이 아니라 다음 버전을 만드는 피드백이 목적입니다.
- 커맨드 팔레트 — Cmd/Ctrl + K 로 전 사이트 통합 검색.
- 챌린지 · 소식 · 방명록 — 짧은 과제와 큐레이션 소식.
어떻게 만들었는가 (과정·도구 활용)
Next.js 16(App Router) · React 19 · Supabase · Vercel · shadcn/ui · Pretendard 로 만들었습니다. 디자인은 모노톤 회색 스케일에 강조색 하나(indigo)를 두고, 그 위에 Liquid Glass 재질을 전면 적용했습니다. 카드가 기본 글래스이고, 포인터를 따라가는 글레어, 진입 스태거, 탭 스프링 팝까지 CSS 로만 구현했습니다. 애니메이션 라이브러리를 추가하지 않는 것이 이 프로젝트의 규칙입니다.
접근성은 처음부터 조건으로 뒀습니다. 투명 효과를 줄이도록 설정한 사용자에게는 글래스가 불투명 패널로 바뀌고, 모션을 줄이도록 설정한 사용자에게는 전 구간의 움직임이 꺼집니다.
초반에는 마찰을 줄이기 위해 로그인 없이도 결과물과 피드백을 올릴 수 있게 열어 두었습니다. 신고 처리 · 숨김 · 역할 관리는 로그인한 운영자만 할 수 있습니다.
구조·실행 (짧게)
src/app 에 라우트(배움기 · 카탈로그 · 모델 · 공유 · 챌린지 · 소식 · AI 질의 · 검색 · 운영), src/lib 에 카탈로그와 지식 데이터, src/lib/rag 에 AI 질의용 코퍼스와 검색. 데이터는 Supabase(RLS)에 있고 결과물 커버는 Storage 에 올라갑니다.
한계·다음
- 카탈로그와 학습 콘텐츠가 아직 코드 안에 상수로 들어 있습니다. 항목이 늘수록 페이지가 무거워져서, 목록을 나눠 보내는 작업이 필요합니다.
- AI 질의는 사이트 문서 범위 안에서만 답합니다. 일반적인 코딩 질문에는 모른다고 답하는 것이 정상입니다.
journey · lessons
과정 · 배운 점
본문 = 무엇·기능·사용법. 여기 = 시간순 여정 + 다음에 남긴 교훈.
학습 사이트에서 가장 어려운 건 콘텐츠 양이 아니라 「어느 단계 사람에게 하는 말인지」를 고정하는 일이었습니다. 대상을 「처음 해 보는 사람」에서 「해 봤는데 서툰 사람」으로 좁히고 나서야 문서마다 넣을 것과 뺄 것이 정해졌습니다.
글래스 같은 재질을 전면에 쓸 때는 접근성 폴백을 나중에 붙이면 늦습니다. 투명도·모션 감소 설정을 처음부터 토큰 층에서 분기해 두면, 나중에 어떤 컴포넌트를 추가해도 자동으로 따라옵니다.
상수로 들고 있는 콘텐츠는 편하지만, 한 페이지에 전부 렌더되면 그대로 전송량이 됩니다. 편의와 비용이 갈리는 지점을 미리 정해 두는 게 낫습니다.
피드백 원함 · 개선 제안 · 아이디어 · 질문
