레퍼런스 AI웹서비스 제작노트 -10 | 잘못 잘린 섹션은??

 
자동 수집이 돌아가고 섹션이 쌓이니까
눈에 거슬리는 게 하나둘 보이기 시작했다.
 
2편에서 이야기했지만 캡쳐는 Playwright로 섹션을 자동으로 자른다.
대부분은 잘 자르는데 가끔 이런 게 나온다.

• 섹션 중간에서 어설프게 잘림
• 두 섹션이 한 장으로 붙어서 찍힘 

예를 들어 메인 비주얼이랑 서비스 소개가 한 장으로 붙으면
이걸 어느 카테고리에 넣어도 애매하다.
근데 이걸 사람이 고칠 방법이 없었다.
숨기거나, 그냥 두거나.
무드보드에서 그들이 모이면 별로이기도 하고 해서
관리자 화면에 자르기 기능을 만들었다.

찐망고 레퍼런스 자르기 기능

1. 이미지 위에 가로선을 긋는다
2. 선 기준으로 조각이 나뉜다
3. 조각마다 남김 / 버림을 고른다
4. 남긴 조각은 각각 새 섹션이 되고, 원본은 숨겨진다

붙어서 찍힌 배민 캡처도
가운데 선 하나 긋고 두 조각 다 남기면 메인 비주얼, 서비스 소개로 따로 분류할 수 있다.
자르기 기능 너무 좋은 거 같음
 
이 사이트는 리뉴얼을 반영하려고 90일마다 사이트를 다시 캡처한다.
자른 조각은 '직접 올린 섹션'으로 저장하게 했다.
직접 올리기 기능이랑 같은 취급이다.
직접 올린 섹션은 재캡처를 돌려도 지워지지 않는다.
사이트가 리뉴얼되면 새 디자인은 새로 들어오고
내가 자른 예전 디자인은 그대로 남는다.
리뉴얼 전 디자인도 기록으로 남아 있는 게 레퍼런스로는 더 좋다고 판단했다.
 
이미지는 서버에서 sharp로 자른다.
sharp는 Node.js에서 이미지 크기를 바꾸거나 자를 때 쓰는 도구다.

 

javascript

import sharp from 'sharp';

// top부터 height만큼 가로로 잘라내기
const piece = await sharp(buffer)
  .extract({ left: 0, top, width, height })
  .webp()
  .toBuffer();

 
top이랑 height는 내가 그은 가로선 위치로 계산한다.
잘라낸 조각은 Supabase 저장소에 올린다.
 
섹션을 분류하다 보니 어디에도 안 맞는 것들이 계속 나왔다.
억지로 비슷한 카테고리에 넣으면 나중에 찾을 때 헷갈린다.
그래서 새로 만들었다.

• 구독·알림 신청: 뉴스레터, 알림 받기 신청 영역
• 안내 박스 모음: 공지나 안내를 박스 여러 개로 나열한 영역
• 바로가기 배너: 다른 페이지로 보내는 배너
• 투자정보(IR): 기업 사이트의 주가, 공시, 실적 영역

그리고 '바로가기 메뉴'는 퀵링크로 이름을 바꿨다.
카테고리가 27개 → 31개로 늘면서 분류 단축키도 z까지 늘렸다.
 
검색에서 아쉬운 게 두 가지 있었다.
첫 번째, 단어를 여러 개 넣으면 안 찾아짐
"히어로 다크"처럼 두 단어를 넣으면 결과가 이상했다.
그래서 단어를 띄어쓰기로 나누고, 모든 단어가 다 들어간 것만 보여주게 바꿨다.
 
두 번째, 부르는 이름이 사람마다 다름
같은 영역인데 사람마다 부르는 이름이 다르다.

• 메인 비주얼 = 히어로 = 키비주얼
• 후기 = 리뷰
• 퀵링크 = 퀵메뉴

내 사이트 카테고리 이름은 '메인 비주얼'인데
누가 '히어로'로 검색하면 아무것도 안 나왔다.
그래서 별칭 목록을 만들었다.

 

javascript

const ALIAS = {
  '히어로': '메인 비주얼',
  '키비주얼': '메인 비주얼',
  '리뷰': '후기',
  '퀵메뉴': '퀵링크',
};

// 검색어를 단어로 나누고, 별칭이면 원래 이름으로 바꾸기
const words = q.trim().split(/\s+/).map((w) => ALIAS[w] ?? w);

// 모든 단어가 다 들어간 섹션만
const list = all.filter((s) => words.every((w) => getText(s).includes(w)));

 
이제 '히어로'로 찾아도 메인 비주얼이 나온다.
수강생은 학원에서 배운 이름으로, 실무자는 회사에서 쓰는 이름으로 찾을 수 있다.
 
만들고 싶은 건 많은데 지금 꼭 필요한지 따져서 미뤄둔 것들.

• 업종 태그: '쇼핑몰 후기'처럼 업종으로 찾기. AI로 태그를 달아야 해서 비용이랑 정확도를 더 봐야 한다
• 컬러 태그: '파란색 메인 비주얼'처럼 색으로 찾기
• 휴지통 비우기: 숨긴 섹션 이미지를 실제로 지우기. 지금 이미지가 0.39GB라 용량 알림이 오면 할 예정
• 와이어프레임 편집: AI가 만든 와이어프레임을 화면에서 바로 고치기

자동화를 아무리 잘 만들어도 틀리는 건 나온다.
중요한 건 사람이 쉽게 고칠 수 있는 방법을 만들어두는 것.
그리고 사람이 고친 건 자동화가 다시 덮지 않게 하는 것.
 
https://ref.jjinmango.kr/