모든 도구 브랜드 룩북

Saramin (사람인)

파랑 알약 검색창 아래 기업 로고 격자와, 경력·학력·지역·마감을 네 칸으로 빽빽하게 나눈 공고 목록

한국채용차가운modern-minimal고딕compactsoftflat라이트한글 지원출시 2023개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

  • 브랜드명: 사람인 / Saramin. 운영사는 ㈜사람인이다. 이 문서는 회사 CI와 구직자가 사용하는 웹 서비스 UI를 구분해 기록한다.
  • 한 줄 정체성: 직무·지역·경력으로 많은 채용 공고를 좁히고, 기업과 근무조건을 한 줄씩 비교해 지원하는 국내 채용 플랫폼.
  • 공식 디자인 철학: 회사의 CI 소개는 간결하고 부드러운 영문 형태와 파란 i를 설명한다. 그 글자에는 개인, 지능, 연결이라는 의미를 담는다. 제품 화면에서 이 의미를 특정 레이아웃 규칙으로 설명한 공개 문서는 확인하지 못했다. 아래의 밀도·목록·상태 규칙은 실제 화면과 공개 CSS를 함께 읽어 정리한 해석이다.
  • 시그니처 요소 1개: 파랑 알약 검색창 아래 기업 로고 격자와, 경력·학력·지역·마감을 네 칸으로 빽빽하게 나눈 공고 목록. 검색과 비교, 지원으로 이어지는 순서가 한 화면에 들어온다.

사람인의 핵심 화면은 한 기업의 이야기를 오래 읽게 하기보다 여러 공고의 조건을 빠르게 살피게 한다. 회사명, 공고명, 지역, 경력, 학력, 지원 방식, 마감일이 각자 자리를 가진다. 제목만 강조하고 조건을 감추면 사람이 지원할 수 있는 공고인지 판단하기 어렵다. 공고 줄의 구조를 먼저 잡고 추천 로고와 광고를 그 위나 옆에 붙이는 것이 이 서비스에 맞는다.

상단은 로고·통합 검색, 주 메뉴, 채용정보 하위 메뉴의 세 층이다. 채용정보 화면에는 직업별·지역별 탐색이 다시 들어간다. 이런 층을 하나의 큰 헤더로 합치지 않는다. 구직자는 검색어를 직접 넣을 수도 있고, 직무 분류를 차례대로 고를 수도 있다. 폴더처럼 생긴 기업 유형 탭과 작은 조건 칩은 현재 어디를 보고 있는지 알려 주는 안내 장치다.

2026년 10월 12일에 데스크톱 첫 화면, 직업별 채용정보, 프론트엔드 검색 결과, 모바일 웹, 앱스토어 제공 화면을 확인했다. 검색 결과의 781건은 관찰 당시 값이며 서비스의 고정 수치가 아니다. 예시의 기업명·공고·보상·마감·기업 그림은 화면을 설명하기 위해 만든 가상 자료다. 실제 다른 기업의 로고를 재현하지 않고 여섯 가지 독립된 심벌을 사용했다. 사람인 서비스 로고만 공식 사이트 CSS에 들어 있는 원본 SVG 경로를 사용한다.

공개된 회사 CI 안내에는 색의 수치와 로고 형태가 있다. 제품의 모든 컴포넌트와 상태를 공개한 디자인 시스템 사이트는 확인하지 못했다. 따라서 자료 유형은 hybrid, 공식 디자인 시스템 여부는 false로 둔다. 확인한 값은 출처를 붙여 설명하고, 900px 예시에 맞춘 크기와 상태 보완은 (추정)으로 표시한다. 공개 CSS의 갱신일은 제품이 처음 출시되거나 전체를 개편한 날짜를 뜻하지 않는다. 앞머리의 연도는 화면 변화를 설명하기 위한 추정값이다.

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 실용적인 · 촘촘한 · 친근한.
  • 무드 설명: 흰 면 위에 푸른 회색 글자와 가는 선을 깔고, 파랑은 검색과 선택된 상태에 모은다. 기업 로고와 채용 배너가 정보 사이에 색을 보태지만, 공고의 비교 순서를 가리지 않는다. 짧은 안내와 익숙한 지원 문구로 다음 행동을 분명하게 보여 준다.
  • 비주얼 스타일: 모던 미니멀. 정보량은 많지만 입체 장식과 복잡한 배경을 줄여 내용을 앞세운다.
  • 밀도(Density): Compact. 한 공고에 회사·제목·조건 세 줄·지원·마감·등록 시각을 함께 배치한다. 요소를 적게 놓는 의미의 미니멀과 구분한다.
  • 모서리 성향: Soft, 기본 버튼 4px. 검색창은 28px 알약이고 추천 카드에는 더 큰 반경이 들어간다. 넓은 표형 목록은 직각으로 이어진다.
  • 입체감: Flat. 기본 면은 흰색과 1px 구분선으로 나누며, 일반 공고 줄마다 그림자를 넣지 않는다.

문장은 사용자가 비교할 수 있는 사실부터 쓴다. 제목은 ‘프론트엔드 개발자 채용’, 조건은 ‘3년↑ · 정규직’, 마감은 ‘D-3’처럼 역할이 분명하다. ‘새로운 가능성을 만나다’ 같은 추상 문장을 공고 제목 자리에 크게 쓰면 조건 탐색이 느려진다. 친근함은 둥근 글자나 과도한 감탄 표현보다 알아듣기 쉬운 안내, 예측 가능한 메뉴 순서, 지원 위치의 일관성에서 나온다.

강약은 색보다 크기와 위치로 만든다. 회사명은 왼쪽, 굵은 공고 제목은 그 오른쪽, 근무조건은 고정된 묶음, 지원 버튼은 맨 오른쪽에 둔다. 모든 제목을 파랗게 하거나 모든 날짜를 빨갛게 하면 검색과 긴급 마감의 의미가 약해진다. 회색 글자에도 단계가 있어서 제목과 조건, 등록 시각이 한꺼번에 같은 무게로 보이지 않는다.

원티드처럼 큰 사진 한 장이 공고의 첫인상을 결정하는 구조와 다르게, 사람인에서는 로고와 문자가 작은 구획마다 반복된다. 이 룩북 카드에도 배너 한 장, 로고 여섯 개, 공고 세 줄을 함께 넣었다. 좁은 면을 채우기 위해 무작정 작은 글자를 늘린 것이 아니라 실제 서비스의 중첩된 탐색 층과 비교 항목을 보존한 구성이다. 기업별 색은 로고 안에서 다양하게 써도 공통 UI의 파랑·회색 체계는 유지한다.

Color System

컬러 시스템 (CSS 변수)

공식 CI 값은 BLUE #4876EF, GRAY #404040다. 회사 CI 안내에 파랑의 RGB 72·118·239, CMYK 76·55·0·0, Pantone 2727 C와 회색의 RGB 64·64·64, CMYK 76·71·68·34, Cool Gray 11 C가 표시돼 있다. 인쇄용 표기를 브라우저의 색 변환 결과로 다시 계산하지 않는다. 이 문서의 대표색 칩은 공식 CI 파랑을 사용한다.

웹 UI의 주 파랑은 `#2D67FF`다. 현재 서비스 로고와 pattern.css의 --blue90에서 확인했다. CI 파랑과 제품 파랑은 서로 다른 출처의 실제 값이다. ‘사람인 파랑’을 하나로 통일한다는 이유로 검색창·활성 탭·버튼을 모두 CI 값으로 덮으면 현재 웹 화면과 달라진다. 아래 --color-brand는 CI, --color-primary-500은 서비스 UI를 가리킨다.

파랑과 회색 사다리는 공식 사이트가 제공하는 CSS 값을 골라 의미 이름을 붙였다. 이 문서의 50~900 번호 체계와 semantic 별칭은 재사용을 위한 매핑이며 공식 토큰 이름이 아니다. 원본의 파랑은 blue10~120, 회색은 gray10~130이다. 예를 들어 primary-50은 blue10, primary-500은 blue90, primary-600은 blue100에 대응한다. 가장 어두운 primary-900만 예시 확장값(추정)이며 공식 색 단계와 구별한다.

:root {
  --color-brand: #4876EF; /* 공식 CI BLUE; UI 파랑과 별도 */
  --color-ci-gray: #404040; /* 공식 CI GRAY */
  --color-primary-50: #F5F8FF; /* blue10 */
  --color-primary-100: #F0F4FF; /* blue20 */
  --color-primary-200: #E5ECFF; /* blue30 */
  --color-primary-300: #CCDAFF; /* blue40 */
  --color-primary-400: #7A9FFF; /* blue60 */
  --color-primary-500: #2D67FF; /* blue90: 서비스 로고·버튼 */
  --color-primary-600: #003FE5; /* blue100: hover·focus */
  --color-primary-700: #0031B2; /* blue110 */
  --color-primary-800: #002585; /* blue120 */
  --color-primary-900: #001849; /* (추정) 가장 어두운 확장 단계 */
  --color-secondary-50: #EBFFFC; /* green20 */
  --color-secondary-500: #11BE9A; /* green90 */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F8FAFC; /* gray10 */
  --color-neutral-100: #F4F6FA; /* gray20 */
  --color-neutral-200: #EAEDF4; /* gray30 */
  --color-neutral-300: #D7DCE5; /* gray40 */
  --color-neutral-400: #B4C0D3; /* gray50 */
  --color-neutral-500: #8491A7; /* gray70 */
  --color-neutral-600: #67738E; /* gray80 */
  --color-neutral-700: #475067; /* gray100 */
  --color-neutral-800: #373F57; /* gray110 */
  --color-neutral-900: #292E41; /* gray120 */
  --color-neutral-1000: #151822; /* gray130 */
  --color-success-bg: #EBFFFC; --color-success-fg: #2A7C6D; /* green20 / 110, 역할 (추정) */
  --color-warning-bg: #FFF7D6; --color-warning-fg: #755F00; /* yellow20 / 120, 역할 (추정) */
  --color-error-bg: #FFF5F7; --color-error-fg: #D63131; /* coral20 / 110 */
  --color-info-bg: #F0F4FF; --color-info-fg: #0031B2;
  --color-apply: #D63131; /* (추정) 관찰한 빨간 지원 테두리를 coral110에 연결 */
  --bg-base: #FFFFFF; --bg-subtle: #F8FAFC; --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(21,24,34,.48); /* (추정) 팝업 뒤 어둠막 */
  --text-primary: #292E41; --text-secondary: #475067; --text-tertiary: #67738E;
  --text-on-primary: #FFFFFF; --text-disabled: #B4C0D3;
  --border-default: #D7DCE5; --border-subtle: #EAEDF4; --border-strong: #8491A7; --border-focus: #003FE5;
  --font-body: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", dotum, gulim, sans-serif;
}

| 역할 | 값 | 적용 위치와 근거 | |---|---|---| | 회사 대표색 | #4876EF | 공개 CI 안내에 명시. 룩북의 대표색과 회사 소개 맥락에 사용 | | 서비스 강조 | #2D67FF | 실제 헤더 로고·검색·버튼의 blue90. 선택과 주요 행동 | | 강조 hover | #003FE5 | 공식 BtnType의 blue100. 같은 행동의 눌러 볼 수 있는 상태 | | 본문 제목 | #292E41 | gray120. 공고 제목과 핵심 정보 | | 부가 조건 | #67738E | gray80. 지역·경력·학력 등 비교 보조 정보 | | 경계선 | #D7DCE5 / #EAEDF4 | gray40 / gray30. 입력 상자와 공고 구분선 | | 지원 강조 | #D63131 | coral110을 얇은 테와 글자에 적용한 재구성(추정). 실제 목록의 붉은 지원 버튼을 따른 역할 | | 안내 바탕 | #F0F4FF | blue20. 선택된 조건이나 보조 안내의 약한 면 |

색 사용 비율은 화면의 내용에 따라 변한다. 목록에서는 흰 면과 푸른 회색이 대부분이고 파랑은 작은 비율이다. 상단 배너에는 기업마다 별도의 색이 들어갈 수 있으므로, 배너 색의 평균을 사람인의 UI 토큰으로 가져오지 않는다. 가상 로고의 녹색·보라·주황은 예시 기업의 그림 색이며 성공·주의 상태와 관계없다. 작은 글자는 밝은 파랑 면 위에 더 진한 글자를 쓰고, 색만으로 선택이나 오류를 구분하지 않는다.

공식 웹과 앱스토어 화면에서 제품의 라이트/다크 선택 근거를 확인하지 못했다. 회사 CI의 어두운 바탕용 로고나 앱 소개 이미지의 진한 파랑 배경은 테마 전환 증거가 아니다. 따라서 theme_modes: [light]만 제공한다. 다크 기능이 없다고 단정하는 것이 아니라 이번에 검증할 수 있는 범위를 명시한 것이다. 임의의 검은 배경 판을 제품의 공식 다크 모드로 추가하지 않는다.

Typography

타이포그래피

한글·영문·숫자는 Pretendard를 기본으로 사용한다. 실제 채용정보 화면의 계산된 font-family가 Pretendard, Malgun Gothic, dotum, gulim, sans-serif 순서인 것을 확인했다. 서비스 로고는 텍스트로 다시 조판하지 않는다. 아래 코드의 서체 이름은 선택 순서이며 폰트 파일을 내려받지 않는다. 설치되지 않은 환경에서는 맑은 고딕이나 시스템 산세리프가 렌더링을 맡는다. 웹폰트 로딩 때문에 미리보기의 표시가 달라지지 않도록 외부 글꼴 참조를 넣지 않았다.

| 위계 | 크기 / 굵기 / 행간 / 자간 | 역할과 확인 범위 | |---|---|---| | Display | 32px / 700 / 1.3 / -0.7px | 채용 배너의 캠페인 문장. 목록용 공통 토큰은 확인하지 못해 추정 | | H1 | 28px / 700 / 1.35 / -0.6px | 직업별(직무) 같은 페이지 제목. 예시용 위계 추정 | | H2 | 20px / 700 / 1.4 / -0.4px | 전체 채용정보·추천 구획 제목. 재구성용 추정 | | H3 | 16px / 700 / 1.5 / -0.3px | 공고 제목. 실제 목록의 16px 굵은 제목을 기준 | | Body | 14px / 400 / 1.5 / -0.2px | 근무조건·설명. 실제 화면의 12~14px 보조 정보 범위 | | Small | 12px / 400 / 1.5 / -0.1px | 등록 시각·짧은 배지·마감 보조 설명 | | Label | 14px / 600 / 1.3 / -0.2px | 입력·탭·버튼. 굵기와 행간의 공통화는 추정 | | Mono | 사용하지 않음 | 개발 직무의 기술명도 본문 서체로 쓴다. 표 숫자는 같은 폭 숫자 옵션을 필요할 때만 사용 |

실제 데스크톱 목록은 1260px 폭에서 136px 정도의 행을 사용한다. 900px 데모는 그 화면을 무조건 축소한 이미지가 아니라 정보 순서를 유지한 좁은 화면 재구성이다. 제목은 12~13px, 조건은 10~11px로 줄여도 제목·조건·마감의 상대적 위계를 남긴다. 카드의 7~10px 표기는 작은 룩북 미리보기만을 위한 압축이다. 이 값을 실제 서비스의 기본 본문 크기로 권장하지 않는다.

제목은 회사가 적은 긴 문장이라도 첫 줄에서 직무가 보이게 한다. 데스크톱에서는 고정된 칸 안에서 말줄임하고, 모바일에서는 두 줄을 허용해 의미 손실을 줄인다. 기업명과 직무명을 동시에 아주 굵게 하면 가로로 읽을 때 시작점이 흐려진다. 회사명은 보통 또는 중간 굵기, 제목은 굵게, 경력·학력은 보통으로 분리한다. 작은 보조 정보에 일괄적으로 낮은 불투명도를 걸면 안 된다. 명시된 회색 값을 사용해야 흰 배경 위에서 읽을 수 있다.

마감 표기는 D-3, 오늘마감, 상시, ~10.25(일)처럼 실제 화면의 형식을 따른다. 날짜와 등록 시각을 섞어 ‘3일’ 하나로 줄이면 무엇이 남은 기간인지 알 수 없다. 지원 버튼 아래에는 마감, 그 아래에는 ‘2시간 전 등록’을 배치한다. 숫자와 단위 사이의 표현도 일관되게 유지한다. 연봉은 ‘4,800~6,500만원’, 공고 수는 ‘781건’, 경력은 ‘3년↑’처럼 항목의 단위를 함께 남긴다.

Spacing

스페이싱

기본 단위는 4px로 정리한다(추정). 공개 CSS에 단일 간격 토큰 표는 없지만 버튼 높이의 8px 단계와 실제 목록 안쪽의 24px·28px에서 이 단위로 재구성하기 쉽다. 실제 값과 설계 편의를 위한 스케일을 구분한다. ⑫의 좁은 데모에서 쓰는 5px·9px 같은 보정은 전체 제품 토큰이 아니라 해당 레이아웃의 지역 값이다.

:root {
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --layout-max: 1260px;
  --layout-gutter: 24px;
}

| 관계 | 간격 | 적용 원칙 | |---|---|---| | 아이콘과 한 줄 정보 | 4~6px | 핀과 지역, 가방과 경력처럼 하나의 의미로 읽히게 묶음 | | 제목과 직무 태그 | 8px 안팎 | 제목의 줄과 기술 키워드의 줄을 구분 | | 조건의 세 줄 | 4px 안팎 | 지역·경력·학력을 같은 칸으로 유지 | | 실제 공고 행 안쪽 | 위아래 24px, 좌우 28px | 관찰 화면의 계산값. 900px 데모에서는 별도로 압축 | | 추천 카드 사이 | 8~16px | 카드 수와 폭에 맞춰 조정하는 추정 범위 | | 검색과 결과 구획 | 24~32px | 선택 조건과 목록 시작점을 분리하는 재구성 범위 | | 큰 구획 전환 | 32~48px | 채용 목록 뒤 채용관·취업 자료로 넘어갈 때 적용 |

촘촘함은 모든 간격을 줄인 결과가 아니다. 한 공고 안의 조건은 가깝게, 서로 다른 공고는 구분선과 일정한 세로 여유로 나눈다. 위아래 행마다 높이가 크게 달라지면 제목과 마감을 가로질러 읽기 어렵다. 회사명이나 제목이 길어도 지원 열의 기준 위치는 유지한다. 실제 웹의 세로 구분선 없는 행을 살려, 칸 사이의 빈 간격이 보이지 않는 열 경계 역할을 하게 한다.

헤더의 검색창은 첫 줄에서 가장 넓은 입력 대상이다. 메뉴 사이에 검색창만큼 큰 여백을 주지 않는다. 검색 조건은 직업·지역·검색어·상세조건의 순서를 유지하고, 선택한 값은 바로 아래 줄에서 다시 보여 준다. 검색 결과 수는 조건 영역과 결과 영역을 이어 주는 정보이므로 멀리 떨어진 배너 안으로 옮기지 않는다. 필터가 늘어날 때는 칩이 줄을 바꾸고 오른쪽으로 화면을 밀어내지 않게 한다.

모바일에서는 네 열을 같은 폭으로 억지로 줄이지 않는다. 기업명과 제목을 위로, 조건을 그 아래로 옮기고 지원·마감 묶음을 오른쪽에 둔다. 상단 추천 로고는 두 열이 된다. 900px 예시는 광고 높이에 맞춰 처음 일곱 공고를 두 열 안에 배치하고 나머지 열한 공고는 전체 폭으로 이어, 목록 아래에 긴 빈 광고 칸을 남기지 않는다. 모바일에서는 오른쪽 광고가 일곱 공고 다음 구획으로 이동한다. 이는 모바일 웹과 앱 화면의 읽기 흐름을 참고한 반응형 재구성(추정)이며, 현재 데스크톱 페이지에 동일한 미디어쿼리가 존재한다는 뜻은 아니다. 페이지 바깥 여백은 최소 12px를 남기고 버튼 글자가 다음 열에 침범하지 않게 한다.

Border Radius

Border Radius

사람인은 모든 요소를 알약으로 만드는 화면이 아니다. 검색창의 긴 곡선, 작은 사각 버튼, 부드러운 추천 카드, 직선 목록이 함께 있다. 실제 검색창의 계산값은 28px이고 공식 버튼 CSS의 반경은 4px다. 아래 토큰은 이 두 값을 중심에 두고 관찰한 카드 형태를 보완한 재구성이다. 공개 jobs-recruit.css의 공고 배지는 4px, 채용 배너 .area_banner는 8px다. 900px 예시의 추천 타일 6px와 하단 카드 7px는 압축 화면에 맞춘 값이며 실제 추천 카드의 측정값으로 취급하지 않는다.

:root {
  --radius-none: 0;
  --radius-sm: 4px; /* 공개 job_badge 반경 */
  --radius-md: 4px; /* 공식 BtnType */
  --radius-lg: 8px; /* 공개 area_banner, 일반 추천 카드 적용은 추정 */
  --radius-xl: 16px; /* 넓은 안내 면: 추정 */
  --radius-search: 28px; /* 실제 통합 검색창 */
  --radius-full: 9999px;
}

검색창의 반경은 모양의 장식보다 입력 대상의 식별에 기여한다. 왼쪽 로고와 오른쪽 계정 영역 사이에 긴 파란 외곽선을 두면 여러 메뉴 가운데 검색 위치가 바로 잡힌다. 반대로 경력·학력 선택 상자를 같은 알약으로 만들면 조건 패널의 사각 열 구조가 흐려진다. 선택 칩은 작게 둥글게 만들 수 있지만 패널 전체는 칸을 맞춘 사각 틀로 남긴다.

일반 공고 행에는 카드 반경과 바깥 그림자를 적용하지 않는다. 공고를 둥근 섬처럼 떼어 놓으면 기업명·제목·조건·지원의 세로축이 끊겨 비교가 느려진다. 추천 영역은 별도 상품 면이므로 경계와 작은 반경으로 일반 목록과 구별한다. 8px는 확인한 배너 값이며 모든 추천 카드의 공식 반경이라는 뜻은 아니다. 추천 카드 안의 로고도 각각 둥근 배경으로 통일하지 않는다. 투명 심벌, 워드마크, 사각 심벌의 차이가 실제 기업 목록 특유의 다채로움을 만든다.

입사지원 버튼은 작고 명확한 직사각형이다. 버튼의 높이가 24~32px인 밀집 목록에서 반경을 절반 높이까지 키우면 원래의 업무 화면보다 가벼운 태그처럼 보인다. 클릭할 수 있는 버튼과 단순 마감 배지를 모양으로 구분해야 한다. 카드 안쪽의 그림에만 큰 반경을 주고 텍스트 영역이 밖으로 튀어나오는 조합도 피한다. 필요한 경우 부모에서 한 번만 잘라 경계가 이어지게 한다.

Shadow / Elevation

Shadow / Elevation

기본 목록은 그림자 없이 선과 여백으로 구분한다. 실제 검색 결과에서 행의 바탕은 흰색이고 아래에 가는 회색 선이 이어진다. 그림자가 필요한 곳은 공고 줄 자체보다 펼친 검색 제안, 조건 패널, 도움말처럼 기존 내용 위에 뜨는 면이다. 공개된 공통 elevation 수치표는 확인하지 못했으므로 다음 다섯 단계는 재사용을 위한 추정값이다.

:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(41,46,65,.06);
  --shadow-md: 0 4px 12px rgba(41,46,65,.10);
  --shadow-lg: 0 8px 24px rgba(41,46,65,.14);
  --shadow-xl: 0 16px 40px rgba(41,46,65,.18);
}

| 높이 | 사용 예 | 경계 처리 | |---|---|---| | none | 공고 줄, 탭, 조건 칩, 지원 버튼 | 1px 선 또는 색의 변화만 사용 | | sm | 짧은 보조 안내가 바탕과 맞닿을 때 | 약한 그림자와 얇은 경계를 함께 사용 | | md | 검색어 제안·작은 드롭다운 | 뒤 목록의 글자를 가리므로 흰 바탕을 불투명하게 유지 | | lg | 여러 직무를 고르는 떠 있는 패널 | 충분한 바깥 공간을 확보하고 패널 경계가 잘리지 않게 함 | | xl | 긴 내용을 띄우는 대화상자 | 일반 목록 예시에는 사용하지 않음. 별도 문맥에서만 적용 |

AI 검색은 평평한 목록 규칙의 예외다. header_default.css의 .btn_ai_search는 86×40px, 반경 20px, 14px/20px·700 글자, 아이콘 간격 4px다. 배경은 linear-gradient(89deg, #00A1F8 .78%, #7F38FD 99.22%), 그림자는 0 0 10px 0 rgba(0,161,248,.3)다. 검색창 옆의 작은 기능에 이 광택을 한정하고 입사지원·일반 공고에는 복사하지 않는다. 공개 CSS의 계정 펼침면은 2px 6px 16px 0 rgba(17,42,128,.08), 전체 메뉴는 0 16px 16px rgba(55,63,87,.1)을 사용한다. 위 elevation 토큰은 이 개별 규칙을 완전히 대체하는 공식 척도가 아니다.

오른쪽 광고의 그림에는 건물의 어두운 측면과 바닥 그림자가 들어간다. 이것은 UI elevation이 아니라 일러스트의 입체 표현이다. 광고 그림의 그림자를 목록 카드에 그대로 복사하지 않는다. ⑫에서는 추천 기업 면의 경계를 1px 선으로 정리하고, 전체 페이지를 하나의 큰 떠 있는 카드로 감싸지 않았다. 흰 화면의 구획이 평평하게 이어지는 편이 실제 채용정보 페이지와 가깝다.

Iconography

Iconography

  • 스타일: Outline 중심. 위치·경력·학력은 작고 가는 선 아이콘, 관심 기업 하트와 공고 스크랩 별은 빈 윤곽으로 구분한다.
  • Stroke 굵기: 예시 SVG는 24×24 좌표에서 1.5px(추정). 실제 사이트는 이미지와 CSS 자산을 함께 사용하므로 전체 제품이 이 선 굵기를 공유한다고 단정하지 않는다.
  • 모서리 처리: 선의 끝과 꺾임은 둥글게. 작은 크기에서도 끊겨 보이지 않도록 선을 간결하게 유지한다.
  • 추천 라이브러리: 별도 아이콘 패키지 없이 필요한 모양을 인라인 SVG로 작성했다. 다른 작업에 적용한다면 Lucide 계열의 가는 윤곽과 비슷한 정도를 출발점으로 삼되 실제 사이트 자산과 혼동하지 않는다(추정).

같은 가로줄에서 아이콘은 문자의 높이보다 조금 작거나 비슷하다. 지역 앞 핀, 경력 앞 가방, 학력 앞 학사모를 각각 두어 조건 세 줄을 빠르게 구분한다. 핀만 반복하거나 모든 조건을 동그라미 안에 넣으면 서로 다른 항목의 구별이 약해진다. 작은 아이콘은 보조 역할이므로 의미를 글자로 함께 적는다. 별·하트만 있는 조작에는 ‘공고 스크랩’, ‘관심 기업’ 같은 이름이 필요하다.

서비스 로고와 기업 로고는 아이콘 체계에 넣지 않는다. 사람인 로고는 공식 헤더 SVG의 경로와 파랑을 유지한다. 예시 기업 로고는 입체 블록, 잎과 씨앗, 흐르는 파도, 다리 형태, 육각 결정, 네 날개 회전형으로 다르게 만들었다. 각 심벌에 바탕 형태, 색면, 어두운 면, 밝은 면, 세부선을 넣고 한글 회사명을 붙였다. 같은 도형에 색만 바꾸는 방식으로 기업 다양성을 대신하지 않는다.

광고의 연구동 그림은 큰 좌표계에서 그린 유리 건물이다. 하늘의 색 변화, 바닥 원근, 건물 정면과 측면, 반복 창, 반사선, 연결 통로, 나무가 겹친다. 카드에서는 긴 배너로, 상세 예시에서는 오른쪽 세로 광고로 잘라 사용한다. 다른 회사의 실제 사옥을 재현한 그림은 아니다. 광고 안의 건축 그림과 기업 로고가 풍부해도 버튼·조건 아이콘에는 같은 장식을 넣지 않아 정보와 그림의 역할을 분리한다.

SVG의 식별자는 모두 saramin-으로 시작하며 장면별로 다르게 지정한다. 그라디언트가 다른 카드의 같은 이름을 잘못 참조하지 않게 하기 위한 구현 규칙이다. 장식 SVG에는 별도 설명을 반복하지 않고, 의미가 있는 기업 로고에는 회사명이 읽히게 한다. 화면 확대나 시스템 글꼴 대체 때문에 아이콘과 문자의 기준선이 달라질 수 있으므로 flex 정렬과 고정된 아이콘 칸으로 균형을 잡는다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button — 실제 공통 버튼은 높이 24·32·40·48·56·64px와 반경 4px를 제공한다. 기본 파랑은 blue90, hover는 blue100, 비활성 면은 gray20 계열이며 키보드 포커스는 파란 2px 선과 2px 간격이다. 아래 primary는 이 값을 바탕으로 한다. secondary·ghost·danger의 일관된 active 및 loading 조합은 예시를 위한 보완(추정)이다. 같은 높이에서 글자와 아이콘을 가운데 맞춘다. 로딩 표시가 붙는 실제 구현에서는 고정 폭이나 별도의 아이콘 칸으로 버튼 폭을 유지한다.

지원 버튼은 일반 primary와 별도로 취급한다. 현재 목록의 문구는 ‘입사지원’과 ‘홈페이지 지원’이다. 전자는 얇은 붉은 테, 후자는 푸른 회색 테로 구분돼 있다. 모든 지원 버튼을 큰 파란 면으로 바꾸면 관찰한 목록의 리듬이 달라진다. 버튼 아래 마감과 등록 시각은 누르는 요소가 아닌 정보다. 오늘 마감은 진한 붉은 글자와 문구를 함께 써서 색을 보지 못해도 의미가 남도록 한다.

Input — 통합 검색은 52px 높이와 28px 반경의 파란 외곽선이 핵심이다. 조건 입력은 사각 패널 안의 칸으로 놓고 같은 알약 규칙을 적용하지 않는다. 기본·hover·focus·error·disabled를 구분한다. 오류는 붉은 테만 바꾸지 말고 입력 아래에 ‘검색어를 확인해 주세요’처럼 해결 방법을 적는다. 오류 설명과 입력은 접근성 속성으로 연결한다. 예시 화면은 이미 검색한 결과를 보여 주므로 실제 동작하는 검색 전송 기능은 포함하지 않는다.

Card — 추천 기업 카드, 일반 공고 행, 채용 광고는 서로 다른 외형이다. 추천 카드는 작은 로고와 제목을 가진 독립된 사각 면이다. 일반 공고는 한 줄의 비교 자료이므로 아래 구분선만 둔다. 광고는 그림과 짧은 행동 문구를 가진 별도 면이다. 이를 하나의 범용 카드로 통일하면 화면은 단순해져도 서비스의 정보 구분을 잃는다. 카드 hover는 테두리·바탕 변화 정도로 제한하고 위치가 움직이지 않게 한다.

Badge / Chip — ‘오늘 뜬’, ‘평균연봉 상위 10%’처럼 공고의 짧은 특징을 나타내는 배지와, 사용자가 고른 프론트엔드·지역 조건 칩을 구분한다. 공개 .job_badge > span은 좌우 6px, 반경 4px, 12px 글자, 24px 행간이며 gray20 바탕과 gray100 글자를 쓴다. reward는 yellow20 바탕·gray120 글자로 바뀌고 14×14px 금색 그림을 붙인다. ⑫의 ‘합격 시 50만원’은 이 형태를 가상 공고에 적용한 예다. 배지는 읽는 요소이고 조건 칩은 삭제할 수 있는 선택 상태다. 칩을 지우는 작은 ×에는 삭제할 조건 이름이 포함된 이름을 붙인다. 필터 변경 후 결과 수가 달라질 때는 목록 제목 가까이에서 상태를 알려 주는 것이 자연스럽다. 무효한 조건 때문에 결과가 없으면 조건을 줄일 수 있는 행동을 같은 위치에 둔다.

Navigation — 주 메뉴는 왼쪽부터 실제 순서를 따른다. 현재 채용정보와 직업별 위치를 색·밑줄로 표시하고 하위 메뉴를 별도 줄에 둔다. 기업 유형은 전체·일반기업·파견·아웃소싱·헤드헌팅 탭으로 구분한다. 페이지 이동은 아래 숫자 줄에 모아 두며 현재 페이지는 굵기와 파란 표시로 구분한다. 모바일 예시에서는 주 메뉴 일곱 개와 분류 열 개가 폭 안에서 줄을 바꾸며 모두 남고, 하단에 홈·채용정보·신입·인턴·스토어·MY 순서를 보여 준다. 미리보기 안에서 고정 위치를 쓰지 않는다.

.sr-button { display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border:1px solid transparent;border-radius:var(--radius-md);font:500 14px/20px var(--font-body);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out); }
.sr-button--primary { background:var(--color-primary-500);color:var(--text-on-primary);border-color:var(--color-primary-500); }
.sr-button--primary:hover { background:var(--color-primary-600);border-color:var(--color-primary-600); }
.sr-button--primary:active { background:var(--color-primary-700);border-color:var(--color-primary-700); } /* (추정) */
.sr-button--secondary { background:var(--bg-base);color:var(--color-primary-500);border-color:var(--color-primary-500); }
.sr-button--secondary:hover { background:var(--color-primary-100); }
.sr-button--secondary:active { background:var(--color-primary-200); } /* (추정) */
.sr-button--ghost { color:var(--text-secondary);background:transparent; }
.sr-button--ghost:hover { background:var(--color-neutral-100); }
.sr-button--ghost:active { background:var(--color-neutral-200); } /* (추정) */
.sr-button--danger { color:var(--text-on-primary);background:var(--color-error-fg);border-color:var(--color-error-fg); }
.sr-button--danger:hover { background:#B81D1D; } /* coral120, 역할 (추정) */
.sr-button--danger:active { background:#8F1919; } /* (추정) */
.sr-button:disabled { color:var(--text-disabled);background:var(--color-neutral-100);border-color:var(--border-default);cursor:default; }
.sr-button[aria-busy="true"] { position:relative;pointer-events:none;opacity:.75; }
.sr-button[aria-busy="true"]::before { content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:saramin-spin .8s linear infinite; }
.sr-button:focus-visible, .sr-input:focus-visible, .sr-chip:focus-visible, .sr-nav button:focus-visible { outline:2px solid var(--border-focus);outline-offset:2px; }
.sr-input { min-width:0;height:40px;padding:0 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-base);color:var(--text-primary);font:400 14px/20px var(--font-body); }
.sr-input:hover:not(:disabled) { border-color:var(--border-strong); }
.sr-input:focus { border-color:var(--border-focus); }
.sr-input::placeholder { color:var(--text-tertiary); }
.sr-input[aria-invalid="true"] { border-color:var(--color-error-fg); }
.sr-input:disabled { background:var(--color-neutral-100);color:var(--text-disabled); }
.sr-search { display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border:2px solid var(--color-primary-500);border-radius:var(--radius-search);background:var(--bg-base); }
.sr-search input { width:100%;min-width:0;border:0;background:transparent;font:500 14px var(--font-body);color:var(--text-primary); }
.sr-search input:focus-visible { outline:1px solid var(--border-focus);outline-offset:3px; }
.sr-search svg { width:20px;height:20px;flex:none;color:var(--color-primary-500); }
.sr-card { border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-elevated); }
.sr-card--featured { border-top:2px solid var(--color-primary-500); }
.sr-card--outlined { border-color:var(--border-strong);box-shadow:none; }
.sr-card:hover { border-color:var(--color-primary-400); }
.sr-job { background:var(--bg-base);border-top:1px solid var(--border-default);border-radius:var(--radius-none); }
.sr-job:hover { background:var(--bg-subtle); }
.sr-badge { display:inline-flex;align-items:center;gap:3px;max-width:100%;height:20px;padding:0 5px;border-radius:var(--radius-sm);font-size:11px;line-height:16px;white-space:nowrap; }
.sr-badge--solid { color:var(--text-on-primary);background:var(--color-primary-500); }
.sr-badge--subtle { color:var(--text-secondary);background:var(--color-neutral-100); }
.sr-badge--outline { color:var(--text-secondary);border:1px solid var(--border-default); }
.sr-badge--reward { background:var(--color-warning-bg);color:var(--color-warning-fg); }
.sr-chip { height:32px;padding:0 10px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-base);color:var(--text-secondary);font:400 13px var(--font-body); }
.sr-chip[aria-pressed="true"] { color:var(--color-primary-500);border-color:var(--color-primary-400);background:var(--color-primary-50); }
.sr-nav { display:flex;align-items:center;border-bottom:1px solid var(--border-subtle); }
.sr-nav button { border:0;background:transparent;color:var(--text-primary);font:600 16px/24px var(--font-body);white-space:nowrap; }
.sr-nav button[aria-current="page"] { color:var(--color-primary-500); }
.sr-apply { display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px;border:1px solid var(--color-apply);border-radius:var(--radius-md);background:var(--bg-base);color:var(--color-apply);font:400 13px var(--font-body);white-space:nowrap; }
.sr-apply--web { color:var(--text-tertiary);border-color:var(--text-tertiary); }
.sr-apply:hover { background:var(--color-error-bg); }
.sr-apply--web:hover { background:var(--color-neutral-100); }
.sr-apply:focus-visible { outline:2px solid var(--border-focus);outline-offset:2px; }
@keyframes saramin-spin { to { transform:rotate(360deg); } }

키보드로 읽는 순서도 회사명에서 제목, 조건, 지원으로 이어져야 한다. 시각적으로 오른쪽에 있는 지원 버튼을 DOM의 첫 항목으로 옮기지 않는다. 마감 날짜는 제목과 같은 공고 묶음에 남기고, 스크랩과 관심 기업을 서로 다른 조작으로 식별한다. 예시의 표형 구조는 기사 단위의 목록으로 작성해 모바일에서 자연스럽게 줄을 바꾼다. 실제 제품에 붙일 때는 스크랩 결과 안내, 탭 전환, 필터 확정, 지원 확인을 서버 상태와 연결해야 한다.

빈 결과 화면은 넓은 삽화 하나만 놓고 끝내지 않는다. 현재 선택한 직무·지역·경력은 유지하고 ‘조건에 맞는 공고가 없어요’와 조건 초기화를 함께 제시한다. 통신 오류라면 빈 결과와 구별해 다시 불러오는 행동을 둔다. 로딩 중에는 기존 목록의 폭과 행 높이를 유지하여 옆의 마감 열이 흔들리지 않게 한다. 이 상태 처리 원칙은 관찰된 정적 화면을 보완한 설계 제안(추정)이다. ⑫에는 성공한 검색 결과 장면만 표시한다.

Motion

Motion

화면의 주 작업은 공고를 읽고 비교하는 것이므로 움직임은 상태 변화를 설명할 때만 쓴다. 실제 공개 자료에서 전체 제품의 시간·가속 곡선 규정은 확인하지 못했다. 아래 120·180·240ms와 easing 값은 예시용 추정이다. 실제 AI 검색 배경의 역방향 그라디언트 레이어는 2.8s ease-in-out infinite alternate로 전환된다. 이 예시에서는 작은 기능의 색만 보존하고 자동 전환을 정지해 정적 미리보기에서도 글자가 안정적으로 읽히게 했다. 헤더가 흔들리거나 목록 행이 떠오르는 연출을 브랜드의 특징으로 추가하지 않는다. 공고를 누르기 직전에 위치가 바뀌면 잘못 지원하거나 스크랩할 수 있다.

:root {
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}
.sr-button,.sr-input,.sr-card,.sr-apply {
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .sr-button,.sr-input,.sr-card,.sr-apply { transition: none; }
  .sr-button[aria-busy="true"]::before { animation: none; }
}

검색 조건을 펼칠 때는 상자가 어디에서 열렸는지 알 수 있게 짧게 전환하되 선택 항목이 눌릴 때까지 지연시키지 않는다. 로고 배너가 자동으로 바뀌는 장면을 구현한다면 멈춤 기능과 현재 순서 표시가 필요하다. 이 룩북은 한 장면을 검수하는 정적 예시이므로 배너를 자동으로 돌리지 않는다. 카드의 01 / 06은 슬라이드 위치의 표현이며 숨겨 둔 애니메이션이나 외부 스크립트를 뜻하지 않는다.

지원 처리 중에는 버튼의 기존 문구와 폭을 유지하고 로딩 표시를 곁들인다. 같은 요청을 여러 번 보내지 않도록 동작을 잠그되, 처리 중인 이유는 읽을 수 있어야 한다. 성공과 실패는 회전 표시가 사라지는 것만으로 알리지 않고 텍스트 상태로 설명한다. 움직임 줄이기 환경에서는 회전을 멈추고 ‘처리 중’ 같은 글자로 대체한다. 단순한 스크랩 토글은 길게 튀는 효과보다 별의 면과 보조 안내가 바뀌는 정도가 적절하다(추정).

아래로 스크롤하는 동안 추천 광고가 내용을 가리지 않게 한다. 실제 서비스의 상단 고정 동작을 작은 임베드 안에서 그대로 따라 하면 보기 영역의 상당 부분을 헤더가 차지한다. 따라서 ⑫의 모든 요소는 문서 흐름 안에 둔다. 내부 스크롤을 해도 다음 공고와 하단 채용관·취업 도구가 연속해서 보이는 것이 이 예시에서 더 중요하다.

Anti-patterns

Anti-patterns

다음 다섯 가지는 이 문서의 실제 화면 분석에서 도출한 회피 패턴이다. 회사가 공개한 금지 규정 목록을 옮긴 것은 아니다.

1. 사진 한 장과 보상금만 크게 내세우기. 사람인의 대표 정보는 여러 기업의 로고와 조건이 붙은 많은 공고다. 큰 사진 카드 세 개만 놓고 경력·학력·고용형태를 빼면 비교 작업이 사라진다. 추천 그림을 넣더라도 바로 아래 목록이 이어져야 한다. 카드에서는 여섯 기업의 서로 다른 로고, 세 공고, 마감 표시를 함께 보이게 하고, 상세 예시는 열여덟 공고의 조건을 끝까지 유지한다. 광고 그림이 가장 눈에 띄어도 공고 제목과 지원 위치는 일정해야 한다.

2. 공식 CI 파랑과 서비스 UI 파랑을 같은 값으로 덮기. CI 안내의 #4876EF와 웹 CSS의 #2D67FF는 출처가 다르다. 대표색을 확인했다는 이유만으로 실제 검색창을 다른 파랑으로 바꾸지 않는다. 회색도 #404040 하나로 통일하지 않는다. 제목·조건·등록 시각에는 푸른 회색 단계가 쓰인다. 더구나 배너 안의 기업 색을 상태 토큰에 섞으면 버튼과 로고의 의미가 뒤섞인다. CI, 제품 UI, 광고 그림의 세 범위를 문서와 코드에서 구분한다.

3. 모든 공고를 둥근 그림자 카드로 분리하기. 일반 목록은 가로선과 일정한 열이 중심이다. 각 행을 큰 반경, 큰 여백, 떠 있는 그림자로 둘러싸면 한 화면의 공고 수가 줄고 회사명과 마감의 기준선이 흐트러진다. 추천 상품 카드의 외형을 일반 공고에 일괄 적용하지 않는다. 지원 버튼도 알약 배지처럼 만들지 않는다. 데스크톱 네 칸의 비교 흐름을 유지하고 모바일에서만 읽는 순서에 따라 줄을 바꾼다.

4. 밀도를 핑계로 조건과 조작을 한 줄로 뭉치기. 지역·경력·학력은 별도 줄로 읽히고 지원·마감·등록 시각은 한 묶음이어야 한다. ‘서울 · 3년 · 대졸 · D-3’만 남기면 항목은 짧아져도 각각 무엇을 뜻하는지 덜 분명하다. 긴 제목이 지원 열을 밀거나 작은 스크랩 별이 제목과 겹치지 않게 한다. 필터 이름만 보여 주고 선택된 값을 숨기는 것도 피한다. 좁은 폭에서는 정보를 삭제하기 전에 열을 재배치한다.

5. 확인하지 않은 기능과 수치를 실제 화면처럼 확정하기. 이번에 본 일반 목록에는 지원자 수가 별도 칸으로 없었다. 사용자가 궁금해할 수 있다는 이유만으로 모든 공고에 지원자 수를 만들어 넣지 않는다. 연봉은 공개한 공고의 배지나 조건으로만 표시하고 나머지는 임의 추정하지 않는다. 다크 화면 역시 전환 근거가 없으므로 추가하지 않는다. 예시용 기업과 숫자는 가상임을 본문에 밝히되 실제 채용정보의 메뉴·열 순서·문구는 관찰 화면을 따른다.

Sources

출처

  1. https://saraminhr.co.kr/user/nd49828.do
  2. https://www.saramin.co.kr/zf_user/
  3. https://www.saramin.co.kr/zf_user/jobs/list/job-category
  4. https://www.saramin.co.kr/zf_user/jobs/list/job-category?cat_kewd=92&search_done=y
  5. https://www.saramin.co.kr/sri_css/pattern.css?v=20261008104141
  6. https://www.saramin.co.kr/sri_css/header_default.css?v=20261008104141
  7. https://www.saramin.co.kr/sri_css/jobs-recruit.css?v=20261008104141
  8. https://www.saramin.co.kr/sri_css/components.css?v=20261008104141
  9. https://www.saramin.co.kr/sri_css/detail_search_panel.css?v=20261008104141
  10. https://m.saramin.co.kr/
  11. https://apps.apple.com/kr/app/id739013038

Saramin (사람인) 이름과 로고는 각 권리자의 상표입니다.