AI 웹사이트 제작 IT기업 사이트

주식회사 PonTech Lab | AI 스타트업의 기업 사이트를 AI로 구축

AI 스타트업 PonTech Lab의 기업 사이트를 AI(Claude Code)로 구축했습니다. Next.js × Cloudflare, 타일 전환 애니메이션, 채용 비주얼의 AI 생성까지. 시행착오와 판단의 기록도 공개합니다.

공개 중인 사이트 보기
주식회사 PonTech Lab 웹사이트
Client
주식회사 PonTech Lab
Industry
IT
Type
AI 웹사이트 제작
Platform
Next.js × Cloudflare
Project

AI 스타트업의 “얼굴”을 AI와 함께 끝까지 만든다

도쿄 다마시의 AI 스타트업, 주식회사 PonTech Lab의 기업 사이트를 제작했습니다. AI 솔루션 개발·SES·PM/PMO 지원을 다루며, 자위대 경력자 채용에도 힘을 쏟는 회사입니다. “AI 회사의 얼굴이 될 사이트를 AI로 만든다”——저희 AI 웹사이트 제작(Claude Code)을 최대한 활용한 프로젝트입니다.

구성은 톱·회사 소개·서비스·채용 정보·문의 등 6페이지에 공지와 블로그 갱신 기능을 추가했습니다. 기술은 Next.js(React)를 선택하고 Cloudflare의 엣지 배포에 올렸습니다. 2026년 3월에 착수해 다음 달인 4월에 공개와 액세스 측정 정비까지 완료했습니다.

공들인 표현

다크×퍼플 배색으로 “기술력과 규율”이라는 브랜드를 표현하고, 움직임의 설계에 시간을 들였습니다. 페이지를 이동하면 타일 형태의 블록이 왼쪽 아래에서 오른쪽 위로 차례로 퍼지며 화면이 전환되는 애니메이션. 첫 방문에서는 미즈히키(장식 매듭)가 풀리며 화면이 3D처럼 열리는 연출. 배경에는 거대한 타이포그래피가 스크롤에 맞춰 천천히 흐릅니다. 패럴랙스의 이동량은 “너무 움직여서 지저분하다”와 “움직이는지 알 수 없다” 사이를 실제 기기에서 몇 번이고 오간 끝에, 최종적으로 처음의 1/3까지 억제했습니다.

채용 페이지는 자위대 경력자를 향한 메시지를 기획부터 담당했습니다. 쓸 수 있는 사진 소재가 거의 없는 상태에서 시작했기 때문에, 주둔지의 항공 사진부터 대원의 컷까지 채용 페이지의 비주얼을 모두 AI로 생성해 준비했습니다. “소재가 없어서 만들 수 없다”를 AI 이미지 생성으로 뒤집었습니다.

제작의 이면 ─ 시행착오와 판단의 기록

저희 실적 페이지에서는 잘된 이야기뿐 아니라 실제로 막혔던 지점도 공개합니다. AI와의 제작 이력에서 그대로 발췌합니다.

다시 만드는 것에서 시작했다. 처음에는 SPA(한 장의 앱처럼 동작하는 사이트)로 구축했지만, 이 방식으로는 검색 엔진이 페이지의 내용을 거의 볼 수 없어 SEO에 불리했습니다. 도중에 Next.js의 App Router(정적 생성)로 전면 이전했습니다. 공들인 타일 전환 애니메이션은 이전에서 깨지기 쉬운 부분이었지만, 전환의 구조를 한 장의 레이어로 분리해 두었기 때문에 그대로 옮길 수 있었습니다.

덜어내기를 지나치게 해서 되돌렸다. “텍스트가 많다”고 느껴 대폭 줄였더니 정보가 부족해지고 클라이언트의 의향과도 맞지 않아 전면적으로 되돌렸습니다. 이후 큰 변경은 반드시 되돌릴 수 있는 형태로 단계적으로 시도하는 방식으로 바꿨습니다. 유행하는 라이브러리(GSAP)에 의한 스크롤 연출도 한 번 도입했지만, 기존 움직임과 간섭해 가벼운 자체 구현으로 되돌리는 판단을 했습니다.

운영 환경에서만 일어나는 문제를 뿌리 뽑았다. 로컬에서는 동작하는데 운영 서버(Cloudflare Workers)에서는 공지 글이 사라진다——원인은 운영 환경에서는 실행 시에 파일을 읽을 수 없다는 구조적 제약이었습니다. 글을 빌드 시에 모아 구워 넣는 방식으로 설계를 변경해 근본 해결했습니다. iPhone 실기에서 발견한 폼의 삐져나옴이나 세로쓰기 라벨이 거꾸로 표시되는 문제도 하나씩 기록을 남기면서 수정했습니다.

공개 전에 전체를 채점했다. 공개 전에 유지보수성·SEO·접근성을 객관적으로 채점하고, 지적에 따라 콘텐츠 관리의 분리·디자인 변수의 일원화·구조화 데이터·접근성 대응까지 8단계에 걸쳐 개선했습니다. “AI로 빠르게 만든다”와 “품질은 사람이 담보한다”를 양립시킨 공정입니다.

공개 후의 운영

공개 후에는 메일로 갱신 의뢰를 받아 저희가 반영하는 형태로 운영이 이어지고 있습니다. 공지와 블로그는 텍스트 파일을 한 장 추가하기만 하면 글이 공개되는 구조로 만들고, 월간 액세스 리포트까지 정비했습니다. 확인·수정 단계는 마련해 두었지만 이 건에서는 거의 사용되지 않았습니다. 완성도를 끝까지 올린 뒤에 보여드리는 진행 방식이기 때문입니다.

AI 웹사이트 제작의 공정이나 납품물의 상세는 해설 글서비스 페이지를 참고해 주십시오.

당신의 사이트도, 같은 방식으로.

먼저 현재 상황을 들려주세요.

제작만, 운영만, 도중부터 운영만 — 어느 쪽이든 가능합니다.