PENNY PAGE
CASE 61SEUM 채용2026.05

5단계로 끝나는
채용 지원

요식업 전문 마케팅 회사 세움의 신입·경력 채용 랜딩페이지입니다.

업종
채용 랜딩 · 요식업 전문 마케팅사 (서울 가산·수유)
형태
채용 랜딩 + 단계형 지원 모달
구성
히어로 지원 CTA · 세움을 고를 이유 · 직무 탭
근무 조건 · 체크리스트 · 지원 절차
기술 스택
Cloudflare Pages · Vanilla JS 멀티스텝 폼 · 반응형 HTML/CSS · gpt-image-2 에셋
호스팅
Cloudflare Pages
SEUM 채용 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 61

01과제

무엇을 받았고, 무엇을 했나

채용 페이지는 지원 버튼을 누른 사람이 끝까지 가느냐가 관건입니다. 그래서 지점·직무·경력·연락처·동의를 한 화면에 하나씩 묻는 5단계 풀스크린 지원 모달을 Vanilla JS로 만들고, 진행 막대로 남은 단계를 보여줬습니다.

회사 소개, 세움을 고를 이유, 신입·경력 탭으로 나눈 모집 직무, 근무 조건, 지원 절차를 아이보리·올리브그린 톤의 한 페이지에 담았습니다. 워드마크와 오피스 비주얼은 gpt-image-2로 제작했습니다.

핵심 — 한 화면에 한 질문지원 과정을 다섯 단계로 쪼개고 진행 막대로 남은 단계를 보여줘, 지원 버튼을 누른 사람이 끝까지 가도록 했습니다.

02화면

히어로가 아니라 실제로 일하는 구간

지원 모달 1단계 — 지점 선택
01지원 모달 1단계 — 지점 선택
세움을 고를 이유
02세움을 고를 이유
모집 직무 — 신입·경력 탭
03모집 직무 — 신입·경력 탭
적합도 체크리스트 · 지원 절차 3단계
04적합도 체크리스트 · 지원 절차 3단계

03구성

이 사이트에 들어간 것

  • 01
    히어로 지원 CTA첫 화면에서 바로 지원
  • 02
    세움을 고를 이유4개 카드
  • 03
    신입·경력 직무 탭탭 전환으로 직무 비교
  • 04
    근무 조건 6항목아이콘 카드
  • 05
    적합도 체크리스트해당되면 지원 유도
  • 06
    지원 절차 3단계접수·면접·합격
  • 07
    5단계 풀스크린 지원 모달진행 막대, Vanilla JS
SEUM 채용 모바일 전체 화면

모바일 · 스크롤해서 보기

제작 당시 화면을 보존했습니다.

미러본은 납품 시점 화면을 그대로 보존한 사본입니다.