Hans Leutenegger SA
스위스 채용 포털: 세 가지 언어, 두 부류의 사용자, 그리고 즉각 반응해야 하는 검색 엔진.
- 연도
- 2026
- 제작 기간
- 6주
- 기술 스택
- Next.js · React · Tailwind · Vercel
- 정보 구조 설계
- 디자인
- 개발
- 다국어
- SEO
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.

- 개 언어, 세 개의 사이트 구조
- 3
- 설립 연도
- 1965
- 작업량이 산정된 최적화 과제
- 2
해결해야 했던 과제.
배경
Hans Leutenegger SA는 1965년에 설립된 스위스의 산업 인력 파견·채용 전문 기업입니다. 제조, 건설, 기술 분야의 파견직과 정규직 채용을 중개합니다.
제약
세 부류의 사용자, 세 개의 언어. 구직자는 집 근처에서, 자기 직종의, 지금 당장 가능한 일자리를 찾습니다. 기업은 채용 파트너를 찾습니다. 그리고 스위스에서 독일어, 프랑스어, 이탈리아어 다국어 지원은 선택이 아니라 존재의 조건입니다.
해법
채용 공고 검색 엔진을 홈으로 삼았습니다. 지역별·직종별 필터, 새로고침 없는 즉시 결과. 기업 전용 공간은 완결된 별도 입구로 나란히 둡니다. 언어마다 고유한 URL과 hreflang을 갖춘 실제 사이트 구조가 있습니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
검색이 곧 홈
첫 화면에 지역·직종 필터, 스크롤 아래에 결과. 검색하기 전에 메뉴부터 헤매야 하는 구직자는 떠나 버립니다.
항상 보이는 자유 지원
채용의 상당수는 공개된 공고에서 나오지 않습니다. 자유 지원(오픈 지원)은 페이지 하단의 메모가 아니라 최상위 경로입니다.
당당하게 나눈 두 개의 입구
구직자와 기업의 요구는 정반대입니다. 세 언어 모두에서 헤더부터 이 구분을 명확히 했습니다.
프로젝트 색상 팔레트
스위스 레드
#B21E2A
아이덴티티
인더스트리 그레이
#4A5158
구조
화이트
#FFFFFF
배경
잉크
#1B1E22
텍스트
타이포그래피 체계
제목용 서체
Inter 700
본문용 서체
Inter 400
세 언어에 하나의 서체 패밀리. 독일어는 긴 단어를, 이탈리아어는 짧은 줄을 만듭니다. 글리프가 풍부하고 하이픈 처리가 좋은 서체 하나로 세 가지 레이아웃을 따로 만들 필요를 없앴습니다.
보이지 않는 곳의 기술.
- Next.js
- React
- Tailwind
- Vercel
클라이언트 측 즉시 검색
필터링은 페이지 새로고침 없이 이루어집니다. 채용 포털에서는 서버 왕복 한 번마다 이탈이라는 대가를 치릅니다.
세 개의 실제 사이트 구조
/de/, /fr/, /it/에 상호 hreflang과 각각의 canonical을 적용했습니다. 클라이언트 측 언어 전환이었다면 하나의 언어만 색인되었을 것입니다.
파악된 두 가지 개선 과제
성능 62점, SEO 92점. 전자는 첫 렌더링에서 모든 공고를 불러오기 때문이며, 서버 측 페이지네이션으로 해결하기로 했습니다. 후자는 일부 직종 페이지의 description 누락 때문입니다. 두 과제 모두 작업량이 산정되어 있습니다.
사이트가 검색되는 방식.
직종 × 지역별 페이지
“Emploi soudeur Suisse romande”(스위스 프랑스어권 용접공 채용), “Stellen Elektriker Bern”(베른 전기기사 채용). 직종과 지역의 조합이 채용 포털 SEO의 토대입니다.
JobPosting 마크업
각 공고에 유형, 근무지, 계약 형태, 유효 기간을 표기합니다. 이것이 검색 결과의 채용 정보 영역에 노출될 수 있게 해 줍니다.
납품한 결과물.
- 홈 — 채용 공고 검색
- 직종별 공고
- 지역별 공고
- 자유 지원
- 기업 전용 공간
- 1965년부터 이어 온 회사
프로젝트 진행 과정.
구조 설계
검색을 홈으로, 두 개의 입구, 세 개의 언어.
디자인
즉시 필터, 자유 지원을 최상위 경로로.
개발
클라이언트 측 필터링, 다국어 사이트 구조, JobPosting.
예정
공고의 서버 측 페이지네이션, 직종 페이지 description 보완.


