SkillLens / 부품 갤러리디자인 연구 / 부품 살펴보기
명확하게 보고,
빠르게 결정하다.
실제 제품 UI에 적용할 기본 부품과 데이터 표현을 검토하는 갤러리입니다. 아래 요소를 직접 눌러 상태와 반응을 확인할 수 있습니다.
버튼
행동의 우선순위를 시각적으로 구분합니다.
한 화면에는 주 행동을 하나만 둡니다. 비활성 상태도 읽을 수 있는 대비를 유지합니다.
A · 검정B · 보라
주 버튼 색상은 아직 확정하지 않았습니다. 같은 문구와 크기로 실제 화면에서 비교합니다.
입력
라벨, 값, 안내를 분리합니다.
조직에서 사용하는 직무명을 입력해 주세요.
선택과 전환
상태가 바뀌어도 컨트롤 크기는 유지됩니다.
전체 스킬을 확인하고 있어요.
상태 표시
색상과 텍스트를 함께 사용합니다.
검토 완료확인 필요미진단변경 제안
미진단은 스킬이 없다는 뜻이 아닙니다. 진단 데이터가 아직 없는 상태로 구분합니다.
스킬 항목
레벨과 분류를 짧게 읽습니다.
데이터 분석하드 스킬 · 필수
문제 구조화소프트 스킬 · 필수
실험 설계하드 스킬 · 확장
레벨 막대는 예시 표현입니다. 실제 행동 기준과 레벨 설명을 함께 제공해야 합니다.
조직 데이터 표
밀도 높은 관리 작업은 장식보다 정렬과 비교를 우선합니다.
| 구성원 | 직무 | 진단 상태 | 스킬 수 | 상태 |
|---|---|---|---|---|
김김서연 | 서비스 기획자 | 완료 | 18 | 검토 완료 |
이이도윤 | 데이터 분석가 | 진행 중 | 12 | 확인 필요 |
박박지우 | 서비스 기획자 | 미진단 | — | 미진단 |
핵심 지표
질문 하나에 표현 하나
68/ 100 · 예시 점수
예시 수치이며 실제 SRS 산식이나 제품 데이터가 아닙니다.
브랜드와 데이터의 강약
브랜드는 강하게, 실제 작업은 차분하게.
작업 화면
진단스킬 검토
스킬과 요구레벨을 확인해요.
총 18개 스킬 · 예시 데이터
상태 알림
문제와 다음 행동을 같은 자리에서 알려줍니다.
저장했어요.변경한 스킬 구성이 반영됐어요.
확인이 필요해요.요구레벨이 설정되지 않은 스킬이 2개 있어요.
파일을 읽지 못했어요.엑셀 파일 형식과 첫 번째 시트의 내용을 확인해 주세요.
조직 이름을 입력해 주세요.
확인 대화상자
결과가 되돌릴 수 없을 때만 확인을 요청합니다.
진단 결과를 확정할까요?
확정한 결과는 개인 결과와 조직 통계에 반영돼요.
상세 서랍
목록을 떠나지 않고 선택한 항목의 근거를 확인합니다.
고객 문제 분석솔루션 제안협상
선택한 스킬고객 문제 분석
고객의 상황과 요구를 파악하고 핵심 문제를 구조화하는 스킬입니다.
현재 Lv. 2요구 Lv. 3
요구레벨 확인불러오기와 빈 상태
데이터가 없는 경우에도 다음 행동을 알려줍니다.
◌
아직 진단 결과가 없어요.진단을 마치면 스킬별 결과를 확인할 수 있어요.
상태 설계 원칙
부품마다 같은 상태 이름과 같은 의미를 사용합니다.
기본첫 진입의 기준 상태
호버마우스가 올라간 상태
선택현재 선택된 항목
키보드 초점키보드 이동 위치
비활성현재 사용할 수 없음
오류입력 또는 처리 실패
불러오는 중결과를 기다리는 상태
빈 상태아직 데이터가 없음
진단 결과를 확정할까요?
확정하면 현재 검토 결과가 개인 결과와 조직 통계에 반영돼요. 이 시안에서는 실제 데이터가 변경되지 않습니다.