인스타그램 링크

공식 홍보용 원페이지를 만들어줘. 데모가 아니라 지금 실제로 운영 중인 페이지를 새로 다시 만드는 거야 — 더미 데이터·데모 계정은 넣지 마. [배경 — 이 페이지가 뭔지] - glidev(글라이데브)는 코딩 없이 대화만으로 웹서비스를 만들고 배포까지 해 주는 서비스야(서비스 주소 https://glidev.ai). 이 페이지는 glidev 공식 인스타그램·페이스북 프로필에 걸린 링크 — SNS 게시물만으로는 서비스 전체를 파악하기 어려우니, 실제 제작 사례를 보여주고 서비스를 소개한 뒤 https://glidev.ai 로 보내는 페이지야. - 방문자는 사실상 전원 모바일 인앱 브라우저(인스타그램·페이스북 앱 안의 웹뷰)로 들어와. - 지금 운영 중인 주소는 https://instagram-link.glidev.ai — 완성되면 이 주소를 새 프로젝트로 옮긴다. 이미 게시된 글들이 https://instagram-link.glidev.ai/?c=fbig02 같은 링크를 쓰고 있으니 아래 ?c 규칙을 그대로 지켜. [공개 주소의 경로 규칙 — 중요] - 배포된 공개 주소에서는 /api 로 시작하는 요청만 Go 서버가 받고, 나머지 경로는 빌드된 정적 파일이 응답한다(vite 개발 서버·플러그인·미들웨어는 배포본에 없다). - 그래서 서버가 하는 일(클릭 기록 리다이렉트, 업로드 이미지 서빙, 방문 기록)은 전부 /api 아래 경로로 만든다. /l/… 처럼 /api 밖 경로에 서버 동작을 두면 개발 미리보기에서는 돼도 배포 후엔 첫 화면이 다시 뜰 뿐이다. [공개 페이지 / — 위에서 아래 순서. 카피는 글자 그대로] - 최상단: glidev 로고(아래 [브랜드] 명세, 로고 뒤에 배경색 없음) + 두 줄 "아래 사이트들은 전부 코딩 없이 대화만으로 만들어졌습니다." / "적힌 금액과 시간은 1원, 1분 단위까지 실제 값 그대로입니다." — 이 두 줄은 본문보다 눈에 띄게 강조하고, 아래 카드 영역과 시각적으로 구분해. 여기에는 버튼을 두지 마. - "제작 사례" 제목 + 레퍼런스 카드 캐러셀 — 인스타그램에 사진 여러 장 올린 게시물처럼 옆으로 넘긴다: 한 화면에 카드 한 장이 좌우 여백 없이 꽉 차고(다음 카드가 옆에 비치지 않게), 손가락으로 밀어 넘기고, 이전·다음 화살표 버튼과 몇 번째 장인지 점 표시. - 카드 한 장 = 대표 이미지(4:5 고정, 지연 로딩) + 소개 문장 + 비용·기간 한 줄 + 링크 2개 "결과 보기"(주 링크) / "제작과정 보기"(작은 텍스트 링크). - 비용·기간 한 줄은 숫자로 조립: "제작 비용 ₩10,551 · 제작 기간 23분"(원화 천단위 콤마). - 결과 보기 → https://{공개 주소}.glidev.ai/ , 제작과정 보기 → https://glidev.ai/showcase/{프로젝트 슬러그}. 관리자는 URL 을 입력하지 않고 이 두 값만 넣는다. - 카드 이미지를 탭해도 결과 보기와 같은 곳으로 간다(클릭 기록 슬롯은 따로). - 카드마다 앵커 id = 공개 주소 값. https://주소/#workboard 로 들어오면 캐러셀이 그 카드로 넘어가 있게. - 순서·노출은 관리자가 정하고, 새 카드는 맨 뒤에 들어간다. - 서비스 소개 섹션(캐러셀 아래): 헤드라인: [브랜드]의 로고 조합(심볼+글자)을 헤드라인 글자 크기에 맞게 키워 넣고 같은 줄에 "— 말로 만드는 웹서비스". 서브 두 줄: "만들고 싶은 것을 말로 설명하면 AI가 만들고 배포까지 해 줍니다." / "이 페이지도 glidev로 만들었습니다." 원리 3줄: "말하면 — 만들고 싶은 것을 말로 설명" / "만들어지고 — 즉시 제작이 시작돼 미리보기에 실시간으로 보임" / "배포까지 — 버튼 하나로 공개 주소 발급되고 내 사이트 완성" Q&A 3개: "코딩을 전혀 몰라도 되나요? — 네. 만들고 싶은 것을 말로 설명하면 돼요." / "비용은 얼마나 드나요? — 제작 비용과 서버 비용으로 나뉘어요. 서버 비용은 무료 등급이 있고, 제작 비용은 위 사례들에 표기된 금액이 실제 값이에요." / "만든 사이트는 어떻게 운영하나요? — 배포 버튼 하나로 공개 주소가 나오고, 수정도 대화로 하면 돼요." CTA 버튼 "무료로 시작하기"(cta_bottom 슬롯), 신뢰줄 "신용카드 등록 없음 · 쓴 만큼만 차감", 보조 텍스트 소링크 2개 자리(라벨·URL 은 관리자 입력, 비어 있으면 표시하지 마). - 화면 하단 고정 CTA 바: "무료로 시작하기" 버튼 하나(cta_sticky 슬롯) — 스크롤 내내 보이고, iOS 홈 인디케이터와 겹치지 않게 safe-area 패딩. - 맨 아래(고정 바에 가리지 않는 위치) 오른쪽에 버튼 모양의 작은 "관리자" 링크 → /admin. - 기능 나열·요금표·회사 소개·푸터·다른 CTA 는 넣지 마. [클릭 계측 — 중요] - 관리자 링크를 뺀 모든 버튼·링크는 서버 리다이렉트를 거친다: /api/l/<슬롯> 에서 클릭을 기록하고 302 로 목적지에 보낸다. 자바스크립트로 클릭을 기록하지 마 — 인앱 브라우저에서 유실된다. - 슬롯: cta_sticky · cta_bottom · aux1 · aux2 · 카드마다 card_<id>_result · card_<id>_process · card_<id>_image(목적지는 result 와 같고 기록만 분리). - cta 두 슬롯의 목적지: https://glidev.ai/?utm_source=instagram&utm_medium=organic&utm_content=hub_cta_sticky (cta_bottom 은 끝이 hub_cta_bottom). - 방문 URL 의 ?c=코드 와 ?m=paid 는 페이지 안 모든 /api/l/ 링크의 href 에 그대로 이어붙여, 서버가 클릭 시점에 알게 한다. 값은 영문자·숫자·하이픈·언더스코어만 허용, 다른 문자가 섞이면 그 값은 무시. - 리다이렉트 때 서버가 고치는 건 목적지 호스트가 정확히 glidev.ai 이고 utm_content 가 이미 있는 링크뿐(cta 두 슬롯, 그런 보조 소링크): c 의 앞글자로 utm_source 결정 — ig→instagram, fb→facebook, th→threads, li→linkedin, x→x, 없거나 모르면 instagram. utm_content 뒤에 _코드 를 덧붙인다(예: hub_cta_sticky_fbig02). ?m=paid 면 utm_medium=paid_social. 카드 슬롯(card_)은 목적지가 glidev.ai 라도 utm 을 붙이거나 바꾸지 마. - c 코드는 모든 슬롯의 클릭 기록에 c_code 로 남긴다. - 방문 수: 공개 페이지가 카드·문구를 받으려고 부르는 /api/public 요청 1번 = 방문 1. 관리자 화면은 세지 않는다. 날짜는 Asia/Seoul 기준, 봇 UA(instagram, facebookexternalhit, kakaotalk-scrap 등)는 방문·클릭에서 뺀다. [관리자 /admin] - 트래픽 확인 — 로그인 없이 누구나 읽기 전용: 기간 필터: 오늘 · 7일 · 14일 · 30일 · 전체(기본 7일) + 시작일·종료일 직접 선택. 라인 차트 1개에 선 2개: 일별 방문 수, 일별 CTA 클릭 수(cta_sticky + cta_bottom). 기록 없는 날은 0으로 잇는다. 외부 차트 라이브러리 없이 SVG 로, 모바일 폭에서 안 잘리게. 카드별 클릭 표(결과·제작과정·이미지·합계는 선택 기간, 끝에 누적), 슬롯별 클릭 표(선택 기간 + 누적). 차트와 표는 같은 필터를 따른다. - 컨텐츠 관리 — 비밀번호 로그인 후: 카드 추가·수정·삭제, 노출 켜기/끄기, 순서 변경. 입력: 공개 주소(서브도메인, 중복 불가 — 비우면 프로젝트 슬러그와 같게) · 프로젝트 슬러그 · 소개 문장 · 제작 비용(원) · 제작 기간(분) · 이미지 1장 — 공개 주소 말고는 전부 필수. 이미지는 서버가 4:5 로 자르고 줄여(장당 300KB 이하) 항상 새 고유 파일명으로 저장하고 /api/images/<파일명> 으로 서빙 — 같은 주소에 덮어쓰면 CDN 캐시 때문에 교체가 한동안 안 보인다. 문구 수정: 상단 두 줄, 헤드라인, 서브, Q&A, CTA, 신뢰줄, 보조 소링크(라벨+URL 2개). 관리자 비밀번호 변경. 고치면 공개 페이지에 바로 반영. - 계정: 임시 비밀번호 {관리자 임시 비밀번호} 로 시드하고 첫 로그인에서 변경을 강제해. 로그인 시도 횟수 제한, 실운영 페이지라 로그인 화면에 계정 안내는 절대 표시하지 마. [데이터] - references(id, subdomain UNIQUE, project_slug, description, cost_won, time_min, image, sort_order, visible, created_at) — 링크 URL 은 저장하지 않고 표시할 때 만든다. - settings(key, value) — 문구·보조 소링크·관리자 비밀번호 해시. - clicks(slot, date, c_code, count), visits(date, count). [시드 — 지금 운영 중인 실데이터, 이 두 장만] 1. 공개 주소 instagram-link · 프로젝트 슬러그 2-fd03b3 · 소개 "인스타그램 링크 - 현재 이 페이지" · 10551원 · 23분 · 이미지 https://instagram-link.glidev.ai/api/images/img_510a1a2c6b2b7b48.jpg 2. 공개 주소 workboard · 프로젝트 슬러그 project-203844 · 소개 "노션의 태스크, 위키 관리" · 44434원 · 48분 · 이미지 https://instagram-link.glidev.ai/api/images/img_347b72afec41bf6b.jpg - 이미지(이미 4:5, 900×1125)는 받아서 이 프로젝트 안에 저장해 서빙해 — 외부 주소를 직접 참조하지 마. - 클릭·방문 기록은 비워 둔다. 시연용 숫자를 넣지 마. [브랜드 — 이 부분은 디자인 스타일보다 우선] - 주 색상은 glidev 파랑 #2563eb — 주 버튼·링크·강조에. 그 밖의 바탕·글자색·글꼴·모양은 고른 디자인 스타일을 따른다. - 로고 = 심볼 이미지 + 글자 "glidev". 심볼은 https://glidev.ai/logo-mark.png (투명 PNG 200×256 — 받아서 이 프로젝트 안에서 서빙). 심볼 왼쪽 + 글자 오른쪽, 기준 크기 심볼 높이 20px·간격 7px — 최상단은 이 크기, 헤드라인처럼 큰 자리에선 그 글자 높이에 맞춰 같은 비율로 키운다. 글자는 이미지가 아닌 실제 텍스트 — 전부 소문자, 굵기 700, 색 #111, 시스템 산세리프(-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif). 색 변경·기울임·이니셜만 쓰기 등 변형 금지. - 서비스명은 어디서든 소문자 glidev(문장 첫머리 포함). GlidEv·Glidev 금지. [미리보기 메타] index.html 에 정적으로 넣어: <title>·og:title "glidev — 말로 만드는 웹서비스", 설명·og:description "코딩 없이 대화로 만든 실제 사이트들과 제작 비용·시간을 확인하세요", og:image 는 https://glidev.ai/og-image-v2.png (1200×630)를 받아 이 프로젝트에서 /og-image-v2.png 로 서빙하고 절대 주소 https://instagram-link.glidev.ai/og-image-v2.png 로, og:url https://instagram-link.glidev.ai/ . 파비콘은 로고 심볼. [화면] 모바일 인앱 브라우저 우선. 외부 스크립트·차트 라이브러리 금지. 카드 이미지는 종횡비를 고정해 레이아웃이 튀지 않게. [확인] 마치기 전에 curl 로: /api/l/cta_sticky?c=fbig02 가 302 로 https://glidev.ai/?utm_source=facebook&utm_medium=organic&utm_content=hub_cta_sticky_fbig02 로 가는지, /api/l/card_<id>_process 가 utm 없이 https://glidev.ai/showcase/<프로젝트 슬러그> 로 가는지. 화면에서: /#workboard 로 열면 두 번째 카드가 보이는지.

왼쪽에서 파일을 선택하세요