Kayzen Web
에이전시의 사이트는 첫 번째 레퍼런스입니다. 고객 사이트보다 더 엄격하게 감사합니다.
- 연도
- 2026
- 제작 기간
- 지속적 개선
- 기술 스택
- React · Vite · Tailwind · TypeScript · Vercel
- 전략
- 디자인 시스템
- 개발
- SEO
- 접근성
- 카피라이팅
- Lighthouse 접근성
- 100/100
- Lighthouse SEO
- 100/100
- 개 경로를 빌드 시 사전 렌더링
- 79
- 개 프로젝트, 각각 사례 연구로 문서화
- 37
해결해야 했던 과제.
배경
kayzen-lyon.com은 에이전시의 쇼윈도입니다. 사전 렌더링된 79개 경로에는 서비스 페이지 21개, 지역 페이지 4개, 공개 요금표, 변경 이력, 기술 스택 페이지, 공개 디자인 시스템이 포함됩니다.
제약
웹 에이전시는 포트폴리오보다 먼저 자기 사이트로 평가받습니다. 평범한 성능 점수, 부족한 명도 대비, 유효하지 않은 구조화 데이터 같은 사소한 결함도 불리한 증거가 됩니다. 그래서 사이트는 까다로운 잠재 고객의 기술적 점검을 견뎌야 했습니다.
해법
다른 에이전시들이 숨기는 것을 공개했습니다. 요금, 기술 스택, 디자인 시스템, 그리고 사이트 자체에 적용한 수정 사항을 나열한 변경 이력. 투명성은 두 가지 역할을 합니다. 잠재 고객을 안심시키고, 우리 스스로 수준을 지키게 만듭니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
문서화된 공개 디자인 시스템
색상 토큰, 유연한 타이포그래피 스케일, 네 단계의 그림자, 단일한 세로 리듬. /design-system 페이지에서 이를 공개합니다. 눈에 보이는 시스템은 어긋나지 않는 시스템입니다.
모든 명도 대비를 측정
모든 색 조합을 계산했습니다. 입력 필드 테두리는 3:1에 도달하고, 포커스 링은 색이 있는 버튼 위에서도 보이도록 행동 유도 색상과 분리했으며, 텍스트 그라데이션은 단색으로 대체했습니다.
등장 애니메이션만
로딩 표시기 외에는 무한 반복 애니메이션이 없습니다. 상시적인 GPU 비용, 배터리 소모, 전정 기관의 불편 때문입니다. 시스템의 동작 줄이기 설정을 엄격히 따릅니다.
프로젝트 색상 팔레트
네이비
#1F3B61
제목, 구조
테라코타
#B7481F
행동 유도 — 흰 배경에서 5.3:1
화이트
#FFFFFF
페이지 표면
쿨 그레이
#F8FAFC
교차 섹션
타이포그래피 체계
제목용 서체
Outfit 800
본문용 서체
Plus Jakarta Sans 400
자체 호스팅한 두 가변 서체 패밀리를 font-display: optional로 제공합니다. 로딩 중 레이아웃 이동이 전혀 없습니다.
보이지 않는 곳의 기술.
- React
- Vite
- Tailwind
- TypeScript
- Vercel
빌드 시 모든 경로를 사전 렌더링
SPA는 모든 URL에 같은 HTML을 제공하므로, JavaScript를 실행하지 않는 로봇에게는 페이지별 메타데이터가 보이지 않습니다. 사전 렌더링 스크립트가 모든 경로를 방문해 제목, description, canonical, Open Graph, JSON-LD를 갖춘 완전한 HTML 파일을 씁니다.
결함이 있으면 통과를 거부하는 빌드
경로에 메타데이터가 없거나, 404 페이지가 noindex를 잃거나, 이미지가 1440px을 넘거나, CSP가 오래되었거나, “작성 필요” 표시가 생성된 HTML에 남으면 빌드가 실패합니다. 안전장치가 주의력보다 낫습니다.
경로별 코드 분할
홈을 포함해 모든 페이지가 별도의 청크입니다. 법적 고지 페이지가 홈의 애니메이션 라이브러리를 내려받을 이유는 없습니다.
사이트가 검색되는 방식.
의도마다 하나의 입구
서비스 페이지 17개와 지역 페이지 4개가 각각 서로 다른 검색어를 겨냥합니다. 어느 것도 다른 페이지의 키워드만 바꾼 변형이 아니라, 서로 다른 콘텐츠입니다.
일관된 구조화 데이터
Organization, LocalBusiness, ProfessionalService, WebSite, WebPage, BreadcrumbList가 모두 @id로 연결되어 있습니다. 서로 모순되는 중복은 제거했습니다. 한 URL에 경쟁하는 브레드크럼 두 개는 없는 것보다 낫긴 하지만, 아주 조금 나을 뿐입니다.
자체 부여 평점 없음
aggregateRating을 제거했습니다. 기업이 스스로 매긴 평점은 Google 가이드라인에서 금지하며, 수동 조치를 받을 위험이 있습니다. 도메인을 잃느니 별점을 잃는 편을 택합니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
Lighthouse 100/100, 그리고 수동 감사
본문 바로가기 링크, 경로가 바뀔 때마다 이동하고 안내되는 포커스, 44px 터치 영역, 그리고 전용 패널에서 제공하는 고대비 모드, OLED 모드, 난독증 친화 폰트.
납품한 결과물.
- 홈
- 서비스 페이지 17개
- 지역 페이지 4개
- 포트폴리오와 사례 연구 37건
- 요금, 지원 제도, 퀴즈, 상담 예약
- 기술 스택, 디자인 시스템, 변경 이력
- 법률 페이지
프로젝트 진행 과정.
디자인 시스템
토큰, 명도 대비, 타이포그래피 스케일, 그림자.
콘텐츠
서비스 17개, 지역 4곳, 공개 요금.
테크니컬 SEO
사전 렌더링, 구조화 데이터, 사이트맵, 빌드 안전장치.
지속적 개선
공개 변경 이력에 기록되는 연속 감사.
