Designing with Direction

화면을 그리기 전에,
문제를 다시 정의합니다.

정보는 이미 충분했습니다. 없던 건 결정할 수 있는 구조였습니다.
제품 디자인 5년. 채용·HR 제품을 만들며, 정의에서 멈추지 않고 코드까지 직접 만듭니다.

신건주
UI/UX Designer · 5년차
Domain채용 · HR · B2B SaaS — 마이다스인에서 세 개의 제품.
Method정보를 더하지 않고, 읽는 순서와 판단 기준을 다시 설계합니다.
Range디자인 → 프론트엔드 코드 → AI가 읽는 디자인 시스템.
About Me이력 · 역량 · 해온 일

안녕하세요,
UI/UX 디자이너 신건주입니다.

Careers 5년차
2023.01 – 현재
UI/UX Designer @ 마이다스인
2021.08 – 2022.05
UI/UX Designer @ 고리
2020.06 – 2021.07
UI/UX Designer @ 티오더스테이
Skills
  • UI/UX Design웹·모바일 화면 구조, 사용자 플로우, 상태 및 상세 UI 설계
  • Design System컴포넌트 구조 설계, 디자인 토큰·가이드 제작
  • PrototypeFigma 기반 인터랙션·클릭형 프로토타입 제작
  • MotionUI 비주얼·아이콘·간단한 AE 모션 시안 제작
  • Collaboration기획·개발 협업, 요구사항 정리 및 흐름 정의
Tools
FigmaFigma PrototypeAfter Effects IllustratorPhotoshop LottieFilesJiraConfluence
Projects

마이다스인 AI 기반 채용·평가 및 매칭 플랫폼

  • inAX 디자인 시스템 구축 · 토큰·컴포넌트 코드 구현
  • AI 역량검사 UI 디자인 · 기업용 결과표 개선
  • 취준BTI 마케팅 캠페인 디자인 — 16만 명 참여
  • 채용 플랫폼 잡다 UI/UX 디자인 · PC·모바일 웹
  • AI 매칭 서비스 H.X UI/UX 디자인
  • 통합 브랜딩 홈페이지 디자인

고리 취미 클래스 구독·중개 서비스

  • 서비스 기획 및 UI 디자인
  • 프로토타입 제작
  • After Effects 기반 서비스 소개 영상 제작

티오더스테이 호텔 데이터 기반 객실 관리·IoT 솔루션

  • 체크아웃 리뷰 데이터를 활용한 객실별 리뷰 플랫폼 UI 제작
  • 서비스 스타일가이드 제작 및 개발팀 공유
  • 호텔 IoT 태블릿 PC UI 제작
Contents

세 가지 프로젝트를 소개합니다.

Case 01inAX Design System

디자인 시스템
구축 프로젝트

시안을 넘기는 데서 멈추지 않습니다.
토큰과 컴포넌트를 직접 코드로 구현하고, AI가 읽는 시스템을 거쳐
지켜지게 만드는 장치까지 만들었습니다.
이렇게 하자고 제가 제안했습니다.

Design System
inAX
Role토큰 설계 · 컴포넌트 구현 · 하네스Duration2026.01 – 진행 중BuildReact·TS 67개 컴포넌트
Before이전 시스템

시스템은 있었지만, 작동하지 않았습니다.

색과 글자를 고를 기준이 없어, 같은 요소도 그리는 사람마다 달라졌습니다.

홈

오늘

2026 하반기 채용 종료
안내하기3

2

12/484발송125%

1보조 텍스트색G 60#9FA4AB

2진행 바 바탕색G 40#E7E8EA

3카드 제목글자AaB3/Medium14/18

4진행 수치글자AaB4/Medium12/16

업무 목록

오늘

2026 하반기 채용 종료
안내하기3

2

12/484발송125%

1보조 텍스트색CG 70#656A71

2진행 바 바탕색G 50#CFD1D5

3카드 제목글자AaB2/Medium16/20

4진행 수치글자AaB4/Medium_P12/20

알림 패널

오늘

2026 하반기 채용 종료
안내하기3

2

12/484발송125%

1보조 텍스트색G 50#CFD1D5

2진행 바 바탕색G 30#F4F4F5

3카드 제목글자AaB3/Medium_P14/22

4진행 수치글자AaB3/Medium14/18

Before왜 지금

이대로 두면, 새 제품에서 더 커질 문제였습니다.

화면을 짜는 AI는 눈치로 맞출 수 없고, 저는 기준을 코드까지 직접 옮길 수 있게 됐습니다.

01커지는 이유

새 제품 inAX

처음부터 쌓는 제품이었습니다. 기준 없이 시작하면 화면이 늘 때마다 값을 다시 고르게 됩니다.

inAX 화면보조 텍스트

  • A-01홈 · 인사담당자G 60
  • A-05일정 · 캘린더CG 70
  • A-06업무 · 채팅 시작G 50
  • A-09대시보드 · 채용 성과CG 70
  • A-13설정 · 에이전트G 60
  • 새 화면마다 한 번 더?

02커지는 이유

화면을 짜는 AI

사람은 옆 화면을 보고 눈치로라도 맞춥니다. AI는 이름에 없는 기준을 알 수 없어, 그중 하나를 골라 버립니다.

보조 텍스트 색으로 해줘

값 이름만 있을 때
G 60CG 70G 50셋 중 아무거나
역할 이름이 있을 때
text-subtle하나로 정해짐

03고칠 수 있는 이유

직접 구현하는 디자이너

제가 코드까지 옮길 수 있게 되면서, Figma에서 정한 이름을 넘기고 기다리지 않고 그대로 코드로 만들었습니다.

Figma 변수

Text / Neutral / Subtle#6B7280

코드

color: var(--ds-color-text-subtle);

컴포넌트 클래스

<p className="text-ds-text-subtle">

Solution 01값이 아니라 역할

먼저, 값이 아니라 역할을 정의했습니다.

같은 카드의 네 자리에, 값 대신 무엇을 위한 것인지를 이름으로 붙였습니다.

세 화면 모두 · 같은 이름

오늘

2026 하반기 채용 종료
안내하기3

2

12/484발송125%

어느 화면에서 그려도 이 카드 하나로 같습니다

자리이전 · 화면마다 고른 값이후 · 역할 이름 하나

1보조 텍스트색

G 60CG 70G 50

text-subtle#6B7280

Text요소/Neutral역할 · 생략/Subtle강도

2진행 바 바탕색

G 40G 50G 30

fill-base#F3F4F6

Fill요소/Neutral역할 · 생략/Base강도/Default상태 · 생략

3카드 제목글자

AaB3/MediumAaB2/MediumAaB3/Medium_P

AaLabel/1/Medium14/20

Label역할/1단계/Medium굵기

4진행 수치글자

AaB4/MediumAaB4/Medium_PAaB3/Medium

AaCaption/1/Medium12/16

Caption역할/1단계/Medium굵기

Solution 0267개 컴포넌트 직접 구현

그 이름으로, 작동하는 컴포넌트를 만들었습니다.

Figma에서 고르는 속성 그대로, 코드에서도 같은 부품을 씁니다.

inAX Design SystemDesign
저장120 × 48

Button

TypePrimary
SizeL
StateDefault
Left Icon
Right Icon
ReviewActions.tsx예시

12<Button

13variant="primary"

14size="lg"

15// 기본 상태는 적지 않음

16>

17저장

18</Button>

Solution 03-1지켜지지 않은 자리

AI로 화면을 짜 보니, 만들어 둔 부품 대신 하드코딩이 나왔습니다.

색을 직접 적거나 있는 부품을 새로 만들어도 오류가 나지 않아, 눈으로는 알아차리기 어려웠습니다.

2026 채용 성과2026 하반기 공채inAX 화면 재현

채용 확정전사 ▾2

46명3+12

4월5월6월7월8월9월

평균 채용 소요주 평균

38일−9

4월5월6월7월8월9월

합격 46명 전원 입사 확정 · 최근 3년 중 가장 높습니다원본 데이터성과 보고자료 만들기1

✓빌드 성공·오류 0·경고 0

1색을 하드코딩가장 많음

background: "#3B82F6"

시스템 #2563EB직접 적은 #3B82F6

버튼 파랑이 시스템 색과 거의 같아 아무도 모릅니다. 값이라서, 브랜드 색을 바꾸면 이 버튼만 옛 색으로 남습니다.

‘맞는 토큰이 없다’던 색 34종 중 26종이 이미 있는 색과 거의 같았습니다

2있는 부품을 새로 만듦

<select>…</select>

옆 블록의 ‘주 평균 ▾’와 같은 부품이 있는데, 여기만 브라우저 기본 모양으로 따로 놉니다.

3없는 이름을 지어냄

className="text-ds-text-muted"

정의에 없는 이름이라 단위 ‘명’의 흐린 회색이 조용히 빠지고 검정으로 나옵니다.

Solution 03-2지켜지게 만드는 장치

그래서, 지켜지게 만드는 장치를 붙였습니다.

AI가 일하는 흐름의 네 곳에서, 틀린 것을 그 자리에서 잡아 줍니다.

01짜기 전알려 줌

쓸 수 있는 부품을 먼저 보여 줍니다

부품 67개

저장Button
전사▾Select
진행 중Chip
3Badge
Switch
IconButton

02저장할 때짚어 줌

틀린 곳에 바로 표시합니다. 막지는 않습니다

채용 확정전사 ▾2

46명3+12

성과 보고자료 만들기1

1시스템에 없는 색이에요

2Select 부품이 있어요

3없는 이름이라 회색이 빠졌어요

표시만 하고 저장은 그대로 됩니다

03올리기 전막음

화면이 깨지는 것만 막고, 나머지는 경고로 둡니다

이대로는 올릴 수 없어요

고쳐야 할 곳 2확인할 곳 1

나중에고치러 가기

2.4%최근 250번 올린 것 중
막혔을 건 6번뿐이었습니다

04모아서다음 근거

우회한 자리를 모아 다음 작업의 근거로 씁니다

다음에 만들 것

토큰이 필요한 색예외로 넘긴 색이 쌓이면 후보로
자주 손으로 만든 부품우회한 자리가 다음 부품의 수요로
만들어지면 01 부품 목록에 다시 들어갑니다
Impact기준으로 작동하는 시스템

이제 무엇을 쓸지, 시스템에서 찾습니다.

디자이너와 개발자, AI가 같은 이름으로 말하고 같은 시스템에서 부품을 찾습니다.

‘맞는 토큰이 없다’던 색의
76%는 이미 있던 색이었습니다

한 화면의 색 34종을 토큰 118색과 대조했더니 26종이 거의 같은 색이었습니다.
새로 만들 게 아니라, 값을 이름으로 바꾸면 되는 색이었습니다.

34종토큰이 없다던 색

26종이미 있던 색과 거의 같음

지키게 하면서도
막힌 건 250번 중 6번(2.4%)

최근 커밋 250개를 장치에 다시 돌려 본 결과입니다.
막아도 작업 흐름을 거의 방해하지 않았습니다.

부품 67개 · 토큰 533개를
디자이너가 직접 코드로 옮겼습니다

Figma 이름과 코드 이름이 같아, ‘이 회색’ 대신 이름으로 말합니다.
옮겨 적는 단계가 없습니다.

Now & Next지금과 다음

부품까지 만들었고, 다음은 화면입니다.

부품이 없어 손으로 만든 자리를 모아, 가장 많이 나온 것부터 다음 부품으로 만듭니다.

01부품이 없을 때 남기는 표시

52// ds-gap: 기한 셀 없음 — span 으로 손조립. 업무 목록

53<span className="…">D-3</span>

표시를 모아 기록표로

필요한 부품지금 대안나온 횟수상태

1속성 패널 행손조립4미착수

2아바타 + 이름 셀손조립 span3미착수

3기한 셀손조립 span2미착수

02그래서 다음에 만들 부품모양 예시

1속성 패널 행라벨 + 아이콘 + 값

담당채용 에이전트

주기매주 월요일 09:00

사람 확인안내 발송 전 1회

2아바타 + 이름 셀

김
김서준플랫폼개발본부
이
이하은데이터본부

3기한 셀표시 문자열 + 마감 배지

9/25 마감D-3
10/8 마감D-16

지금 남은 것화면에 직접 적힌 색 410곳 · 더 늘지는 않음편집 중 안내는 일부 도구에만빌드 서버에는 아직 연결 전

Retrospect함께 쓰는 언어

결국, 모두가 함께 쓰는
언어를 만들었습니다.

아쉬운 점

막으면 방해가 될 거라고 짐작만 하고 미뤘습니다

색 값을 직접 적은 코드는 한동안 경고만 하고 막지 않았습니다. 맞는 토큰이 없는 색이 많아 막으면 작업이 멈출 거라고 봤기 때문입니다. 최근 커밋 250개를 다시 돌려 보고서야 막혔을 건 6개뿐이고, 없다던 색도 대부분 이미 있던 색이라는 걸 알았습니다. 처음부터 재 봤다면 더 일찍 지킬 수 있었습니다.

이름은 맞췄지만, 값은 한곳에 모으지 못했습니다

Figma와 코드는 같은 이름을 쓰지만 값은 따로 관리됩니다. 그래서 한쪽만 바뀐 자리가 생겼고, 지금도 Figma의 브랜드 토큰은 이전 초록으로 남아 코드의 파랑과 다릅니다. 이름을 맞추는 것만으로는 두 곳이 같아지지 않았습니다.

배운 점

시스템은 팀이 함께 쓰는 언어입니다

구조가 잘 짜여 있어도 다른 사람이 이해하지 못하면 쓰이지 않았습니다. 프론트엔드 개발자와 구현 가능성을 검토하고 네이밍 규칙을 맞춘 것이, 시스템이 실제로 작동하는 데 가장 큰 영향을 줬습니다.

사람에게는 알려 주면 되지만, AI에게는 장치가 필요했습니다

팀 전체가 화면 코드를 AI로 짜면서 기준을 지키는 방식이 달라졌습니다. 사람은 한 번 알려 주면 다음부터 지키지만, AI는 모르는 것을 오류 없이 그냥 지나갑니다. 문서를 더 쓰는 대신 짜는 흐름 안에서 잡도록 바꿨고, 모두 막지 않고 화면이 깨지는 것만 막아야 장치가 계속 쓰인다는 것도 이때 배웠습니다.

Case 02정보 구조 재설계

AI 역량검사
요약 결과표 프로젝트

해석이 필요한 결과표에서, 바로 읽히는 결과표로
기존 결과표는 A4 9장 분량의 상세한 정보를 담고 있었지만,
"핵심만 빠르게 파악하고 싶다"는 고객 요청이 반복되었습니다.
첫 화면에서 인재를 판단할 수 있는 요약 결과표를 설계했습니다.

역검
AI 역량검사 요약 결과표
Role초안 설계 · UX 구조 설계 · 최종 디자인 리드Duration2023.12 – 2024.02Team기획 1 · 디자인 3 · 개발 5PlatformWEB · B2B
AboutAI 역량검사

이력서 밖의 것을
측정합니다.

AI 역량검사는 이력서만으로는 알기 어려운
업무 방식, 사고 패턴, 협업 태도를 보여주는 채용 검사입니다.
같은 스펙이라도 일하는 방식은 사람마다 다르기 때문에,
면접 전에 그 차이를 먼저 확인하려고 씁니다.

전형 위치
서류 → 역량검사 → 면접 → 최종 합격서류 다음, 면접 전에 봅니다
측정 방식
설문형 · 게임형 검사문장에 6점 척도로 답하고, 짧은 게임 과제를 풉니다
결과
지원자별 종합 결과표인사담당자가 이 결과표를 읽고 면접 대상을 고릅니다
설문형 검사 화면 — 문장을 읽고 6점 척도로 응답게임형 검사 화면 — 가위바위보 과제
Context현장의 목소리

읽는 데
시간이 걸렸습니다.

검사는 해마다 정교해졌지만, 결과를 읽는 일은
인사담당자에게 또 하나의 업무가 되었습니다.
결과표를 쓰려면 따로 배워야 했고, 설명 없이는
쓸 수 없는 결과표는 곧 제품의 진입 장벽이었습니다.

사업팀
“미팅마다 결과 해석에만 15–20분씩 써요”고객사 미팅에서 결과표를 설명하는 시간
CS팀
“결과표 해석 문의가 계속 반복돼요”같은 질문이 계속 들어옵니다
고객사
“핵심만 빠르게 파악하고 싶어요”결과표를 받아 보는 기업 인사담당자
Attempt설명을 더해본 첫 시도

설명을 더해도,
문의는 줄지 않았습니다.

처음엔 설명을 더하면 해결될 거라 생각했습니다.
각 지표의 의미와 읽는 법을 정리한 해석 가이드를
만들어 배포했지만, 50페이지가 넘는 문서가 되었고
배포 뒤에도 해석 문의는 줄지 않았습니다.

담은 내용
지표 용어 · 읽는 순서 · 등급 해석 기준S~C 등급이 실제로 어떤 수준인지까지
배포 뒤
해석 문의는 그대로였습니다결과표를 읽으려고 50페이지를 먼저 읽는 사람은 없었습니다
다시 본 것
설명이 아니라 결과표의 구조더 긴 설명 대신, 읽자마자 이해되는 형태가 필요했습니다
Redefine다시 결과표를 들여다보니

결과표엔
읽을 순서가 없었습니다.

설명을 더하는 대신 결과표 자체를 다시 봤습니다.
원래 인쇄용으로 만든 A4 9장짜리 문서를
화면에 그대로 옮겨 온 것이었고, 무엇보다
읽을 우선순위가 없었습니다.

우선순위
종합 점수·직무 적합도·세부 역량이 같은 비중무엇부터 봐야 하는지 결과표가 말해주지 않았습니다
분량
A4 9장을 모두 봐야 판단 가능한 지원자를 보려면 문서 전체를 넘겨야 했습니다
포맷
인쇄용 레이아웃을 화면에 그대로본문 12–13px — 화면에서 읽기엔 작은 글자
Solution 01판단 순서대로 배치

가장 궁금한 정보를
맨 위에 놓았습니다.

인사담당자가 결과표에서 가장 먼저 찾는 건
전체 지원자 중 어디에 있는가였습니다.
영업팀 설문과 사업팀 피드백으로 이 순서를 확인하고,
위치 → 적합도 → 선호도 순으로 위에서부터 놓았습니다.

1 · 위치
등급 분포 위 지원자의 위치“전체 중 어디에 있나요?”
2 · 적합도
직무 적합도와 핵심역량 점수“우리 직무에 맞나요?”
3 · 선호도
기업 선택 우선순위“우리 회사를 원할까요?”
Solution 02훑어보면 파악되는 표현

색만 봐도
수준이 가늠됩니다.

순서를 바꾸는 것만으로는 부족했습니다.
화면마다 제각각이던 색을 등급 분포 기준으로 묶어
S부터 C까지 한 가지 색 체계로 통일했습니다.
훑어보는 단계에서는 숫자를 읽지 않아도 됩니다.

역량검사 등급 분포 · 색은 이 구간을 뜻합니다
CC+B-BB+A-AA+S상위 1~4%
종합 등급 S 카드
상위 예측 지수 — 초록
Solution 03기업별 맞춤 구성

기업마다
중요한 건 다릅니다.

채용 기준은 기업마다 다릅니다.
같은 데이터라도 보는 관점이 달라야 할 때가 있어,
결과표를 위젯 단위로 나누고 순서를 바꿔
기업별 템플릿으로 저장할 수 있게 했습니다.

위젯
결과를 독립된 위젯으로 분리필요한 위젯만 골라 담습니다
배치
끌어다 놓아 순서를 바꿈기업이 중요하게 보는 항목을 위로 올립니다
저장
기업별 템플릿으로 저장같은 데이터, 다른 강조
Impact결과로 남은 변화

설명을 덜 하게
되었습니다.

요약 결과표는 기업 회원 대상 만족도 조사에서
8개 콘텐츠 중 1위를 기록했습니다.
사업팀은 미팅에서 해석 설명 시간이 절반 이하로 줄었고,
CS팀은 해석 문의가 줄었다고 전했습니다.

설명 시간
해석에만 15–20분 → 절반 이하로사업팀 전언 · 별도 측정은 하지 않았습니다
만족도
8개 콘텐츠 중 1위기업 회원 대상 콘텐츠 만족도 조사 · 기획팀
분량
A4 9장 → 요약 1화면필요한 판단 근거만 한 화면에
개선된 요약 결과표가 실무면접 화면에서 쓰이는 모습
1위기업 회원 만족도
8개 콘텐츠 중
Retrospect문서가 아니라 구조

더 많은 정보가 아니라,
더 나은 구조였습니다.

아쉬운 점

처음부터 측정할 지표를 정하지 않았습니다

결과표 확인 시간, 해석 문의 건수를 추적했다면 개선 효과를 숫자로 보여줄 수 있었습니다. 개편 뒤에 남은 근거가 사업팀과 CS팀의 전언뿐이라, 무엇이 얼마나 나아졌는지 말하기 어려웠습니다. 지금도 이 부분이 제 약한 자리입니다.

요약과 상세가 서로 다른 구조로 남았습니다

요약 결과표는 새로 만들었지만 종합결과표 9장은 그대로 남았습니다. 요약에서 판단하고 더 깊이 보려는 담당자는 전혀 다른 구조의 문서로 넘어가야 합니다. 요약과 상세가 같은 설계 원칙 위에 있어야 경험이 이어진다는 것을, 요약만 바꿔 놓고서야 알았습니다.

배운 점

설명을 더하기 전에 구조를 먼저 봅니다

50페이지가 넘는 가이드를 만들어 배포했지만 문의는 줄지 않았습니다. 읽는 사람이 몰라서가 아니라, 결과표가 무엇부터 보라고 말해주지 않았던 것입니다. 우선순위를 다시 짜고 핵심을 맨 위에 두자 설명할 일이 줄었습니다. 그 뒤로는 설명을 덧붙이기 전에 구조부터 의심합니다.

문제를 먼저 꺼내면 설계에 참여할 수 있습니다

처음부터 맡은 과제는 아니었습니다. VOC를 정리하다 같은 불만이 반복되는 것을 보고, 그 패턴을 묶어 기획팀에 개선 방향을 먼저 제안했습니다. 요청을 기다렸다면 화면을 다듬는 데서 멈췄겠지만, 먼저 꺼낸 덕분에 무엇을 풀지 정하는 단계부터 함께할 수 있었습니다.

Case 03매칭 경험 재설계

AI 인재 매칭
솔루션 H.X

신뢰할 수 있는 매칭 경험 설계
채용 시장의 변화로 기업이 직접 인재를 찾아야 하는 시대가 되었습니다.
기존 매칭 서비스의 한계를 분석하고,
납득할 수 있는 매칭 경험을 새롭게 설계했습니다.

H.X
AI 인재 매칭 솔루션
Role문제 정의 · 화면 설계 · UIUX 디자인Duration2025.04 – 2025.10Team기획 2 · 디자인 1 · 개발 6PlatformWEB · B2B
Background기업이 찾아 나서는 시대

기업이 인재를 찾아야 하는 시대가 되었습니다.

공채는 줄고 수시·경력 채용이 늘면서, 기업이 직접 찾아 나서는 방식이 커졌습니다.

공채가 사라지고 있습니다

기업 10곳 중 6곳이 수시채용만 진행합니다

60.6%수시채용만 실시
정기공채 + 수시채용32.2%정기공채만7.2%

출처: 한국경영자총협회, 2024

인재를 직접 찾습니다

경력직일수록 헤드헌팅·다이렉트 소싱을 더 씁니다

88.183.7채용공고61.281.9헤드헌팅42.451.2다이렉트 소싱
신입경력

출처: 고용노동부·한국고용정보원, 2024

경험이 가장 중요합니다

직무 관련 경험을 보는 기업이 해마다 늘었습니다

2023년 대비 +23.2%p
58.4%202374.6%202481.6%2025

출처: 한국경영자총협회, 2023–2025

Background이미 나와 있던 답들

그래서, 매칭 서비스가 여럿 나왔습니다.

여섯 곳을 하나씩 뜯어봤는데, 모두 조건에 맞는 사람을 찾아주는 데서 멈춰 있었습니다.

사람인인재풀 탐색

구직 활동 데이터로 인재를 추천

사람인 인재풀 탐색 화면

잡코리아원픽

공고와 이력서를 비교해 적합 인재를 추천

잡코리아 원픽 화면

리멤버인재검색

명함을 바탕으로 경력직을 찾아 스카웃

리멤버 인재검색 화면

원티드인재풀 탐색

매칭 데이터를 학습해 합격 확률이 높은 인재를 추천

원티드 인재풀 탐색 화면

볼트엑스인재검색

경력과 연봉이 인증된 인재를 추천

볼트엑스 인재검색 화면

우리 서비스My Work

역량검사 결과를 바탕으로 직무에 맞는 인재를 매칭

개편 전 매칭 — 조건에 맞는 인재를 나열한 목록
Problem매칭이라는 이름의 검색 도구

매칭은 이름뿐,
사용자가 다 했습니다.

기존 채용 플랫폼들도 매칭을 내세웠지만,
실제로는 조건에 맞는 사람을 나열하는 데서 멈췄습니다.
왜 이 사람인지는 알려주지 않아서, 담당자가
프로필을 하나씩 열어 직접 판단해야 했습니다.

근거
추천 30명, 왜 이 사람들인지 모름적합도 점수는 있어도 그 이유가 없다 · 고객사
탐색
한 명씩 열어보고 닫기를 반복"한 시간이 금방" — 탐색 자체가 노동 · 내부 인사담당자
필터
서비스의 기준 ≠ 담당자의 기준"결국 제가 다 판단해야 하면 매칭인지 검색인지" · 내부 인사담당자
인재 선택
개편 전 — 매칭 조건을 필터로 설정하는 화면개편 전 — 적합도 S 인재를 카드로 나열한 목록개편 전 — 인재 프로필을 한 명씩 열어 보는 화면
Redefine더 적게, 더 분명하게

많이 보여주지 않고,
이유를 보여줬습니다.

기존 서비스는 조건에 맞는 후보를 최대한 많이 보여줬고,
그중 맞는 사람을 찾는 건 담당자의 몫이었습니다.
더 적더라도 왜 맞는지 납득할 수 있다면,
그게 더 좋은 매칭이라고 봤습니다.

원칙 1
정말 맞는 사람만 추천수십 명을 나열하지 않고 적합한 인재만 보여줍니다
원칙 2
점수가 아니라 근거를 제공적합도 점수와 함께 왜 그 점수인지를 보여줍니다
지표
매칭 요청률을 핵심 지표로납득하면 요청한다고 보고, 요청으로 확인하려 했습니다
개편 전 — 적합도 S 인재 30명을 카드로 나열
개편 전조건에 맞는 30명을 나열 · 이유 없음
H.X 채팅 시작 화면 — 찾는 인재를 말로 설명
H.X말로 설명하면 맞는 사람만 · 왜 맞는지 근거와 함께
Solution 02이력서 밖의 조건

이력서 밖의 조건도
기준에 넣었습니다.

이력서에는 경력과 스펙만 적혀 있습니다.
하지만 채용을 가르는 건 협업 방식이나
근무 조건처럼 이력서 밖의 것일 때가 많아,
이 조건들까지 매칭의 기준으로 끌어왔습니다.

정성 역량
협업력 · 문제해결력 · 주도성이력서에 적히지 않는 것을 기준에 넣습니다
실질 조건
근무형태 · 연봉 · 위치를 미리 비교만나기 전에 어긋나는 조건을 거릅니다
연봉
직무 분석에만 쓰고 구직자에게는 비공개조건 불일치 거절은 줄이고 인재 경험은 지켰습니다
1말로 입력2조건 정리3인재 추천4근거로 판단매칭 요청
인재상 입력 — 문제해결능력·성장가능성·소통능력 카드근무지와 연봉 범위 입력 — 연봉은 직무 분석에만 쓰고 구직자에게 노출하지 않음
Solution 03매칭 리포트

왜 이 사람인지를
리포트에 담았습니다.

점수 하나로는 왜 이 사람인지 알 수 없었습니다.
그래서 판단에 필요한 근거를 세 관점으로 나눠 담았고,
순서는 담당자가 후보 앞에서 실제로 묻는
질문의 흐름을 그대로 따랐습니다.

자기소개
“어떤 사람인가요?”자기소개와 사진으로 첫인상과 표현 방식을 봅니다
인재FIT
“우리 회사에 맞을까요?”기업의 인재상과 후보의 핵심 역량을 비교합니다
직무FIT
“직무를 잘할 수 있을까요?”직무 설명서와 경력을 연결해 실무 경험을 보여줍니다
Solution 04점수를 문장으로

AI의 판단을, 담당자의 언어로 옮겼습니다.

역량검사 결과를 기업이 적어둔 인재상과 연결된 문장으로 바꾸고, 근거를 직접 확인한 뒤 정하게 했습니다.

AS-IS점수로 보여줬습니다92점이 무슨 뜻인지는 담당자가 해석

개편 전 역량 리포트 — 종합 등급 A+, 종합 점수 92점, 3등처럼 점수로 보여준다숫자뿐 — 뜻은 담당자가 해석

TO-BE경험으로 번역했습니다왜 맞는지를 실제 경험 문장으로

H.X 매칭 리포트 — 핵심 역량 TOP 3를 경험 문장으로 보여준다핵심 역량 TOP 3 — 실제 경험 문장
Impact첫 클릭이 바뀌었다

리포트부터
열어봅니다.

출시 후 내부 인사담당자를 대상으로
사용 경험 인터뷰를 했습니다.
공통으로 나온 변화는 프로필을 열면
이력서보다 리포트부터 본다는 것이었습니다.

전
이력서를 한 장씩 해석탐색 자체가 노동이던 구조
후
매칭 리포트의 근거부터 확인"이력서보다 매칭 리포트를 먼저 보게 돼요"
의미
탐색이 판단으로 바뀜인터뷰 기반 — 정량 지표는 측정 전
개편 전인재를 열면 이력서(프로필)부터
개편 전 인재 상세 — 첫 탭이 프로필
H.X인재를 열면 매칭 리포트부터
H.X 인재 상세 — 첫 탭이 매칭 리포트

이력서보다 매칭 리포트를
먼저 보게 돼요

내부 인사담당자 · 사용 경험 인터뷰
Honest인재풀이라는 한계

수익으로는
연결되지 못했습니다.

담당자의 탐색 방식은 바뀌었지만, 성과로 이어지지 못했습니다.
원인은 인재풀이었습니다. 경쟁 서비스보다 규모가 작고
신입 위주라, 기업이 찾는 경력직이 충분하지 않았습니다.
셋을 추천해도 원하는 사람이 아니면 의미가 없었습니다.

결과
수익 연결까지 닿지 못함탐색 방식은 바뀌었지만 비즈니스 성과는 따라오지 않았습니다
원인
인재풀이 작고 신입 위주기업이 찾는 경력직이 충분하지 않았습니다
한계
알고리즘 · UX는 풀었지만 인재풀은 화면 밖디자인으로 해결할 수 있는 문제가 아니었습니다
Honest다르게 접근

부족한 인재풀,
다르게 접근했습니다.

인재풀을 늘리는 게 가장 좋은 해결책이지만 시간이 걸립니다.
그래서 실제 인재를 보여주기 전에, 특징이 다른
가상 인재 셋을 먼저 보여주고 선호를 물었습니다.
그 답에 맞춰 지금 있는 풀 안에서 인재를 추천합니다.

기존
실제 인재 3명을 바로 추천풀이 부족하면 원하는 사람이 아닌 경우가 많았습니다
바꾼 방식
가상 인재 3명으로 선호부터 확인"좋다 · 애매하다 · 싫다"로 원하는 인재상을 먼저 파악합니다
지금
출시해 운영 중인 방식효과는 아직 측정 전입니다
H.X 새 접근 — 예시 인재 세 명에 마음에 들어요 · 고민돼요 · 아쉬워요로 답하는 화면실제 인재보다 먼저 — 가상 인재 셋으로 선호 확인
Retrospect생태계 전체를 보다

매칭은 UX만으로
완성되지 않았습니다.

아쉬운 점

좋은 경험이 성과로 이어지지 않았습니다

담당자의 탐색 방식은 바뀌었고, 프로필을 열면 이력서보다 매칭 리포트부터 보는 흐름도 만들었습니다. 하지만 인재풀이 신입 위주라 기업이 찾는 경력직이 부족했고, 셋을 추천해도 원하는 사람이 아니면 요청으로 이어지지 않았습니다.

변화를 숫자로 확인하지 못했습니다

매칭 요청률을 핵심 지표로 정했지만, 출시 뒤 확인한 변화는 내부 인사담당자 인터뷰가 전부였습니다. 리포트가 요청을 늘렸는지, 인재풀 때문에 막혔는지를 가를 근거가 없어 다음 결정도 인터뷰에 기대야 했습니다.

배운 점

화면 밖의 문제도 설계의 일부입니다

이 프로젝트 전까지는 좋은 플로우와 명확한 정보 구조, 직관적인 인터페이스만 잘 만들면 된다고 생각했습니다. 하지만 매칭은 알고리즘, UX, 인재풀, 비즈니스 모델이 함께 맞물려야 작동했고, 하나가 비면 나머지를 잘 만들어도 서비스가 돌지 않았습니다.

한계를 알면 풀 수 있는 방법이 보입니다

인재풀은 디자인으로 늘릴 수 없었지만, 주어진 풀 안에서 추천의 순서는 바꿀 수 있었습니다. 가상 인재 셋으로 선호부터 묻는 새 접근도 디자인이 맡을 부분과 맡을 수 없는 부분을 먼저 가른 뒤에 나왔습니다. 이제는 화면을 그리기 전에 그 경계부터 확인합니다.

Thank you

문제를 다시 정의하는 일,
계속하겠습니다.

읽어주셔서 감사합니다. 더 나은 결정을 돕는 디자인으로 이어가겠습니다.

신건주
UI/UX Designer
Emailkunjoo0621@gmail.comCareer마이다스인 · 고리 · 티오더스테이