레퍼런스 AI웹서비스 제작노트 -5 | 메인 화면UI, 검색, 이름 짓기

 
수집도 되고, 분류도 되고, 관리자 화면도 만들었고
막상 메인을 열어보니 그냥 캡처가 끝없이 깔린...
이걸로 레퍼런스를 찾으라고 하면 나라도 안 쓸..
 

1. 메인은 찾는 순서대로 다시 짰다

레퍼런스 찾을 때 내 머릿속 순서를 그대로 적어봤다.

• 뭘 찾을지 알면 → 바로 검색
• 대충 알면 → 자주 쓰는 섹션으로 바로 가기
• 모르면 → 이것저것 구경
• 가끔 → 새로 뭐 들어왔나 확인

그래서 메인 순서를 이렇게 바꿨다.

1. 검색창
2. 주요 섹션 바로가기 (메인 비주얼 / 서비스 소개 / 상품 목록 / 후기 / 문의·전환)
3. 섹션별 미리보기
4. 새로 들어온 사이트

섹션별 미리보기는 카테고리마다 4개씩 보여주는데
처음엔 한 사이트 캡처가 여러 칸을 다 차지했다.
그래서 카테고리마다 서로 다른 사이트 4개만 뽑게 바꿨다.
이것만 해도 훨씬 둘러볼 맛이 난다.
 

2. 카테고리 27개

왼쪽 카테고리를 가나다순으로 쭉 세웠더니
수강생 입장에선 '푸터'가 어디쯤 있는지도 모르겠더라.
그래서 페이지 위치로 묶었다.

• 페이지 위
• 본문
• 문의·전환
• 페이지 아래

그리고 그룹 제목 옆에 작은 페이지 그림을 넣어서
이 섹션이 페이지 어디쯤에 오는지 그림으로 보이게 했다.
비전공자는 '헤더', '푸터' 같은 단어보다 그림 하나가 더 빠르다.
망고색은 처음에 여기저기 칠했는데 오히려 산만했다.
결국 '지금 위치'에만 망고색을 쓰는 걸로 정리했다.
포인트 컬러는 적당히 써야 한다 수업 때마다 하는 말인데..
 

3. 나름 UX챙김

자잘하지만 실제로 쓰면 제일 체감되는 것들.

• 보기 크기: 크게 / 보통 / 작게
• 상세 보기에서 키보드 ←→로 이전·다음
• 같은 배치 중복 제거

중복 제거가 은근 중요했다.
같은 회사 사이트들이 거의 똑같은 배치를 쓰는 경우가 많아서 한 화면에 쌍둥이 캡처가 줄줄이 나왔다.
레퍼런스는 다양함이 생명이라 겹치는 건 하나만 남겼다.
 

4. 관리자 직접 올리기

자동 수집으로 안 잡히는 섹션이 꼭 있다.
로그인해야 보이는 화면, 팝업, 캡처가 막힌 사이트 같은 것들.
그래서 캡처를 직접 올리는 기능을 만들었는데
만들다 보니 이게 이번 작업에서 제일 재밌는 기능이 됐다.
사진만 넣으면 AI가 카테고리·메모·태그를 알아서 채워준다. 당근처럼.
이건 할 얘기가 많아서 다음 편에 따로 쓸 예정
 

5. 고민해본 타이틀

원래 이름은 '찐망고 섹션'이었다라고 말하기도 애매한 제목이었다.
이후 찐망고 레퍼런스로 바꾸고 부제를 붙였다.
국내 웹 섹션 UI 모음
아직 다듬는 중이라 베타 배지도 달았다.
화면 문구도 통일하였다 
 

6. 검색에 걸리게 하기

아무리 잘 만들어도 검색에 안 나오면 아무도 모른다.
그래서 기본기부터 챙겼다.

• 페이지마다 타이틀·설명 넣기
• 카테고리별 주소 따로 만들기 (예: /c/footer)
• sitemap 만들기
• robots 설정
• 관리자 화면은 검색 노출 제외

 

User-agent: *
Allow: /
Disallow: /admin
Sitemap: https://jjinmango-ref.vercel.app/sitemap.xml

 
카테고리별 주소가 생기니까
푸터 디자인 레퍼런스 같은 검색어로 바로 들어올 수 있는 입구가 27개 생긴 셈
 

7. GA4 연결 + 주소 변경

사람들이 실제로 뭘 하는지 보려고 GA4를 붙였고
페이지 조회만으로는 부족해서 이벤트 3개를 따로 잡았다.

• 검색
• 섹션 열기
• 사이트 방문

 

js

gtag('event', 'open_section', {
  category: 'footer',
  site: 'example.com',
});

 
이걸 보면 어떤 섹션이 인기 있는지, 어떤 검색어가 허탕 치는지 보인다.
다음 수집 방향을 정할 때 감 대신 숫자로 정할 수 있다.
 
그리고 Vercel 주소도 이름에 맞춰 jjinmango-ref로 바꿨다.
물론 도메인을 연결할 계획이라 이름만 변경했고, 도메인연결후 구글서치콘솔도 등록 예정이다.
 
지금은 GDWEB 15페이지까지 수집 범위를 늘리는 중이다.
다음 편은 사진 한 장 넣으면 AI가 나머지를 채워주는 직접 올리기 얘기.
수집량 늘린 얘기는 그다음에
 
 
베타버전 링크 - 아직 베타라 분류가 어색한 섹션이 있을 수 있음
도메인변경 
https://ref.jjinmango.kr/