바이브코딩 할 때 실제로 쓰게 되는 것만 추렸어요. 거의 다 무료고, 어디에 쓰는지 같이 적어뒀습니다.
순서대로 보시면 돼요. 감 잡고 → 취향 좁히고 → 컴포넌트 얹고 → 움직임 넣는 순서예요.
감 잡고 화면 구조까지 뜯어보는 곳들이에요. 마음에 드는 걸 골라서 링크나 캡처를 AI한테 던지는 용도입니다.
전 세계에서 제일 잘 빠진 웹사이트만 골라 올리는 갤러리예요. 뭘 만들지 감이 안 올 때 여기서 하나 골라 링크째로 AI한테 던지면 절반은 먹고 들어갑니다.
아쉬운 점은 워낙 하이엔드 위주라 그대로 재현하긴 어렵다는 거예요. 검색도 약해서 구경하다 꽂히는 걸 줍는 방식이 맞습니다.
토스, 에어비앤비 같은 실제 서비스 화면을 60만 장 넘게 모아둔 곳이에요. 로그인이니 결제니 하는 특정 화면이 필요할 때 검색해서 캡처 뜨고, AI한테 첨부하면서 "이 구조로 만들어줘" 하면 됩니다.
무료로 볼 수 있는 양이 제한적인 게 아쉽지만, 구조 참고용으로 이만한 게 없어요.
실서비스 화면을 스타일별로 모아 보여줍니다. 다크, 미니멀 같은 스타일이 실제로 어떻게 쓰였는지 확인하고 컬러랑 폰트 스펙까지 뽑을 수 있어서 그대로 AI한테 넘기기 좋아요.
무료 열람에 제한이 있고, 양은 Mobbin보다 적습니다.
SaaS 랜딩페이지만 모아둔 갤러리예요. 히어로, 가격표, 후기 같은 섹션 구성 참고할 때 편하고 공짜입니다.
대신 쇼핑몰이나 포트폴리오처럼 SaaS가 아닌 건 여기서 못 찾아요.