찐망고'S 퍼블리싱그리고디자인

섹션을 하나하나 모아놓고 보니 이런 생각이 들었다.이걸 조합해서 페이지 하나처럼 쌓아 볼 까하는 ㅎㅎ그래서 무드보드를 만들었다.그리고 욕심이 나서 AI 와이어프레임까지 붙여봤다 무드보드는 디자인 시작 전에 참고할 이미지를 한곳에 모아 본다 생각하면 된다.보통은 핀터레스트나 피그마에 이미지를 붙여서 만든다. 찐망고 레퍼런스의 무드보드는 조금 다르다.섹션을 위에서 아래로 쌓아서 페이지 한 장처럼 본다.헤더 → 메인 비주얼 → 서비스 소개 → 후기 → 푸터 이런 식으로. 수업에서 사이트 리뉴얼 과제를 할 때 바로 디자인부터 하지 않는다.분석을 꽤 길게 한다.현재 사이트 분석: 이 회사가 무슨 사업을 하는지, 웹사이트가 어떤 역할인지, 주로 누가 들어오는지문제 찾기: 정보 찾기가 어려운지, 보여줘야 할 걸 뒤..

주소를 바꾸고, 검색에 나오게 하고, 사람들이 들어와도 버티게 준비했다.그러다 또 하나 터졌다 😅 1. 주소 바꾸기jjinmango-ref.vercel.app → ref.jjinmango.krvercel.app 주소는 Vercel이 무료로 주는 임시 주소라 도메인연결을 했다.찐망고 사주로 색인신청할 때 도메인변경하면서 애를 먹어서 이번엔 변경 후 신청을 ㅎㅎ찐망고 사주처럼 jjinmango.kr 앞에 ref를 붙여서 연결했다.이렇게 앞에 붙이는 걸 서브도메인이라고 한다.새 도메인을 살 필요가 없어서 돈이 안 든다.예전 주소는 308 리다이렉트를 걸어야 한다. (Vercel서버에서)리다이렉트는 옛 주소로 들어오면 새 주소로 넘겨주는 설정이고308은 앞으로 계속 이 주소라는 뜻2. 구글 검색 등록 (서치..

GDWEB 수집 범위를 15페이지까지 늘렸다.사이트가 한 번에 150곳 늘었고섹션은 1,900개 가까이 됐다.숫자 올라가는 거 보면서 흐뭇했는데그날 밤 이상한 걸 발견함1. 관리자 화면이랑 실제 화면이 다름관리자 화면 '후기'에는 솔트룩스, NHN Cloud가 있는데실제 레퍼런스 화면 '후기'에는 PRISM, 클래스101이 있다.개수도 13개 vs 11개. 아예 다름 ㅠㅠ같은 DB를 보는데 왜 다르지?2. Supabase 1,000행 제한DB에 한 번 물어보면 최대 1,000개까지만 돌려준다.코드에는 `limit=20000`이라고 써놨는데조용히 1,000개에서 잘리고 있었다.에러도 없다… 그래서 더 무섭.섹션이 1,000개를 넘는 순간- 관리자 화면은 오래된 순 1,000개- 레퍼런스 화면은 최신 순 ..

5편에서 예고한 직접 올리기 자동 수집으로 안 잡히는 섹션이 꼭 있다.로그인해야 보이는 화면, 팝업, 캡처가 막힌 사이트 같은 것들.그래서 내가 직접 올리는 기능을 만들었다. 처음 버전은 이랬다.캡처 올리고 → 카테고리 고르고 → 메모 쓰고 → 태그 달고.하나 올리는 데 1분.열 개 올리니까 벌써 지겹다 😅😅😅😅😅 이러면 결국 안 올리지..그때 생각난 게 당근이었다.당근은 사진만 올리면 카테고리랑 제목을 알아서 추천해준다.나는 확인만 하고 고칠 것만 고치면 된다.사람이 쓰고 AI가 돕는 게 아니라 AI가 쓰고 사람이 확인하는 ㅎㅎ1. 3단계캡처를 끌어다 놓거나 Ctrl+V이미지가 들어가는 순간 AI(Haiku)가 보고 카테고리·메모·태그를 채움나는 사이트 주소만 넣고, 틀린 데만 고쳐서 저장입..

수집도 되고, 분류도 되고, 관리자 화면도 만들었고막상 메인을 열어보니 그냥 캡처가 끝없이 깔린...이걸로 레퍼런스를 찾으라고 하면 나라도 안 쓸.. 1. 메인은 찾는 순서대로 다시 짰다레퍼런스 찾을 때 내 머릿속 순서를 그대로 적어봤다.뭘 찾을지 알면 → 바로 검색대충 알면 → 자주 쓰는 섹션으로 바로 가기모르면 → 이것저것 구경가끔 → 새로 뭐 들어왔나 확인그래서 메인 순서를 이렇게 바꿨다.검색창주요 섹션 바로가기 (메인 비주얼 / 서비스 소개 / 상품 목록 / 후기 / 문의·전환)섹션별 미리보기새로 들어온 사이트섹션별 미리보기는 카테고리마다 4개씩 보여주는데처음엔 한 사이트 캡처가 여러 칸을 다 차지했다.그래서 카테고리마다 서로 다른 사이트 4개만 뽑게 바꿨다.이것만 해도 훨씬 둘러볼 맛이 난다. ..

레퍼런스 AI웹서비스 제작노트 -1 | 국내 웹 섹션 레퍼런스 사이트 기획과 서버비 0원 구조 만들기수업 시간에 늘 시키는 일이 있다.비전공자들이 많은 수업을 하다보니 많이 보는게 중요하다는 사실을 가르쳐 주는 일 그래서 섹션별로 레퍼런스를 찾아 보는 연습을 시킨다.예를 들어 앱 다운uiweb.tistory.com 섹션별로 이젠 어느정도 잘 잘리지만, 잘린 이미지만 잔뜩 있으면 그냥 이미지 폴더일뿐헤더인지, 푸터인지, 앱 다운로드 영역인지 카테고리를 정해준다 1. 카테고리처음엔 헤더, 메인 비주얼, 앱 다운로드, 뉴스·공지, 푸터 정도로 시작했는데실제 국내 사이트를 보다 보니 하나씩 늘어났다.고객센터랑 Contact us는 따로. 고객센터는 전화번호·운영시간 안내고, Contact us는 문의 폼이다. ..

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

레퍼런스 AI웹서비스 제작노트 -1 | 국내 웹 섹션 레퍼런스 사이트 기획과 서버비 0원 구조 만들기수업 시간에 늘 시키는 일이 있다.비전공자들이 많은 수업을 하다보니 많이 보는게 중요하다는 사실을 가르쳐 주는 일 그래서 섹션별로 레퍼런스를 찾아 보는 연습을 시킨다.예를 들어 앱 다운uiweb.tistory.com 1편에서 구조를 잡고 이젠 캡쳐를 얼마나 정확히 할 수 있나가 핵심인데사이트 주소 하나를 넣으면 헤더, 메인 비주얼, 서비스 소개, 푸터…이렇게 섹션별 이미지로 잘라주는 것.말은 쉬운데 국내 사이트들이 정말 제각각으로 만들어져 있어서하나 고치면 하나 터지고, 하나 고치면 또 하나 터지고... 🙃 캡처는 Playwright를 썼다.코드로 크롬을 띄워서 페이지를 열고 스크린샷을 찍어주는 도구다..

수업 시간에 늘 시키는 일이 있다.비전공자들이 많은 수업을 하다보니 많이 보는게 중요하다는 사실을 가르쳐 주는 일 섹션별로 레퍼런스를 찾아 보는 연습을 시킨다.예를 들어 앱 다운로드 영역이다 하면 사이트들을 일일히 찾으면서탭을 스무 개쯤 열고 스크롤을 내리는 일... 레퍼런스 사이트는 많다. GDWEB이나 디비컷은 사이트를 통째로 보여주고, uibowl은 앱 화면을 패턴별로 잘 정리해놨다. (유아이볼에서도 헤더, 푸터, 공지사항 따로 볼 수 있다고 한다)그런데 PC 웹을, 그것도 국내 사이트를, 섹션 단위로 모아둔 곳은 없었다. 헤더만 쭉, 푸터만 쭉, 뉴스·공지 영역만 쭉 보고 싶은데.그래서 만들기로 함 국내 웹사이트를 섹션별로 모아 보는 레퍼런스, 찐망고 레퍼런스. 레퍼런스 사이트는 한 번 올리면 끝..

안녕하세요 찐망고입니다 오늘은 ai소식 두개를 가지고 포스팅을 해볼게요 일단 REA(Reverse Engineer Anything)!!! 다른 앱이나 사이트를 쓰다가 기능이나 인터랙션이 너무 잘 만들어져서 궁금했던 적 있죠? 웹이면 개발자 도구라도 열어보겠지만, 데스크톱 앱이나 모바일 앱은 들여다볼 방법이 막막합니다.요즘 깃허브에서 이 문제를 AI 에이전트로 해결하는 오픈소스가 크게 화제인데바로 REA(Reverse Engineer Anything)입니다. 스타 수가 24만 개를 넘었을 정도로 관심이 뜨겁습니다.오늘은 REA가 무엇인지, 어떻게 설치하고 쓰는지, 그리고 UI/UX 강사 입장에서 어디에 써먹을 수 있을지 정리해볼게요. REA는 소스코드 없이 앱을 분석해서 기능의 작동 원리를 알려주는 오픈..