WebforAI: 세 업종을 한 화면에서 안내하는 대표 랜딩, 하루 만에 기획에서 운영까지

과제

WebforAI는 AI가 기업의 공식 정보를 정확히 읽고 인용할 수 있도록 정비하는 서비스입니다. 대표 도메인 webforai.kr에는 병의원용 랜딩이 걸려 있었고, 기업용과 소상공인용 서비스가 따로 생기면서 세 업종을 한 화면에서 나누어 안내할 최상위 랜딩이 필요했습니다. 조건은 셋이었습니다. 기존 병의원 랜딩은 하위 도메인으로 옮겨 그대로 살리고, 회사 홈페이지가 이 도메인에서 빌려 쓰는 문의 폼을 끊지 않고, 외부에 나간 주소를 깨지 않는 것.

접근

1. 기획안과 결정 목록. 누구를 위한 사이트인지, 첫 화면 문장, 업종 3개의 목적지, 문의 경로, 측정과 색인 방침을 한 장의 기획안으로 정리했습니다. 화면 문장은 이미 승인된 문구만 쓰고, 새로 쓴 문장은 따로 목록으로 뽑아 확인받았습니다. 결정이 필요한 항목 10개를 권장안과 함께 적어 두었습니다.

2. 시안 다섯 개, 반려 네 번. 밝은 그라디언트와 세 줄 선택, 다크 3패널, 거대 타이포, 기업용 히어로까지 네 안이 차례로 반려됐습니다. 다섯 번째는 실제 서비스의 새 홈페이지 영상을 레퍼런스로 받아 구조를 그대로 옮겼습니다. 따뜻한 회백색 바탕, 가운데 정렬 제목, 화면을 채우는 오로라 그라디언트 카드, 그 위의 탭 세 개가 업종 선택이 되고 탭마다 색과 카드가 바뀝니다. 제목의 업종 단어도 탭과 함께 돕니다.

3. 제품 화면을 그대로 쓰는 시각물. 카드 안의 시각물은 도식이 아니라 각 서비스의 실제 화면입니다. 병원 탭은 AI 답변 준비도 진단 리포트의 헤더와 점수 링, 항목 행을 그 구조대로 옮겼고, 소상공인 탭은 가게 홈페이지 빌더의 확인 단계를, 기업 탭은 AI 챗봇이 공식 답변 허브를 출처로 인용하는 대화창을 보여 줍니다. 겹침은 외곽선 없이 그림자로만, 강조색은 하나만 썼습니다. 아래 다섯 단계 섹션도 같은 규칙으로 틀마다 제목과 한 줄 문구, 제품 화면 조각을 두었습니다.

4. 정적 빌드와 발행 게이트. 호스팅이 바뀌어도 그대로 올릴 수 있게 외부 패키지 없는 정적 사이트로 만들었습니다. 빌드가 금지 용어, 엠대시, 이모지, 네이버 소유 확인 태그, 깨진 링크, 업종 목적지를 검사해 하나라도 걸리면 실패합니다. 업종 목적지는 설정 파일 하나에 모아, 나중에 주소가 열리면 한 줄만 바꾸면 됩니다.

5. 전환. 기업용 안내 페이지는 같은 빌드에서 호스트별 라우팅으로 분기했고, 기존 주소 13개는 영구 이동으로 병의원 랜딩에 연결했습니다. 문의 함수는 필요한 경로 하나만 기존 프로젝트로 넘겼습니다. 로컬 미리보기로 확인을 받고, 프로젝트 주소에서 검증한 뒤 도메인을 옮겼습니다. 전환 뒤 점검 목록을 돌아 회사 홈페이지 문의 폼이 실제로 접수되는 것까지 확인했습니다.

결과

기획안에서 운영 반영까지 하루에 끝났습니다. webforai.kr은 세 업종을 안내하는 일반 랜딩이 되었고, 병의원 랜딩은 infinith.webforai.kr에서 그대로 운영됩니다. 회사 홈페이지의 문의 폼과 외부에 나간 주소는 하나도 끊기지 않았습니다. 반려된 시안과 피드백, 배포 절차는 저장소 문서로 남겨 다음 작업자가 같은 판단을 반복하지 않게 했습니다.