현재 위치: 01 / 작업 — laonmon.com

CASE 03 / WEB

laonmon.com — 3개 국어 홈페이지

지금 보고 계신 이 사이트입니다. 검색엔진이 세 언어를 따로 읽게 하고, 챗봇이 가격을 지어내지 않게 만들었습니다.

분야
회사 홈페이지
플랫폼
웹
언어
한국어(/) · 영어(/en/) · 일본어(/ja/)
이력
2026-09-25 언어별 주소, 2026-10-02 다중 페이지 개편
laonmon.com 한국어 홈을 데스크톱과 휴대폰에서 연 모습

요약

무엇
라온몬 회사 홈페이지(서비스·가격 안내, 작업 사례, 글, 문의 폼, AI 챗봇)
맡은 일
기획 · 디자인 · 개발 · 검색 세팅 · 챗봇 · 배포 · 운영
기술
React · TypeScript · Vite · 사전 렌더링(빌드할 때 HTML 생성) · nginx · Kubernetes · 직접 운영하는 AI

처음 laonmon.com은 한 장짜리 페이지였고, KO/EN/JP 버튼은 화면의 글자만 바꿨습니다. 사람에게는 세 언어로 보였지만 검색엔진에게는 한국어 페이지 하나뿐이었습니다. 홈페이지를 만들어 드리는 회사의 사이트가 검색엔진에 제대로 읽히지 않는다면 설득력이 없습니다. 그래서 이 사이트를, 저희가 고객에게 만들어 드리는 홈페이지의 견본이라는 기준으로 다시 만들었습니다.

언어마다 주소를 따로 두고, 페이지는 미리 HTML로 만듭니다

문제
글자만 바꾸는 방식에서는 영어·일본어 문장이 검색 결과에 나올 수 없습니다. 크롤러가 읽는 HTML에는 한국어만 들어 있기 때문입니다. /en, /ja 주소는 404였습니다.
선택
한국어는 /, 영어는 /en/, 일본어는 /ja/로 주소를 나눴습니다. 빌드할 때 언어마다 HTML을 따로 만들어 언어 표시·제목·설명·대표 주소(canonical)를 각각 넣고, 세 페이지가 서로의 다른 언어판이라는 것을 hreflang으로 알렸습니다. 사이트맵에도 같은 관계를 적었습니다. 처음 온 방문자를 브라우저 언어에 맞는 주소로 보내는 기능은 사람에게만 적용하고 크롤러는 보내지 않습니다. 구글의 렌더러는 영어 환경이라, 크롤러까지 보내면 한국어 홈이 영어 홈으로 넘어가는 주소로 읽히기 때문입니다.
이유
주소마다 한 언어만 있어야 검색엔진이 언어별로 색인할 수 있습니다. 미리 만든 HTML은 자바스크립트를 실행하지 않아도 내용이 보여서, 검색엔진도 방문자의 첫 화면도 기다리지 않습니다.
같은 홈을 한국어·영어·일본어로 연 휴대폰 화면 세 개

없는 주소에는 404라고 답합니다

문제
한 장짜리 웹앱은 흔히 어떤 주소로 들어와도 홈 화면을 정상(200)으로 돌려줍니다. 같은 도메인의 다른 서비스에서 서치 콘솔 Soft 404 경고가 나온 것을 계기로 점검해 보니, 이 사이트도 없는 주소에 홈 화면을 200으로 돌려주고 있었습니다. 검색엔진에게는 내용이 같은 페이지가 끝없이 있는 셈입니다.
선택
모든 주소를 홈으로 돌리던 설정을 걷어내고, 실제로 있는 페이지만 열리게 했습니다. 없는 주소에는 응답 코드 404와 함께 홈·서비스·글로 가는 안내 페이지를 보여 주고, 그 페이지는 색인하지 말라고 표시합니다. 하위 페이지를 늘린 2026년 10월 개편에서는 주소 목록을 한 곳에 두고, 페이지 생성·사이트맵·메뉴가 모두 그 목록 하나를 읽게 했습니다.
이유
있는 페이지와 없는 페이지를 정확히 구분해야 검색엔진이 사이트 구조를 믿습니다. 주소 목록이 한 곳에 있으면 페이지를 더할 때 사이트맵이나 메뉴를 빠뜨리는 실수가 줄어듭니다.
홈페이지 제작 페이지(데스크톱)와 앱 개발 페이지(휴대폰)

챗봇이 가격을 지어내지 않게 만들었습니다

문제
영업 페이지의 챗봇이 가격을 틀리게 말하면 그 자체가 사고입니다. 흔히 쓰는 검색 증강(RAG)은 문서를 잘게 나눠 두고 질문과 비슷한 조각만 찾아 넣는데, 검색이 가격 문단 하나만 놓쳐도 모델이 금액을 지어냅니다. 챗봇이 읽는 내용을 화면과 따로 관리하면, 가격을 바꿀 때 한쪽만 고치는 일도 생깁니다.
선택
이 사이트가 아는 것은 전부 한 번에 넣을 수 있을 만큼 작아서(처음 붙인 2026년 8월 31일 기준 한국어 2,373자), 검색 없이 통째로 넣었습니다. 그 내용은 화면에 보이는 문구와 같은 원본 파일에서 빌드할 때 뽑아 만듭니다. 화면의 가격을 고치면 챗봇의 답도 같이 바뀝니다. 지식에 없는 것은 추측하지 말고 문의를 안내하게 했고, 답 아래 '문의 남기기'를 누르면 방금 한 질문이 문의 폼에 미리 채워집니다. AI가 답한다는 것과 정확한 견적은 사람이 직접 드린다는 것도 창 안에 적어 두었습니다. 외부 AI 서비스 없이 저희가 운영하는 서버에서 돌려서, 질문이 늘어도 호출 요금이 붙지 않습니다.
이유
가격이 원본 하나에서 나오니 틀릴 자리가 줄어듭니다. 첫 글자가 화면에 뜨기까지 라이브에서 0.55~0.74초가 걸립니다(2026-10-02 측정). 글이 수십 편 쌓여 한 번에 넣기 어려워지면 그때 검색 방식을 다시 검토합니다.

결과물

  • 3개 국어 홈언어별 주소(/ · /en/ · /ja/), hreflang·canonical, 사이트맵
  • 하위 페이지서비스 2 · 작업 사례 3 · 소개 · 글
  • 사전 렌더링페이지마다 미리 만든 HTML, 글 페이지는 자바스크립트 없이
  • 없는 주소404 + 색인 제외 안내 페이지
  • AI 챗봇3개 국어, 화면과 같은 원본, 문의 폼으로 넘기기
  • 문의 폼문의가 어느 페이지에서, 어떤 경로(검색·블로그·챗봇)로 왔는지 함께 기록
  • 방문 통계쿠키를 쓰지 않는 방식
  • 끊기지 않는 배포새 버전이 완전히 뜬 뒤 옛 버전을 내리고, 내려가는 쪽은 몇 초 기다렸다 닫습니다. 2026년 9월 29일 배포 중 0.25초 간격으로 보낸 요청 230건·222건이 모두 정상 응답했습니다(고치기 전에는 196건 중 1건 실패)
  • 첫 화면 무게홈 자바스크립트를 압축 기준 89.7KB 이하로 관리, 2026-10-02 개편 빌드 88.5KB
휴대폰 전체 화면 메뉴와 홈페이지 제작 요금제 카드

홈페이지를 맡기신다면

이 사이트에 쓴 기본기가 그대로 들어갑니다. 메타태그·사이트맵·검색엔진 등록은 세 가격대 모두 기본이고, 없는 주소 처리와 휴대폰 첫 화면 속도도 같은 방식으로 만듭니다. 순위는 약속하지 않습니다. 저희가 맡는 것은 검색엔진이 사이트를 정확히 읽게 만드는 데까지입니다.

해외 손님이 있는 업종이라면 처음부터 언어별 주소로 만들어 둡니다. 나중에 붙이면 주소와 구조를 다시 짜야 합니다. 다국어는 프리미엄 구성이거나 추가 범위라서 상담 때 기간을 함께 정합니다.

문의가 어느 페이지에서 왔는지 남기는 문의 폼도 넣을 수 있습니다. 광고나 블로그가 실제로 문의를 데려오는지 확인할 수 있습니다.

다음 사례

Life-Up

습관 관리 앱 · iOS·Android · 한/영/일

CONTACT

LET'S
TALK.

만들고 싶은 것을 편하게 적어 주세요.

홈페이지·앱 제작 문의, 비즈니스 제휴, 그 밖에 궁금한 점 무엇이든 괜찮습니다. 로고나 원고가 없어도 됩니다. 하시는 일과 필요한 것을 적어 주시면 범위와 기간을 정리해 견적으로 답장드립니다.

급한 질문은 오른쪽 아래 챗봇에 먼저 물어보셔도 됩니다.