각 파트가 직접 쓰는, 일하는 법.
기획·UX·디자인·카피·개발·SEO·GEO·운영 — 홈페이지 하나를 만드는 모든 파트가, 자기 일을 어떻게 하는지 직접 이야기합니다. Findable이 한 팀에서 무엇을 어떻게 하는지 그대로 보실 수 있어요.
당신에게서 배웁니다
진짜 전문가는 고객입니다. 그 노하우를 검색·AI가 인용하는 콘텐츠로 번역하는 우리의 방식.
업종별 홈페이지 가이드
업종마다 필요한 게 다릅니다 — 우리 분야엔 무엇이 중요한지, 라이브로.
병원·의원 홈페이지 — 신뢰·예약·의료광고법
진료·예약·의료진 신뢰 + 의료광고법 주의. 점검 체크리스트 라이브.
카페·음식점 — 지역검색·예약·메뉴
네이버 플레이스·지역검색·예약. SERP 미리보기 라이브.
법률사무소 — 신뢰가 곧 전환
전문분야·실명·상담 동선 + 광고규정. 신뢰 점수 라이브.
학원·교육 — 상담 신청 설계
커리큘럼·상담신청 전환. 전환 퍼널 라이브.
부동산 중개 — 매물 탐색·신뢰
매물 탐색·중개사 신뢰·문의. 라이브 필터.
헬스장·필라테스 — 체험·회원권 전환
요금제·체험 예약·시설. 요금 토글 라이브.
제조사·B2B — 검색·AI 기술 신뢰
제품·인증·견적, 검색·AI 인용. answer 빌더 라이브.
미용실·뷰티 — 사진·예약·지역검색
시술 사진 최적화·예약. 블러업 로딩 라이브.
1인 사업자·프리랜서 — 한 장 랜딩
한 장으로 신뢰·문의. 모바일 리사이저 라이브.
쇼핑몰 — 장바구니→결제 전환
결제 마찰·중복결제 방지. 버튼 상태 라이브.
운영·마케팅 실무
만든 뒤가 진짜 — 리뉴얼·호스팅·법규·플레이스·분석·광고까지.
홈페이지 리뉴얼, 언제 해야 하나
리뉴얼 신호 체크리스트 라이브 + 전면/부분 판단.
도메인·호스팅 고르기
호스팅 유형 필터 라이브 + 정적호스팅 가성비.
개인정보처리방침 (복사 템플릿)
처리방침 골격 복사 + 필수 항목·동의.
구글 비즈니스 프로필 최적화
GBP 최적화 체크 라이브 + 지역·AI 노출.
네이버 플레이스·블로그 연계
검색결과 미리보기 + 홈페이지 허브 전략.
랜딩페이지 vs 홈페이지
탭 비교 라이브 + 언제 무엇을.
FAQ 페이지가 AI 답변을 가져온다
FAQPage 스키마 복사 + AEO 설계.
이메일 뉴스레터 시작
구독 검증 라이브 + 소유 채널 전략.
GA4·서치콘솔 기초
미니 대시보드 라이브 + 핵심 지표.
리타게팅·광고 픽셀
전환 퍼널 라이브 + 재유입·동의 현실.
검색·AI(GEO/SEO) 심화
로컬·백링크·클러스터·의도·이전·robots·E-E-A-T·스키마까지 깊게.
로컬 SEO — '내 근처' 검색에 잡히기
지역 검색 미리보기 라이브 + NAP·리뷰·LocalBusiness.
백링크·디지털 PR — 권위 쌓기
권위 신호 점검 라이브 + 자연 획득·스팸 위험.
토픽 클러스터 — 주제 권위 구조
클러스터 트리 라이브 + 필러·내부링크.
검색 의도 — 같은 키워드 다른 마음
의도별 탭 라이브 + 정보·탐색·거래형.
사이트 이전·301 (순위 안 잃기)
301 리다이렉트 복사 + 1:1 매핑.
중복 콘텐츠·canonical
canonical 태그 복사 + 신호 한 곳으로.
AI 크롤러 robots 관리
robots AI봇 복사 + 허용/차단 판단.
사이트 속도 점검 도구
용량 시각화 라이브 + PageSpeed·CWV.
E-E-A-T — 검색·AI가 믿는 콘텐츠
E-E-A-T 자가점검 라이브 + 경험·신뢰.
어떤 스키마를 쓸까 — 타입 가이드
LocalBusiness 스키마 복사 + 타입별 선택.
조합 작품 — 담당들의 기술이 만나면
여러 담당의 기술을 합쳐 만든 재사용 섹션 모듈. 전부 라이브로 동작합니다.
기능 소개 섹션 (디자인·모션·아이콘·카피)
틸트+아이콘+스태거 합작 그리드 라이브.
성과 지표 섹션 (카운트업·차트·모션)
숫자+미니차트 합작, 정직한 수치만.
요금 섹션 (레이아웃·컬러·버튼·카피)
토글+추천 강조 합작 요금표 라이브.
검색되는 FAQ (UX·카피·SEO·GEO)
즉시검색+스키마 합작 FAQ 라이브.
전환 CTA 밴드 (버튼·모션·카피)
마그네틱 버튼+텍스트리빌 합작.
프로세스 타임라인 (기획·레이아웃·모션)
SVG 드로우+스텝 합작 타임라인.
비교 모듈 (탭·표·카피)
탭+비교표 합작, 공정 비교 라이브.
완성형 문의 모듈 (폼·검증·버튼·토스트)
멀티스텝+검증+토스트 합작 라이브.
포트폴리오 갤러리 (이미지·모션·인터랙션)
Before/After+플립 합작 갤러리 라이브.
신뢰 섹션 (신뢰점수·아이콘·카운트업)
실적 없이 검증 가능 신뢰 합작 라이브.
히어로 섹션 (타이포·모션·개발·버튼)
텍스트리빌+배경+마그네틱 CTA 합작 라이브.
다크/라이트 테마 (토큰·컬러·접근성)
themelab 합작, 토큰 한 곳으로 retone.
견적 계산기 섹션 (폼·로직·카운트업)
estcalc 합작 리드 생성기 라이브.
검색·필터 결과 섹션 (UX·디자인·카피)
즉시 필터+빈 상태 합작 라이브.
로딩 경험 (스켈레톤·블러업·모션)
체감속도+CLS 방지 합작 라이브.
타이포 시스템 (스케일·폰트·대비)
타입스케일+대비 검증 합작 라이브.
컬러 시스템 (팔레트·대비·토큰)
팔레트+WCAG 대비 합작 라이브.
접근성 섹션 (대비·포커스·시맨틱)
대비+포커스 점검 합작 라이브.
모션 시스템 (이징·타이밍·스태거)
이징+스태거 합작, 60fps·reduced-motion.
운영 대시보드 (차트·퍼널·해석)
차트+퍼널 합작, 예시 데이터·허영지표 경계.
기획·전략 파트
목표에서 역산해, 무엇을 만들지 정합니다.
기획은 이렇게 합니다 — 목표에서 역산
무엇을 만들지가 아니라 무엇을 달성할지부터. 사이트맵·IA·우선순위 정하는 법.
왜 제작 단계에서 최적화를 심어야 하나
다 만든 뒤 덧붙이면 다시 뜯어야 합니다. 설계부터 GEO를 녹이는 순서.
홈페이지 견적은 이렇게 정해집니다
페이지·기능·콘텐츠·연동이 견적을 가릅니다. 추가비용 지점과 확인 질문.
기획 담당자의 노트 — 인터랙티브 견적기 (라이브)
슬라이더로 규모·비용 요인을 가늠하는 + 견적 실무.
정보구조·사이트맵은 이렇게 짭니다
메뉴 구조·위계·라벨링·클릭 깊이·URL·내부링크 설계.
기획 담당자의 노트 — 접히는 IA 트리 (라이브)
사이트 구조를 접고 펴보는 + 정보구조 설계 실무.
PM의 노트 — 전체 적용 작품 (라이브)
일곱 담당자를 한 화면에 모은 완성 랜딩 모듈 + 조율의 실무.
합작: 요금 모듈 — 월/연 토글 (라이브)
결제 주기 토글·추천 강조를 담당 넷이 함께 만든 요금 모듈.
UX 설계 파트
문의·구매까지 마찰 없는 흐름을 그립니다.
UX는 이렇게 설계합니다 — 전환되는 흐름
첫 화면 3초·엄지존 CTA·폼 마찰 줄이기. 이탈을 문의로 바꾸는 동선.
문의 폼은 이렇게 설계합니다
항목·단계·검증·동의 배치로 문의를 늘리는 폼 UX.
모바일 UX — 엄지 중심 설계
엄지존·고정 CTA·입력 최소화로 모바일 전환을.
폼 담당자의 노트 — 멀티스텝 폼 (라이브)
직접 진행하는 데모 폼 + 사람들이 폼에서 떠나는 이유.
UX 담당자의 노트 2 — 전환 퍼널 (라이브)
단계별 이탈을 보고 개선하는 + 퍼널 실무.
UX 담당자의 노트 — 라이브 필터·검색 (라이브)
입력 즉시 걸러지는 탐색 UX + 검색·필터 실무.
폼 담당자의 노트 2 — 인라인 검증 (라이브)
이메일·전화 형식을 즉시 검증하는 + 폼 검증 실무.
합작: 인터랙티브 탭 — 한 공간 여러 이야기 (라이브)
탭으로 전환되는 콘텐츠를 UX·모션·레이아웃이 함께.
디자인(UI) 파트
템플릿이 아닌 브랜드별 베스포크 비주얼.
UI는 이렇게 디자인합니다 — 베스포크
타이포·컬러·여백·디자인 시스템으로 '격'을 만드는 디테일.
웹 타이포그래피 — 서체·위계로 격
서체·위계·행간·keep-all·가변 타이포의 디테일.
브랜드 컬러 — 컬러 시스템·다크모드
메인·보조·액센트 역할, 명도 대비, 다크모드.
타이포 담당자의 노트 — 타입 플레이그라운드 (라이브)
슬라이더로 크기·굵기·자간을 직접 만지는 글 + 위계·가독성 실무.
타이포 담당자의 노트 2 — 모듈러 스케일 (라이브)
비율 슬라이더로 위계를 잡는 + 타입 스케일 실무.
타이포 담당 — 가변 폰트 (라이브)
한 파일로 모든 굵기 + 타입 플레이그라운드.
컬러 담당자의 노트 — 테마 전환·대비 검사기 (라이브)
테마를 바꾸고 색 대비를 직접 검사하는 글 + 컬러 시스템 실무.
컬러 담당자의 노트 2 — 팔레트 생성기 (라이브)
기준색에서 톤 단계를 뽑아보는 + 컬러 시스템 실무.
컬러 담당 — light-dark() 다크모드 (라이브)
CSS 함수로 간결해진 테마 + 토글 데모.
레이아웃 담당자의 노트 — 그리드 오버레이 (라이브)
격자를 켜고 너비를 바꿔보는 글 + 그리드·반응형 실무.
반응형 담당자의 노트 — 디바이스 리사이저 (라이브)
너비를 줄이며 재배치를 보는 + 반응형 실무.
디자인 담당자의 노트 — 플립 카드 (라이브)
앞뒤 두 면으로 정보를 압축하는 + 인터랙션 실무.
디자인 담당 — 컨테이너 쿼리 (라이브)
뷰포트가 아닌 컨테이너에 반응하는 적응형 + 최신 지원.
아이콘 담당자의 노트 — 애니메이션 SVG (라이브)
마우스 올리면 그려지는 아이콘 + SVG·디테일 실무.
카피·콘텐츠 파트
읽히고 전환되는, 그리고 AI가 인용하는 글.
카피는 이렇게 씁니다 — 읽히고 전환되는
혜택 우선 헤드라인, 스캔되는 구조, answer block까지.
헤드라인은 이렇게 씁니다 — 3초 첫 문장
혜택·구체성 중심, 나쁜 예 vs 좋은 예.
마이크로카피 — 버튼·폼·안내 문구
작은 문구가 클릭·신뢰를 바꾼다. 나쁜 예 vs 좋은 예.
마이크로카피 담당자의 노트 — 좋은/나쁜 토글 (라이브)
버튼을 눌러 같은 화면의 문구를 바꿔보는 글 + 마이크로카피 실무.
카피 담당자의 노트 2 — A/B 헤드라인 (라이브)
A vs B 제목을 골라보는 + 클릭 부르는 헤드라인 실무.
카피 담당자의 노트 — 토스트 알림 (라이브)
화면을 막지 않는 피드백 + 알림 문구 실무.
개발·인터랙션 파트
빠르고 견고한 코드에 구조화 데이터를 내장합니다.
개발은 이렇게 합니다 — 빠르고 견고하게
웹표준·성능(코어 웹 바이탈)·인터랙션, 구조화 데이터 내장.
사이트 속도 — 코어 웹 바이탈 실무
LCP·INP·CLS, 이미지·의존성·캐싱으로 빠르게.
웹 접근성 — 모두가 쓰는 사이트
시맨틱·키보드·대비·대체텍스트, SEO에도 이득.
버튼 담당자의 노트 — 특별한 버튼 8종 (라이브)
직접 눌러보는 글. 그라데이션·샤인·리퀴드·3D·모프 로딩 + 실무 비하인드.
버튼 담당자의 노트 2 — 상태 머신 (라이브)
기본·호버·로딩·완료·오류를 눌러보는 + 버튼 상태 실무.
개발 담당 — View Transitions API (라이브)
라이브러리 없이 표준 API로 화면 전환 + 최신 지원·폴백.
모션 담당자의 노트 — 스크롤 애니메이션 (라이브)
스크롤하며 보는 글. 스태거·텍스트리빌·패럴럭스 + 멀미 없는 모션의 원칙.
모션 담당자의 노트 2 — 이징 비교 (라이브)
linear·ease-out·spring을 재생해보는 + 이징 실무.
모션 담당 — 스크롤 기반 애니메이션 (라이브)
JS 없이 CSS scroll-timeline + 성능·폴백.
JS 없이 부모를 바꾼다 — CSS :has() (라이브)
순수 CSS :has()로 부모를 제어하는 숨은 노하우.
로딩 담당자의 노트 — 스켈레톤 (라이브)
스켈레톤이 콘텐츠로 채워지는 걸 보는 글 + 체감 속도 실무.
이미지 담당자의 노트 — 블러업 로딩 (라이브)
흐릿→또렷 프로그레시브 로딩 + 포맷·사이즈·CLS 실무.
이미지 담당 — AVIF·fetchpriority 2026 (라이브)
최신 이미지 최적화 + 블러업 데모.
접근성 담당자의 노트 — 키보드 포커스 (라이브)
포커스 링을 끄고 켜보는 글 + 모두가 쓰는 사이트 실무.
접근성 담당 — WCAG 2.2 최신 (라이브)
새 성공기준(포커스·타깃 크기 등) + 포커스 데모.
성능 담당자의 노트 — 용량 시각화 (라이브)
무엇이 사이트를 무겁게 하는지 막대로 보고 최적화 적용 + 성능 실무.
성능 담당 — INP 반응성 (라이브)
2024년 핵심 지표 INP를 직접 체감 + 개선법.
웹폰트 없이 빠른 사이트 — 시스템 폰트 스택 (라이브)
FOUT·CLS를 없애는 시스템 폰트 스택 노하우.
SEO 파트
구글·네이버 검색에 꾸준히 발견되게.
SEO는 이렇게 합니다 — 구글·네이버 실무
키워드·온페이지·기술 SEO·측정의 실무 6단계.
네이버 검색 최적화 — 구글과 다른 점
통합검색·VIEW·플레이스, 서치어드바이저 등록.
구조화 데이터 — 스키마(JSON-LD) 실무
@graph로 엔티티 연결, 리치결과·AI 이해.
SEO 담당자의 노트 — SERP 미리보기·스키마 복사 (라이브)
제목·설명을 입력하며 검색결과를 미리보고 스키마를 복사 + SEO 실무.
SEO 담당 — 엔티티·sameAs 2026 (라이브)
AI가 신뢰하는 엔티티 연결 + 스키마 복사.
GEO/AEO 파트
AI 답변에 인용되도록 설계합니다. 우리의 간판.
GEO와 SEO는 무엇이 다른가
'순위'를 넘어 'AI 답변 인용'으로. 무엇부터 해야 하는지.
AI가 인용하는 문단 쓰는 법
AI가 들어올리는 answer block 40~80단어 설계의 실제.
llms.txt — AI를 위한 사이트 요약
무엇을 담고 왜 쓰나. robots와 차이·작성 원칙.
AI 답변 인용은 이렇게 확인합니다
직접 질의·크롤러 로그·referral로 가시성 추적.
GEO 담당자의 노트 — answer block 빌더 (라이브)
문단을 쓰면 AI 인용 적정 여부를 알려주는 빌더 + GEO 실무.
신뢰 담당자의 노트 — E-E-A-T 점수 (라이브)
신뢰 요소를 체크해 점수를 보는 + E-E-A-T·GEO 실무.
GEO 담당 — AI 검색 시대 2026 (라이브)
AI 답변에 인용되는 콘텐츠 조건 + answer 빌더.
운영·QA 파트
검증·배포부터 오픈 후 개선 루프까지.
운영·QA는 이렇게 합니다 — 검증·배포·관리
QA 체크리스트, 배포·보안, 측정→개선 루프.
오픈 전 최종 점검 — 런칭 체크리스트
브라우저·링크·메타·검색등록·보안·속도 점검.
홈페이지 보안 — 중소기업 기본
HTTPS·보안 헤더·스팸 대응·개인정보·백업.
운영 담당자의 노트 — 런칭 체크리스트 (라이브)
체크하면 진행률이 오르는 런칭 점검 + 운영 실무.
분석 담당자의 노트 — 미니 대시보드 (라이브)
막대가 차오르는 + 측정→개선 루프 실무.
보안 헤더 한 줄의 차이 — CSP 실전 (복사)
실제 쓰는 보안 헤더를 복사해 적용하는 노하우.