티스토리 뷰
레퍼런스 AI웹서비스 제작노트 -1 | 국내 웹 섹션 레퍼런스 사이트 기획과 서버비 0원 구조 만들기
수업 시간에 늘 시키는 일이 있다.비전공자들이 많은 수업을 하다보니 많이 보는게 중요하다는 사실을 가르쳐 주는 일 그래서 섹션별로 레퍼런스를 찾아 보는 연습을 시킨다.예를 들어 앱 다운
uiweb.tistory.com
캡처는 이제 잘 되고 😄
그럼 다음 고민. 어떤 사이트를 찍을까?
처음엔 토스, 배민, 무신사 같은 유명 사이트 15개를 직접 넣어서 테스트했다.
그런데 1,000곳을 목표로 하면서 하나하나 주소를 넣을 수는 없지...
국내 웹사이트 신작이 꾸준히 올라오는 곳이 있다. GDWEB.
여기 WEB 카테고리를 최신순으로 따라가기로 했다.

1. GDWEB에서는 사이트 주소만
GDWEB 목록을 최신순으로 읽어서 작품 번호, 제목, 등록일을 가져오고
상세 페이지에서는 실제 사이트 주소 하나만 뽑는다.
GDWEB에 올라온 이미지나 설명글은 손대지 않는다.
캡처는 실제 사이트에 직접 들어가서 우리가 찍는다.
남의 사이트 콘텐츠를 퍼오는 게 아니라
주소록으로만 쓰는 거
그런데 1년치가 얼마나 될까 봤더니
목록 한 페이지(60개)에서 12-3페이지 정도
좀 더 거슬러 올라갈까 하다가 멈췄다.
일년정도만 생각했던건
너무 오래된 사이트는 이미 리뉴얼됐거나
닫힌 곳이 많고 무엇보다 유행이 너무 지난 디자인은
레퍼런스로 의미가 없다.
처음엔 3페이지까지만 가져왔다.
모든 페이지 수집이 끝나면
앞으로는 매일 오전 9시에 새로 올라온 작품만 확인한다. 새 작품이 없으면 1분 안에 끝나고,
있으면 10시 수집 때 바로 찍힌다.
2. AI로 만든 사이트 1차 거르기:
1편에서 말한 것처럼 AI 빌더로 찍어낸 사이트는 뺀다.
제일 쉬운 건 주소다.
- lovable.app, bolt.new, v0.dev 같은 AI 빌더 주소 → 바로 자동 제외
- 노코드 빌더(아임웹, 윅스 등) → 사람이 디자인한 경우도 많아서 표시만 하고 제외는 안 함
그다음은 페이지 코드 속 흔적이다.
처음엔 페이지 전체 글자에서 “lovable”을 찾았는데...
본문에 “lovable(사랑스러운)”이라는 영어 단어가 들어간 멀쩡한 사이트가 있 ㅋㅋ
그래서 아무 데나 찾지 않고
<meta name="generator">랑 이미지·스크립트 주소(src, href)에서만 찾도록 바꿨다.
3. 첫 화면 미리 찍어두기
후보마다 첫 화면을 1440×900으로 한 장 찍어둔다.
AI 검수와 내 검수 둘 다 이걸 보고 판단한다.
처음엔 하나씩 순서대로 찍었더니 120개에 26분이 걸렸다
그래서 바꿨다.
- 6개씩 동시에 열기
- 한 사이트가 45초 넘게 걸리면 건너뛰기
- 페이지가 완전히 조용해질 때까지 기다리지 않고 2.5초만 기다리기
이렇게 해서 몇 분으로 줄었다.
4. AI가 첫 화면을 보고 판단하기
이제 핵심. 첫 화면 캡처를 Claude Haiku에게 보여주고 물어본다.
프롬프트는 이렇게 줬다.
웹 UI 레퍼런스 아카이브에 넣을 사이트인지 1차 검수합니다.
목적: 국내 기업·브랜드·기관의 실제 운영 웹사이트를 섹션 단위로 모아 디자이너에게 레퍼런스로 보여주기.
빼야 하는 것 (drop):
- AI 빌더로 찍어낸 듯한 사이트: 흔한 보라·파랑 그라데이션, 이모지 아이콘,
템플릿 그대로의 카드 나열, 내용 없는 일반 문구
- 한국 사이트가 아님 (주 언어가 외국어인 해외 사이트)
- 준비 중·로그인만 있는 화면·도메인 판매 페이지
- 개인 연습작·과제처럼 보이는 미완성사이트
남길 것 (keep): 실제로 운영되는 국내 회사·브랜드·병원·기관·쇼핑몰. 접근 거부·빈 화면·로딩 중이면 판단하지 말고 "blocked"로.
JSON으로만: {"verdict": "keep|drop|unsure|blocked", "confidence": 0~1, "reason": "한 줄"}
여기서 중요한 건 AI한테 다 맡기지 않는 것이다.
확신도(confidence)가 0.8 이상인 것만 자동으로 처리한다.
| 남김 + 확신 80% 이상 | 자동으로 수집 목록에 등록 |
| 뺌 + 확신 80% 이상 | 자동 제외 (관리자 화면에서 되살릴 수 있음) |
| 막힘 (빈 화면·접근 거부) | 자동 제외 |
| 애매함 | 내가 직접 검수 |
첫 실행 결과는 두구두구두규
- 자동 남김 62개: 무신사 기업 사이트, 부산국제영화제, 백화점, 병원, 호텔…
- 자동 제외 12개: 영문 폰트 실험작, “9월 취항 예정” 티저 페이지…
- 직접 검수 32개: 영문 위주라 국내 사이트인지 애매한 것들
판단 이유도 꽤 그럴듯하다.
국내 실운영 성형외과 병원 사이트, 완성도 있음,
2026년 9월 취항 예정인 준비 중 티저 페이지
이런 식으로 한 줄씩 달아준다.


비용은 100개 검수에 몇백 원이다.
5. 그런데 처음엔 전부 실패함
처음 돌렸을 때 106개 전부 실패 😱
① 답 대신 블록을 보낸다?
최신 Claude는 답하기 전에 생각하는 블록(thinking)을 먼저 보낼 때가 있다.
그런데 코드는 응답의 첫 번째 블록을 답이라고 보고 읽고 있었다.
→ 응답에서 텍스트 블록만 골라 읽도록 고쳤다.
text = "".join(b.text for b in msg.content if b.type == "text")
② 답을 다 쓰기 전에 글자 수 한도에 걸렸다
max_tokens를 200으로 짧게 줬더니 생각하다가 한도가 끝나서 답이 비어 있었다.
→ 2000으로 늘렸다. 실제로 쓰는 만큼만 비용이 나가니까 넉넉하게 줘도 된다.
③ 막힌 사이트를 '나쁜 사이트'로 판단했다
미국 서버에서 접속하니 “403 Forbidden”, “Access Denied” 화면이 찍힌 사이트들이 있었다.
AI는 이걸 보고 "콘텐츠 없음, 제외!"라고 했는데, 사이트 잘못이 아니라 서버 위치 문제다.
→ 이런 화면은 판단하지 말고 blocked로 따로 답하게 했다.
어차피 우리 서버에서 못 찍는 사이트라 결과적으로는 제외지만, 이유가 정확하게 남는다.
로딩 화면이 길어서 첫 화면이 비어 보이는 사이트도 있었는데
인터랙션까지 찍을 건 아니라서 과감히 패스했다.
6. 사이트 이름이 주소로 나온다
후보를 수집 목록에 넣었더니 사이트 이름이 전부 https://recruit.kakaobank.com 이런 식으로 나왔다.
GDWEB 목록에서 제목을 제대로 못 가져온 경우였다.
어차피 캡처할 때 페이지 제목(<title>)을 읽으니까 그걸로 이름을 붙였다.
"토스증권 | 투자의 첫걸음"에서는 "토스증권"만,
“Home - 모리스”에서는 "모리스"만 남기도록 정리했다.
7. 사람이 보는 검수 화면
AI가 애매하다고 남긴 것만 관리자 화면에서 본다.
- 카드마다 첫 화면 썸네일 + AI 판단과 이유
- 뺄 사이트를 누르면 빨간 대각선이 그어진다 (교정 부호 느낌으로 ㅎㅎ)
- 저장하면 남긴 사이트는 바로 수집 목록에 들어가고, 다음 날 10시에 찍힌다
- 자동 제외 탭에서 AI가 잘못 뺀 건 다시 살릴 수 있다
정리하면 이렇다.
GDWEB 최신 목록 (매일 오전 9시)
↓ 주소만 가져오기
AI 빌더 주소·코드 흔적 → 자동 제외
↓
첫 화면 캡처 (6개 동시, 45초 제한)
↓
Claude Haiku 검수 → 확실한 것만 자동 남김/제외
↓
애매한 것만 내가 검수
↓
수집 목록 → 오전 10시 섹션별 캡처
AI로 AI 사이트를 거르고, AI가 애매한 건 사람이 본다.
이 정도면 하루에 새 사이트가 몇 개 올라와도
나는 몇 개만 눌러주면 된다.
다음 편은 찍은 섹션을 분류하는 이야기.
AI를 백프로 믿지못해 시작부터 관리자 페이지를
만든 이야기 🤣
미분류가 357개 쌓였던 사건과,
메인 비주얼이 114개나 나왔던 이유 ㅋㅋ
베타버전 링크 - 아직 베타라 분류가 어색한 섹션이 있을 수 있음
도메인변경
https://ref.jjinmango.kr/
'AI > AI웹레퍼런스수집서비스' 카테고리의 다른 글
| 레퍼런스 AI웹서비스 제작노트 -6 | 당근처럼 사진 검수 후 AI가 채우기 (0) | 2026.10.24 |
|---|---|
| 레퍼런스 AI웹서비스 제작노트 -5 | 메인 화면UI, 검색, 이름 짓기 (0) | 2026.10.23 |
| 레퍼런스 AI웹서비스 제작노트 -4 | AI 섹션 분류와 클릭 한 번 관리자 화면 만들기 (0) | 2026.10.22 |
| 레퍼런스 AI웹서비스 제작노트 -2 | Playwright로 웹사이트를 섹션별로 자동 캡처하기 (0) | 2026.10.20 |
| 레퍼런스 AI웹서비스 제작노트 -1 | 국내 웹 섹션 레퍼런스 사이트 기획과 서버비 0원 구조 만들기 (2) | 2026.10.19 |
- Total
- Today
- Yesterday
- JavaScript
- uiux
- 오블완
- 프론트엔드
- figma
- Vercel
- 웹디자인
- UI디자인
- 2024웹디자인
- 피그마
- html
- 구글머터리얼디자인
- 웹표준
- css
- 웹디자인팁
- 찐망고
- seo
- 티스토리챌린지
- UX디자인
- ai사주
- 반응형웹
- 바이브코딩
- 찐망고레퍼런스
- 웹퍼블리싱
- 웹디자인개발기능사
- 머터리얼디자인
- 디자인팁
- 찐망고사주
- 웹접근성
- 웹디자인레퍼런스
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |