프로젝트 요약 상담센터(B2B) 대상으로 인바운드 리드를 만들기 위해, 제가 직접 리드 수집용 랜딩 페이지를 기획.디자인.구현 했습니다. "예쁜 소개"가 아니라, SEO 유입 -> 핵심 설득 -> 문의 전환(구글폼)까지 한 흐름으로 설계 했고, 프로덕션 수준 UI/성능/접근성까지 같이 잡았습니다.

히어로(첫 화면): 한 문장 가치제안 + 큰 목업으로 신뢰 확보 첫 화면은 토스 같은 IT 기업 랜딩처럼 큰 타이틀 + 핵심 한 문장 + 대형 목업 중심으로 구성했습니다. 그리고 CTA를 "문의"로만 밀지 않고, 보안/파일럿/가격 등 의사결정에 필요한 링크를 함께 배치해 이탈 대신 "다음 행동"으로 이어지게 했습니다.

운영 플로우를 "클릭으로 이해"시키는 제품 스토리 섹션 상담센터 운영자는 결국 '처리 동선'이 핵심이라, 기능을 나열하지 않고 업무 흐름(운영 -> 근거/추적...)으로 재구성했습니다. 우측 카드(스텝)를 클릭하면 좌측 비주얼(목업/폰)이 바뀌도록 만들어, 설명을 길게 읽지 않아도 빠르게 이해/납득할 수 있게 했습니다.

ITDA 앱 화면을 '폰 목업'으로 크게 보여주는 섹션 B2B 대시보드는 단독 제품이 아니라 내담자 앱 데이터(SSOT)와 같이 돌아갑니다. 그래서 앱의 핵심 화면(케어홈)을 휴대폰 목업으로 크게 노출해, "이 서비스가 실제로 굴러가는 제품"이라는 신뢰를 즉시 전달하도록 구성 했습니다. 적용 기술/구성 - 리드 수집 : 구글 폼 연동(접수/전환 최적화) - SEO : 메타/OG/Canonical, robots.txt, sitemap.xml, 구조화 데이터(JSON-LD) - 성능/UX : lazy-load, content-visibility, 스크롤 리빌(IntersectionObsever), 반응형 최적화 - 배포 : Firebase Hosting(클린 URL/캐시 헤더) - 링크 : https://itda-notifications.web.app/