"사마귀 웹사이트를 만들어보자"에서 시작했다. 방향을 물었더니 답은 "곤충 사마귀에 대한 모든 것. 재미. 즐거움."이었다. 처음에는 몸 구조, 도감, 한살이, 기르는 법, 오해와 진실, 게임을 한 페이지에 모두 담아 올렸다. 올리고 나서 "아직 내용이 좀 적다, 한 페이지 분량밖에 안 되나?"라는 말을 들었고, 그래서 도감·관찰·기르기·이야기·놀이터로 나눈 41페이지짜리 사이트로 다시 만들었다.
41페이지 구성
페이지 수는 도감이 대부분을 차지한다. 한국 사마귀 8종과 세계 사마귀 20종이 종마다 따로 페이지를 가진다. "왕사마귀", "난초사마귀"처럼 종 이름으로 검색하는 사람이 바로 그 종 페이지로 들어오게 하려는 것이다. 주소는 학명으로 정했다(예: species-tenodera-sinensis.html). 한국어 이름을 로마자로 옮기면 표기가 흔들리고, 영어 이름은 없거나 여러 개인 종이 있기 때문이다.
- 홈: 요약과 메뉴, 몸의 비밀(분홍 점 10개를 누르면 부위 설명), 한살이, 오해와 진실 카드
- 도감 목록 1 + 종 상세 28: 이름·학명·지역 검색, 지역·크기·생김새 필터, 한국 사마귀 구별표
- 관찰 가이드 1 + 인쇄용 관찰일지 1: 8종 월별 달력, 계절별로 찾는 곳, 알집 구별표, 암수 구별, 사진 찍기, 지킬 것
- 기르기 1: 사육통, 단계별 관리, 먹이 표, 허물 벗기, 자주 묻는 질문 11개
- 이야기 목록 1 + 글 6: 사냥, 3D 안경 실험, 박쥐를 피하는 귀, 연가시, 화석, 당랑권·당랑거철
- 놀이터 1: 파리 사냥 게임, 34문항 중 10개가 무작위로 나오는 퀴즈, "나는 어떤 사마귀?"
첫 화면 사마귀가 마우스 쪽으로 고개를 돌리고 눈 속 까만 점이 따라오는 기능은 그대로 두고, 도감과 이야기 페이지의 그림에도 붙였다. 까만 점은 가짜 눈동자다. 우리를 정면으로 향한 낱눈들이 빛을 흡수해 까맣게 보이는 것이라, 보는 위치가 바뀌면 점도 따라 움직인다. 이미지 파일은 없다. 사마귀 한 마리를 SVG로 그리고 몸·날개·눈 색만 바꾸는 팔레트로 28종을 모두 그렸다.
내용은 조사부터 따로 했다
페이지가 늘어나면 틀린 내용도 같이 늘어난다. 그래서 글을 쓰기 전에 한국 사마귀, 세계 사마귀, 과학·문화 이야기, 관찰·사육 정보를 네 갈래로 나눠 따로 조사했다. 사실마다 출처 주소와 신뢰도(높음·중간·낮음)를 붙여 모았고, 출처끼리 수치가 다르면 범위로 적었다. 한국 사마귀는 2024년에 국내 표본 494점을 형태와 DNA로 다시 검토한 논문(Shim & Song, ZooKeys 1206)을 기준으로 삼았다. 종 페이지와 이야기 글마다 맨 아래에 참고한 자료를 달았다.
조사하면서 고친 것
처음 한 페이지짜리 사이트와 이 글의 초판에 틀린 내용이 있었다. 조사 결과로 확인된 것들을 고쳤다.
- 좁쌀사마귀와 좀사마귀를 섞어 썼다. "앞다리 안쪽의 검고 흰 무늬"로 알아보는 종은 좀사마귀(Statilia maculata)다. 좁쌀사마귀(Amantis nawai)는 몸길이 12~15mm에 날개가 아주 짧은 국내에서 가장 작은 사마귀로, 남부 섬의 낙엽층에 산다.
- 한국 사마귀는 9종이 아니라 8종이다. 옛 목록의 한 종은 좀사마귀의 초록형을 다른 종으로 잘못 보고한 것이었다. 왕사마귀의 학명도 옛 목록의 Tenodera aridifolia가 아니라 Tenodera sinensis다.
- 세계 종 수는 약 2,500종이다. 2,400종이라고 적었지만, 2024년 기준 2,514종이 기록돼 있다.
- 출처를 찾지 못한 표현을 뺐다. "고개를 180°까지 돌린다", "고개를 크게 돌리는 몇 안 되는 곤충", 애기사마귀가 죽은 척한다는 설명이 여기에 해당한다.
- "눈 깜빡임보다 빠른 사냥"은 절반만 맞았다. 앞다리로 먹이를 휘감는 단계는 약 9~35밀리초지만, 접근부터 포함한 전체 공격은 60~290밀리초까지 걸린다. 그래서 "빠르면 0.01초 안팎"이라는 측정값으로 바꿨다.
- "암컷은 짝짓기 때 수컷을 먹는다"에 실제 비율을 넣었다. 야생 항라사마귀 조사에서 짝짓기의 31%, 왕사마귀는 10% 미만이었다.
- 붉은긴가슴넓적배사마귀에 대한 기사 표현을 싣지 않았다. 이 외래종은 생태계교란 생물 같은 법정 지정이 없다. "토종보다 2배 크다"는 기사 표현도 근거 수치가 없어 뺐고, 크기는 "확인 중"으로 적었다.
세계 사마귀와 이야기 쪽에서도 널리 퍼진 설명과 다른 결과가 나왔다. 난초사마귀는 난초 위에 살지 않고 초록 잎 위에서 꽃처럼 보이며 벌을 기다린다. "세계에서 가장 큰 사마귀"는 자료가 엇갈려서 특정 종을 단정하지 않았다. 당랑권 창시자 왕랑은 역사 기록으로 확인되지 않는 전설 속 인물이다. 제나라 장공 이야기에서 수레를 막아선 사마귀는 원래 용기의 상징이었다. 곤충 사마귀와 피부 사마귀가 같은 이름인 이유는 확정된 설명이 없어서, 그렇게 적었다. 이런 내용은 각 이야기 글의 "잘못 알려진 이야기" 상자에 모았다.
페이지는 데이터에서 만든다
41페이지를 손으로 따로 고치면 메뉴와 링크가 금방 어긋난다. 그래서 종 정보, 이야기 글, 홈 문장을 데이터 파일(tools/mantis/data)에 모아 두고, 생성기(tools/mantis/build-pages.js)가 공통 메뉴·현재 위치 표시·하단을 붙여 HTML을 만들게 했다. 생성기는 페이지 사이 링크가 실제 파일을 가리키는지 검사하고, 깨진 링크가 하나라도 있으면 멈춘다. 모든 내부 링크는 /mantis/로 시작하는 절대 경로로 썼다. ghmun.com 빌드는 "species.html"처럼 정확히 파일 이름만 적힌 링크는 고쳐 주지만, "species.html#id-table"처럼 뒤에 무언가 붙은 링크는 고치지 않기 때문이다.
파리 사냥 게임 규칙
화면 아래 사마귀가 마우스 방향으로 고개를 돌리고, 클릭하면 앞다리를 뻗는다. 앞에 표시된 초록 부채꼴(반경 190픽셀, 좌우 약 17도) 안의 곤충만 잡힌다. 파리는 1점, 4초 뒤 날아가 버리는 황금파리는 5점, 벌을 잡으면 3점이 깎인다. 연속으로 5마리를 잡을 때마다 3점을 더 준다. 한 번 뻗은 뒤 0.35초 동안은 다시 뻗을 수 없어서 마구 클릭해서는 점수가 잘 오르지 않는다. 30초 동안 시간이 갈수록 곤충이 빨라지고 수도 늘어난다.
확인한 것과 못한 것
헤드리스 Chrome으로 41페이지를 모두 열어 스크립트 오류가 없는 것을 확인했다. 휴대폰 폭(500픽셀)에서도 모든 페이지를 검사했는데, 기르기 페이지가 오른쪽으로 넘치는 문제가 나왔다. 한 칸짜리 격자가 표 너비에 맞춰 늘어난 것이 원인이라, 격자 칸이 표보다 좁아질 수 있게 고쳤다. 관찰 달력에서 긴 종 이름이 잘리던 것도 고쳤다. 도감 필터는 스크립트로 눌러 확인했다. 전체 28종, 세계 20종, 작은 종 4종, "왕" 검색 1종으로 모두 맞게 걸렀다. 퀴즈, 테스트, 체크리스트, 카드 뒤집기도 오류 없이 동작했다.
확인하지 못한 것도 있다. 헤드리스 Chrome에서는 게임 속 시간이 흐르지 않아서, 30초 타이머가 줄어드는지는 실제 브라우저에서 따로 봐야 한다. 붉은긴가슴넓적배사마귀의 크기, 한국어 이름이 없는 세계 종의 이름(페이지에 "임시 번역명"으로 표시)처럼 자료가 적은 항목은 새 자료가 나오면 고칠 부분으로 남겨 두었다.