---
title: SkillLens 디자인 벤치마킹 분석
status: proposed
owner: design-research
updated: 2026-11-10
---

# SkillLens 디자인 벤치마킹 분석

## 1. 벤치마킹 방식

기존 SkillLens 디자인 시스템을 정답이나 상위 기준으로 보지 않습니다. 기존 시스템, 외부 디자인 시스템, 상용 제품, 데이터 시각화 사례, 구현 기술을 같은 평가표로 비교합니다.

평가 기준은 다음과 같습니다.

1. **제품 가치 적합성:** Skill Intelligence Platform의 본질을 잘 표현하는가?
2. **시각적 차별성:** 기억에 남는 독자적인 시각 언어가 있는가?
3. **정보 명료성:** 복잡한 데이터를 빠르게 이해할 수 있는가?
4. **사용 효율:** 반복 업무를 방해하지 않는가?
5. **확장성:** 여러 기업, 직무, 스킬, 인원 규모에서 유지되는가?
6. **접근성과 성능:** 모바일, 키보드, 움직임 줄이기, 저사양 기기에서 안정적인가?

평가 결과는 다음 네 가지로 나눕니다.

- **채택:** 원칙이나 자산을 그대로 가져올 가치가 있음.
- **변형 채택:** 취지는 가져오되 SkillLens에 맞게 바꿈.
- **보류:** 시각적 가능성은 있으나 사용성이나 근거를 더 확인해야 함.
- **제외:** 브랜드 모방, 데이터 왜곡, 과한 복잡성 등으로 맞지 않음.

## 2. 비교 결과 요약

| 대상 | 강점 | 한계 또는 주의점 | 판단 |
|---|---|---|---|
| 기존 SkillLens 디자인 시스템 | 한글 콘텐츠 규칙, 렌즈 로고, 색 대비, 부품과 반응형 규칙, 모션 접근성 | 시각적 표현의 범위가 좁고 렌즈 중심 모션만 정의. 모든 화면의 레이아웃 리듬과 복합 데이터 장면이 충분히 다뤄지지 않음 | 선택적으로 채택 |
| Toss 브랜드 리소스 | 로고, 심볼, 모노, 로고 모션, 3D 자산을 별도 관리. 브랜드 자산의 일관성 | 금융 브랜드의 특정 컬러와 형태를 SkillLens에 그대로 옮길 이유는 없음 | 자산 관리 원칙 채택 |
| Linear 2026 UI 리프레시 | 공통 위치의 일관성, 탐색 장치의 시각적 후퇴, 정보 밀도와 작업 영역의 초점 | 어두운 테마나 작은 라벨을 그대로 복제하면 SkillLens의 밝은 광학적 정체성과 충돌 | 정보 위계와 일관성 채택 |
| Atlassian Motion | 의미 기반 모션 토큰, 잦은 동작과 드문 장면의 구분, 감속과 접근성 | 모든 제품의 리듬과 시간이 동일해야 하는 것은 아님 | 모션 설계 방법 채택 |
| Apple HIG Motion | 사용자의 기대와 동작에 맞는 피드백, 짧고 정확한 모션, 움직임 선택권 | 플랫폼별 기본 동작과 웹 구현은 구분 필요 | 원칙 채택 |
| IBM Carbon Data Visualization | 범주형, 순차형, 발산형 팔레트의 의미 구분 | 제품의 브랜드 그래픽과 데이터 팔레트는 별도 관리 필요 | 데이터 색상 원칙 채택 |
| GOV.UK Question Pages | 한 화면의 한 질문, 짧은 보조 설명, 입력 맥락 명확화 | 고밀도 기업 관리 화면을 전부 한 질문씩 나누면 비효율적일 수 있음 | 온보딩 입력 원칙으로 변형 채택 |
| NN/g 양식·점진적 공개 | 불필요한 입력 제거, 자동화, 단순화, 고급 옵션의 후순위 공개 | 단계 분할이 과해지면 오히려 반복 탐색과 왕복이 늘 수 있음 | 입력 최소화와 선택적 공개 채택 |
| Spline | 인터랙티브 3D 제작과 웹 임베드 | 씬이 무겁거나 여러 개면 성능 저하 | 브랜드 씬 제작 도구로 제한 채택 |
| Motion | 레이아웃 변화와 공유 요소 전환, React와의 연결 | 전체 화면을 모든 상태에서 움직이면 복잡성과 재렌더링을 키울 수 있음 | 제품 UI 상태 전환의 우선 후보 |
| GSAP | 정교한 타임라인과 스크롤 기반 연출, 반응형 조건 | 작은 버튼 상태와 단순 목록에까지 쓰면 과도한 도구가 됨 | 서사형 장면에서만 선택 사용 |
| ESCO와 O*NET | 직무와 스킬을 구조화하는 참조 데이터와 분류 체계 | 원천 분류를 그대로 SkillLens의 정본으로 간주하면 안 됨 | 데이터 출처와 매핑 구조의 참고 |

## 3. 기존 SkillLens 시스템에서 가져올 것과 가져오지 않을 것

기존 시스템도 하나의 벤치마크입니다. 현재의 모든 규칙을 유지하거나 모두 폐기하지 않습니다.

| 항목 | 기존 상태 | 결정 | 이유 |
|---|---|---|---|
| 렌즈 로고 SVG | 8판 원본을 기준으로 한 단일 마크 | 채택 | 브랜드 연속성을 유지. 3D 자산은 로고의 변형이 아닌 별도 브랜드 오브젝트로 제작 |
| 한국어 해요체 | 콘텐츠 원칙에 정리 | 채택 | 사용자에게 일관된 목소리를 제공 |
| 불필요한 영문 문구 제한 | 영문 태그라인과 라벨 예시가 일부 존재 | 강화 | 제품 화면의 장식용 영문을 제거. 공식 명칭과 약어만 필요한 곳에 사용 |
| Pretendard | 기존 기본 서체 | 우선 채택 | 한글 가독성과 기존 자산 호환. 새 서체 후보는 시각 비교 후 결정 |
| 13px 미만 글자 금지 | 기존 기준은 작은 캡션 12px까지 허용 | 강화 | 새 UI에서는 기본 보조 글자 14px, 밀집 데이터의 최소 13px로 제한 |
| 보라·라임·시안·산호 | 기존 브랜드 팔레트 | 변형 채택 | 보라 중심을 유지하고 시안은 광학적 보조색, 라임은 작은 그래픽 포인트, 산호는 변화 표시로 제한 |
| 주 버튼 검정 | 기존 시스템 규칙 | 변형 채택 | 주 행동과 선택 상태의 위계를 분리. 실제 화면에서 색상과 대비 검증 |
| 유리 효과는 프레임 중심 | 기존 시스템 제한 | 변형 채택 | 작업 화면의 폼과 표에는 유리를 쓰지 않되, 브랜드 장면과 주요 데이터 오브젝트는 3D 재질을 허용 |
| 화면당 한 초점 | 기존 시스템 | 채택 | 큰 그래픽, 제목, 행동이 경쟁하지 않게 함 |
| 카드 안 카드 금지 | 기존 시스템 | 채택 | 중첩 상자 대신 여백, 제목, 구분선 사용 |
| 8판의 동일한 Shell 구조 | 기존 온보딩의 공통 틀 | 보류 | 진행 위치와 CTA는 일관되게 유지하되, 모든 단계의 본문 레이아웃까지 똑같이 만들지는 않음 |
| 8판의 렌즈 중심 모션 | 입구·로딩·마침 중심 | 확장 채택 | 렌즈 외에도 데이터 관계, 결과 변화, 화면 전환에 모션 언어를 추가 |
| 흐림 효과 금지 | 기존 시스템 | 기본 채택 | 텍스트와 핵심 정보는 흐리지 않음. 광학적 배경의 빛 번짐은 텍스트와 분리된 비정보 장식에서만 사용 |
| 라이트 우선 | 기존 제품 화면 기준 | 채택 | 이번 시스템은 Light를 기본으로 검수. Dark는 별도 대비 검수 전까지 적용하지 않음 |

### 중요한 구분

기존 로고를 그대로 사용한다고 해서 기존 디자인 시스템의 모든 시각 규칙이 자동으로 유지되는 것은 아닙니다.

반대로 새 3D 장면을 만든다고 해서 로고를 새로 그리거나 비율과 색을 바꾸는 것도 아닙니다. 로고는 정본 자산으로 유지하고, 로고와 독립적인 3D 브랜드 오브젝트를 별도 제작합니다.

## 4. 브랜드 벤치마킹

### Toss: 브랜드 자산을 체계적으로 분리

공식 브랜드 리소스 센터는 시그니처, 심볼, 모노 로고, 로고 모션과 3D 관련 자산을 구분합니다. 동시에 로고 변형, 임의 효과, 임의 그라데이션, 가독성을 떨어뜨리는 배경 사용 등을 금지합니다.

- 공식 자료: [Toss Brand Resource Center](https://brand.toss.im/)

**채택할 것**

- 로고와 브랜드 오브젝트를 다른 자산으로 관리
- 로고 모션을 별도 원본으로 유지
- 정지 이미지와 움직이는 자산의 사용 목적 구분
- 배경과 로고의 대비를 먼저 검수

**가져오지 않을 것**

- Toss Blue나 다른 브랜드의 고유 3D 아이콘 스타일을 그대로 복사
- SkillLens 렌즈를 회전시키거나 재질·색을 임의로 바꿔 새 로고처럼 사용

### Linear: 복잡한 제품일수록 시각적 초점을 엄격하게

Linear는 2026년 3월 리프레시에서 프로젝트, 이슈, 문서 등 여러 화면의 헤더와 보기 제어 위치를 일관되게 만들고, 탐색 영역의 시각적 강도를 낮춰 작업 영역에 집중하도록 개선했습니다.

- 공식 글: [A calmer interface for a product in motion](https://linear.app/now/behind-the-latest-design-refresh)
- 공식 변경 기록: [Linear UI refresh, March 12, 2026](https://linear.app/changelog/2026-03-12-ui-refresh)

**채택할 것**

- 반복되는 조작 위치와 정보 위계의 일관성
- 탐색 장치와 보조 정보가 주 작업을 압도하지 않도록 조정
- 화면이 복잡해질수록 장식이 아니라 정보의 구조를 정리

**가져오지 않을 것**

- Linear의 다크 화면, 작은 타이포그래피, 특정 보라색 스타일을 그대로 복제
- 모든 데이터 화면을 Linear와 같은 밀도로 구성

## 5. 모션 벤치마킹

### Atlassian: 사용 빈도에 따른 모션 강도

Atlassian의 모션 가이드는 자주 쓰는 호버와 버튼은 50~150ms 수준으로 빠르게 반응하고, 패널과 모달은 150~400ms 전환을 사용합니다. 온보딩과 같은 드문 브랜드 장면에는 더 표현적인 모션을 허용하되, 하나의 시선 초점을 유지하고 불필요한 기다림을 만들지 말라고 안내합니다.

- 공식 가이드: [Atlassian Motion](https://atlassian.design/foundations/motion)

**채택할 것**

- 모션의 이유, 시간, 감속 곡선, 변화 속성을 함께 정의
- 반복 작업은 짧고 즉각적으로
- 진입, 스킬 구조 생성, 주요 완료 장면은 더 큰 연출 허용
- 움직임을 꺼도 제품이 완전히 작동하도록 설계

### Apple: 상호작용과 예상을 연결하는 모션

Apple HIG는 움직임이 사용자의 동작과 기대에 맞고 짧고 정확해야 한다고 설명합니다. 반복적으로 수행하는 UI 상호작용에서는 불필요한 모션을 피하고 사용자가 움직임을 끌 수 있도록 안내합니다.

- 공식 가이드: [Apple HIG Motion](https://developer.apple.com/design/human-interface-guidelines/motion)

**채택할 것**

- 모션이 상태, 피드백, 공간적 연속성을 설명해야 함
- 사용자가 직접 시작한 동작의 결과가 자연스럽게 이어져야 함
- 모션을 취소하거나 줄일 수 있어야 함

## 6. 레이아웃과 입력 벤치마킹

### GOV.UK와 NN/g: 입력은 줄이고 질문은 명확하게

GOV.UK는 한 화면에서 하나의 질문에 집중하도록 권하며, 보조 설명을 짧게 유지합니다. NN/g는 양식의 부담을 줄이기 위해 불필요한 항목을 제거하고, 자동화할 수 있는 것은 자동화한 뒤, 남은 입력을 단순화하라고 권합니다.

- [GOV.UK Question Pages](https://design-system.service.gov.uk/patterns/question-pages/)
- [NN/g Four Principles to Reduce Cognitive Load in Forms](https://www.nngroup.com/articles/4-principles-reduce-cognitive-load/)
- [NN/g Progressive Disclosure](https://www.nngroup.com/articles/progressive-disclosure/)

**채택할 것**

- 화면의 목적을 질문 또는 결과 하나로 정리
- 자동 조회가 가능한 정보를 다시 묻지 않음
- 정보 입력과 고급 설정을 구분
- 설명을 줄이고 필드 자체의 이름을 명확하게 함

**수정해서 적용할 것**

SkillLens는 회사, 목적, 직무, 스킬, 명단을 순서대로 준비해야 합니다. 모든 화면을 무조건 한 질문 한 입력으로 쪼개지는 않습니다. 서로 함께 비교해야 하는 항목은 같은 화면에 두고, 목적이 다른 작업은 분리합니다.

## 7. 데이터 시각화 벤치마킹

### Carbon: 데이터의 의미에 따라 색상 체계를 구분

Carbon은 범주를 구분하는 색상, 크고 작음을 표현하는 순차형 색상, 기준보다 낮거나 높은 차이를 표현하는 발산형 색상을 구분합니다.

- 공식 가이드: [Carbon Data Visualization Color Palettes](https://www.carbondesignsystem.com/building-blocks/data-visualization/color-palettes)

**채택할 것**

- 카테고리, 크기, 기준 대비 차이에 서로 다른 색상 체계 사용
- 범례와 텍스트를 함께 제공
- 색상만으로 의미를 전달하지 않음
- 동일한 시각화에서 같은 의미는 같은 색상으로 유지

### 네트워크 시각화: 관계를 보여 주는 것과 관계를 만들어 내는 것은 다름

네트워크 그래프는 실제 관계를 발견하는 데 적합하지만 선이 많아지면 오히려 읽기 어려워질 수 있습니다. 일부 복잡한 관계에서는 행렬 방식이 더 효과적일 수 있다는 연구가 있습니다.

- [The State of the Art in Multilayer Network Visualization](https://doi.org/10.1111/cgf.13610)
- [Graph Visualization Complexity Survey](https://doi.org/10.1016/j.visinf.2018.12.006)
- [Flourish Network Graph Overview](https://helpcenter.flourish.studio/hc/en-us/articles/8761553784719-Network-graph-an-overview)

**채택할 것**

- 관계가 확인된 데이터만 연결
- 현재 초점인 노드와 주변 관계를 강조
- 관련 없는 선은 시각적 방해가 되지 않도록 약하게 표현하거나 숨김
- 전체 관계가 복잡하면 행렬, 히트맵, 목록으로 전환
- 노드와 선을 누르면 관계의 설명과 근거를 보여 줌

## 8. 3D 제작과 구현 기술 벤치마킹

### Spline: 브랜드 씬 제작

Spline은 웹에서 3D 모델, 재질, 조명, 카메라와 상호작용을 제작하고, 웹 컴포넌트나 코드로 내보낼 수 있습니다.

- [Spline for Web](https://spline.design/web)
- [Spline Performance Optimization](https://docs.spline.design/exporting-your-scene/how-to-optimize-your-scene)

**채택:** 브랜드 진입이나 주요 장면의 3D 에셋 제작, 소수의 인터랙티브 씬.

**제한:** 모든 화면에 3D 씬을 임베드하지 않습니다. 하나의 페이지에 여러 개의 복잡한 씬을 두지 않고, 로딩이 늦거나 지원되지 않는 경우 정적 이미지로 대체합니다.

### Motion: 실제 제품 상태의 연속성

Motion은 React 컴포넌트의 위치와 크기가 바뀔 때 레이아웃을 연결하고, 서로 다른 UI 사이에서 공유 요소가 이어지는 전환을 제공합니다.

- [Motion Layout Animations](https://motion.dev/docs/react-layout-animations)
- [Motion Performance](https://motion.dev/docs/performance)
- [Motion Reduced Motion](https://motion.dev/docs/react-use-reduced-motion)

**채택:** 카드의 재배치, 필터 결과의 변화, 패널 확장, 선택된 요소의 화면 간 이동.

**제한:** 페이지 전체를 통째로 교체하는 애니메이션을 기본 방식으로 삼지 않습니다. 실제 데이터 상태를 바꾸고 변경된 요소만 전환합니다.

### GSAP: 장면 단위 연출

GSAP은 복잡한 순서와 타임라인, 스크롤에 연결된 장면을 만들고, `matchMedia`로 화면 크기와 움직임 선호에 맞는 애니메이션을 분기할 수 있습니다.

- [GSAP matchMedia](https://gsap.com/docs/v3/GSAP/gsap.matchMedia/)

**채택:** 첫 진입, 스킬 구조가 형성되는 장면, 스크롤 기반 브랜드 장면.

**제한:** 기본 UI 상태와 개별 버튼까지 GSAP으로 제어하지 않습니다. Motion, Rive, GSAP을 같은 UI 요소에 중복 적용하지 않습니다.

## 9. 벤치마킹에서 뽑은 설계 규칙

| 결정 | 근거 | SkillLens에 적용하는 방법 |
|---|---|---|
| 로고와 3D 브랜드 오브젝트를 분리 | Toss 공식 브랜드 가이드 | 로고 SVG는 원형 유지, 별도 렌즈 장면과 그래픽 에셋 제작 |
| 공통 인터페이스 위치의 일관성 | Linear 2026 리프레시 | 진행 위치, 이전과 다음, 입력 라벨의 일관성 유지 |
| 주 작업과 보조 탐색의 시각적 위계 | Linear | 보조 정보는 후퇴시키고 현재 결정과 결과를 강조 |
| 모션을 사용 빈도에 따라 설계 | Atlassian, Apple | 반복 조작은 빠르게, 주요 장면은 강하게 |
| 색상은 데이터 의미에 맞춰 사용 | Carbon | 범주형, 순차형, 발산형 팔레트 분리 |
| 입력 전의 인지 부담을 줄임 | NN/g, GOV.UK | 불필요한 입력과 설명을 제거하고 자동화 |
| 관계망의 혼잡을 통제 | 네트워크 시각화 연구 | 국소 그래프와 히트맵, 행렬, 목록을 혼합 |
| 3D 장면 수를 제한 | Spline | 브랜드 장면에 집중하고 성능에 따라 정적 대체 |

## 10. 참고 자료의 한계와 사용법

- 시각적 영감 사이트의 인기나 수상 여부는 사용성의 증거가 아닙니다.
- Dribbble, Behance, Pinterest, Awwwards는 레이아웃과 재질, 모션 레퍼런스를 찾는 자료로 사용하되 제품 규칙을 그대로 가져오지 않습니다.
- 컨설팅 보고서, 설문, 현장 실험, 학술 리뷰는 근거의 종류와 한계를 구분합니다.
- 라이브러리 문서는 구현 가능성을 설명하지만 어떤 애니메이션이 제품에 필요한지 결정해 주지 않습니다.
- 기존 SkillLens 디자인 시스템도 동일하게 평가합니다. 유지할 규칙은 근거와 이유가 확인된 것만 남깁니다.

이 분석의 결과는 다음 문서인 [지능형 디자인 시스템](02-intelligence-design-system.md)에 반영합니다.


## 11. 기존 SkillLens 컴포넌트 실제 화면 점검

기존 디자인 시스템은 문서 규칙뿐 아니라 실제 `preview.html`도 표본 확인했습니다. 아래 내용은 전체 54개 컴포넌트의 전수 시각 검수가 아니라, 대표 작업 화면과 데이터 부품의 렌더링을 확인한 결과입니다.

| 기존 컴포넌트 | 화면에서 확인한 특징 | 새 시스템의 판단 |
|---|---|---|
| `AdminShell` | 240px 길잡이, 60px 상단 바, 본문 최대 1,200px, 400px 우측 서랍, 명령 팔레트와 저장한 보기 | **구조 채택.** 관리자 화면의 탐색과 상세 패턴은 강점. 새 화면은 여백과 제목 위계를 강화하되 패널 구조를 무조건 새로 만들지 않음 |
| `Button` | 검정 주 버튼, 흰 보조 버튼, 작은 크기와 상태별 스타일 | **위계 채택, 색상 재검증.** 검정 주 버튼은 행동 위계가 명확함. 보라 주 버튼은 브랜드 일관성 면에서 유리하지만 실제 대비와 화면 집중도를 비교해야 함 |
| `Completion` | 렌즈를 중심으로 한 큰 완료 장면, 3D에 가까운 광학 효과 | **장면 원칙 채택, 오브젝트 확장.** 공식 렌즈 SVG는 그대로 두고 독립적인 광학 오브젝트를 별도 제작 |
| `ScoreBreakdown` | SRS 총점, 네 구성 요소 막대, 목표선과 기준 인원 | **조직 결과에서 유지 검토.** 개인 결과에 동일한 네 막대를 무조건 복제하지 않고, 지표의 의미와 공개 범위에 따라 필요한 만큼만 노출 |
| `DataTable` | 선택 행, 확인 필요 행, 전체 선택의 부분 상태, 좁은 밀도 | **상태 설계 채택, 테이블 역할 분리.** 단순 목록과 고밀도 작업 표를 같은 치수로 만들지 않음 |
| `Heatmap` | 스킬을 행으로, 평균 레벨을 셀로 표시. 포커스 시 근거와 다음 행동을 제공. 관리자 기준 소수 인원도 숨기지 않음 | **데이터 의미 채택.** 색만으로 구분하지 않고 미진단과 0명을 분리. 실제 데이터가 있는 경우에만 그래프를 노출 |

### 11.1 시안에서 반영한 구체 결정

- 새 제품 화면에도 기존 관리자 작업 틀의 왼쪽 탐색 레일과 상단 현재 위치를 유지했습니다.
- 관리자 작업 레일은 기존 240px를 기준으로 삼고, 좁은 화면에서는 별도 반응형 규칙으로 접습니다.
- 개인 결과는 SRS 점수의 중복 그래프를 피하고, 스킬별 요구레벨과 진단 상태를 별도 행으로 읽게 합니다.
- 진단하지 않은 스킬은 0으로 채우지 않고 빗금과 '미진단'이라는 텍스트로 표시합니다.
- 관리자 검토는 기존 서랍 패턴을 참고하되, 검토 목록과 상세 근거를 나란히 둬 비교와 결정의 흐름을 짧게 만듭니다.
- 대표 화면에서 검정과 보라 주 버튼을 같은 문구·크기로 비교한 뒤, 검정 주 버튼을 기본값으로 채택했습니다. 보라는 선택 상태와 핵심 데이터, 브랜드 강조에 집중합니다.

기존 시스템의 강점은 이미 정리된 관리자 정보 구조와 상태 표현입니다. 새 디자인은 이를 폐기하지 않고, 브랜드 장면의 차별성과 제품 화면의 위계를 더해 가는 방향입니다.