인사 & 산업

Hans Leutenegger SA

스위스 채용 포털: 세 가지 언어, 두 부류의 사용자, 그리고 즉각 반응해야 하는 검색 엔진.

연도
2026
제작 기간
6주
기술 스택
Next.js · React · Tailwind · Vercel
  • 정보 구조 설계
  • 디자인
  • 개발
  • 다국어
  • SEO

Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.

https://hl-web-master.vercel.app/
Hans Leutenegger SA 웹사이트 메인 페이지 — 인사 & 산업, Kayzen Web 제작
개 언어, 세 개의 사이트 구조
3
설립 연도
1965
작업량이 산정된 최적화 과제
2
출발점

해결해야 했던 과제.

배경

Hans Leutenegger SA는 1965년에 설립된 스위스의 산업 인력 파견·채용 전문 기업입니다. 제조, 건설, 기술 분야의 파견직과 정규직 채용을 중개합니다.

제약

세 부류의 사용자, 세 개의 언어. 구직자는 집 근처에서, 자기 직종의, 지금 당장 가능한 일자리를 찾습니다. 기업은 채용 파트너를 찾습니다. 그리고 스위스에서 독일어, 프랑스어, 이탈리아어 다국어 지원은 선택이 아니라 존재의 조건입니다.

해법

채용 공고 검색 엔진을 홈으로 삼았습니다. 지역별·직종별 필터, 새로고침 없는 즉시 결과. 기업 전용 공간은 완결된 별도 입구로 나란히 둡니다. 언어마다 고유한 URL과 hreflang을 갖춘 실제 사이트 구조가 있습니다.

주장이 아닌 측정

납품 시점에 측정한 점수.

운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.

PageSpeed
62
성능: 100점 만점에 62점
96
접근성: 100점 만점에 96점
96
권장사항: 100점 만점에 96점
92
검색엔진 최적화: 100점 만점에 92점
디자인 & 아트 디렉션

모든 선택에는 이유가 있습니다.

  1. 검색이 곧 홈

    첫 화면에 지역·직종 필터, 스크롤 아래에 결과. 검색하기 전에 메뉴부터 헤매야 하는 구직자는 떠나 버립니다.

  2. 항상 보이는 자유 지원

    채용의 상당수는 공개된 공고에서 나오지 않습니다. 자유 지원(오픈 지원)은 페이지 하단의 메모가 아니라 최상위 경로입니다.

  3. 당당하게 나눈 두 개의 입구

    구직자와 기업의 요구는 정반대입니다. 세 언어 모두에서 헤더부터 이 구분을 명확히 했습니다.

프로젝트 색상 팔레트

  • 스위스 레드

    #B21E2A

    아이덴티티

  • 인더스트리 그레이

    #4A5158

    구조

  • 화이트

    #FFFFFF

    배경

  • 잉크

    #1B1E22

    텍스트

타이포그래피 체계

제목용 서체

Inter 700

본문용 서체

Inter 400

세 언어에 하나의 서체 패밀리. 독일어는 긴 단어를, 이탈리아어는 짧은 줄을 만듭니다. 글리프가 풍부하고 하이픈 처리가 좋은 서체 하나로 세 가지 레이아웃을 따로 만들 필요를 없앴습니다.

엔지니어링

보이지 않는 곳의 기술.

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 클라이언트 측 즉시 검색

    필터링은 페이지 새로고침 없이 이루어집니다. 채용 포털에서는 서버 왕복 한 번마다 이탈이라는 대가를 치릅니다.

  2. 세 개의 실제 사이트 구조

    /de/, /fr/, /it/에 상호 hreflang과 각각의 canonical을 적용했습니다. 클라이언트 측 언어 전환이었다면 하나의 언어만 색인되었을 것입니다.

  3. 파악된 두 가지 개선 과제

    성능 62점, SEO 92점. 전자는 첫 렌더링에서 모든 공고를 불러오기 때문이며, 서버 측 페이지네이션으로 해결하기로 했습니다. 후자는 일부 직종 페이지의 description 누락 때문입니다. 두 과제 모두 작업량이 산정되어 있습니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. 직종 × 지역별 페이지

    “Emploi soudeur Suisse romande”(스위스 프랑스어권 용접공 채용), “Stellen Elektriker Bern”(베른 전기기사 채용). 직종과 지역의 조합이 채용 포털 SEO의 토대입니다.

  2. JobPosting 마크업

    각 공고에 유형, 근무지, 계약 형태, 유효 기간을 표기합니다. 이것이 검색 결과의 채용 정보 영역에 노출될 수 있게 해 줍니다.

사이트 구조

납품한 결과물.

  • 홈 — 채용 공고 검색
  • 직종별 공고
  • 지역별 공고
  • 자유 지원
  • 기업 전용 공간
  • 1965년부터 이어 온 회사
방법론

프로젝트 진행 과정.

  1. 구조 설계

    검색을 홈으로, 두 개의 입구, 세 개의 언어.

  2. 디자인

    즉시 필터, 자유 지원을 최상위 경로로.

  3. 개발

    클라이언트 측 필터링, 다국어 사이트 구조, JobPosting.

  4. 예정

    공고의 서버 측 페이지네이션, 직종 페이지 description 보완.

질문

자주 받는 질문.

클라이언트 측 선택기는 색인 가능한 URL을 하나만 만들기 때문입니다. 스위스에서 이는 한 언어를 고르고 나머지 두 시장을 포기하는 것과 같습니다. 전국 단위 포털이 절대 해서는 안 되는 일입니다.

같은 수준의 기준을, 귀하의 사이트에도.

현재 사이트 무료 진단, 24시간 이내 견적, 그리고 방금 읽으신 것과 같은 서면 분석을 제공합니다. 3회 무이자 분할 결제가 가능하며, 이용 가능한 지역 지원금은 계약 전에 확인합니다.

공유