채용 웹사이트 디자인

여덟 개의 장면으로 전달하는 채용 페이지

이 Kimi 채용 재현물은 섹션이 뷰포트를 단순히 통과하는 긴 페이지가 아닙니다. 하나의 시각 무대에 여덟 개의 장면을 레이어로 쌓고, 스크롤 진행도를 이용해 각 장면의 투명도·위치·크기·블러를 변화시킵니다. 그 효과는 일반적인 채용 공고 페이지를 읽는 것보다 프레젠테이션의 프레임 사이를 이동하는 것에 더 가깝습니다.

이 차이가 채용 웹사이트 디자인으로서의 시각적 매력과 한계를 모두 설명합니다. 이 시퀀스는 강한 분위기를 조성할 수 있지만, 실용적인 정보는 전환 효과 밖에서도 항상 접근 가능해야 합니다. 지원 프로세스를 원하는 방문자는 브랜드 스토리를 탐색하는 사람과 다른 목적을 가집니다.

스크롤 위치가 장면 전환이 되는 방식

소스는 페이지의 스크롤 가능한 이동 거리를 0에서 7까지의 위치에 매핑하며, 각각이 여덟 개 장면 중 하나에 해당합니다. 해당 위치에 가장 가까운 장면이 현재 장면이 됩니다. 인접한 장면은 전환 중에 부분적으로 보일 수 있으며, 이 때문에 정류장 사이에서 캡처한 스크린샷이 흐리거나 이중으로 보일 수 있습니다.

궤도형 지원 경로의 네 개 번호 정류장

지원 장면은 시퀀스를 달 경로로 변환합니다. 컴퓨터와 제출(Submit) 표시가 있는 1번 정류장은 하단 중앙 근처에 나타나고, 2번은 그 왼쪽에, 3번과 4번은 궤도 상단을 따라 이어집니다. 기하학적 구조가 익숙한 좌→우 타임라인이 아니기 때문에, 읽는 순서는 숫자가 담당합니다.

01

경로는 연결하지만 번호가 순서를 부여합니다

궤도 선은 네 개의 정류장이 서로 연결되어 있음을 설명합니다. 그러나 어디서 시작하거나 어느 방향으로 따라가야 하는지는 그 자체로 알려주지 않습니다. 크게 표시된 번호 배지가 누락된 순서를 제공합니다. 구불구불한 온보딩 흐름이나 일러스트 프로세스 다이어그램에서도 동일한 구분이 중요합니다.

02

일러스트는 전체 안내가 아닙니다

이 장면은 지원 프로세스를 명시하지만, 제공된 재현물은 이를 이미지로 렌더링합니다. 실제 작동하는 페이지에는 실제 단계 이름, 요구 사항, 목적지가 텍스트로 필요합니다. 해당 세부 정보는 다이어그램이 모바일에서 수직으로 쌓일 때도 읽을 수 있어야 합니다.

시각적 재현물에 실제 HTML이 필요한 부분

OpenDesign은 이것을 의뢰받은 Moonshot 프로젝트가 아닌 해커톤 공식 예시이자 시각 연구로 제작했습니다. 이 차이는 구현에서 확인할 수 있습니다: 장면 2–8은 제공된 참조 이미지이며, 해당 이미지에는 aria-hidden이 표시됩니다. 현재 장면을 변경해도 이미지 내부의 레이블이 텍스트로 접근 가능하게 되지는 않습니다.

1. 배경 이미지 밖에 제목을 유지하세요

   실제 작동하는 버전에서는 장면의 제목과 설명이 선택 가능한 텍스트로 남아 있어야 합니다. 배경은 조종석, 별, 달을 담을 수 있지만, 지원 안내의 유일한 위치가 되어서는 안 됩니다.

2. 움직임과 정보 접근을 분리하세요

   모션이 줄어들었을 때 안정적이고 읽을 수 있는 레이아웃과 프로세스로의 직접 경로를 제공하세요. 이는 제안된 개선 사항이며, 제공된 재현물에서 검증된 기능이 아닙니다. 방문자가 다음 단계를 찾기 위해 스크롤 애니메이션을 완전히 파악해야 해서는 안 됩니다.

이 채용 웹사이트 디자인이 보여주는 것

이 사례는 현재 채용 공고나 실제 지원 백엔드가 아닌, 장면 구성과 스크롤 연동 모션을 보여줍니다. 의도적으로 픽셀화된 참조 아트워크는 벡터 아트워크가 아니며, 원본 해상도 내보내기로도 그 스타일적 한계는 제거되지 않습니다. 서사 및 전환 메커니즘 연구에 활용하고, 실제 채용 정보는 해당 고용주의 공식 채널을 이용하세요.