Hanwha (한화)

어두운 회의 사진 띠 아래, 계열사명·굵은 제조직 공고·주황 D-day가 이어지는 한화인 채용 목록

한국제조채용따뜻한modern-minimalhumanism고딕comfortablesoftflat라이트한글 지원출시 2021개정 2024

Brand DNA

브랜드 개요 & 시그니처

한화는 제조·에너지·금융 등 여러 사업의 채용을 한화인(Hanwha in Careers)에서 모아 보여 준다. 이 문서는 그룹 식별 가이드의 색·서체와 한화인 채용공고 화면을 함께 기록한다. 공식 UI 토큰을 공개한 디자인 시스템은 확인하지 못했으므로, 관찰한 UI와 적용용 추정을 구분한다.

시그니처는 어두운 회의 사진 띠 아래, 굵은 공고 제목과 작은 주황 D-day가 반복되는 한 열 목록이다. 회사별 로고 타일보다 계열사명·직무·접수 기간을 먼저 읽게 한다. 카드에서는 좁은 화면의 검색/필터 줄을, ⑫에서는 넓은 화면의 왼쪽 필터와 오른쪽 공고 행을 따른다. 사진 구도는 실제 한화인의 회의 장면을 SVG로 다시 그렸다. 한화인 채용공고

근거의 범위는 다음과 같다.

공식 CI: Hanwha Orange의 RGB·CMYK, Hanwha Gothic, 로고 구성 — 브랜드 기본색과 서체 근거.
그룹 브랜드 가이드: 영문 Gibson, 한글 Hanwha Gothic, 보조색 — 브랜드 문구용 서체와 UI 서체를 구분.
실제 채용 UI: #F17E22 D-day, #D8D8D8 테두리, 4px 모서리, 무채색 공고 행 — ⑫ 컴포넌트의 기본 모습.
룩북 적용값: 색 단계·의미색·미관찰 상태·압축 배치 — 아래에서 (추정)으로 표시.

조사일은 2026-11-06이다. 첫 공개 연도로 적은 2021년은 확인한 식별 가이드 판본을 기준으로, 마지막 주요 개편 연도로 적은 2024년은 그룹 가이드 파일의 공개 경로를 기준으로 추정했다. UI의 최초 공개·개편 연도를 확정한 값이 아니다. 실제 테마 전환 기능과 공식 다크 모드 규격을 찾지 못해 라이트 모드만 다룬다. 사진·푸터의 어두운 부분은 라이트 화면 안의 구획이다.

Tone & Mood

디자인 원칙

핵심 키워드: 명료한 · 실무적인 · 따뜻한

명료한: 계열사명 → 굵은 공고 제목 → D-day와 기간 순서다. 날짜를 제목과 같은 굵기로 쓰지 않는다.
실무적인: 계열사·채용구분·직무를 따로 거르고 한 열에서 결과를 비교한다. 여러 공고를 로고 격자로 바꾸면 긴 직무명이 잘린다.
따뜻한: 사람의 손과 협업 장면이 위쪽을 채운다. 주황은 마감과 선택에만 쓰고 본문은 흰색·회색으로 정리한다.

모서리 성향은 soft(검색·행·배지 4px), 깊이는 flat(기본 행 그림자 없음), 밀도는 comfortable다. 공고 사이 간격은 넓어도 한 행 안에는 회사·직무·기간이 빠짐없이 들어간다. ⑫의 900px 예시는 이를 작은 창에 맞춰 압축했다.

Color System

컬러 시스템

공식 브랜드색과 채용 UI색을 합치지 않는다. Hanwha Orange 100의 공식 RGB 243/115/33을 16진수로 바꾸면 #F37321이다. 70·50은 공식 색 이름이며 불투명도를 뜻하지 않는다. 공식 CI 색상 규정

Hanwha Orange 100: RGB → HEX는 243/115/33 → #F37321, CMYK는 0/68/100/0.
Hanwha Orange 70: RGB → HEX는 248/155/108 → #F89B6C, CMYK는 0/47/70/0.
Hanwha Orange 50: RGB → HEX는 251/181/132 → #FBB584, CMYK는 0/34/50/0.
Black: RGB → HEX는 0/0/0 → #000000, CMYK는 0/0/0/100.

식별 가이드 1.14는 #FF6600을 별도의 Web Safe Color로 적는다. 이 값을 위 RGB와 같은 색이라고 쓰지 않는다. 브랜드 대표값은 RGB 변환값, 공고 D-day는 실제 CSS의 #F17E22를 쓴다. 식별 가이드 1.13–1.14

그룹 가이드의 Light Navy #353968, Light Grey #EFEEE8는 브랜드 심볼용 보조색이다. 채용 목록의 기본 배경색으로 확대하지 않는다. 그룹 가이드 36쪽

:root {
  /* 500만 공식 RGB 변환. 나머지 50~900은 적용용 명도 단계(추정). */
  --color-primary-50: #FFF6EE;
  --color-primary-100: #FFE8D4;
  --color-primary-200: #FDCBA4;
  --color-primary-300: #F9AB72;
  --color-primary-400: #F58E48;
  --color-primary-500: #F37321;
  --color-primary-600: #D95F16;
  --color-primary-700: #AB4916;
  --color-primary-800: #803A19;
  --color-primary-900: #542A16;
  --color-hanwha-orange-70: #F89B6C; /* 공식 RGB 변환 */
  --color-hanwha-orange-50: #FBB584; /* 공식 RGB 변환 */
  --color-secondary-500: #353968;   /* 그룹 가이드 Light Navy */
  --color-secondary-surface: #EFEEE8; /* 그룹 가이드 Light Grey */
  --color-recruit-orange: #F17E22;  /* 공고 목록 D-day 실측 */
  --color-recruit-hover: #D96A17;   /* 미관찰 상태(추정) */
  --color-recruit-active: #B5530F;  /* 미관찰 상태(추정) */
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F0F0F0; /* 검색 바탕 실측 */
  --color-neutral-200: #E4E4E4; /* 보조 구분선 실측 */
  --color-neutral-300: #D8D8D8; /* 공고 테두리 실측 */
  --color-neutral-500: #8E8E8E; /* 적용용 비활성(추정) */
  --color-neutral-600: #717171; /* 공고 태그 실측 */
  --color-neutral-700: #555555; /* 계열사·접수 기간 실측 */
  --color-neutral-800: #2D2D2D; /* 공고 제목 실측 */
  --color-neutral-900: #1D1D1D; /* 본문 제목·푸터 실측 */
  --surface-page: #FFFFFF;
  --surface-subtle: #F0F0F0;
  --surface-inverse: #1D1D1D;
  --text-primary: #2D2D2D;
  --text-secondary: #555555;
  --text-muted: #717171;
  --text-inverse: #FFFFFF;
  --border-default: #D8D8D8;
  --border-strong: #2D2D2D;
  --color-success: #247047; /* 의미색 전체 추정: 결과 안내에만 사용 */
  --color-warning: #95610B;
  --color-error: #B4232E;
  --color-info: #353968;
  --surface-error: #FFF2F3;
  --surface-success: #EFF7F1;
  --surface-info: #F1F1F8;
  --font-primary: 'HanwhaGothic', 'Hanwha Gothic', 'Malgun Gothic', Arial, sans-serif;
}

화면은 흰색·무채색이 대부분이다. 주황을 긴 본문 글자색으로 쓰지 않고 작은 배지와 행동 버튼에 쓴다. 원래 D-day의 흰 글자/주황 배경 조합은 실측을 유지했으며 접근성 검증을 마친 새 토큰이라고 주장하지 않는다. 오류는 주황 D-day와 혼동하지 않도록 오류 문구·아이콘·테두리를 함께 표시한다(추정).

Typography

타이포그래피

채용 UI의 한글·영문·숫자는 Hanwha Gothic이 중심이다. 실제 font-family는 HanwhaGothic, sans-serif다. 식별 가이드의 T·EL·L·R·B는 브랜드 지정 굵기이고, 화면에서는 400·500·700이 관찰됐다. 식별 가이드 서체 규정

채용 제목·본문·날짜: Hanwha Gothic / HanwhaGothic — 한 가족 안에서 400과 700을 구분.
브랜드 목적·가치 영문: Gibson Thin/Light + 한글 Hanwha Gothic EL/T/L/R — 그룹 가이드 전용. 영문 tracking -20, 한글 0.
외부 리소스 없는 예시: HanwhaGothic → Malgun Gothic → Arial → sans-serif — 로컬에 있는 글꼴로 표시. 웹폰트 요청 없음.

Gibson을 채용 UI 전체에 적용하지 않는다. 영문 tracking -20은 편집 도구 값이므로 CSS -20px로 옮기지 않는다. 그룹 가이드 51쪽

위계 (크기 / 줄높이 / 굵기):
- Caption: 12 / 18px / 400 — 보조 안내(추정).
- Small: 13 / 19.5px / 400·700 — 모바일 기간·D-day 실측.
- Body small: 15 / 22.5px / 400·700 — 검색 입력·모바일 계열사 실측.
- Body: 17 / 25.5px / 400·700 — PC 계열사·기간·필터 실측.
- Heading small: 21 / 31.5px / 700 — 하위 안내 제목(추정).
- Job title: 25 / 37.5px / 700 — PC 공고 제목 실측.
- Display mobile: 40 / 60px / 500 — 모바일 사진 띠 제목 실측.
- Display desktop: 60 / 90px / 500·700 — 사진 띠·본문 제목 실측.

제목 자간은 기본 0, 압축 예시의 큰 제목만 -.025em(추정)이다. 한국어 제목은 단어 단위로 줄바꿈한다. 날짜는 연·월·일과 24시간 시각을 보존한다. ⑫에서는 13px 제목/10px 기간까지 축소하되 모바일 제목은 16px로 돌려 놓는다. 카드의 작은 크기는 미리보기용이며 실제 서비스의 글자 크기 권장값이 아니다.

Spacing

간격 & 레이아웃

실제 1600px 화면의 본문은 1256px, 왼쪽 필터 302px, 열 간격 48px, 공고 906px였다. 사진 띠 높이 400px, 공고 내부 32px, 공고 사이 16px가 기준이다. 1280px 화면부터 검색+필터 버튼 구성이 관찰된다. 모바일 좌우 여백은 24px다. 공고 화면

:root {
  /* 4px 기반으로 정리한 공통 단계는 추정. 관찰한 16·24·32·48은 위 실측. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --layout-max: 1256px;
  --layout-sidebar: 302px;
  --layout-gap: 48px;
}
.hw-shell { width: min(var(--layout-max), calc(100% - 48px)); margin-inline: auto; }
.hw-columns { display: grid; grid-template-columns: var(--layout-sidebar) minmax(0,1fr); gap: var(--layout-gap); }
.hw-stack > * + * { margin-top: var(--space-4); }
@media (max-width: 1280px) {
  .hw-columns { grid-template-columns: minmax(0,1fr); }
}

⑫은 900px 창 안에서 PC 구조를 읽을 수 있도록 필터 206px·간격 22px로 압축했다(추정). 왼쪽/오른쪽 너비 비율은 원본의 약 1:3을 따르고, 계열사 4개와 직무는 두 열로 정리해 펼쳐 두었다. 600px 이하에서는 필터를 펼침 목록으로 바꾸고 공고를 한 열로 쌓는다. 이 600px는 예시용 경계이며 실제 한화인의 반응형 수치가 아니다.

Border Radius

:root {
  --radius-none: 0px; /* 사진 띠·구획 */
  --radius-sm: 4px;   /* 검색·PC 공고·D-day 실측 */
  --radius-md: 8px;   /* 미관찰 안내 레이어용(추정) */
  --radius-round: 50%; /* FAQ의 Q, 원형 아이콘 버튼 */
}

공고를 큰 둥근 카드로 바꾸지 않는다. 모바일 공고는 모서리 0과 아래 구분선만 쓴다. 원형은 FAQ의 Q나 아이콘 조작에 한정한다.

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-row-hover: 0 0 8px rgba(0,0,0,.3); /* 공식 공고 CSS 실측 */
  --shadow-popover: 0 4px 16px rgba(0,0,0,.12); /* 펼침 레이어(추정) */
  --shadow-dialog: 0 12px 32px rgba(0,0,0,.18); /* 대화상자(추정) */
}

PC 공고는 기본 그림자 없이 #D8D8D8 선으로 나뉜다. 원본 CSS의 hover는 진한 테두리와 8px 그림자다. 모바일 CSS는 hover 그림자를 없앤다. 사진 안의 빛과 반사는 그림 자체에 속하며 UI 카드의 그림자로 확대하지 않는다.

Iconography

검색은 돋보기, 필터는 슬라이더 두 줄, 관심 공고는 북마크, 공유는 연결된 고리, 로그인은 사람 윤곽, 초기화는 회전 화살표다. 실제 한화인의 SVG path를 사용했다. 헤더 메뉴·펼침 화살표만 단순 선으로 보완했다(추정).

원본은 18·20·24px 영역에 놓이고, 윤곽은 약 2px 두께로 보인다. 정확한 stroke 수치가 없는 fill path도 있으므로 모두 stroke-width:2라고 단정하지 않는다.
기본 아이콘 색은 #2D2D2D, 어두운 사진 위에서는 흰색이다. 기능마다 무지개색을 주지 않는다.
같은 기능은 같은 실루엣을 유지한다. 공고 오른쪽에는 북마크와 공유만 짝지어 배치한다.
예시에서는 svg의 내부 use 참조만 쓴다. 아이콘만 있는 버튼에는 한국어 이름을 넣고 장식용 그림은 읽기 순서에서 뺀다.

Component Guide

컴포넌트 가이드

상태의 구분: 공고 기본/hover, 검색 기본, D-day 기본은 실측이다. 아래 버튼의 hover·active·disabled·loading, 오류·성공 입력, 선택 카드 등은 관찰하지 못한 상태를 채운 적용용 추정이다. 버튼의 색 조합은 배경/글자/테두리 순서로 적는다.

Button

Primary: Default는 UI 주황 / 흰색 / 주황, Hover는 진한 주황, Active는 더 진한 주황, Disabled는 회색 배경·글자, Loading은 기본색 + 회전 표시·진행 문구.
Secondary: Default는 흰색 / 진회색 / 회색, Hover는 옅은 회색·진한 선, Active는 회색 배경, Disabled는 흐린 선·글자, Loading은 기본색 + 회전 표시.
Ghost: Default는 투명 / 진회색 / 투명, Hover는 옅은 회색, Active는 진한 회색 바탕, Disabled는 흐린 글자, Loading은 기본색 + 회전 표시.
Danger: Default는 오류색 / 흰색 / 오류색, Hover는 더 진한 오류색, Active는 가장 진한 오류색, Disabled는 회색 배경·글자, Loading은 기본색 + 회전 표시.

.hw-btn {
  --btn-bg: var(--color-recruit-orange); --btn-fg: #FFF; --btn-line: var(--color-recruit-orange);
  --btn-hover: var(--color-recruit-hover); --btn-active: var(--color-recruit-active);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 1px solid var(--btn-line);
  border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg);
  font: 700 15px/1.4 var(--font-primary); text-decoration: none; cursor: pointer;
}
.hw-btn:hover { background: var(--btn-hover); border-color: currentColor; }
.hw-btn:active { background: var(--btn-active); }
.hw-btn--secondary { --btn-bg: #FFF; --btn-fg: var(--text-primary); --btn-line: var(--border-default); --btn-hover: #F0F0F0; --btn-active: #E4E4E4; }
.hw-btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-primary); --btn-line: transparent; --btn-hover: #F0F0F0; --btn-active: #E4E4E4; }
.hw-btn--ghost:hover { border-color: transparent; }
.hw-btn--danger { --btn-bg: var(--color-error); --btn-fg: #FFF; --btn-line: var(--color-error); --btn-hover: #921C26; --btn-active: #72151D; }
.hw-btn:disabled, .hw-btn[aria-disabled="true"] { background: #F0F0F0; color: #8E8E8E; border-color: #E4E4E4; cursor: not-allowed; }
.hw-btn--ghost:disabled { background: transparent; border-color: transparent; }
.hw-btn[aria-busy="true"] { pointer-events: none; }
.hw-btn[aria-busy="true"]::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hw-spin .8s linear infinite; }
.hw-btn:focus-visible, .hw-iconbtn:focus-visible, .hw-nav a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.hw-input { width: 100%; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--text-primary); font: 400 15px/1.5 var(--font-primary); }
.hw-input::placeholder { color: var(--text-muted); }
.hw-input:hover { border-color: var(--border-default); }
.hw-input:focus { outline: 2px solid var(--border-strong); outline-offset: 2px; }
.hw-input[aria-invalid="true"] { border-color: var(--color-error); background: var(--surface-error); }
.hw-input--success { border-color: var(--color-success); background: var(--surface-success); }
.hw-input:disabled { color: #8E8E8E; cursor: not-allowed; }
.hw-field-message { margin: 8px 0 0; color: var(--text-secondary); font: 13px/1.5 var(--font-primary); }
.hw-field-message--error { color: var(--color-error); }
.hw-row { position: relative; padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-page); box-shadow: var(--shadow-none); }
.hw-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-row-hover); }
.hw-row--selected { border-color: var(--color-recruit-orange); background: var(--color-primary-50); }
.hw-row--closed { background: #F0F0F0; color: var(--text-muted); }
.hw-row--featured { border-left: 3px solid var(--color-recruit-orange); }
.hw-company { display: block; color: var(--text-secondary); font-weight: 700; }
.hw-jobtitle { display: block; color: var(--text-primary); font-weight: 700; text-decoration: none; word-break: keep-all; }
.hw-terms { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.hw-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-recruit-orange); color: #FFF; font-weight: 700; white-space: nowrap; }
.hw-badge--closed { background: #717171; }
.hw-badge--neutral { background: #F0F0F0; color: #555; }
.hw-badge--info { background: var(--surface-info); color: var(--color-info); }
.hw-icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; flex: 0 0 auto; }
.hw-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; border-radius: 50%; }
.hw-iconbtn:hover { background: #F0F0F0; }
.hw-iconbtn:disabled { opacity: .35; cursor: not-allowed; }
.hw-iconbtn[aria-pressed="true"] { color: var(--color-recruit-orange); background: var(--color-primary-50); }
.hw-nav { display: flex; align-items: center; gap: 32px; }
.hw-nav a { color: inherit; font-weight: 700; text-decoration: none; }
.hw-nav a:hover, .hw-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; }
.hw-filter { border-bottom: 1px solid var(--border-default); }
.hw-filter > summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-weight: 700; cursor: pointer; list-style: none; }
.hw-filter > summary::-webkit-details-marker { display: none; }
.hw-filter > summary::after { content: ''; width: 7px; height: 7px; border-right: 1px solid #717171; border-bottom: 1px solid #717171; transform: rotate(45deg); margin-right: 3px; }
.hw-filter[open] > summary::after { transform: rotate(225deg); }
.hw-option { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); cursor: pointer; }
.hw-option input { margin: 0; accent-color: var(--color-recruit-orange); }
.hw-faq { border-bottom: 1px solid var(--border-default); }
.hw-faq summary { display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-weight: 700; padding: 20px 0; }
.hw-faq summary::before { content: 'Q'; display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--color-recruit-orange); color: #FFF; }
.hw-faq p { margin: 0 0 20px 52px; line-height: 1.7; color: var(--text-secondary); }

입력은 검색어를 실제 <input>에 넣고 라벨을 연결한다. 오류 문구는 aria-describedby로 묶는다(추정). 목록 전체를 버튼 하나로 감싸지 않고 제목 링크와 관심 공고 버튼을 분리한다. 알림은 색만 바꾸지 않고 접수 마감, 등록 완료처럼 상태를 글자로 쓴다. 기본·선택·추천·마감 행 중 기본만 ⑫의 공고 목록에 쓴다.

Motion

모션 & 인터랙션

관찰 화면에서 전체 전환 시간·easing을 확정하지 못했다. 아래 값은 추정이며 공고 탐색에 방해되지 않는 범위로 한정한다. 행 hover는 색·그림자만 바뀌고 위로 뜨지 않는다. 펼침 필터는 키보드로 조작 가능한 details/summary로 구현했다.

:root {
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
}
.hw-btn, .hw-iconbtn, .hw-input { transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.hw-row { transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
@keyframes hw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hw-btn, .hw-iconbtn, .hw-input, .hw-row { transition: none; }
  .hw-btn[aria-busy="true"]::before { animation: none; }
}

⑫은 검색·필터·공고 탐색의 형태를 보는 정적 예시다. 필터 펼침과 체크박스 선택, FAQ 펼침은 기본 HTML로 동작하고, 검색 결과 변경·관심 공고 저장·실제 지원 접수는 연결하지 않았다.

Anti-patterns

안티패턴

1. `#F37321`로 UI를 모두 덮기 — CI와 목록 D-day #F17E22는 용도가 다르다. 이름과 출처를 따로 둔다. 2. 회사 로고 카드 격자로 바꾸기 — 한화인은 계열사명·직무·접수 기간을 읽는 긴 공고 행이다. 줄마다 큰 로고를 넣지 않는다. 3. 주황 그라디언트와 커다란 원을 화면 배경에 깔기 — 실제 공고 화면의 사진 띠·흰 본문·가는 구분선이 사라진다. 4. Gibson을 모든 한글 UI의 대체 서체로 쓰기 — 브랜드 영문 문구와 채용 UI의 서체 근거는 다르다. 한글 제목과 날짜는 같은 Gothic 계열을 유지한다. 5. 어두운 사진 띠를 다크 모드의 근거로 삼기 — 공식 전환 또는 다크 토큰을 확인하기 전에는 라이트 한 가지로 기록한다.

Sources

출처

Hanwha (한화) 이름과 로고는 각 권리자의 상표입니다.