랜딩 메뉴판 · 31섹션 · 업종 6 랜딩은 컴포넌트가 아니라섹션의 순서 예요 섹션마다 이름 · 별칭 · 요청 문장 · 실물 HTML 이 있어요. 룩(색·글꼴)은 design-brief 에서 , 이 사전은 구조와 순서만 줘요.
디바이스 프레임 히어로"폰 테두리 안에 화면" 번갈아 행"좌우 번갈아" CTA 밴드"마지막 행동 유도"
히어로는 디바이스 프레임형으로. 왼쪽 카피 + 오른쪽에 브라우저 창 프레임 안 실제 스크린샷. 색·폰트는 design-brief대로.
복사 AI한테 시키는 공식 섹션 이름과 순서로값 을 적어요 섹션에 이름을 붙이는 순간 '어디를 어떻게'가 한 번에 통한다. 랜딩은 컴포넌트가 아니라 '섹션의 순서'다.
[섹션 이름] [순서/위치] [제품 톤 = design-brief] [실제 콘텐츠]
○ 히어로는 디바이스 프레임형(왼쪽 카피 + 오른쪽 실제 스크린샷), 그 아래 로고 바, 기능은 번갈아 행 3개, 마지막에 CTA 밴드. 색·폰트는 우리 design-brief대로.
복사 업종별 레시피 업종마다 달라지는 건순서와 증거 예요 누르면 그 업종의 섹션 순서 · 증거 · 첫 줄 공식 · 룩 견본으로 가요.
⑦ 상세페이지 판으로 설명할 땐리듬 을 지켜요 상세페이지는 같은 꼴 판을 이어 붙이기 쉽다. 셋째 판부터 눈이 안 읽는다(2026-10-23 Giting 갤러리에서 판 다섯을 같은 틀로 깔았다가 「자유도 없이 반복 같다」는 지적).
같은 판 꼴을 두 번 연달아 쓰지 않는다 가운데 정렬은 첫 판에만 바탕은 판마다 번갈아(흰 · 옅은 색 · 어두운 띠) 말풍선 요청문은 한 페이지에 두세 번까지 실물이 있는 판과 글만 있는 판을 섞는다 상세페이지를 판 리듬대로 짜줘. 판 꼴은 가운데 머리 → 왼쪽 글·오른쪽 실물 → 폭 전체 표 → 말풍선 묶음 → 어두운 띠 순서로, 같은 꼴은 연달아 두지 말고 바탕은 판마다 번갈아. 가운데 정렬은 첫 판에만.
복사 칩 머리 제목"위에 동그란 라벨 달린 큰 제목"
Claude Code 스킬 「랜딩 만들어줘」가섹션 목록 으로 바뀌어요 스킬로 깔아 두면 업종과 증거를 먼저 묻고, 섹션 순서를 보여 준 뒤에 만들어요.
/plugin marketplace add hanmariyang/giting-skills
복사 /plugin install landing-menu@giting
복사 GitHub에서 오픈소스 보기 ↗ ① 히어로 (첫 화면) 5② 신뢰 (증거) 5③ 기능 (차별) 5④ 작동 (어떻게) 3⑤ 전환 (행동) 4⑥ 뼈대 (틀) 4⑦ 상세페이지 (판으로 설명) 5＋ 업종별 레시피 6
＋ 업종별 레시피 6 업종마다 달라지는 것은 룩이 아니라 순서와 증거 다. 아래 순서로 섹션을 고르고, 룩 견본은 design-brief 에 넘길 값의 예시로만 본다(사전이 룩을 정하지 않는다).
앱 iOS·안드로이드 앱 소개, 스토어로 보내는 페이지 문장 복사 디바이스 프레임 히어로 폰 프레임 안 실제 첫 화면 평점 스토어 평점과 리뷰 수 번갈아 행 하는 일 셋을 화면 하나씩 실물 셋 만든 결과 세 장 FAQ 개인정보·가격 질문 CTA 밴드 App Store 받기 단추 증거 스토어 평점·리뷰 수와 실제 스크린샷. 평점이 아직 없으면 그 칸을 빼고 스크린샷을 늘린다.첫 줄 공식 [누가] [무엇을] [몇 번에] 끝낸다 (예: 사진 한 장으로 포스터를 만든다)
사진 한 장으로 포스터를 만든다
iOS·안드로이드 앱 소개, 스토어로 보내는 페이지
시작하기 흰 지면 · 액센트 하나 제목 Pretendard 800 · 본문 Pretendard 400 제일 흔하고 안전한 결. 스크린샷 색이 살아난다. 사진 한 장으로 포스터를 만든다
iOS·안드로이드 앱 소개, 스토어로 보내는 페이지
시작하기 옅은 회색 · 카드 흰 제목 Pretendard 800 · 본문 Pretendard 400 카드만 흰색이라 스크린샷 묶음이 떠 보인다. 사진 한 장으로 포스터를 만든다
iOS·안드로이드 앱 소개, 스토어로 보내는 페이지
시작하기 종이색 · 손글씨 제목 제목 Nanum Pen Script · 본문 Pretendard 400 일기·기록 앱처럼 손맛이 제품의 값일 때.
SaaS · 도구 웹 서비스·개발 도구·B2B, 가입이나 데모로 보내는 페이지 문장 복사 분할 히어로 왼쪽 약속 · 오른쪽 실제 화면 로고 바 쓰는 회사 로고 기능 그리드 기능 여섯 비교표 우리 vs 원래 하던 방식 가격표 요금제 셋 FAQ 보안·해지 질문 CTA 밴드 무료로 시작 증거 쓰는 회사 로고와 숫자(처리량·시간 절약). 로고가 없으면 사용처 대신 비포/애프터로 증명한다.첫 줄 공식 [하던 일]을 [얼마나] 줄인다 (예: 주간 보고 쓰는 시간을 10분으로)
주간 보고 쓰는 시간을 10분으로
웹 서비스·개발 도구·B2B, 가입이나 데모로 보내는 페이지
시작하기 흰 지면 · 차가운 파랑 제목 Pretendard 700 · 본문 Pretendard 400 도구다운 결. 표·숫자가 많을 때 읽기 쉽다. 주간 보고 쓰는 시간을 10분으로
웹 서비스·개발 도구·B2B, 가입이나 데모로 보내는 페이지
시작하기 먹 지면 · 형광 액센트 제목 IBM Plex Sans KR 700 · 본문 IBM Plex Sans KR 400 개발자 도구. 코드 블록이 주인공일 때만. 주간 보고 쓰는 시간을 10분으로
웹 서비스·개발 도구·B2B, 가입이나 데모로 보내는 페이지
시작하기 옅은 하늘 · 둥근 카드 제목 Pretendard 800 · 본문 Pretendard 400 친근한 B2C 도구. 상세페이지 판(⑦)과 잘 맞는다.
동네 가게 · 식당 카페·식당·미용실·공방, 방문이나 예약으로 보내는 페이지 문장 복사 제품샷 히어로 가게·음식 실제 사진 한 장 크게 아이콘 리스트 주소 · 영업시간 · 주차 · 예약 기능 그리드 대표 메뉴 여섯 후기 카드 손님 후기 셋 FAQ 단체·포장·반려동물 CTA 밴드 전화 걸기 · 길찾기 단추 증거 실제 가게 사진과 지도 플랫폼 별점·후기. 사진은 직접 찍은 것만, 스톡 사진 금지.첫 줄 공식 [동네]에서 [무엇]을 [어떻게] (예: 망원동에서 아침 8시에 여는 빵집)
망원동에서 아침 8시에 여는 빵집
카페·식당·미용실·공방, 방문이나 예약으로 보내는 페이지
시작하기 미색 · 따뜻한 갈색 제목 Gothic A1 800 · 본문 Pretendard 400 빵집·카페. 음식 사진이 따뜻해 보인다. 망원동에서 아침 8시에 여는 빵집
카페·식당·미용실·공방, 방문이나 예약으로 보내는 페이지
시작하기 흰 지면 · 간판 빨강 제목 Black Han Sans · 본문 Pretendard 400 분식·노포. 간판 같은 굵은 제목. 망원동에서 아침 8시에 여는 빵집
카페·식당·미용실·공방, 방문이나 예약으로 보내는 페이지
시작하기 먹 지면 · 금색 제목 Pretendard 700 · 본문 Pretendard 400 바·다이닝. 밤 사진이 많을 때만.
교육 · 강의 온라인 강의·부트캠프·과외, 수강 신청으로 보내는 페이지 문장 복사 텍스트 히어로 끝나면 할 수 있게 되는 것 한 줄 통계 스트립 수강생 수 · 완주율 · 기간 타임라인 주차별 커리큘럼 비포/애프터 수강 전 · 후 결과물 후기 카드 수강생 후기 가격표 수강료 · 환불 조건 CTA 밴드 마감일과 신청 단추 증거 수강 전·후 결과물과 실제 수강생 후기. 완주율·취업률은 실제 수만, 없으면 그 칸을 뺀다.첫 줄 공식 [기간] 뒤에 [무엇을] 할 수 있다 (예: 6주 뒤 내 앱을 스토어에 올린다)
6주 뒤 내 앱을 스토어에 올린다
온라인 강의·부트캠프·과외, 수강 신청으로 보내는 페이지
시작하기 흰 지면 · 진한 초록 제목 Pretendard 800 · 본문 Pretendard 400 믿음이 필요한 강의. 표·일정이 차분하게 읽힌다. 6주 뒤 내 앱을 스토어에 올린다
온라인 강의·부트캠프·과외, 수강 신청으로 보내는 페이지
시작하기 노랑 띠 · 먹 글자 제목 Gmarket Sans 700 · 본문 Pretendard 400 입문·자격증. 형광펜 같은 강조가 어울린다. 6주 뒤 내 앱을 스토어에 올린다
온라인 강의·부트캠프·과외, 수강 신청으로 보내는 페이지
시작하기 옅은 보라 · 흰 카드 제목 Pretendard 800 · 본문 Pretendard 400 코딩·디자인. 실물 결과물 카드가 떠 보인다.
상품 상세 (커머스) 스마트스토어·자사몰 상세, 상품 하나를 판(카드)으로 설명하는 페이지 문장 복사 칩 머리 제목 칩 라벨 + 이 상품이 해 주는 것 실물 셋 쓰는 장면 세 장 용도표 이런 분께 이런 옵션 비포/애프터 쓰기 전 · 후 후기 카드 구매 후기 가격표 옵션별 가격 · 할인 CTA 밴드 구매 띠 증거 실제 상품 사진·사용 장면과 구매 후기 수. 「일정 시간 뒤 가격 인상」 같은 압박 문구는 쓰지 않는다.첫 줄 공식 [무엇이] [어떻게] 달라진다 (예: 아침 머리가 5분 만에 정리된다)
아침 머리가 5분 만에 정리된다
스마트스토어·자사몰 상세, 상품 하나를 판(카드)으로 설명하는 페이지
시작하기 옅은 하늘 · 파랑 · 형광 제목 Pretendard 800 · 본문 Pretendard 400 상세페이지 기본 결. 칩·말풍선·형광 한 단어. 아침 머리가 5분 만에 정리된다
스마트스토어·자사몰 상세, 상품 하나를 판(카드)으로 설명하는 페이지
시작하기 흰 지면 · 상품색 따라가기 제목 Pretendard 800 · 본문 Pretendard 400 액센트는 상품 패키지 색에서 하나만 뽑는다. 아침 머리가 5분 만에 정리된다
스마트스토어·자사몰 상세, 상품 하나를 판(카드)으로 설명하는 페이지
시작하기 베이지 · 먹 제목 Pretendard 700 · 본문 Pretendard 400 생활용품·뷰티. 사진이 부드럽게 붙는다.
행사 · 이벤트 밋업·전시·공연·팝업, 신청이나 예매로 보내는 페이지 문장 복사 텍스트 히어로 행사 이름 · 날짜 · 장소 한 화면에 타임라인 시간표 후기 카드 연사·출연자 카드로 바꿔 쓰기 아이콘 리스트 장소 · 교통 · 준비물 FAQ 입장·환불·녹화 CTA 밴드 남은 자리와 신청 단추 증거 연사·출연자 실명과 지난 회 사진. 남은 자리 수는 실제 값만.첫 줄 공식 [날짜] [장소]에서 [무엇을] (예: 11월 8일 성수에서 1인 개발자 열 명이 만든 것을)
11월 8일 성수에서 1인 개발자 열 명이 만든 것을
밋업·전시·공연·팝업, 신청이나 예매로 보내는 페이지
시작하기 흰 지면 · 날짜 크게 제목 Black Han Sans · 본문 Pretendard 400 밋업·컨퍼런스. 날짜가 포스터처럼 박힌다. 11월 8일 성수에서 1인 개발자 열 명이 만든 것을
밋업·전시·공연·팝업, 신청이나 예매로 보내는 페이지
시작하기 먹 지면 · 네온 제목 Gmarket Sans 700 · 본문 Pretendard 400 공연·파티. 밤 행사일 때만. 11월 8일 성수에서 1인 개발자 열 명이 만든 것을
밋업·전시·공연·팝업, 신청이나 예매로 보내는 페이지
시작하기 연두 지면 · 먹 제목 Pretendard 800 · 본문 Pretendard 400 플리마켓·야외 팝업. 낮의 결.
① 히어로 (첫 화면) 5
"글씨 큰 첫 화면" 비주얼 없이 큰 카피 한 줄 + 부제 + CTA로 승부하는 첫 화면. 메시지가 강할 때. ↔ 비주얼 없이 카피 중심이면 텍스트 히어로, 오른쪽에 스크린샷이 붙으면 분할 히어로, 프레임에 넣으면 디바이스 히어로
제품샷 히어로 Screenshot Hero 문장 복사 "위에 화면 캡처 크게" 카피 아래(또는 옆)에 실제 제품 스크린샷 한 장을 크게. 제품이 스스로 설명될 때. ↔ 스크린샷을 그냥 크게 놓으면 제품샷, 브라우저/폰 테두리에 넣으면 디바이스 프레임 히어로
디바이스 프레임 히어로 Device Frame Hero 문장 복사 "폰 테두리 안에 화면" 스크린샷을 브라우저 창이나 폰 프레임에 넣어 '진짜 도는 제품'처럼 보이게. 기본 추천형. ↔ 테두리(브라우저/폰)에 넣으면 디바이스 프레임, 테두리 없이 크게면 제품샷
"좌우로 나눈 첫 화면" 왼쪽 카피 + 오른쪽 비주얼로 화면을 반씩. 카피와 이미지가 대등할 때. ↔ 좌우 반반이면 분할, 카피 아래 세로로 쌓이면 텍스트/제품샷
"움직이는 첫 화면" 카피 옆/아래에 자동재생 영상(또는 gif)으로 제품이 움직이는 모습을. 동작이 핵심일 때. ↔ 움직이는 화면이면 모션, 정지 스크린샷이면 제품샷/디바이스
② 신뢰 (증거) 5
"쓰는 회사 로고 줄" 제품을 쓰는 회사·매체 로고를 한 줄로. '나만 쓰는 게 아니다'를 0.5초에. ↔ 로고만 한 줄이면 로고 바, 숫자 강조면 통계 스트립
"숫자 크게 3개" 핵심 숫자 3~4개를 크게 나란히. 규모·성과를 한눈에. ↔ 숫자면 통계 스트립, 로고면 로고 바
"고객 후기" 실제 사용자의 한마디를 이름·소속과 함께. 말이 증거. ↔ 인용문+사람이면 후기, 별점 숫자면 평점
"별점" 별점과 한 줄 요약으로 만족도를 압축. 스토어·리뷰 사이트 연동 시. ↔ 별점 숫자면 평점, 인용문이면 후기
"이런 데서 씁니다 문구" 특정 업계·역할·상황을 이름으로 불러 '내 얘기'로 만든다. ↔ 로고면 로고 바, 대상 호명 문장이면 사용처
③ 기능 (차별) 5
"기능 카드 3개" 기능을 아이콘+제목+한줄 카드로 격자 배열. 3~6개가 대등할 때. ↔ 대등한 카드 격자면 그리드, 좌우 교차면 번갈아 행
번갈아 행 Alternating Rows 문장 복사 "좌우 번갈아" 기능 하나당 한 행, 카피와 비주얼 좌우를 교차. 깊이 있게 설명할 때. ↔ 행마다 크게 교차면 번갈아, 작은 카드 격자면 그리드
"크기 다른 타일들" 크기 다른 타일을 짜맞춘 격자. 기능 중요도에 차등을 줄 때. ↔ 칸 크기 균일이면 그리드, 크기 차등이면 벤토
"체크 목록" 기능을 아이콘+한 줄로 세로 나열. 훑기 쉽게 많이 담을 때. ↔ 세로 한 줄 나열이면 리스트, 카드 격자면 그리드
"비교 표" 우리 제품과 대안을 항목별로 대조. 차별이 표로 분명할 때. ↔ 표로 대조면 비교표, 가격 층이면 가격표
④ 작동 (어떻게) 3
"1 2 3 단계" 쓰는 법을 1·2·3 단계로. 진입 장벽을 낮출 때. ↔ 번호 단계면 스텝, 시간 흐름이면 타임라인
"시간순 나열" 시간·순서를 선 위에 점으로. 여정·연혁·로드맵에. ↔ 시간 흐름이면 타임라인, 단순 단계면 스텝
"전후 비교" 적용 전과 후를 나란히. 효과가 눈에 보일 때. ↔ 전후 나란히면 비포/애프터, 제품 대안 대조면 비교표
⑤ 전환 (행동) 4
"요금제" 요금제를 층으로 나란히. 추천 층을 강조. ↔ 가격 층이면 가격표, 기능 대조면 비교표
"마지막 행동 유도" 페이지 끝, 한 줄 카피 + 버튼 하나로 행동을 부른다. ↔ 끝에 행동 유도면 CTA 밴드, 이메일 받으면 뉴스레터
"자주 묻는 질문" 자주 나오는 의문을 아코디언으로. 반론·불안을 미리 해소. ↔ 질문 아코디언이면 FAQ, 기능 접기면 ui-menu 아코디언
"이메일 구독" 이메일 한 칸+버튼으로 구독. 아직 안 살 사람을 붙잡을 때. ↔ 이메일 받으면 뉴스레터, 행동 유도 버튼이면 CTA 밴드
⑥ 뼈대 (틀) 4
"맨 위 메뉴 줄" 로고·메뉴·CTA를 담은 최상단 바. 스크롤해도 고정될 수 있다. ↔ 랜딩 최상단 바면 상단바, 앱 화면 상단이면 app-menu 헤더
"섹션 제목 묶음" 각 섹션 위의 라벨+제목+부제 묶음. 리듬을 만든다. ↔ 섹션 위 제목 묶음이면 섹션 헤더, 페이지 첫 화면이면 히어로
"옆에 목차" 긴 랜딩의 섹션으로 바로 뛰는 목차. 현재 위치를 표시. ↔ 섹션 점프 목차면 앵커 목차, 페이지 이동 메뉴면 상단바
⑦ 상세페이지 (판으로 설명) 5 상세페이지 판 리듬 상세페이지는 같은 꼴 판을 이어 붙이기 쉽다. 셋째 판부터 눈이 안 읽는다(2026-10-23 Giting 갤러리에서 판 다섯을 같은 틀로 깔았다가 「자유도 없이 반복 같다」는 지적).
같은 판 꼴을 두 번 연달아 쓰지 않는다 가운데 정렬은 첫 판에만 바탕은 판마다 번갈아(흰 · 옅은 색 · 어두운 띠) 말풍선 요청문은 한 페이지에 두세 번까지 실물이 있는 판과 글만 있는 판을 섞는다 1 가운데 머리첫 판. 칩 머리 제목 + 실물 셋 2 왼쪽 글 · 오른쪽 실물하나를 깊게 보여 줄 때 3 폭 전체 표용도표 · 번호 견본판 4 어두운 띠설치 · 가격 · 마지막 행동 5 말풍선 묶음✕/○ 대조
상세페이지를 판 리듬대로 짜줘. 판 꼴은 가운데 머리 → 왼쪽 글·오른쪽 실물 → 폭 전체 표 → 말풍선 묶음 → 어두운 띠 순서로, 같은 꼴은 연달아 두지 말고 바탕은 판마다 번갈아. 가운데 정렬은 첫 판에만.문장 복사
칩 머리 제목 Chip Headline 문장 복사 "위에 동그란 라벨 달린 큰 제목" 둥근 칩 라벨 하나 + 두 줄 굵은 제목(한 단어만 형광 밑줄이나 색) + 회색 설명 한두 줄. 판 하나가 무엇을 말하는지 먼저 박는다. ↔ 둥근 칩 + 형광 한 단어면 칩 머리 제목, 대문자 작은 라벨(eyebrow) + 제목이면 섹션 헤더
말풍선 요청문 Prompt Bubble 문장 복사 "이렇게 말하세요 말풍선" 사람이 그대로 칠 문장을 채팅 말풍선으로 보여 주고 복사 단추를 붙인다. 「어떻게 쓰지」를 문장 한 줄로 없앤다. ↔ 사람이 칠 문장을 보여 주면 말풍선 요청문, 사용자 평가를 보여 주면 후기 카드
"이런 말엔 이런 번호" 왼쪽에 상황, 오른쪽에 고를 것(번호·이름) 칩. 줄을 누르면 그 항목으로 간다. 많은 선택지를 상황으로 좁혀 준다. ↔ 상황 → 고를 것이면 용도표, 우리 vs 남 대조면 비교표
"같은 걸 세 가지로 나란히" 같은 것을 조건 하나만 바꿔 세 번 나란히 보여 준다(짧게·원래·길게, 약·보통·강). 기능 설명 대신 결과가 말한다. ↔ 조건만 바꾼 같은 것 셋이면 실물 셋, 전과 후 둘이면 비포/애프터
번호 견본판 Numbered Swatch Grid 문장 복사 "번호 붙은 썸네일 격자" 선택지 전부를 번호 붙은 작은 견본으로 한 장에 깐다. 번호가 곧 이름이라 고르기·조합하기·말하기가 번호로 된다. ↔ 전부를 번호 견본으로 깔면 번호 견본판, 기능 몇 개를 크기 달리 배치하면 벤토 그리드
구조와 기능
사전 정본은 menu.json 하나다. 6개 코스(①히어로 ②신뢰 ③기능 ④작동 ⑤전환 ⑥뼈대) 아래 26개 섹션이 있고, 항목마다 한/영 정식 명칭, 사람이 실제로 하는 말(별칭), 한 줄 정의, 헷갈리는 것 구분 기준, AI에게 그대로 붙여넣는 요청 문장이 붙는다. 데모는 마커로 구분된 프래그먼트에서 생성되며, 빌드 한 번에 자가완결 HTML 26개·갤러리·llms.txt가 전부 나온다. 빌드 의존성은 0이다.
랜딩은 컴포넌트가 아니라 섹션의 순서다. 그래서 이 사전은 낱개 위젯이 아니라 히어로(한 줄 약속)·신뢰(증거)·기능(차별)·작동(방법)·전환(행동)·뼈대(틀)라는 페이지 구성 단위를 다룬다. 히어로만 해도 텍스트·제품샷·디바이스 프레임·분할·모션 다섯 가지를 이름으로 구분해 준다.
핵심: 제너릭을 정면으로 막는다
AI가 랜딩을 만들면 다크 배경에 가운데 정렬 히어로, 그라데이션 버튼으로 수렴한다. 이 사전의 존재 이유가 그걸 막는 것이다. 룩(색·폰트·간격)은 이 사전이 정하지 않는다. 각 제품의 design-brief에서 가져온다. 이 사전은 무슨 섹션을 어떤 순서로 놓을지, 그리고 제너릭으로 흐르지 않게 하는 규칙만 준다. 제품샷은 목업 일러스트가 아니라 실제 스크린샷을 디바이스/브라우저 프레임에 넣고, 숫자·후기·평점 데모에는 '지어낸 값 금지, 실제 값만'이 명시돼 있다.
design-brief(디자인 시스템)와 짝을 이룬다. design-brief로 언어를 잡고, landing-menu로 페이지를 짓는다. ui-menu(웹 컴포넌트)와도 축이 다르다(마케팅 섹션).
실측
섹션 26 · 코스 6 · 데모 26(자가완결·의존성 0) · 라이선스 MIT. 검수 기준 버전 0.2.0, 2026-09-26. 26개 섹션 전부 반응형(모바일에서 세로로 쌓임)이고 헤드리스 렌더로 실측 확인했다. 자체 제작 스킬이라 저장소 실측(커밋·기여자)은 표기하지 않는다.
스킬 · 자체 제작