혼잡스는 바이브코딩에 붙일 수 있느냐를 기준으로 웹사이트 19곳을 티어표에 올렸습니다 | DAKER 커뮤니티

나무 책상 위에 줄만 그어진 빈 종이와 연필이 놓여 있고, 가운데 흰 패널에 참고할 것은 동작뿐입니다라는 한글 제목이 있습니다. 설명용 생성 이미지입니다.
설명용 생성 이미지입니다.

혼잡스 채널의 「신박한 웹사이트 티어표 | 바이브코딩할 때 참고하면 대박!(보는것만으로도 재미있음)」은 국내외에서 신박하다고 소문난 웹사이트 19곳을, 유명한 순서나 잘 만든 순서가 아니라 바이브코딩할 때 참고하고 싶은 정도, 곧 내 가게나 내 서비스에 붙일 수 있느냐로 1티어부터 5티어까지 줄 세웠습니다. 영상은 2026년 11월 12일에 게시되었고 길이는 12분 53초입니다. 진행자는 1티어 다섯 곳 가운데 네 곳은 클로드에게 같은 기능을 만들어 달라고 직접 시켜 보았고, 네 개 모두 다시 고쳐 달라고 할 필요 없이 첫 답에서 바로 동작했다고 보여 주었습니다. 오늘 해볼 일은 하나입니다. 1티어 다섯 개 가운데 내 서비스에 붙일 기능을 하나만 고르고, 로고와 디자인, 문구는 빼고 동작만 한 문장으로 클로드에게 시켜 보는 것입니다.

이 글은 영상 설명과 한국어 자막을 읽고 정리한 것이며, 수치와 표현은 모두 진행자가 말한 내용입니다. 이 글에서 소개된 사이트나 클로드 재현을 직접 실행해 확인한 것은 없습니다. 작성 기준일은 2026년 11월 15일(한국 시간)로, 영상 게시일과 이 글의 확인일은 다릅니다. 영상 주소는 https://www.youtube.com/watch?v=p3C1mUFLLtg 입니다. 짧은 주소는 https://youtu.be/p3C1mUFLLtg 입니다.

혼잡스 티어표의 기준은 유명세가 아니라 내 서비스에 붙일 수 있느냐입니다

진행자는 오늘의집 사진 속 가구마다 작은 점이 찍혀 있고, 그 점을 누르면 바로 그 상품으로 넘어가는 기능을 보고 표를 만들기 시작했다고 했습니다. 구경하던 사진이 그대로 매장이 되고, 발상 하나가 그 자체로 마케팅이 된다는 관찰이었습니다. 코드를 직접 짜지 않고 AI에게 말로 시켜서 만드는 일을 바이브코딩이라고 소개한 뒤, 결국 같은 고민에 부딪힌다고 했습니다. 무엇을 만들어야 사람들이 쓰고 싶어 할까. 그 답은 이미 잘 돌아가는 남의 사이트에 있다는 것입니다.

1티어는 보자마자 따라 만들고 싶고 실제로 금방 되는 사이트, 5티어는 보면 신기한데 내 서비스에는 못 쓰는 사이트라고 정의했습니다. 진행자는 「이 표는 유명한 순서도 잘 만든 순서도 아닙니다」라고 분명히 말했습니다. 참고한다는 것은 아이디어와 동작만이며, 로고나 디자인, 사이트에 적힌 문구는 그 회사의 것이라 그대로 가져오면 안 된다고 했습니다. 입력하면 화면이 바뀌고 누르면 돌아간다는 동작만 가져와서, 겉모습은 내 것으로 새로 만들라는 설명입니다.

노션, 워들, 퍼플렉시티처럼 유명한 사이트는 이번 표에서 뺐습니다. 노션은 신박한 기능이 로그인 뒤에 있고, 워들은 같은 종류의 오늘의 단어 게임인 한국판 꼬맨틀로 대신했으며, 퍼플렉시티는 AI 답변 화면이 이제는 너무 익숙해서라고 했습니다. 누구나 아는 대기업 사이트 네 곳(오늘의집, 듀오링고, 토스페이먼츠, 에어팟 프로 페이지)은 티어를 매기지 않고 번외로만 보여 주었습니다.

5티어와 4티어는 감탄은 크지만 바로 붙이기는 어렵습니다

5티어 첫 번째는 포인터 포인터입니다. 마우스를 아무 데나 멈추면 그 자리를 손가락으로 가리키는 사람 사진이 뜹니다. 비밀은 코드가 아니라, 화면 곳곳을 가리키는 사진을 아주 많이 모아 둔 것이라고 했습니다. 따라 만들려면 사진부터 모아야 해서 5티어에 두었습니다. 두 번째는 브루노 사이먼의 포트폴리오입니다. 장난감 자동차를 몰고 다니며 작품을 둘러보게 만든 사이트로, 보는 순간 나오는 감탄은 이번 표에서 최고라고 했습니다. 다만 3D 모델과 물리 효과를 오래 다듬어야 하고 한 사람의 개인 작품이라, 보고 감탄하는 걸로 충분하다고 했습니다.

4티어는 신기하고 만들 수도 있는데 내 서비스에 넣기는 애매한 사이트라고 했습니다. 더 패스워드 게임은 비밀번호 규칙이 점점 이상해지는 게임입니다. 숫자를 넣으라더니 숫자를 다 더해 25가 되게 하고, 나중에는 체스 문제의 답까지 넣으라고 한다는 설명이었습니다. 규칙을 하나씩 늘리는 구조는 흉내 내기 쉽지만, 진짜 회원 가입 화면에 넣으면 손님은 웃다가 떠난다고 했습니다.

더 딥 시는 화면을 아래로 내릴수록 옆에 수심 숫자가 내려가고, 그 깊이에 사는 생물이 나타납니다. 한국어판도 있다고 했습니다. 스크롤하면 숫자가 바뀌는 장치 자체는 금방 따라 하지만, 이 사이트를 특별하게 만드는 것은 깊이마다 들어간 그림과 자료라고 했습니다. 엑스칼리드로는 손으로 그린 듯한 느낌의 화이트보드이고, 링크만 보내면 여러 사람이 같이 그릴 수 있습니다. 진행자는 깃허브 별이 13만 개가 넘는다고 소개했습니다. 이 별 수는 이 글에서 따로 확인하지 못했으므로, 영상에서 말한 수치로만 옮깁니다. 똑같이 만들려면 며칠로는 어림없고, 오픈 소스로 공개되어 있으니 아이디어만 참고할 게 아니라 통째로 가져다 붙이면 된다고 했습니다. 「너무 크면 따라 만들지 말고 가져다 쓰라」는 교훈으로 4티어에 두었다고 했습니다.

3티어는 쓸 자리는 있는데 상황을 탑니다

스펜드 빌 게이츠 머니는 빌 게이츠의 재산만큼 돈을 들고 시작해, 물건을 사면 남은 돈이 실시간으로 줄어드는 사이트입니다. 만들기는 1티어만큼 쉽지만, 내 서비스에 넣을 자리는 「이 돈이면 뭘 살 수 있을까」 같은 이벤트 정도라서 3티어라고 했습니다.

퀵 드로우는 구글이 만든 사이트로, 낙서를 그리는 동안 AI가 고양이 같은 답을 실시간으로 맞춥니다. 신기함은 최상이지만, 그림을 알아보는 AI를 따로 붙어야 하고 그리는 도중에 맞히는 속도감을 내기 어려워 3티어라고 했습니다.

한국 사이트 꼬맨틀은 단어를 하나 넣으면 오늘의 정답 단어와 뜻이 얼마나 가까운지 점수로 알려 줍니다. 단어를 숫자로 바꿔 거리를 재는 방식인데, 겉으로는 AI처럼 보이지 않는 것이 매력이라고 했습니다. 다만 단어를 숫자로 바꿔 주는 AI를 따로 연결해야 하고, 내 서비스에서 왜 필요한지 설명하기도 어려워 3티어에 두었습니다.

픽셀 쏘츠는 별 안에 지금 걱정을 적고 완료를 누르면, 60초 동안 별이 우주 파편으로 작아지며 사라진다고 했습니다. 한국어판도 있으며, 화면 위 문장이 내가 적은 걱정을 넣어 말을 걸어 준다고 했습니다. 만든 사람이 2015년 해커톤에서 주말 동안 만들었다고 밝힌 사이트라고 소개했습니다. 만들기는 쉽고 감동도 크지만, 넣을 자리가 이벤트 페이지 정도로 좁아서 3티어라고 했습니다.

2티어는 참고하고 싶지만 비용이나 재료, 저장 장소가 한 단계 더 필요합니다

인피니트 크래프트는 물과 물처럼 단어 두 개를 끌어다 겹치면 AI가 새 단어를 만들고, 그 단어끼리 또 합치면 끝없이 이어지는 사이트입니다. 진행자는 2024년 1월에 나오자마자 서버가 버거울 만큼 화제가 됐다고 했습니다. 참고할 때는 끌어서 합치면 AI가 새 결과를 준다는 틀만 가져와서, 메뉴 두 개를 합치면 새 메뉴 이름을 지어 주는 식으로 바꾸면 된다고 했습니다. 1티어가 아닌 이유는 합칠 때마다 AI를 부르니 쓰는 만큼 비용이 든다는 점이었습니다.

스트라이프 홈페이지는 배경에 물감 같은 색이 흐르고, 전 세계 GDP 중 몇 퍼센트가 스트라이프를 지난다는 숫자가 소수점 여덟 자리까지 실시간으로 올라간다고 소개했습니다. 참고할 때는 흐르는 배경과 살아 움직이는 숫자 두 가지 아이디어만 가져오되, 내 숫자가 진짜일 때만이라고 했습니다. 근거 없는 숫자를 올라가게 만들면 연출이 아니라 거짓말이 된다는 조건 때문에 2티어에 두었습니다.

언드로(unDraw)는 무료 일러스트 사이트입니다. 오른쪽 위에서 색 하나만 고르면 화면에 있는 일러스트 전부의 강조 색이 한꺼번에 바뀐다고 했습니다. 2017년에 일러스트레이터 한 사람이 시작했다고 소개했습니다. 내 그림 파일 안에 강조 색 하나를 바꿀 수 있게 만들어 두면 사이트 전체 그림이 내 브랜드 색으로 통일되지만, 바꿀 내 그림이 먼저 있어야 해서 2티어라고 했습니다.

웬투밋은 여러 사람의 약속 시간을 잡는 사이트인데 가입이 없고, 연락처나 결제 정보도 묻지 않는다고 화면에 적혀 있다고 했습니다. 날짜를 마우스로 끌어서 칠하면 되고, 소개 글에 따르면 각자 되는 시간을 칠하면 겹치는 시간이 더 진하게 보입니다. 1인 상담을 받는 사람이라면 상담 가능한 시간 받기 페이지를 만들 때 바로 참고할 수 있지만, 여러 사람의 답을 모으려면 저장하는 곳이 따로 있어야 해서 2티어라고 했습니다.

한국 사이트 케이테스트는 질문 몇 개에 답하면 유형 결과 그림이 나오고, 바로 아래에 결과 링크 공유하기 버튼이 있습니다. 결과마다 주소가 따로 생겨 친구에게 보내기 좋다고 했습니다. 진행자는 2023년 인터뷰에서 대표가, 반응이 가장 좋았던 테스트 세 개가 모두 천만 명 넘게 방문했다고 밝혔다고 전했습니다. 이 방문 수는 인터뷰 원문을 이 글에서 확인하지 못했으므로, 영상에 인용된 수치로만 옮깁니다. 참고하는 법은 내 가게 단골 유형 테스트 같은 것을 만들어, 손님이 결과를 공유하면 그 버튼이 곧 홍보가 되게 하는 것이라고 했습니다. 질문과 결과 글을 쓰는 데 시간이 꽤 걸려서 2티어에 두었습니다.

번외 네 곳은 티어를 매기지 않고 기능만 보여 주었습니다

오늘의집은 맨 앞에서 말한 대로, 집 사진 속 가구 위 작은 점을 누르면 그 상품으로 바로 넘어갑니다. 사진이 곧 구매 버튼인 셈이라고 했습니다.

듀오링고는 시작하기를 눌러도 계정부터 묻지 않고, 배우고 싶은 언어부터 고르게 한다고 했습니다. 진행자는 듀오링고의 성장 담당 책임자가 인터뷰에서, 가입 화면을 몇 단계 뒤로 밀었더니 매일 쓰는 사람이 약 20% 늘었다고 밝혔다고 전했습니다. 이 비율 역시 인터뷰 원문을 이 글에서 확인하지 못했으므로, 영상에 인용된 수치로만 옮깁니다.

토스페이먼츠는 결제 수단과 약관, 결제 버튼을 위젯 하나로 붙이게 해 준다고 했습니다. 누구나 눌러 보는 체험 페이지를 공개해 두었고, 회사 블로그에는 30분 안에 결제 페이지를 만드는 글이 있다고 소개했습니다. 이건 참고만 하는 것이 아니라 공식 도구를 그대로 연결하는 일이라고 구분했습니다.

애플 에어팟 프로 페이지는 화면을 내릴 때마다 제품이 돌고 갈라지는 영화 같은 연출로 유명하다고 했습니다. 다만 그 연출의 본체는 애플이 찍은 영상과 사진이라, 내 제품 사진 없이는 따라할 수 없다고 했습니다.

1티어 다섯 곳 가운데 네 곳은 클로드 첫 답만으로 동작했습니다

1티어는 보자마자 따라 만들고 싶고 실제로 금방 되는 사이트라고 다시 못 박은 뒤, 사이트만 보여 주지 않고 클로드에게 같은 기능을 시켜 본 결과까지 같이 보여 주었습니다. 다섯 곳 가운데 스퀴시를 뺀 네 곳을 시켜 봤습니다.

첫 번째는 한국 사이트 눈누입니다. 무료 한글 폰트를 모아 둔 곳인데, 위쪽 입력란에 「혼자 쓰는 커피」라고 치면 아래 폰트 목록이 전부 그 글자로 바뀌어 보인다고 했습니다. 폰트마다 어디까지 무료로 쓸 수 있는지 골라 보는 기능도 있다고 했습니다. 클로드에게는 가게 이름을 치면 아래 무료 한글 폰트 다섯 개 카드에 그 이름이 바로 바뀌어 보이는 웹페이지를, 상업적으로 무료인 폰트만 써서 HTML 파일 하나로 만들어 달라고 했습니다. 진행자는 답이 30초쯤 만에 나왔다고 했습니다. 「혼잡스 커피」라고 치니 반듯한 고딕, 붓글씨 느낌의 명조, 굵은 제목 글씨, 동글동글한 글씨, 손글씨 다섯 카드가 한 번에 바뀌었고, 폰트마다 상업적으로 무료로 쓸 수 있다는 라이선스 설명까지 붙었다고 했습니다. 눈누의 화면이나 폰트 목록은 가져오지 않았다고 분명히 말했습니다. 이 동작을 상품 페이지에 붙이면, 손님이 사기 전에 자기 이름이 들어간 결과를 먼저 보게 된다는 설명이었습니다.

두 번째 스퀴시는 구글 크롬 팀이 만든 이미지 줄이기 사이트입니다. 신박한 것은 가운데 세로 막대로, 막대를 좌우로 밀면 왼쪽은 줄이기 전, 오른쪽은 줄인 뒤 사진이 한 화면에 갈라져 보인다고 했습니다. 사진은 서버로 보내지 않고 내 컴퓨터 안에서 줄인다고 공식 설명에 적혀 있다고 전했습니다. 보정 전후, 청소 전후, 리모델링 전후 사진에 이 막대 하나만 붙이면 차이가 한눈에 보이고, 막대 하나라서 만들기도 쉬운 편이라 1티어에 두었습니다. 이 사이트는 클로드로 재현한 네 곳에 들어가지 않았습니다.

리얼타임 컬러스는 색 다섯 개를 고르면 실제 홈페이지처럼 생긴 화면 전체에 그 색이 바로 칠해지고, 스페이스바를 누를 때마다 새 색 조합이 나오며, 그 조합이 주소에 저장되어 링크로 보낼 수 있다고 했습니다. 만든 사람이 주말 동안 만들었다고 밝힌 사이트라고 소개했습니다. 색을 네모로만 보지 않고 실제 화면에 입혀 본다는 것이 핵심이라고 했습니다. 클로드에게는 「혼잡스 커피」라는 카페의 예시 랜딩 페이지 위에 작은 도구 막대를 붙이고, 스페이스바를 누르면 배경색, 글자 색, 강조 색이 새 조합으로 바뀌며 그 색이 주소에 저장되어 링크로 공유되게, HTML 파일 하나로 만들어 달라고 했습니다. 답이 3분쯤 걸렸고, 주소 끝의 색 코드가 바뀌어 그 주소를 다시 열어도 같은 색으로 열렸으며, 글자가 안 읽히는 색 조합은 알아서 걸러 내는 장치까지 들어갔다고 했습니다.

휠 오브 네임즈는 이름을 줄마다 놓고 돌림판을 누르면 천천히 멈추면서 당첨자가 뜨고, 당첨자는 버튼 하나로 목록에서 뺀 뒤 바로 다시 돌릴 수 있으며 로그인이 필요 없다고 했습니다. 1인 사업자에게는 이벤트 추첨 도구 그 자체라고 했습니다. 클로드에게는 이름을 줄마다 붙여 넣으면 돌림판이 생기고, 누르면 점점 느려지다가 한 명을 뽑으며, 뽑힌 사람은 빼고 다시 돌릴 수 있는 인스타 댓글 이벤트 추첨기를 HTML 파일 하나로 만들어 달라고 했습니다. 답이 2분쯤 걸렸고, 단골 손님 A부터 H까지 여덟 명을 넣고 돌리니 한 명에서 멈춘 뒤 꽃가루와 함께 당첨 창이 떴으며, 당첨자를 빼고 다시 돌리니 남은 일곱 명으로 다시 돌았다고 했습니다. 같은 사람이 댓글을 여러 번 달아도 한 번만 넣는 선택 항목도 알아서 붙였다고 했습니다.

이번 표의 1등은 리니어입니다. 개발팀이 할 일을 관리하는 서비스인데, 홈페이지에서 커맨드 K를 누르면 가운데 검색창 하나가 뜬다고 했습니다. 가격이라는 영어 단어의 앞 글자 몇 개만 쳐도 가격 페이지로 가는 메뉴만 남고, 메뉴마다 옆에 단축키까지 적혀 있다고 했습니다. 어떤 서비스에도 붙기 때문에 1등이라고 했습니다. 쇼핑몰이면 상품 찾기, 블로그면 글 찾기, 메뉴가 10개를 넘는 사이트라면 이 창 하나로 다 부를 수 있다는 설명이었습니다. 클로드에게는 메뉴가 10개쯤 있는 예시 사이트에서 커맨드 K나 컨트롤 K를 누르면 가운데 검색창이 뜨고, 글자를 칠 때마다 메뉴가 좁혀지며, 엔터를 누르면 그 페이지로 이동하는 명령 창을 HTML 파일 하나로 만들어 달라고 했습니다. 답이 1분 반쯤 걸렸고, 「설」 한 글자만 쳐도 메뉴가 설정 하나로 좁혀진 뒤 엔터로 설정 페이지에 들어갔다고 했습니다. 이렇게 네 개 모두 다시 고쳐 달라고 할 필요 없이 첫 답에서 바로 동작했다고 정리했습니다.

표를 다시 보면 참고하기 좋은 것은 작은 기능이었습니다

19곳을 다 붙인 뒤 진행자는 표를 다시 보면 재미있는 점이 하나 있다고 했습니다. 5티어와 4티어에는 보는 순간 감탄이 나오는 사이트가 있고, 1티어에는 입력창 하나, 막대 하나, 창 하나처럼 작은 기능이 있다는 것입니다. 바이브코딩으로 참고하기 좋은 것은 화려한 사이트가 아니라 확실하게 편한 기능이었다고 말했습니다.

1티어 리얼타임 컬러스와 3티어 픽셀 쏘츠는 둘 다 만든 사람이 주말 동안 만들었다고 밝힌 사이트라고 다시 짚었습니다. 큰 회사가 아니어도 기능 하나만 확실하면 전 세계 사람들이 찾아 쓰는 사이트가 될 수 있다는 설명이었습니다.

오늘 할 일도 하나로 모아 주었습니다. 1티어 다섯 개 가운데 내 가게, 내 서비스에 붙일 기능을 딱 하나만 고르고, 그 기능을 클로드에게 한 문장으로 시켜 보라는 것입니다. 로고와 디자인, 문구는 빼고 동작만 가져오라고 했습니다. 진행자는 영상에서 클로드에게 시킨 요청문 네 개를 더보기에 적어 두었으니 복사해서 쓰라고 했습니다. 다만 이 글을 확인한 2026년 11월 15일(한국 시간) 시점의 영상 설명에는 그 요청문 네 개가 들어 있지 않았습니다. 이 글은 자막에 나온 요청 내용만 옮겼고, 더보기 원문을 그대로 재현하지는 않았습니다.

이 글에서 확인한 것과 확인하지 못한 것

자주 묻는 질문

유명한 사이트를 화면 그대로 따라 만들면 되나요? 진행자는 그렇게 하지 말라고 했습니다. 참고하는 것은 아이디어와 동작뿐이고, 로고와 디자인, 사이트에 적힌 문구는 그 회사의 것이라 그대로 가져오면 안 됩니다.

1티어 다섯 곳을 모두 만들어 봐야 하나요? 그렇지 않습니다. 오늘 할 일은 다섯 개 가운데 내 서비스에 붙일 기능을 하나만 고르고, 그 동작을 한 문장으로 클로드에게 시켜 보는 것이라고 했습니다.

엑스칼리드로처럼 큰 오픈 소스도 처음부터 다시 짜야 하나요? 진행자는 반대로 설명했습니다. 똑같이 만들려면 며칠로는 어림없으니, 너무 크면 따라 만들지 말고 공개된 코드를 가져다 쓰라는 것이 4티어에 둔 이유입니다.

스트라이프처럼 숫자가 올라가는 연출은 아무 서비스에나 붙여도 되나요? 안 됩니다. 진행자는 흐르는 배경과 움직이는 숫자 아이디어만 가져오되, 내 숫자가 진짜일 때만 쓰라고 했습니다. 근거 없는 숫자를 올라가게 만들면 연출이 아니라 거짓말이 된다고 했습니다.

출처