어디서나 채용하세요

기능

Gmail 스타일의 반응형 디자인으로 모바일 하단 내비게이션, 자동 축소 패널, 스켈레톤 로더 및 토스트 알림 기능을 제공합니다. 휴대폰에서 후보자를 검토하세요.

첫 인상

Gmail 스타일 로딩

앱이 초기화될 때, 부드러운 진행 바가 있는 Curriculo 로고가 보입니다. 빈 흰색 화면이나 무한히 돌아가는 스피너는 없습니다. 로딩 상태는 세련되고 의도적입니다.

로고 + 진행 바

로딩 화면은 깨끗한 배경에 중앙에 위치한 Curriculo 로고와 그 아래의 얇고 애니메이션된 진행 바를 보여 줍니다. 앱이 로딩 중임을 알리고 진행 상황을 시각적으로 전달합니다. 앱이 준비되면 로딩 화면이 부드럽게 사라집니다.

이 패턴은 로딩 경험으로 잘 알려진 Gmail, Notion 및 Linear에서 차용되었습니다. 사용자가 대시보드를 보기 전에 품질 기대치를 설정합니다.

적응형 레이아웃

패널 교체

좁은 화면(모바일 및 소형 태블릿)에서 후보 세부 보기 열기를 선택하면 목록 보기가 대신 교체됩니다. 이렇게 하면 모든 콘텐츠가 전체 화면 너비를 차지하게 됩니다. 한 번의 터치로 목록으로 돌아갈 수 있습니다.

자동 축소 사이드바

중간 화면에서 세부 패널이 열리면 사이드바가 자동으로 축소되어 공간을 만듭니다. 모바일에서는 사이드바가 전적으로 하단 내비게이션 바로 변환됩니다. 작업 중인 콘텐츠에 모든 픽셀이 사용됩니다.

모바일 하단 내비게이션

모바일에서는 데스크탑 사이드바가 항상 보이는 5탭 하단 내비게이션 바로 대체됩니다. 항상 클릭 한 번으로 접근 가능합니다.

“더보기” 탭

다섯 번째 탭은 설정, 분석, 팀 관리, 청구 및 기타 자주 사용하지 않는 기능에 접근할 수 있는 “더보기” 메뉴를 열어줍니다. 이렇게 하면 하단 바가 깔끔하게 유지되면서 모든 것이 접근 가능하게 됩니다.

모바일 타임스탬프

지원자 행의 압축 날짜 표시

데스크탑에서는 지원자 행이 전체 타임스탬프(“2026년 3월 15일 오후 2시 34분”)를 표시합니다. 모바일에서는 타임스탬프가 상대 형식(“2시간 전”, “어제”, “3월 15일”)으로 압축되어 수평 공간을 절약하고 정보를 유용하게 유지합니다.

스켈레톤 로더 및 토스트 알림

스켈레톤 로더

앱의 모든 페이지에는 스켈레톤 로딩 상태가 있습니다: 로딩 중인 콘텐츠의 레이아웃에 맞춘 회색 자리 표시자 모양들입니다. 후보자 목록은 행 모양의 스켈레톤을 표시합니다. 분석 페이지는 차트 모양의 스켈레톤을 보여줍니다. 이는 레이아웃 전환을 없애고 속도의 인상을 줍니다.

토스트 알림

모든 사용자 행동은 토스트 알림을 생성합니다: “후보가 면접으로 이동됨” (성공, 초록), “메모 저장 실패” (오류, 빨간색), “면접 일정” (정보, 파란색). 토스트는 데스크탑에서 오른쪽 상단에, 모바일에서 하단 중앙에 나타나며 4초 후에 자동으로 사라집니다.

곧 출시 예정

다크 모드 지원

CSS 변수 준비 완료

전체 UI는 색상, 배경, 경계 및 그림자를 위한 CSS 사용자 정의 속성(변수)으로 구축되었습니다. 다크 모드로 전환하는 것은 변수 값을 교환하는 문제이며, 인프라는 이미 마련되어 있습니다.

부분 구현

핵심 구성 요소(사이드바, 헤더, 카드, 버튼)는 이미 다크 모드 변형이 정의되어 있습니다. 전체 다크 모드 적용이 진행 중이며, 향후 업데이트에서 사용자 전환 가능한 설정으로 출시될 예정입니다.

시스템 기본 설정 감지

다크 모드가 출시되면 기본적으로 사용자의 운영 체제 기본 설정(prefers-color-scheme: dark)을 존중하며, 설정에서 수동으로 전환할 수 있습니다.