레퍼런스 AI웹서비스 제작노트 -4 | AI 섹션 분류와 클릭 한 번 관리자 화면 만들기

 
 

레퍼런스 AI웹서비스 제작노트 -1 | 국내 웹 섹션 레퍼런스 사이트 기획과 서버비 0원 구조 만들기

 
섹션별로 이젠 어느정도 잘 잘리지만,
잘린 이미지만 잔뜩 있으면 그냥 이미지 폴더일뿐
헤더인지, 푸터인지, 앱 다운로드 영역인지 카테고리를 정해준다 

카테고리별로 정리된 화면

1. 카테고리

처음엔 헤더, 메인 비주얼, 앱 다운로드, 뉴스·공지, 푸터 정도로 시작했는데
실제 국내 사이트를 보다 보니 하나씩 늘어났다.

• 고객센터랑 Contact us는 따로. 고객센터는 전화번호·운영시간 안내고, Contact us는 문의 폼이다. 생긴 게 완전 다르다.
• 병원·법무법인용: 의료진·전문가 소개, 진료·업무 분야. 이런 사이트가 생각보다 많다.
• 바로가기 메뉴: 메인 본문 안의 퀵링크 아이콘 모음. 화면 옆에 붙은 퀵메뉴는 제외.
• ESG, SNS: 기업 사이트에 꼭 있다.
• 인증·수상은 뺐다. 상세면 모를까 디자인 레퍼런스로 볼 일이 별로 없어서.

업종(금융, 쇼핑…) 필터도 처음엔 넣었는데 뺐다.
업종별로 보는 건 GDWEB에서 이미 할 수 있으니까.
여기는 섹션별로 보는 게 목적이고 이렇게 27개가 됐다.
카테고리 목록은 categories.json 파일 하나로 관리한다.
웹 화면도 이걸 읽고, AI 분류 프롬프트도 이걸 읽는다.
카테고리를 하나 추가하면 화면이랑 AI가 같이 바뀐다.

{ "key": "app_download", "label": "앱 다운로드",
  "hint": "앱스토어·구글플레이 버튼, QR코드", "zone": "body" }

 
hint는 AI한테 주는 설명이고,
zone은 그 섹션이 페이지 어디쯤 놓이는지다. (5편에서 화면 만들 때 쓴다)

2. 규칙으로 먼저정하고 나머지는 AI

1편에서 말한 것처럼 확실한 건 AI 없이 규칙으로 먼저 분류한다.

• 첫 번째 섹션이고 높이가 낮으면 → 헤더
• 마지막 섹션에 "사업자등록번호", “©”가 있으면 → 푸터
• “App Store”, “Google Play”, "앱 다운"이 있으면 → 앱 다운로드
• "공지사항", "보도자료"로 시작하면 → 뉴스·공지

규칙으로 먼저 걸러냈으니까
나머지는 Claude Haiku에게 섹션 이미지를 보여주고 고르게 한다. 여러개를 한묶음으로 보내고 답은 나중에 받는 방식이라 가격은 반값

3. 미분류가 357개??

GDWEB 사이트를 한꺼번에 찍고 사이트를 열었더니... 미분류 357개 ㅋㅋㅋ
알고 보니 이렇게 돌고 있었다.

1. 캡처가 끝나면 AI 분류를 배치로 제출
2. 배치는 몇 분~몇 시간 뒤에 끝남
3. 결과는 다음 실행 때 가져옴 → 다음 날 아침 10시

그러니까 하루 동안 미분류로 남아 있던 거다.
그래서 제출한 뒤 끝날 때까지 1분마다 확인하면서 최대 40분 기다렸다가 같은 실행 안에서 바로 반영하게 바꿨다.
실제로는 보통 5분 안에 끝난다.
분류에 실패한 섹션은 다음 실행 때 다시 제출한다
 

4. 메인 비주얼이 114개?!

분류가 다 끝나고 숫자를 봤는데 메인비주얼은 114개, 헤더는 12개..
사이트가 70곳인데 메인 비주얼이 114개...
AI는 사진 한 장이랑 글자 몇 줄만 보고 판단하니까
큰 이미지만 나오면 다 메인 비주얼이라고 한 거다.
사람은 이건 페이지 중간에 있으니까 메인 비주얼이 아니지 하고 아는데 AI는 위치를 모른다.
그래서 위치를 알려주고

섹션 위치: 페이지 위에서 4번째 / 전체 9개,
맨 위에서 2400px 지점부터 높이 700px (첫 화면 높이는 1080px)
판단 기준:
- 메인 비주얼은 첫 화면의 대표 영역(보통 1~2번째, 1080px 안쪽)에만 씁니다.
그보다 아래의 큰 이미지·배너는 내용에 맞게 서비스 소개, 이벤트, 행동 유도 등으로.
- pattern2에는 두 번째로 가까운 카테고리를 적으세요.

 
그래도 AI가 고집을 부릴 수 있으니까 안전장치도 하나 더 걸었다.
1500px보다 아래에 있는데 메인 비주얼이라고 하면 → AI가 고른 두 번째 후보로 바꾸고 확신도를 낮춘다.
헤더가 12개뿐인 건 2편에서 말한 그 문제다.
고정 헤더를 숨기고 찍어서 헤더 섹션 자체가 없었던 것.
헤더를 따로 찍게 바꾸고 다시 돌렸더니 메인비주얼은 59개로, 헤더는 52개로 늘었다.
 
사이트당 메인 비주얼 하나, 헤더 하나.

5. 결국 사람이 봐야함

AI 분류를 아무리 다듬어도 80~90%에서 멈춘다.
나머지 10%를 빠르게 고칠 수 있느냐가 품질을 결정한다.
그래서 클릭 한 번으로 바꾸는 관리자 화면을 만들었다.

섹션 분류 관리자 화면

• 왼쪽: 섹션 썸네일 목록
• 오른쪽: 선택한 섹션 크게 + 카테고리 버튼
• 카테고리를 누르면 바로 저장되고 다음 섹션으로 넘어간다
• 키보드 단축키 1~0, q~p… 로도 고를 수 있다
• Del을 누르면 숨기기 (이상하게 잘린 섹션 정리용)
• AI가 애매해한 것(확신도 낮은 것)부터 보여준다. 위쪽 몇십 개만 보면 된다

마우스 안 쓰고 숫자 키만 탁탁 누르면서 넘기면 수백 개도 금방 ㅎ

6. 내가 고친 건 절대 안 덮어쓰기

여기서 중요한 장치가 하나 있다.
리뉴얼이나 캡처 개선 때문에 사이트를 다시 찍으면 섹션이 새로 만들어진다.
그럼 내가 고생해서 고친 분류는? 날아가면 안 되지.

• 내가 고르거나 숨긴 섹션은 approved / rejected로 표시한다. AI 분류는 이걸 절대 덮어쓰지 않는다.
• 다시 찍었을 때 새 섹션이 예전 섹션과 생김새가 거의 같으면(이미지 지문 비교) 내 분류를 이어받는다.
• 생김새가 달라졌어도(배너 이미지만 바뀐 경우 등) 같은 순서, 같은 종류, 비슷한 높이면 같은 섹션으로 보고 이어받는다.
• 헤더는 메뉴 펼친 모습으로 바뀌어서 생김새가 확 달라지니까 헤더끼리 연결한다.

AI가 붙인 분류는 다시 찍을 때 새 기준으로 다시 매기고, 내가 고른 것만 남기기

7. 관리자 비밀번호가 자꾸 틀렸다는 이야기

관리자 화면은 비밀번호로 막았는데
계속 "비밀번호가 틀렸습니다"가 떴다.
분명 맞게 쳤는데...
원인은 두 가지였는데 ㅋ

• Vercel 환경변수에 비밀번호를 넣을 때 앞뒤 공백이나 따옴표가 같이 들어감
• 입력할 때 한/영 키가 한글로 되어 있었음 ㅋㅋㅋ 이래서 눈아이콘이 있는거라는

그래서 저장된 값의 공백·따옴표를 알아서 지우게 하고 틀렸을 때 이유를 구분해서 알려주게 했다.

• 비밀번호가 다를 때 → "비밀번호가 맞지 않습니다"
• 한글이 섞였을 때 → "한글로 입력되었습니다. 한/영 키를 눌러 영문으로 바꾼 뒤 다시 입력해 주십시오"
• 서버에 비밀번호가 없을 때 → “Vercel 환경변수에 ADMIN_PASSWORD를 넣고 Redeploy 해 주십시오”

오류 메시지 넣어야하는데 알면서 대충하다 시간버림.
 
정리해보면

섹션 캡처
   ↓  규칙 분류 (무료, 확실한 것만)
   ↓  Claude Haiku 배치 분류 (위치 정보 포함, 끝날 때까지 기다렸다 반영)
   ↓  메인 비주얼 위치 안전장치
관리자 화면 (애매한 것부터, 클릭·단축키로 수정)
   ↓
다시 찍어도 내가 고친 건 그대로

 
AI가 대부분 해두고 나는 감수만하니까 
사이트가 1,000곳이 돼도 혼자 운영할 수 있다.
 
다음 편은 메인 화면 디자인이랑 검색, 직접 올리기
이야기.
돌아다니다 오 이거 괜찮다싶은 섹션을 캡처해서 올리면 AI가 메모까지 써준다 ㅎㅎ
 
 
베타버전 링크 - 아직 베타라 분류가 어색한 섹션이 있을 수 있음
도메인변경 
https://ref.jjinmango.kr/