Internal System

Internal System

UI/UX

UI/UX

Consulting

Consulting

글로벌 EPC 전문기업 삼성E&A의 전사 시스템 사용성 진단부터 표준 체계 설계, 거버넌스 구축까지

내부 업무 시스템의 UIUX 표준을 사용자 중심으로 재수립한 프로젝트입니다.


심층 진단을 통해 표면적으로 드러나지 않는 근본적인 문제를 파악하고, 전사 UIUX 기준인

Guide 2.0을 새롭게 재설계하기까지. 누가 써도 같은 기준이 나오는 UIUX 표준과

살아 움직이는 거버넌스 기반을 수립한 6개월 간의 여정을 소개합니다.

글로벌 EPC 전문기업 삼성E&A의 전사 시스템 사용성 진단부터 표준 체계 설계, 거버넌스 구축까지 내부 업무 시스템의 UIUX 표준을 사용자 중심으로 재수립한 프로젝트입니다.


심층 진단을 통해 표면적으로 드러나지 않는 근본적인 문제를 파악하고, 전사 UIUX 기준인 Guide 2.0을 새롭게 재설계하기까지. 누가 써도 같은 기준이 나오는 UIUX 표준과 살아 움직이는 거버넌스 기반을 수립한 6개월 간의 여정을 소개합니다.

Background

삼성E&A는 플랜트·EPC 엔지니어링 분야의 글로벌 선도 기업으로, 수십 개의 전사 시스템을 기반으로 수천 명의 임직원이 매일 업무를 수행하고 있습니다.

우리는 이번 프로젝트를 통해 삼성E&A가 지향하는 디지털 전환(DT)의 가치를 내부 시스템에 투영하고, 임직원의 업무 경험을

한 단계 진화시키기 위해 현업 PI 부서와 깊이 있게 협력했습니다.


기존 시스템이 축적해 온 기능적 자산을 존중하되, 이를 사용자 중심으로 재해석하여 새로운 표준을 모색하는 관점에서 접근했습니다.

특히 업무의 시스템 의존도가 높은 엔지니어링 업무 환경에서 임직원이 시스템 조작에 에너지를 소모하지 않고 본연의 과업에만 몰입할 수 있도록

[실무자의 업무 여정 진단]에서부터 [전사 UI/UX 표준 수립], [거버넌스 구축]까지의 통합 전략을 설계했습니다.


이를 통해 내부 시스템이 '업무 리드타임을 획기적으로 줄이고 신속한 의사결정을 이끄는 전사적 디지털 자산이자, 임직원의 완벽한 파트너’

진화하는 것을 최종 목표로 삼았습니다.

Requirements

임직원의 업무 몰입을 돕는 사용자 중심 UX 구현

전사 시스템에 즉시 적용 가능한 실효성 있는 UIUX 표준 수립

기술적 확장성과 유지보수 효율을 고려한 거버넌스 구축

Key Deliverables

UX 지침 및 UI 패턴 가이드: 업무 흐름 중심의 UX 원칙과 화면 유형별 실무 가이드

디자인 파운데이션 & 컴포넌트: 일관된 시각 언어와 재사용 가능한 UI 컴포넌트 체계

삼성E&A의 글로벌 표준에 부합하는 일관된 디자인 언어 확립

UX 상위 정책부터 컴포넌트 & UI 패턴별 코드까지 단일 플랫폼(2.0)화

지속 가능한 거버넌스 체계 수립

Background

삼성E&A는 플랜트·EPC 엔지니어링 분야의 글로벌 선도 기업으로, 수십 개의 전사 시스템을 기반으로 수천 명의 임직원이 매일 업무를 수행하고 있습니다.

우리는 이번 프로젝트를 통해 삼성E&A가 지향하는 디지털 전환(DT)의 가치를 내부 시스템에 투영하고, 임직원의 업무 경험을 한 단계 진화시키기 위해 현업 PI 부서와 깊이 있게 협력했습니다.


기존 시스템이 축적해 온 기능적 자산을 존중하되, 이를 사용자 중심으로 재해석하여 새로운 표준을 모색하는 관점에서 접근했습니다.

특히 업무의 시스템 의존도가 높은 엔지니어링 업무 환경에서 임직원이 시스템 조작에 에너지를 소모하지 않고 본연의 과업에만 몰입할 수 있도록 [실무자의 업무 여정 진단]에서부터 [전사 UI/UX 표준 수립], [거버넌스 구축]까지의 통합 전략을 설계했습니다.


이를 통해 내부 시스템이 '업무 리드타임을 획기적으로 줄이고 신속한 의사결정을 이끄는 전사적 디지털 자산이자, 임직원의 완벽한 파트너’로 진화하는 것을 최종 목표로 삼았습니다.

Requirements

임직원의 업무 몰입을 돕는 사용자 중심 UX 구현

전사 시스템에 즉시 적용 가능한 실효성 있는 UIUX 표준 수립

기술적 확장성과 유지보수 효율을 고려한 거버넌스 구축

Key Deliverables

UX 지침 및 UI 패턴 가이드: 업무 흐름 중심의 UX 원칙과 화면 유형별 실무 가이드

디자인 파운데이션 & 컴포넌트: 일관된 시각 언어와 재사용 가능한 UI 컴포넌트 체계

삼성E&A의 글로벌 표준에 부합하는 일관된 디자인 언어 확립

UX 상위 정책부터 컴포넌트 & UI 패턴별 코드까지 단일 플랫폼(2.0)화

지속 가능한 거버넌스 체계 수립

Initial Data Diagnosis

Initial Data Diagnosis

프로젝트 초기, 삼성E&A PI 부서에서 제공해주신 내부 만족도 조사 결과와 VoC(Voice of Customer) 자료는 훌륭한 나침반이 되었습니다. 압도적인 시스템 규모와 다루는 데이터의 양만큼 임직원들의 업무 의존도는 매우 높은 상태였고, 전사의 모든 업무는 시스템을 통해 이루어지고 있었습니다. 표면에 드러난 수치만으로는 설명되지 않는 무언가가 있었고, 그것을 함께 진단해 나가는 것이 이 프로젝트의 출발점이었습니다.

보이지 않는 리소스 손실 누적

시스템의 높은 중요도 대비 이를 능숙하게 다루는 인원은 40% 이하에 머물러 있었습니다. 의존도와 숙련도의 격차는 곧 동료에게 물어보며 해결하는 문화가 고착되고, 시스템과 별도로 작업하는 이중업무 등의 손실을 반복시키는 요인임을 유추할 수 있었습니다.

초기 시스템 구축 시부터 개발의 효율과 용이성을 조금 더 비중있게 고려해 왔지만, 이제는 실제 임직원의 사용성과 업무 최적화를 최우선으로 두고 패러다임을 전환해야 할 시점임을 함께 인지하고 나아갈 방향을 함께 모색하는 데에 의견이 모아졌습니다.

만족도 조사+VoC 분석 결과 #2

심미성

용이성

편리성

용이성과 편리성 중심의 한계

기초자료에서 확인된 또 다른 특이점은 정돈된 ‘심미성’에 비해, 실무자들이 Task를 완수하며 체감하는 ‘조작 용이성’과 ‘업무 편리성’ 지표가 전 시스템 공통으로 낮은 점수를 기록하고 있다는 점이었습니다.

복잡한 비즈니스 로직이 얽힌 실제 운영 환경에서 사용자가 마주하는 '맥락적 사용 경험(Contextual Usability)의 난이도'가 매우 높으며, 시스템의 높은 전략적 중요성에 비해 현장 임직원들의 실무 몰입을 방해하는 구조적 병목이 존재하고 있음을 시사했습니다. 전사적인 UIUX 표준 가이드라인의 전면 개편 및 실무형 구조화가 왜 시급한지 증명해주는 지표였습니다.

심층 인터뷰, 전문가 UIUX 진단을 통한

현장의 근본적 문제점과 개선방향 도출

임직원 VoC를 토대로 2주에 걸친 임직원들과의 심층 인터뷰, 전문가 정밀 진단을 통해

실제 사용 현장에서 발생하는 문제를 좀더 깊숙히 들여다봤습니다.

#1

기초 진단 데이터 확보를 위한 임직원 심층 인터뷰

시스템을 가장 잘 아는 숙련자일수록 체화된 불편함을 인지하지 못하곤 합니다. 우리는 숫자로 드러나는 정량적 지표 이면에

숨겨진 '임직원들의 숨은 행동 맥락’을 포착하기 위해 가장 적합한 방식인 반구조화 인터뷰(Semi-Structured Interview)를 진행했습니다.

6개 주요 시스템을 대상으로 총 22개 세션의 다각적 사용자 그룹(G1.일반사용자, G2.파워유저, G3.운영개발 담당자) 심층 인터뷰(In-depth Interview) 진행

복잡한 전문가 시스템의 근본적 사용성 문제는 5~6명의 표적 인터뷰만으로 핵심 이슈의 80% 이상을 식별 가능

업무 여정별 질문 설계

사용자의 고충을 구체적인 행동 맥락으로 해체하는 인터뷰 질문 설계를 통해, 일반적인 설문조사로는 포착하기 어려운 실제 업무 흐름과 여정별 비효율 지점을 입체적으로 진단할 수 있었습니다.

숙련자의 관성에 가려진 경험적 오류 추적

시스템 밖에서 일어나는 '그림자 노동' 발견

숨겨진 비용(Hidden Cost) 추적

프로세스의 동선과 단절 지점 파악

현 거버넌스의 한계 검증과 개선점 도출

#2

주요 Task별 Pain Point 전문가 정밀 진단

심층 인터뷰를 통해 임직원들의 현장 목소리를 청취한 후, 실무 시나리오를 기반으로 수치와 텍스트 이면에 숨겨진
구조적 결함을 포착하기 위한 '전문가 주도 정밀 진단'을 수행했습니다.

Diagnosis Framework

정밀 진단을 위한 분석 프레임워크

컴포넌트의 공통화나 타이포그래피의 일관성만 추구하는 통상적인 디자인시스템은, 복잡한 로직의 거대한 엔지니어링 시스템 앞에서 쉽게 무너질 수 있습니다.

우리는 업무 시스템 분석 프레임워크를 수립해 ‘임직원이 시스템 조작에 에너지를 쏟지 않고, 본연의 고부가가치 과업에 온전히 집중할 수 있는 환경’을 위한

내부 시스템 UX의 최상위 기준을 수립하는데 초점을 맞췄습니다.

기초 체계를 잡는 공통 표준, 직무별 최단 경로를 확보하는 기능 효율성, 가이드가 살아 움직이게 만드는 거버넌스 각 분석 축별로 시스템 표준부터

실무 단위의 생산성, 운영 거버넌스까지 총 100여 개 이상의 세부 기준을 바탕으로 정밀 검증을 수행해, 앞선 기초 진단의 자료들과 함께

비로소 진짜 문제점을 입체적으로 파악할 수 있었습니다.

심층 인터뷰, 전문가 UIUX 진단을 통한

현장의 근본적 문제점과 개선방향 도출

임직원 VoC를 토대로 2주에 걸친 임직원들과의 심층 인터뷰, 전문가 정밀 진단을 통해

실제 사용 현장에서 발생하는 문제를 좀더 깊숙히 들여다봤습니다.

#1

기초 진단 데이터 확보를 위한 임직원 심층 인터뷰

시스템을 가장 잘 아는 숙련자일수록 체화된 불편함을 인지하지 못하곤 합니다. 우리는 숫자로 드러나는 정량적 지표 이면에

숨겨진 '임직원들의 숨은 행동 맥락’을 포착하기 위해 가장 적합한 방식인 반구조화 인터뷰(Semi-Structured Interview)를 진행했습니다.

6개 주요 시스템을 대상으로 총 22개 세션의 다각적 사용자 그룹(G1.일반사용자, G2.파워유저, G3.운영개발 담당자) 심층 인터뷰(In-depth Interview) 진행

복잡한 전문가 시스템의 근본적 사용성 문제는 5~6명의 표적 인터뷰만으로 핵심 이슈의 80% 이상을 식별 가능

업무 여정별 질문 설계

사용자의 고충을 구체적인 행동 맥락으로 해체하는 인터뷰 질문 설계를 통해, 일반적인 설문조사로는 포착하기 어려운 실제 업무 흐름과 여정별 비효율 지점을 입체적으로 진단할 수 있었습니다.

숙련자의 관성에 가려진 경험적 오류 추적

시스템 밖에서 일어나는 '그림자 노동' 발견

숨겨진 비용(Hidden Cost) 추적

프로세스의 동선과 단절 지점 파악

현 거버넌스의 한계 검증과 개선점 도출

#2

주요 Task별 Pain Point 전문가 정밀 진단

심층 인터뷰를 통해 임직원들의 현장 목소리를 청취한 후, 실무 시나리오를 기반으로 수치와 텍스트 이면에 숨겨진
구조적 결함을 포착하기 위한 '전문가 주도 정밀 진단'을 수행했습니다.

Diagnosis Framework

정밀 진단을 위한 분석 프레임워크

컴포넌트의 공통화나 타이포그래피의 일관성만 추구하는 통상적인 디자인시스템은, 복잡한 로직의 거대한 엔지니어링 시스템 앞에서 쉽게 무너질 수 있습니다.

우리는 업무 시스템 분석 프레임워크를 수립해 ‘임직원이 시스템 조작에 에너지를 쏟지 않고, 본연의 고부가가치 과업에 온전히 집중할 수 있는 환경’을 위한

내부 시스템 UX의 최상위 기준을 수립하는데 초점을 맞췄습니다.

기초 체계를 잡는 공통 표준, 직무별 최단 경로를 확보하는 기능 효율성, 가이드가 살아 움직이게 만드는 거버넌스 각 분석 축별로 시스템 표준부터

실무 단위의 생산성, 운영 거버넌스까지 총 100여 개 이상의 세부 기준을 바탕으로 정밀 검증을 수행해, 앞선 기초 진단의 자료들과 함께

비로소 진짜 문제점을 입체적으로 파악할 수 있었습니다.

심층 인터뷰, 전문가 UIUX 진단을 통한 현장의 근본적 문제점과 개선방향 도출

임직원 VoC를 토대로 2주에 걸친 임직원들과의 심층 인터뷰, 전문가 정밀 진단을 통해 실제 사용 현장에서 발생하는 문제를 좀더 깊숙히 들여다봤습니다.

#1

기초 진단 데이터 확보를 위한 임직원 심층 인터뷰

시스템을 가장 잘 아는 숙련자일수록 체화된 불편함을 인지하지 못하곤 합니다.

우리는 숫자로 드러나는 정량적 지표 이면에 숨겨진 '임직원들의 숨은 행동 맥락’을 포착하기 위해 가장 적합한 방식인 반구조화 인터뷰(Semi-Structured Interview)를 진행했습니다.

6개 주요 시스템을 대상으로 총 22개 세션의 다각적 사용자 그룹(G1.일반사용자, G2.파워유저, G3.운영개발 담당자) 심층 인터뷰(In-depth Interview) 진행

복잡한 전문가 시스템의 근본적 사용성 문제는 5~6명의 표적 인터뷰만으로 핵심 이슈의 80% 이상을 식별 가능

업무 여정별 질문 설계

사용자의 고충을 구체적인 행동 맥락으로 해체하는 인터뷰 질문 설계를 통해, 일반적인 설문조사로는 포착하기 어려운 실제 업무 흐름과 여정별 비효율 지점을 입체적으로 진단할 수 있었습니다.

숙련자의 관성에 가려진 경험적 오류 추적

시스템 밖에서 일어나는 '그림자 노동' 발견

숨겨진 비용(Hidden Cost) 추적

프로세스의 동선과 단절 지점 파악

현 거버넌스의 한계 검증과 개선점 도출

#2

주요 Task별 Pain Point 전문가 정밀 진단

시스템을 가장 잘 아는 숙련자일수록 체화된 불편함을 인지하지 못하곤 합니다. 우리는 숫자로 드러나는 정량적 지표 이면에 숨겨진 '임직원들의 숨은 행동 맥락’을 포착하기 위해 가장 적합한 방식인 반구조화 인터뷰(Semi-Structured Interview)를 진행했습니다.

Diagnosis Framework

정밀 진단을 위한 분석 프레임워크

컴포넌트의 공통화나 타이포그래피의 일관성만 추구하는 통상적인 디자인시스템은, 복잡한 로직의 거대한 엔지니어링 시스템 앞에서 쉽게 무너질 수 있습니다.

우리는 업무 시스템 분석 프레임워크를 수립해 ‘임직원이 시스템 조작에 에너지를 쏟지 않고, 본연의 고부가가치 과업에 온전히 집중할 수 있는 환경’을 위한 내부 시스템 UX의 최상위 기준을 수립하는데 초점을 맞췄습니다.

기초 체계를 잡는 공통 표준, 직무별 최단 경로를 확보하는 기능 효율성, 가이드가 살아 움직이게 만드는 거버넌스 각 분석 축별로 시스템 표준부터 실무 단위의 생산성, 운영 거버넌스까지 총 100여 개 이상의 세부 기준을 바탕으로 정밀 검증을 수행해, 앞선 기초 진단의 자료들과 함께 비로소 진짜 문제점을 입체적으로 파악할 수 있었습니다.

심층 인터뷰, 전문가 UIUX 진단을 통한

현장의 근본적 문제점과 개선방향 도출

임직원 VoC를 토대로 2주에 걸친 임직원들과의 심층 인터뷰, 전문가 정밀 진단을 통해

실제 사용 현장에서 발생하는 문제를 좀더 깊숙히 들여다봤습니다.

#1

기초 진단 데이터 확보를 위한 임직원 심층 인터뷰

시스템을 가장 잘 아는 숙련자일수록 체화된 불편함을 인지하지 못하곤 합니다. 우리는 숫자로 드러나는 정량적 지표 이면에

숨겨진 '임직원들의 숨은 행동 맥락’을 포착하기 위해 가장 적합한 방식인 반구조화 인터뷰(Semi-Structured Interview)를 진행했습니다.

6개 주요 시스템을 대상으로 총 22개 세션의 다각적 사용자 그룹(G1.일반사용자, G2.파워유저, G3.운영개발 담당자) 심층 인터뷰(In-depth Interview) 진행

복잡한 전문가 시스템의 근본적 사용성 문제는 5~6명의 표적 인터뷰만으로 핵심 이슈의 80% 이상을 식별 가능

업무 여정별 질문 설계

사용자의 고충을 구체적인 행동 맥락으로 해체하는 인터뷰 질문 설계를 통해, 일반적인 설문조사로는 포착하기 어려운 실제 업무 흐름과 여정별 비효율 지점을 입체적으로 진단할 수 있었습니다.

숙련자의 관성에 가려진 경험적 오류 추적

시스템 밖에서 일어나는 '그림자 노동' 발견

숨겨진 비용(Hidden Cost) 추적

프로세스의 동선과 단절 지점 파악

현 거버넌스의 한계 검증과 개선점 도출

#2

주요 Task별 Pain Point 전문가 정밀 진단

심층 인터뷰를 통해 임직원들의 현장 목소리를 청취한 후, 실무 시나리오를 기반으로 수치와 텍스트 이면에

숨겨진 구조적 결함을 포착하기 위한 '전문가 주도 정밀 진단'을 수행했습니다.

Diagnosis Framework

정밀 진단을 위한 분석 프레임워크

컴포넌트의 공통화나 타이포그래피의 일관성만 추구하는 통상적인 디자인시스템은, 복잡한 로직의 거대한 엔지니어링 시스템 앞에서 쉽게 무너질 수 있습니다.

우리는 업무 시스템 분석 프레임워크를 수립해 ‘임직원이 시스템 조작에 에너지를 쏟지 않고, 본연의 고부가가치 과업에 온전히 집중할 수 있는 환경’을 위한

내부 시스템 UX의 최상위 기준을 수립하는데 초점을 맞췄습니다.

기초 체계를 잡는 공통 표준, 직무별 최단 경로를 확보하는 기능 효율성, 가이드가 살아 움직이게 만드는 거버넌스 각 분석 축별로 시스템 표준부터

실무 단위의 생산성, 운영 거버넌스까지 총 100여 개 이상의 세부 기준을 바탕으로 정밀 검증을 수행해, 앞선 기초 진단의 자료들과 함께

비로소 진짜 문제점을 입체적으로 파악할 수 있었습니다.

Core Issues :

현장의 언어로 재정의한 핵심 이슈

Core Issues :

현장의 언어로 재정의한 핵심 이슈

수천 명의 임직원이 매일 사용하는 6개 핵심 시스템의 VoC와 전문가 진단을 종합한 결과

시스템별 명칭과 UI는 달랐지만 실무자들이 직면한 본질적인 병목 현상은

몇 가지 공통적인 줄기로 집약되었고, 이를 기반으로 핵심 전략을 도출할 수 있었습니다.

수천 명의 임직원이 매일 사용하는 6개 핵심 시스템의 VoC와 전문가 진단을 종합한 결과 시스템별 명칭과 UI는 달랐지만 실무자들이 직면한 본질적인 병목 현상은 몇 가지 공통적인 줄기로 집약되었고, 이를 기반으로 핵심 전략을 도출할 수 있었습니다.

UX Objective & Key Result

UX Objective & Key Result

우리는 전사 시스템의 본질적인 역할을 재정의하고, 하나의 전제에서 다시 출발하기로 했습니다.

기존의 시스템이 '전사 모든 업무의 시스템화'와 '구현의 편의성'에 최우선 가치를 두었다면, 우리가 지향하는 ‘시스템의 본질’과 가치는

임직원이 시스템 조작에 에너지를 쏟지 않고 본연의 업무에 온전히 집중할 수 있는 최적화된 환경을 제공하는 것이었습니다. 이를 통해 전사

업무 리드타임 감소 및 미래 시스템 확장을 위한 기반을 다질 수 있다고 보았습니다.

기존의 시스템이 '전사 모든 업무의 시스템화'와 '구현의 편의성'에 최우선 가치를 두었다면, 우리가 지향하는 ‘시스템의 본질’과 가치는 임직원이 시스템 조작에 에너지를 쏟지 않고 본연의 업무에 온전히 집중할 수 있는 최적화된 환경을 제공하는 것이었습니다. 이를 통해 전사

업무 리드타임 감소 및 미래 시스템 확장을 위한 기반을 다질 수 있다고 보았습니다.

기존 패러다임

전사 모든 업무의 시스템화가 목적

개발 편의성과 구현 효율 중심적

업무 완결이 임직원의 숙련도에 좌우되는 환경

UX 지향 패러다임

임직원의 시스템 조작 에너지 최소화

본연의 업무에 온전히 집중하는 환경 제공이 목적

화면만 보고도 막힘 없이 업무가 가능한 최적의 UX

익숙해질수록 더 높은 생산성 제공

UX 패러다임의 시프트:

익숙해져야만 쓰는 시스템에서 스스로 돕는 시스템으로

사용자 경험의 본질적인 개선이 선행되지 않는 시스템 현대화는 결국 익숙한 사용자들에게 기능적인 요구사항만

추가로 충족시켜 줄 뿐, 진짜 구조적인 문제들은 해결되지 않은 채 또 다른 비효율 서비스가 구현되는 결과를 초래합니다.

우리는 '익숙해지지 않아도 시스템이 스스로 사용자의 업무를 돕고 활용도를 높일 수 있는 환경'을 구축해

발견된 구조적 문제점들을 해결하기 위한 전략적 방향을 수립했습니다.

Low Barrier, High Ceiling

High Ceiling

높은 활용의 한계치

업무 최적화를 통한 시스템 활용도의 극대화

실제 운영하는 임직원의 사용성(Usability)을 극대화하여 전사의

업무 리드타임을 감소시키고, 시스템의 활용 한계치를

높여 미래의 유연한 시스템 확장 기반을 다집니다.

Low Barrier

낮은 진입장벽

직관적인 프로세스로 진입장벽 최소화

별도의 교육이나 동료에게 묻는 업무 문화가 아닌,

화면만 보고도 누구나 즉시 직관적으로 과업을

완결할 수 있는 환경을 만듭니다.

Contextual Support

사용자 맥락형 지원 체계

조력자 역할을 하는 지능형 인터랙션

시스템의 전 영역에서 사용자 업무여정(Task Flow)을

따라가며 다음 행동(Next Action)을 선제적으로

안내하는 상시 조력 체계를 지원합니다.

UX Strategy :

패러다임 전환을 위한 5대 핵심 전략

정밀 진단한 시스템 분석결과에 따라 삼성E&A의 시스템을 관통하는 5가지 핵심 주제를 도출했습니다.

일회성 화면 개편에 그치는 대응이 아닌, 시스템의 자본과 가치를 유지하면서 전체 시스템을 관통하는

개선전략과 실행영역이 촘촘히 매핑된 실질적인 해결책을 수립하고자 하였습니다.

정밀 진단한 시스템 분석결과에 따라 삼성E&A의 시스템을 관통하는 5가지 핵심 주제를 도출했습니다.

일회성 화면 개편에 그치는 대응이 아닌, 시스템의 자본과 가치를 유지하면서 전체 시스템을 관통하는 개선전략과 실행영역이 촘촘히 매핑된 실질적인 해결책을 수립하고자 하였습니다.

From Strategy to Action

실행 영역

공통 레이아웃

공통 레이아웃

메뉴 구조

메뉴 구조

진행 상태 피드백

진행 상태 피드백

엑셀 입출력

엑셀 입출력

데이터 조회 사용성

데이터 조회 사용성

과업 달성 구조

과업 달성 구조

데이터 입력 사용성

데이터 입력 사용성

유저 가이드

유저 가이드

운영 거버넌스

운영 거버넌스

용어 표준화

용어 표준화

Prototyping & Verification

가설을 확신으로 바꾸는 실무자 검증

가설을 확신으로 바꾸는 실무자 검증

진단/분석 단계에서 도출된 핵심 5대 과제를 해결하기 위해, 업무 의존도가 가장 높은 시스템을 대상으로 개선안을 반영한

프로토타입 제작 및 실사용자 만족도 조사를 시행했습니다. 업무 몰입을 돕는 UX적 장치들을 가설에 따라 실험해보고,

실제 현장 임직원들의 선호도를 측정함으로써 향후 정립될 전사 UI/UX 표준의 객관적 근거를 확보하는 과정이었습니다.

익숙한 관성을 깨고 달성한 높은 만족도, 변화 수용성과 개선안의 실효성 확인

가설로 수립된 프로토타입의 개선 방향성을 검증하고자 시스템을 매일 사용하는 임직원 160명을 대상으로 7일간의 집중 사용자 조사를 진행했습니다.

이번 조사는 타사 평균 대비 2배 가까이 높은 참여율을 기록하며, 새로운 시스템 변화에 대한 임직원들의 뜨거운 관심과 기대를 증명했습니다.

응답 결과 응답자의 79.3%가 숙련 사용자로 구성되었음에도 성공 기준을 대폭 상회하는 평점을 기록하여, 기존의 익숙한 관성을 깨고

개선안의 실효성을 객관적으로 인정받았습니다.

참여율

타사 평균 30% 대비 1.9배↑

숙련 사용자 비율

2년 이상 사용 경험자

전체 평균 평점

통상 성공지표인 3점을 대폭 상회

최고점 항목

등록부터 승인 요청까지 메뉴 이탈 없이

이어지는 연속적 업무 흐름 통합 설계가

전 항목 중 가장 높은 점수를 기록

등록부터 승인 요청까지 메뉴 이탈 없이 이어지는 연속적 업무 흐름 통합 설계가 전 항목 중 가장 높은 점수를 기록

임직원 선호 항목 (Multi Check)

익숙한 관성을 깨고 달성한 높은 만족도,

변화 수용성과 개선안의 실효성 확인

가설로 수립된 프로토타입의 개선 방향성을 검증하고자 시스템을 매일 사용하는 임직원 160명을 대상으로 7일간의 집중 사용자 조사를 진행했습니다.

이번 조사는 타사 평균 대비 2배 가까이 높은 참여율을 기록하며, 새로운 시스템 변화에 대한 임직원들의 뜨거운 관심과 기대를 증명했습니다.

응답 결과 응답자의 79.3%가 숙련 사용자로 구성되었음에도 성공 기준을 대폭 상회하는 평점을 기록하여, 기존의 익숙한 관성을 깨고

개선안의 실효성을 객관적으로 인정받았습니다.

참여율

타사 평균 30% 대비 1.9배↑

숙련 사용자 비율

2년 이상 사용 경험자

전체 평균 평점

통상 성공지표인 3점을 대폭 상회

최고점 항목

등록부터 승인 요청까지 메뉴 이탈 없이 이어지는 연속적 업무 흐름 통합 설계가 전 항목 중 가장 높은 점수를 기록

임직원 선호 항목 (Multi Check)

2.0 Architecture

2.0 Architecture

기획부터 구현까지 누구나

주관적 판단을 배제하고 의사결정할 수 있도록

기획부터 구현까지 누구나

주관적 판단을 배제하고 의사결정할 수 있도록

Guide 2.0은 최상위 UX 지침부터 디자인 파운데이션, 컴포넌트 규정, 실무 UI 패턴,

즉시 이식이 가능한 Vue.js 퍼블리싱 소스코드가 모두 단일 플랫폼 내에서

통합 연계된 플랫폼으로 재탄생했습니다.

Guide 2.0은 최상위 UX 지침부터 디자인 파운데이션, 컴포넌트 규정, 실무 UI 패턴, 즉시 이식이 가능한 Vue.js 퍼블리싱 소스코드가 모두 단일 플랫폼 내에서 통합 연계된 플랫폼으로 재탄생했습니다.

Guide 1.0

전사시스템 일관성 확보 목적으로 구축/활용

상위 정책과의 연계 부족 및 문서-웹이 분리된 제약 존재

Guide 1.0

전사시스템 일관성 확보 목적으로 구축/활용

상위 정책과의 연계 부족 및 문서-웹이 분리된 제약 존재

Guide 2.0

상위정책(Why + When)과 실무

컴포넌트 & UI 패턴(What)이 모두 연결된 구조

Guide 2.0

상위정책(Why + When)과 실무

컴포넌트 & UI 패턴(What)이 모두 연결된 구조

2.0

2.0

UX Guideline.

UX Guideline.

전사 시스템 공통 UX 지침 신설

업무 흐름과 유형을 중심으로

Guide 2.0에서는 개별 화면의 시각적 가이드가 아닌 ‘전체 업무 흐름’‘화면 유형’을 중심으로 UX 원칙을 체계화하였습니다.

'화면에 무엇을 배치할 것인가(What)'라는 구성 요소의 디테일을 다루기 전, "왜 이 구조여야 하고, 언제 이 패턴을 써야 하는가(Why/When)"에 대한

면밀한 판단 기준을 먼저 제공함으로써 어떤 새로운 업무 화면을 만들더라도 흔들리지 않는 일관된 기준을 적용할 수 있는 기반을 마련하였습니다.

Guide 2.0에서는 개별 화면의 시각적 가이드가 아닌 ‘전체 업무 흐름’‘화면 유형’을 중심으로 UX 원칙을 체계화하였습니다.

'화면에 무엇을 배치할 것인가(What)'라는 구성 요소의 디테일을 다루기 전, "왜 이 구조여야 하고, 언제 이 패턴을 써야 하는가(Why/When)"에 대한 면밀한 판단 기준을 먼저 제공함으로써 어떤 새로운 업무 화면을 만들더라도 흔들리지 않는 일관된 기준을 적용할 수 있는 기반을 마련하였습니다.

업무의 시작부터 끝까지 도울 수 있도록.

‘업무 흐름 통합’을 최상위 원칙으로 세우다

업무의 시작부터 끝까지 도울 수 있도록.

‘업무 흐름 통합’을 최상위 원칙으로 세우다

새로운 UX 지침을 관통하는 핵심은 ‘업무 흐름의 통합’입니다. Guide 2.0에서는 새로운 화면 설계에 들어가기 전에 업무의 시작부터

끝까지 전체 Flow를 먼저 분석하고, 그 흐름이 끊기지 않고 이어지도록 화면을 배치하게 했습니다.

새로운 UX 지침을 관통하는 핵심은 ‘업무 흐름의 통합’입니다. Guide 2.0에서는 새로운 화면 설계에 들어가기 전에 업무의 시작부터 끝까지 전체 Flow를 먼저 분석하고, 그 흐름이 끊기지 않고 이어지도록 화면을 배치하게 했습니다.

각 화면 단위의 개선을 다루기 전에, 각 업무의 시작~끝까지의 각 과정을 돕는 조력자가 되기 위해 이 원칙을 가장 중심으로 세웠습니다.

새로운 화면이 필요할 때마다 업무 흐름 분석이 화면 설계보다 선행되도록 함으로써, 임직원이 메뉴를 옮겨 다니지 않고도

자신의 업무를 스스로 끝까지 처리할 수 있는 환경을 만들 수 있도록 하기 위한 2.0의 최상위 원칙입니다.

각 화면 단위의 개선을 다루기 전에, 각 업무의 시작~끝까지의 각 과정을 돕는 조력자가 되기 위해 이 원칙을 가장 중심으로 세웠습니다.

새로운 화면이 필요할 때마다 업무 흐름 분석이 화면 설계보다 선행되도록 함으로써, 임직원이 메뉴를 옮겨 다니지 않고도 자신의 업무를 스스로 끝까지 처리할 수 있는 환경을 만들 수 있도록 하기 위한 2.0의 최상위 원칙입니다.

하나의 화면 내에서 모든 후속 업무가 연결되는

‘통합형 상세’ 구조로의 변화

이를 위해 우리는 기존의 특정 정보 A의 상세를 보다가 연계된 B, C, D 정보를 보기 위해 메뉴를 이탈하던 구조를,

하나의 상세 화면 안에서 연계 정보를 통합 조회하는 통합형 상세구조로 변화시켰습니다. A라는 업무 데이터를

한 번 등록하면, 이후 그에 대한 연관 정보와 전체 프로세스를 모두 하나의 화면에서 추적하고,

다음 Action으로 이어질 수 있는 구조입니다.

이를 위해 우리는 기존의 특정 정보 A의 상세를 보다가 연계된 B, C, D 정보를 보기 위해 메뉴를 이탈하던 구조를, 하나의 상세 화면 안에서 연계 정보를 통합 조회하는 통합형 상세구조로 변화시켰습니다.

A라는 업무 데이터를 한 번 등록하면, 이후 그에 대한 연관 정보와 전체 프로세스를 모두 하나의 화면에서 추적하고, 다음 Action으로 이어질 수 있는 구조입니다.

As-is 일반 상세 구조

To-Be 통합형 상세 구조

처음 접하는 사람도 막힘 없이 업무를 완료할 수 있으며,

익숙해질수록 더 높은 생산성을 제공하는 환경을 만듭니다.

신설된 통합형 상세 페이지는 임직원이 메뉴 이동 없이 Context를 유지한 채 ‘업무의 시작부터 끝까지

전체 과정을 조감할 수 있는 통합 뷰’를 제공합니다. 임직원에게 전체 업무과정을 한 눈에 보여주고,

다음 행동은 친절하게 안내해 줍니다. 이로 인해 중복 탐색 공수를 줄이고 업무에 몰입하게 하여

의사결정 속도를 높일 수 있게 돕습니다.

신설된 통합형 상세 페이지는 임직원이 메뉴 이동 없이 Context를 유지한 채 ‘업무의 시작부터 끝까지 전체 과정을 조감할 수 있는 통합 뷰’를 제공합니다. 임직원에게 전체 업무과정을 한 눈에 보여주고, 다음 행동은 친절하게 안내해 줍니다. 이로 인해 중복 탐색 공수를 줄이고 업무에 몰입하게 하여 의사결정 속도를 높일 수 있게 돕습니다.

첫 화면 (Dashboard)

과업 중심의 첫 화면 : 진입과 동시에 행동을 유도하는 나침반

첫 화면은 임직원이 시스템에 진입했을 때 가장 먼저 마주하는 영역으로, 개인의 할 일과 주요 현황을 한눈에 조망할 수 있도록 구성하는 '과업 중심 대시보드' 정의를 상위 원칙으로 수립했습니다. 각 시스템 도메인별 최상위 중요 데이터를 효과적으로 배치하기 위해 사전에 검증된 전사 표준 위젯(Widget) UI 사용을 의무화했으며, 대시보드 내 모든 위젯은 클릭 시 상세 화면이나 업무 리스트로 즉시 연결(Deep Link)되도록 설계 지침을 선언함으로써 불필요한 메뉴 탐색 단계 자체를 원천 제거하였습니다. 실무자 개인별로 당일 처리해야 할 우선순위 과업과 다가올 업무 일정을 접속 즉시 명확히 인지시키고 최적의 실행 경로를 제안하는 나침반 역할을 수행하도록 기준을 정립했습니다.

첫 화면 (Dashboard) document 1
첫 화면 (Dashboard) document 2
첫 화면 (Dashboard) document 3
첫 화면 (Dashboard)

과업 중심의 첫 화면 : 진입과 동시에 행동을 유도하는 나침반

첫 화면은 임직원이 시스템에 진입했을 때 가장 먼저 마주하는 영역으로, 개인의 할 일과 주요 현황을 한눈에 조망할 수 있도록 구성하는 '과업 중심 대시보드' 정의를 상위 원칙으로 수립했습니다. 각 시스템 도메인별 최상위 중요 데이터를 효과적으로 배치하기 위해 사전에 검증된 전사 표준 위젯(Widget) UI 사용을 의무화했으며, 대시보드 내 모든 위젯은 클릭 시 상세 화면이나 업무 리스트로 즉시 연결(Deep Link)되도록 설계 지침을 선언함으로써 불필요한 메뉴 탐색 단계 자체를 원천 제거하였습니다. 실무자 개인별로 당일 처리해야 할 우선순위 과업과 다가올 업무 일정을 접속 즉시 명확히 인지시키고 최적의 실행 경로를 제안하는 나침반 역할을 수행하도록 기준을 정립했습니다.

첫 화면 (Dashboard) document 1
첫 화면 (Dashboard) document 2
첫 화면 (Dashboard) document 3

2.0

2.0

2.0

Design System.

Design System.

Design System.

디자인 파운데이션과 컴포넌트 재정립으로

일관된 시각언어를 시스템 전반에 확산

디자인 파운데이션과 컴포넌트 재정립으로 일관된 시각언어를 시스템 전반에 확산

시스템의 근간이 되는 디자인 파운데이션을 전면 재구성하고, 화면을 구성하는 컴포넌트를 전수 검토·재설계했습니다.

개인의 경험이나 감각에 의존하지 않고도, 정의된 시각 원칙을 서비스 전반에 동일한 기준으로 적용할 수 있도록 체계를 정립했습니다.

또한 신규 컴포넌트를 반복 생성하지 않아도 조합만으로 화면 구성이 가능한 확장형 디자인 시스템 기반을 마련했습니다.

시스템의 근간이 되는 디자인 파운데이션을 전면 재구성하고, 화면을 구성하는 컴포넌트를 전수 검토·재설계했습니다.

개인의 경험이나 감각에 의존하지 않고도, 정의된 시각 원칙을 서비스 전반에 동일한 기준으로 적용할 수 있도록 체계를 정립했습니다.

또한 신규 컴포넌트를 반복 생성하지 않아도 조합만으로 화면 구성이 가능한 확장형 디자인 시스템 기반을 마련했습니다.

Foundation - 파운데이션

지속 가능한 활용 중심의 시스템 뼈대 정립

지속 가능한 활용 중심의

시스템 뼈대 정립

파운데이션은 내부 시스템의 뼈대를 이루는 기초 사양입니다. 파운데이션이 단단히 확립되지 않은 상태에서 운영되는 시스템은 설계자의 자의적 해석이 개입될 수밖에 없습니다.

이는 시스템마다 첫인상이 달라지고 화면마다 상이한 시각 언어가 쓰여 중복 UI를 만드는 원인이 되며, 나아가 운영 및 개발 구현 비용의 증가로 이어지게 됩니다.

파운데이션은 내부 시스템의 뼈대를 이루는 기초 사양입니다. 파운데이션이 단단히 확립되지 않은 상태에서 운영되는 시스템은 설계자의 자의적 해석이 개입될 수밖에 없습니다. 이는 시스템마다 첫인상이 달라지고 화면마다 상이한 시각 언어가 쓰여 중복 UI를 만드는 원인이 되며, 나아가 운영 및 개발 구현 비용의 증가로 이어지게 됩니다.

선언에 그치지 않는 Usage 정의 접목

일반적으로 파운데이션은 디자인 원칙을 선언하는 데 그치는 경우가 많아, 시간이 지나면 개인의 경험이나

감각에 의존해 기준이 흔들리는 문제가 반복됩니다.

Guide 2.0은 이러한 한계를 개선하기 위해 구체적인 실제 활용 사례(Usage)를 구성요소별로 매핑했습니다.

기준이 선언에만 머무르지 않고 실무에 즉시 접목될 수 있게 함으로써, 특정 개인의 주관에 휘둘리지 않고 일관된

시각 언어를 시스템 전반에 동일하게 적용할 수 있는 단단한 기반을 마련했습니다.

낯선 원칙도 누구나 쉽게 익힐 수 있도록

파운데이션의 구성요소별로 올바른 사용법과 잘못된 사용법을 한눈에 구분할 수 있도록 모범 사례(Do)와

피해야 할 사례(Don't)를 상세히 담았습니다. 이를 통해 기존 시스템에서는 실무자들에게 다소 낯설고 모호하게

느껴졌던 시각적 원칙과 가이드라인을 누구나 직관적으로 이해하고 쉽게 접근할 수 있도록 했습니다.

컬러 >

상태값 컬러 정의 & Usage

컬러 >

메인 컬러 정의 & Usage

엘리베이션 >

그림자 유형 정의 & Usage

타이포그래피 >

헤딩 유형 정의 & Usage

래디어스 >

Level 정의 & Usage

선언에 그치지 않는 Usage 정의 접목

일반적으로 파운데이션은 디자인 원칙을 선언하는 데 그치는 경우가 많아, 시간이 지나면 개인의 경험이나 감각에 의존해 기준이 흔들리는 문제가 반복됩니다.

Guide 2.0은 이러한 한계를 개선하기 위해 구체적인 실제 활용 사례(Usage)를 구성요소별로 매핑했습니다.

기준이 선언에만 머무르지 않고 실무에 즉시 접목될 수 있게 함으로써, 특정 개인의 주관에 휘둘리지 않고 일관된 시각 언어를 시스템 전반에 동일하게 적용할 수 있는 단단한 기반을 마련했습니다.

컬러 >

상태값 컬러 정의 & Usage

컬러 >

메인 컬러 정의 & Usage

엘리베이션 >

그림자 유형 정의 & Usage

타이포그래피 >

헤딩 유형 정의 & Usage

래디어스 >

Level 정의 & Usage

선언에 그치지 않는 Usage 정의 접목

일반적으로 파운데이션은 디자인 원칙을 선언하는 데 그치는 경우가 많아, 시간이 지나면 개인의 경험이나 감각에 의존해 기준이 흔들리는 문제가 반복됩니다.

Guide 2.0은 이러한 한계를 개선하기 위해 구체적인 실제 활용 사례(Usage)를 구성요소별로 매핑했습니다.

기준이 선언에만 머무르지 않고 실무에 즉시 접목될 수 있게 함으로써, 특정 개인의 주관에 휘둘리지 않고 일관된 시각 언어를 시스템 전반에 동일하게 적용할 수 있는 단단한 기반을 마련했습니다.

낯선 원칙도 누구나 쉽게 익힐 수 있도록

파운데이션의 구성요소별로 올바른 사용법과 잘못된 사용법을 한눈에 구분할 수 있도록 모범 사례(Do)와 피해야 할 사례(Don't)를 상세히 담았습니다. 이를 통해 기존 시스템에서는 실무자들에게 다소 낯설고 모호하게 느껴졌던 시각적 원칙과 가이드라인을 누구나 직관적으로 이해하고 쉽게 접근할 수 있도록 했습니다.

낯선 원칙도 누구나 쉽게 익힐 수 있도록

파운데이션의 구성요소별로 올바른 사용법과 잘못된 사용법을 한눈에 구분할 수 있도록 모범 사례(Do)와 피해야 할 사례(Don't)를 상세히 담았습니다. 이를 통해 기존 시스템에서는 실무자들에게 다소 낯설고 모호하게 느껴졌던 시각적 원칙과 가이드라인을 누구나 직관적으로 이해하고 쉽게 접근할 수 있도록 했습니다.

Component - 컴포넌트

새로운 부품의 정의 없이도

화면구성이 가능한 완성형 컴포넌트 체계

컴포넌트는 화면을 구성하는 가장 작은 단위입니다. 이를 조합해 화면을 구성하게 되는데, 실무적으로 컴포넌트가 패턴과의 연계 없이 단순 형태로만 존재할 경우 이를 해석하는 과정에서 편차가 생기고, 결국 유사한 기능인데도 제각각 다른 화면 패턴을 만들어내는 원인이 됩니다. 또한 ‘언제, 어떻게, 왜’ 써야 하는지에 대한 명확한 기준이 없다면 설계자가 매번 주관적으로 판단해 새로운 형태를 계속 만들어내는 환경이 됩니다.

전담 UX 조직 없이 운영되는 환경 속에서 이러한 ‘판단의 공백’을 메우고 누가 쓰더라도 균일한 결과물이 나오게 하기 위해, 수십 개의

컴포넌트마다 상세한 사용 가이드를 갖춘 살아있는 체계가 필요했습니다. 특히 분석 단계에서 업무적으로 꼭 필요한 핵심 컴포넌트가

누락되어 실무를 온전히 수용하지 못하는 한계도 발견되었기에, 전사 시스템의 컴포넌트와 위계를 완전히 재정비하게 되었습니다.

Component - 컴포넌트

새로운 부품의 정의 없이도

화면구성이 가능한 완성형 컴포넌트 체계

컴포넌트는 화면을 구성하는 가장 작은 단위입니다. 이를 조합해 화면을 구성하게 되는데, 실무적으로 컴포넌트가 패턴과의 연계 없이 단순 형태로만 존재할 경우 이를 해석하는 과정에서 편차가 생기고, 결국 유사한 기능인데도 제각각 다른 화면 패턴을 만들어내는 원인이 됩니다. 또한 ‘언제, 어떻게, 왜’ 써야 하는지에 대한 명확한 기준이 없다면 설계자가 매번 주관적으로 판단해 새로운 형태를 계속 만들어내는 환경이 됩니다.

전담 UX 조직 없이 운영되는 환경 속에서 이러한 ‘판단의 공백’을 메우고 누가 쓰더라도 균일한 결과물이 나오게 하기 위해, 수십 개의 컴포넌트마다 상세한 사용 가이드를 갖춘 살아있는 체계가 필요했습니다. 특히 분석 단계에서 업무적으로 꼭 필요한 핵심 컴포넌트가 누락되어 실무를 온전히 수용하지 못하는 한계도 발견되었기에, 전사 시스템의 컴포넌트와 위계를 완전히 재정비하게 되었습니다.

사용자 목적 중심의 컴포넌트 위계 재정비 및 구조화

전담 UX 조직이 없는 현실을 고려해, 누구나 가이드라인에 쉽게 접근하고 직관적으로 탐색할 수 있도록 컴포넌트 위계 구조부터 새롭게 정의했습니다.

실무자의 목적과 과업 시나리오에 맞추어 전체 요소를 아이덴티티, 탐색, 레이아웃, 액션, 선택, 입력 등 9개 상위 카테고리로 분류하고, 그 하위에 개별 컴포넌트들을 재배치했습니다.

이 시스템적 위계 정비를 통해 설계자는 더 이상 필요한 요소를 찾기 위해 헤매지 않고 직관적으로 꺼내 쓸 수 있게 되며, 새로운 컴포넌트를 매번 다시 정의하지 않아도

이미 검증된 컴포넌트만으로 모든 화면 구성이 가능한 완성형 체계의 기반을 보장합니다.

전담 UX 조직이 없는 현실을 고려해, 누구나 가이드라인에 쉽게 접근하고 직관적으로 탐색할 수 있도록 컴포넌트 위계 구조부터 새롭게 정의했습니다.

실무자의 목적과 과업 시나리오에 맞추어 전체 요소를 아이덴티티, 탐색, 레이아웃, 액션, 선택, 입력 등 9개 상위 카테고리로 분류하고, 그 하위에 개별 컴포넌트들을 재배치했습니다.

이 시스템적 위계 정비를 통해 설계자는 더 이상 필요한 요소를 찾기 위해 헤매지 않고 직관적으로 꺼내 쓸 수 있게 되며, 새로운 컴포넌트를 매번 다시 정의하지 않아도 이미 검증된 컴포넌트만으로 모든 화면 구성이 가능한 완성형 체계의 기반을 보장합니다.

아이덴티티

Identity

시스템 정체성 정의

시스템 로고(Identifier)

아이콘(Icons)

파비콘(Favicon)

탐색

Navigation

화면 이동 및 경로 탐색

사이드 메뉴(Side Navigation)

페이지네이션(Pagination)

헤더(Header)

뒤로가기(Back Button)

바로가기(Shortcut Button)

레이아웃 및 표현

Layout & View

공간 분할 및 콘텐츠 배치

달력(Calendar)

모달(Modal)

배지(Badge)

아코디언(Accordion)

이미지(Image)

캐러셀(Carousel)

탭(Tabs)

그리드(Grid)

스플리터(Splitter)

디바이더(Divider)

액션

Action

명령 실행 및 페이지 연결

링크(Link)

버튼(Button)

플로팅 버튼(FAB)

선택

Selection

조건 설정, 다중/단일 선택

라디오 버튼(Radio Button)

체크박스(Checkbox)

셀렉트(Select)

태그(Tag)

칩(Chip)

세그먼트(Segmented Control)

토글 스위치(Toggle Switch)

입력

Input

Data & Text 입력

입력 라벨(Input label)

날짜 입력 필드(Date Picker)

스핀 박스(Spinbox)

텍스트 영역(Textarea)

텍스트 입력 필드(Text Field)

상태 및 피드백

Status & Feedback

시스템 진행상황 및 알림

단계 표시기(Step Indicator)

로딩(Loading)

진행바(Progress Bar)

 도움

Help

맥락별 안내, 오류방지 가이드

툴팁(Tooltip)

토스트(Toast)

프로세스 가이드(Process Guide)

맥락적 도움말(Contextual Help)

시각화 및 대시보드

Visualization

데이터 기반 의사결정 시각화

첫 화면 대시보드(Dashboard)

차트(Chart)

맥락 중심의 가이드라인 설계와 100% 완결형 협업 프로세스

재정비된 컴포넌트들이 실무 프로세스 안에서 온전히 제 역할을 할 수 있도록, 수십 개의 개별 컴포넌트마다 구체적인 행동 지침을 세부적으로 명시했습니다. 각 요소를 '언제, 어떻게,

왜' 써야 하는지 직관적인 사용 가이드를 제공하고, 올바른 예시와 잘못된 변형을 한눈에 비교할 수 있는 Do / Don't(모범 사례 / 피해야 할 사례)를 전수 매핑했습니다. 정책적 기준과

샘플을 보고 이 컴포넌트를 어떻게 조합해서 써야 하는지, 어떤 식으로 변형하면 안 되는지를 파악하여 실무자들의 일관된 화면 설계가 자연스럽게 이루어 질 수 있게 하는 것을 목표로

했습니다.

재정비된 컴포넌트들이 실무 프로세스 안에서 온전히 제 역할을 할 수 있도록, 수십 개의 개별 컴포넌트마다 구체적인 행동 지침을 세부적으로 명시했습니다.

각 요소를 '언제, 어떻게, 왜' 써야 하는지 직관적인 사용 가이드를 제공하고, 올바른 예시와 잘못된 변형을 한눈에 비교할 수 있는 Do / Don't(모범 사례 / 피해야 할 사례)를 전수 매핑했습니다. 정책적 기준과 샘플을 보고 이 컴포넌트를 어떻게 조합해서 써야 하는지, 어떤 식으로 변형하면 안 되는지를 파악하여 실무자들의 일관된 화면 설계가 자연스럽게 이루어 질 수 있게 하는 것을 목표로 했습니다.

가이드라인과 실제 결과물의 1:1 연계

나아가, 각 컴포넌트 가이드라인과 실제 구현 결과물인 퍼블리싱 소스 링크를 1:1로 연계했습니다. 퍼블리셔나 개발자는 이를 통해 설계안의

의도를 개발 구현단계로 빠르고 정확하게 조립해 구현할 수 있도록 했습니다. 결과적으로 특정 개인의 경험이나 감각에 의존하지 않고,

기획·설계부터 최종 개발 구현 단계까지 해석의 왜곡 없이 일관된 시각 언어가 100% 온전하게 연결되는 유기적인 협업 환경을 공고히 했습니다.

맥락 중심의 가이드라인 설계와 100% 완결형 협업 프로세스

재정비된 컴포넌트들이 실무 프로세스 안에서 온전히 제 역할을 할 수 있도록, 수십 개의 개별 컴포넌트마다 구체적인 행동 지침을 세부적으로 명시했습니다. 각 요소를 '언제, 어떻게, 왜' 써야 하는지 직관적인 사용 가이드를 제공하고, 올바른 예시와 잘못된 변형을 한눈에 비교할 수 있는 Do / Don't(모범 사례 / 피해야 할 사례)를 전수 매핑했습니다. 정책적 기준과 샘플을 보고 이 컴포넌트를 어떻게 조합해서 써야 하는지, 어떤 식으로 변형하면 안 되는지를 파악하여 실무자들의 일관된 화면 설계가 자연스럽게 이루어 질 수 있게 하는 것을 목표로 했습니다.

맥락 중심의 가이드라인 설계와 100% 완결형 협업 프로세스

재정비된 컴포넌트들이 실무 프로세스 안에서 온전히 제 역할을 할 수 있도록, 수십 개의 개별 컴포넌트마다 구체적인 행동 지침을 세부적으로 명시했습니다. 각 요소를 '언제, 어떻게, 왜' 써야 하는지 직관적인 사용 가이드를 제공하고, 올바른 예시와 잘못된 변형을 한눈에 비교할 수 있는 Do / Don't(모범 사례 / 피해야 할 사례)를 전수 매핑했습니다. 정책적 기준과 샘플을 보고 이 컴포넌트를 어떻게 조합해서 써야 하는지, 어떤 식으로 변형하면 안 되는지를 파악하여 실무자들의 일관된 화면 설계가 자연스럽게 이루어 질 수 있게 하는 것을 목표로 했습니다.

가이드라인과 실제 결과물의 1:1 연계

나아가, 각 컴포넌트 가이드라인과 실제 구현 결과물인 퍼블리싱 소스 링크를 1:1로 연계했습니다. 퍼블리셔나 개발자는 이를 통해 설계안의 의도를 개발 구현단계로 빠르고 정확하게 조립해 구현할 수 있도록 했습니다.

결과적으로 특정 개인의 경험이나 감각에 의존하지 않고, 기획·설계부터 최종 개발 구현 단계까지 해석의 왜곡 없이 일관된 시각 언어가 100% 온전하게 연결되는 유기적인 협업 환경을 공고히 했습니다.

가이드라인과 실제 결과물의 1:1 연계

나아가, 각 컴포넌트 가이드라인과 실제 구현 결과물인 퍼블리싱 소스 링크를 1:1로 연계했습니다. 퍼블리셔나 개발자는 이를 통해 설계안의 의도를 개발 구현단계로 빠르고 정확하게 조립해 구현할 수 있도록 했습니다.

결과적으로 특정 개인의 경험이나 감각에 의존하지 않고, 기획·설계부터 최종 개발 구현 단계까지 해석의 왜곡 없이 일관된 시각 언어가 100% 온전하게 연결되는 유기적인 협업 환경을 공고히 했습니다.

만족도 조사+VoC 분석 결과 #2

심미성

용이성

편리성

심미성

용이성

편리성

용이성과 편리성 중심의 한계

기초자료에서 확인된 또 다른 특이점은 정돈된 ‘심미성’에 비해, 실무자들이 Task를 완수하며 체감하는 ‘조작 용이성’과 ‘업무 편리성’ 지표가 전 시스템 공통으로 낮은 점수를 기록하고 있다는 점이었습니다.

복잡한 비즈니스 로직이 얽힌 실제 운영 환경에서 사용자가 마주하는 '맥락적 사용 경험(Contextual Usability)의 난이도'가 매우 높으며, 시스템의 높은 전략적 중요성에 비해 현장 임직원들의 실무 몰입을 방해하는 구조적 병목이 존재하고 있음을 시사했습니다. 전사적인 UIUX 표준 가이드라인의 전면 개편 및 실무형 구조화가 왜 시급한지 증명해주는 지표였습니다.

UX 패러다임의 시프트: 익숙해져야만 쓰는

시스템에서 스스로 돕는 시스템으로

사용자 경험의 본질적인 개선이 선행되지 않는 시스템 현대화는 결국

익숙한 사용자들에게 기능적인 요구사항만 추가로 충족시켜 줄 뿐, 진짜 구조적인 문제들은 해결되지 않은 채 또 다른 비효율 서비스가 구현되는 결과를 초래합니다.

우리는 '익숙해지지 않아도 시스템이 스스로 사용자의 업무를 돕고 활용도를 높일 수 있는 환경'을 구축해 발견된 구조적 문제점들을 해결하기 위한 전략적 방향을 수립했습니다.

Low Barrier, High Ceiling

Low Barrier

낮은 진입장벽

직관적인 프로세스로 진입장벽 최소화

별도의 교육이나 동료에게 묻는 업무 문화가 아닌,

화면만 보고도 누구나 즉시 직관적으로 과업을

완결할 수 있는 환경을 만듭니다.

High Ceiling

높은 활용의 한계치

업무 최적화를 통한 시스템 활용도의 극대화

실제 운영하는 임직원의 사용성(Usability)을 극대화하여 전사의

업무 리드타임을 감소시키고, 시스템의 활용 한계치를

높여 미래의 유연한 시스템 확장 기반을 다집니다.

Contextual Support

사용자 맥락형 지원 체계

조력자 역할을 하는 지능형 인터랙션

시스템의 전 영역에서 사용자 업무여정(Task Flow)을

따라가며 다음 행동(Next Action)을 선제적으로

안내하는 상시 조력 체계를 지원합니다.

UX 패러다임의 시프트: 익숙해져야만 쓰는

시스템에서 스스로 돕는 시스템으로

사용자 경험의 본질적인 개선이 선행되지 않는 시스템 현대화는 결국

익숙한 사용자들에게 기능적인 요구사항만 추가로 충족시켜 줄 뿐, 진짜 구조적인 문제들은 해결되지 않은 채 또 다른 비효율 서비스가 구현되는 결과를 초래합니다.

우리는 '익숙해지지 않아도 시스템이 스스로 사용자의 업무를 돕고 활용도를 높일 수 있는 환경'을 구축해 발견된 구조적 문제점들을 해결하기 위한 전략적 방향을 수립했습니다.

Low Barrier, High Ceiling

Low Barrier

낮은 진입장벽

직관적인 프로세스로 진입장벽 최소화

별도의 교육이나 동료에게 묻는 업무 문화가 아닌,

화면만 보고도 누구나 즉시 직관적으로 과업을

완결할 수 있는 환경을 만듭니다.

High Ceiling

높은 활용의 한계치

업무 최적화를 통한 시스템 활용도의 극대화

실제 운영하는 임직원의 사용성(Usability)을 극대화하여 전사의

업무 리드타임을 감소시키고, 시스템의 활용 한계치를

높여 미래의 유연한 시스템 확장 기반을 다집니다.

Contextual Support

사용자 맥락형 지원 체계

조력자 역할을 하는 지능형 인터랙션

시스템의 전 영역에서 사용자 업무여정(Task Flow)을

따라가며 다음 행동(Next Action)을 선제적으로

안내하는 상시 조력 체계를 지원합니다.

Component - 컴포넌트

새로운 부품의 정의 없이도 화면구성이 가능한 완성형 컴포넌트 체계

컴포넌트는 화면을 구성하는 가장 작은 단위입니다. 이를 조합해 화면을 구성하게 되는데, 실무적으로 컴포넌트가 패턴과의 연계 없이 단순 형태로만 존재할 경우 이를 해석하는 과정에서 편차가 생기고, 결국 유사한 기능인데도 제각각 다른 화면 패턴을 만들어내는 원인이 됩니다. 또한 ‘언제, 어떻게, 왜’ 써야 하는지에 대한 명확한 기준이 없다면 설계자가 매번 주관적으로 판단해 새로운 형태를 계속 만들어내는 환경이 됩니다.

전담 UX 조직 없이 운영되는 환경 속에서 이러한 ‘판단의 공백’을 메우고 누가 쓰더라도 균일한 결과물이 나오게 하기 위해, 수십 개의 컴포넌트마다 상세한 사용 가이드를 갖춘 살아있는 체계가 필요했습니다.

특히 분석 단계에서 업무적으로 꼭 필요한 핵심 컴포넌트가 누락되어 실무를 온전히 수용하지 못하는 한계도 발견되었기에, 전사 시스템의 컴포넌트와 위계를 완전히 재정비하게 되었습니다.

Component - 컴포넌트

새로운 부품의 정의 없이도 화면구성이 가능한 완성형 컴포넌트 체계

컴포넌트는 화면을 구성하는 가장 작은 단위입니다. 이를 조합해 화면을 구성하게 되는데, 실무적으로 컴포넌트가 패턴과의 연계 없이 단순 형태로만 존재할 경우 이를 해석하는 과정에서 편차가 생기고, 결국 유사한 기능인데도 제각각 다른 화면 패턴을 만들어내는 원인이 됩니다. 또한 ‘언제, 어떻게, 왜’ 써야 하는지에 대한 명확한 기준이 없다면 설계자가 매번 주관적으로 판단해 새로운 형태를 계속 만들어내는 환경이 됩니다.

전담 UX 조직 없이 운영되는 환경 속에서 이러한 ‘판단의 공백’을 메우고 누가 쓰더라도 균일한 결과물이 나오게 하기 위해, 수십 개의 컴포넌트마다 상세한 사용 가이드를 갖춘 살아있는 체계가 필요했습니다.

특히 분석 단계에서 업무적으로 꼭 필요한 핵심 컴포넌트가 누락되어 실무를 온전히 수용하지 못하는 한계도 발견되었기에, 전사 시스템의 컴포넌트와 위계를 완전히 재정비하게 되었습니다.

최상위 UX 지침이 전사 시스템이 지켜야 할 거시적인 설계 원칙과 정체성을 선언한다면, UI 패턴은 그 지침 아래에서 ‘무엇을, 어떻게’에 대한 실무적인 답이며, 실제 업무에 원칙을 완벽하게 투영하는 구체적인 실행 모델입니다.


우리는 UX 지침의 철학을 그대로 수용한 UI 패턴을 전수 재정비했습니다. UI 패턴들은 앞서 디자인 시스템을 통해 목적별로 완결된 표준 '컴포넌트'들의 체계적인 조합으로 완성되어, 수많은 내부 시스템이 하나의 통일된 시각 언어로 소통할 수 있는 단단한 뼈대를 이루게 됩니다.

최상위 UX 지침이 전사 시스템이 지켜야 할 거시적인 설계 원칙과 정체성을 선언한다면, UI 패턴은 그 지침 아래에서 ‘무엇을, 어떻게’에 대한 실무적인 답이며, 실제 업무에 원칙을 완벽하게 투영하는 구체적인 실행 모델입니다.


우리는 UX 지침의 철학을 그대로 수용한 UI 패턴을 전수 재정비했습니다. UI 패턴들은 앞서 디자인 시스템을 통해 목적별로 완결된 표준 '컴포넌트'들의 체계적인 조합으로 완성되어, 수많은 내부 시스템이 하나의 통일된 시각 언어로 소통할 수 있는 단단한 뼈대를 이루게 됩니다.

기본구조

기본구조

좌측 메뉴

1

우측 패널

8

9

화면 유형

첫 화면

개요

1

첫 화면 설정

1

위젯 유형

12

14

데이터 조회

개요

1

조회조건 & 결과 공통

5

복합 레이아웃

6

팝업 - 과업수행 형

7

팝업 - 정보조회/선택형

6

25

화면 유형

데이터 등록

공통

1

단일 업무형

9

업무흐름 통합형

7

등록형 팝업

8

25

상세 페이지

공통

1

일반형 상세

6

통합형 상세

6

13

차트

개요

1

표준 차트 유형

8

그 밖의 차트

1

10

사용 정책부터 구현 코드까지 설계와 구현이

공백없이 이어지는 완결형 실무 지침서 구조

사용 정책부터 구현 코드까지

설계와 구현이 공백없이 이어지는

완결형 실무 지침서 구조

사용 정책부터 구현 코드까지

설계와 구현이 공백없이 이어지는

완결형 실무 지침서 구조

UI 패턴의 각 화면은 화면 샘플로서만 존재하지 않습니다. 실무자가 직관적으로 탐색할 수 있는 업무 목적 중심의 UI 패턴명을 명확히 정의하고, 이 패턴을 언제·왜 써야 하는지에 대한 상황별 개요와 설계 원칙, 화면 뼈대를 잡는 구조 설계를 단계별로 명시했습니다. 지침을 확인한 후 화면 내 링크를 통해 해당 패턴의 퍼블리싱 코드를 클릭 한 번으로 즉시 복사하여 실무에 적용할 수 있습니다.

UI 패턴의 각 화면은 화면 샘플로서만 존재하지 않습니다. 실무자가 직관적으로 탐색할 수 있는 업무 목적 중심의 UI 패턴명을 명확히 정의하고, 이 패턴을 언제·왜 써야 하는지에 대한 상황별 개요와 설계 원칙, 화면 뼈대를 잡는 구조 설계를 단계별로 명시했습니다. 지침을 확인한 후 화면 내 링크를 통해 해당 패턴의 퍼블리싱 코드를 클릭 한 번으로 즉시 복사하여 실무에 적용할 수 있습니다.

누구나 주관적 해석 없이 직관적으로 설계 규칙을 판독할 수 있도록 행동 지침을 필수, 권장, 지양, 금지 뱃지로 명세화했으며, 기본 패턴뿐 아니라 실제 현장에서 마주하는 예외 패턴까지 수록해 가이드와 현장 사이의 간극을 최소화하고자 했습니다. 이처럼 정책-사용규정-코드가 단 하나의 화면 안에서 끊김 없이 흐르는 구조를 통해, 기획부터 구현 단계까지 누구나 같은 기준 위에서 협업하는 완결형 환경을 지향합니다.

누구나 주관적 해석 없이 직관적으로 설계 규칙을 판독할 수 있도록 행동 지침을 필수, 권장, 지양, 금지 뱃지로 명세화했으며, 기본 패턴뿐 아니라 실제 현장에서 마주하는 예외 패턴까지 수록해 가이드와 현장 사이의 간극을 최소화하고자 했습니다. 이처럼 정책-사용규정-코드가 단 하나의 화면 안에서 끊김 없이 흐르는 구조를 통해, 기획부터 구현 단계까지 누구나 같은 기준 위에서 협업하는 완결형 환경을 지향합니다.

[UI 패턴 가이드 구조]

[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책

UI 패턴 가이드의 도입 부분에는 화면 설계 담당자가 실제로 화면을 그리기 전에, 반드시 알아야  핵심 설계 원칙과  지켜야 하는 필수·권장 사항을 가장 먼저 안내했습니다. 구체적인 가이드를 확인하기 전에  틀에서의 상위 원칙과 기준을 먼저 마주하게 함으로써, 설계자나 개발자의 성향에 따라 화면이 다르게 변형되는 것을 막기 위함입니다. 결과적으로 전사 시스템 전체가 일관된 품질과 통일된 경험을 상시 유지하는 것을 지향 했습니다.

[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 1
[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 2
[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 3
[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 4

[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책

UI 패턴 가이드의 도입 부분에는 화면 설계 담당자가 실제로 화면을 그리기 전에, 반드시 알아야  핵심 설계 원칙과  지켜야 하는 필수·권장 사항을 가장 먼저 안내했습니다. 구체적인 가이드를 확인하기 전에  틀에서의 상위 원칙과 기준을 먼저 마주하게 함으로써, 설계자나 개발자의 성향에 따라 화면이 다르게 변형되는 것을 막기 위함입니다. 결과적으로 전사 시스템 전체가 일관된 품질과 통일된 경험을 상시 유지하는 것을 지향 했습니다.

[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 1
[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 2
[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 3
[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책 - 예시 4

[설계 원칙 · 필수 권장사항] 자의적 변형을 막고 일관성을 지키는 설계 초기 정책

UI 패턴 가이드의 도입 부분에는 화면 설계 담당자가 실제로 화면을 그리기 전에, 반드시 알아야  핵심 설계 원칙과  지켜야 하는 필수·권장 사항을 가장 먼저 안내했습니다. 구체적인 가이드를 확인하기 전에  틀에서의 상위 원칙과 기준을 먼저 마주하게 함으로써, 설계자나 개발자의 성향에 따라 화면이 다르게 변형되는 것을 막기 위함입니다. 결과적으로 전사 시스템 전체가 일관된 품질과 통일된 경험을 상시 유지하는 것을 지향 했습니다.

디자인 패턴과 퍼블리싱 코드가 1:1로 완전하게 동기화된 라이브 자산 체계
정의된 모든 UI 패턴 디자인이 시안에 머무르지 않고, 실제 브라우저에서 인터랙티브하게 구동되는 퍼블리싱 코드로 완벽하게 구현하여 동기화
디자인 패턴과 퍼블리싱 코드가 1:1로 완전하게 동기화된 라이브 자산 체계
정의된 모든 UI 패턴 디자인이 시안에 머무르지 않고, 실제 브라우저에서 인터랙티브하게 구동되는 퍼블리싱 코드로 완벽하게 구현하여 동기화

디자인 패턴과 퍼블리싱 코드가

1:1로 완전하게 동기화된

라이브 자산 체계

정의된 모든 UI 패턴 디자인이 시안에 머무르지 않고,

실제 브라우저에서 인터랙티브하게 구동되는

퍼블리싱 코드로 완벽하게 구현하여 동기화

디자인 패턴과 퍼블리싱 코드가

1:1로 완전하게 동기화된

라이브 자산 체계

정의된 모든 UI 패턴 디자인이 시안에 머무르지 않고,

실제 브라우저에서 인터랙티브하게 구동되는

퍼블리싱 코드로 완벽하게 구현하여 동기화

지속 가능한 표준을 위한 전사 거버넌스 체계

아무리 훌륭한 가이드라인을 만들더라도, 시스템을 둘러싼 실무자들의 역할 기준과 협업 흐름이

명확히 정의되지 않은 상태로 개선/유지보수가 진행된다면 가이드는 결국 일회성 배포로 끝나고 맙니다.

우리는 Guide 2.0이 실제로 적용될 다양한 미래 시나리오를 정의하고, 미적용 시스템을 위한

'신규 구축(Track A)'과 기존 시스템을 위한 '내재화 운영(Track B)' 등 각 상황에 맞는

역할 분담(R&R)과 업무 프로세스를 PI부서와 함께 긴밀히 수립했습니다.

거버넌스 체계 수립에 앞서 —

업무 Track 분리 및 시나리오 정의

거버넌스 체계 수립에 앞서, 먼저 시스템 구축 상황과 비즈니스 상황에 맞춰 업무 트랙을 분리하고 운영 시나리오를 정의했습니다.

가이드가 적용되는 현장의 상황은 저마다 다릅니다. 표준을 처음 도입하는 신규 구축 단계와 이미 배포된 표준을 상시 유지·고도화하는

운영 단계는 요구되는 R&R과 프로세스가 본질적으로 다릅니다. 이를 반영한 업무 시나리오를 두 가지 트랙으로 이원화하고,

현장의 다양한 시스템 상황에 맞게 기민하게 대응할 수 있는 기준점을 먼저 마련했습니다.

R&R과 협업 프로세스 — 

Track별 실무형 운영 기준 수립

표준 지침이 실제 일하는 현장에서 그대로 이어지도록 역할 분담부터 협업 흐름과 산출물까지

촘촘하게 맞춘 실무형 프로세스를 규정했습니다. 각 부서가 Guide 2.0의 표준을 중심으로

어떻게 움직여야 하는지 책임 관계(R&R)를 명확히 나누고 업무 단계별 역할표를 정립했습니다.

이해관계자별R&R

AI어시스턴트가 진행

이를 바탕으로 각 업무 단계가 진행되면서 담당 부서 간에 소통하는 전체 협업 프로세스를 상세히 정의하고,

각 단계마다 반드시 나와야 하는 산출물과 다음 단계로 넘어가도 좋은지 검증하는 체크포인트(Checkpoint)

함께 마련해 시스템 구축 전 과정에서 표준 품질이 훼손되지 않는 관리 체계를 완성했습니다.

협업 프로세스

AI어시스턴트가 진행

아래 내용은 ‘AI어시스턴트 도입 프로젝트’를 별도로 진행 완료한 상황을 전제로 함

Track B2.

신규 컴포넌트 ∙ UI 패턴 필요 시

AI 어시스턴트와 연결된 운영 체계

이 R&R과 프로세스는 사람 간의 협업에만 머무르지 않습니다. 요구사항을 반영한 화면설계 초안 생성, 디자인·퍼블리싱 검수, 패턴 적합성 판단 등의 업무에 AI 어시스턴트가 보조 주체로 함께 연결되도록 흐름을 설계해, 사람과 AI가 각 단계에서 유연하게 맞물려 동작하는 운영 체계를 갖췄습니다.

AI 판단 결과는 사람이 한 번 더 검증하고, 개선이 필요한 경우 AI 로직 자체를 수정·재배포하는 로직 개선 사이클을 함께 마련해, 운영이 반복될수록 AI 판단의 정확도가 높아지는 구조로 설계했습니다.

방대한 가이드를 빠르게 찾아가기 위한 내비게이터,

2.0 가이드 요약본

가이드 요약본은 방대한 2.0의 가이드라인을 실무자들이 언제든 가볍게 펼쳐보고

원하는 곳으로 빠르게 찾아갈 수 있도록 만든 내비게이터입니다.

시스템을 기획, 디자인, 구현하고 운영하는 모든 이해관계자가 가이드라인의 무게에 압도되지 않도록, 기본 메뉴 구성부터 화면별 UI 패턴까지의 뼈대만 핵심적으로 추려 제공합니다.

임직원들이 요약본을 통해 원칙과 패턴의 전체 구조를 한눈에 파악한 뒤, 각 항목 하단에 연결된 링크를 클릭해 디테일한 상세 가이드와 예시를 바로 확인하는 것을 의도했습니다.

지속 가능한 표준을 위한 전사 거버넌스 체계

아무리 훌륭한 가이드라인을 만들더라도, 시스템을 둘러싼 실무자들의 역할 기준과 협업 흐름이

명확히 정의되지 않은 상태로 개선/유지보수가 진행된다면 가이드는 결국 일회성 배포로 끝나고 맙니다.

우리는 Guide 2.0이 실제로 적용될 다양한 미래 시나리오를 정의하고, 미적용 시스템을 위한

'신규 구축(Track A)'과 기존 시스템을 위한 '내재화 운영(Track B)' 등 각 상황에 맞는

역할 분담(R&R)과 업무 프로세스를 PI부서와 함께 긴밀히 수립했습니다.

거버넌스 체계 수립에 앞서 —

업무 Track 분리 및 시나리오 정의

거버넌스 체계 수립에 앞서, 먼저 시스템 구축 상황과 비즈니스 상황에 맞춰 업무 트랙을 분리하고 운영 시나리오를 정의했습니다.

가이드가 적용되는 현장의 상황은 저마다 다릅니다. 표준을 처음 도입하는 신규 구축 단계와 이미 배포된 표준을 상시 유지·고도화하는

운영 단계는 요구되는 R&R과 프로세스가 본질적으로 다릅니다. 이를 반영한 업무 시나리오를 두 가지 트랙으로 이원화하고,

현장의 다양한 시스템 상황에 맞게 기민하게 대응할 수 있는 기준점을 먼저 마련했습니다.

R&R과 협업 프로세스 — 

Track별 실무형 운영 기준 수립

표준 지침이 실제 일하는 현장에서 그대로 이어지도록 역할 분담부터 협업 흐름과 산출물까지

촘촘하게 맞춘 실무형 프로세스를 규정했습니다. 각 부서가 Guide 2.0의 표준을 중심으로

어떻게 움직여야 하는지 책임 관계(R&R)를 명확히 나누고 업무 단계별 역할표를 정립했습니다.

이해관계자별R&R

AI어시스턴트가 진행

이를 바탕으로 각 업무 단계가 진행되면서 담당 부서 간에 소통하는 전체 협업 프로세스를 상세히 정의하고,

각 단계마다 반드시 나와야 하는 산출물과 다음 단계로 넘어가도 좋은지 검증하는 체크포인트(Checkpoint)

함께 마련해 시스템 구축 전 과정에서 표준 품질이 훼손되지 않는 관리 체계를 완성했습니다.

협업 프로세스

AI어시스턴트가 진행

아래 내용은 ‘AI어시스턴트 도입 프로젝트’를 별도로 진행 완료한 상황을 전제로 함

Track B2.

신규 컴포넌트 ∙ UI 패턴 필요 시

AI 어시스턴트와 연결된 운영 체계

이 R&R과 프로세스는 사람 간의 협업에만 머무르지 않습니다. 요구사항을 반영한 화면설계 초안 생성, 디자인·퍼블리싱 검수, 패턴 적합성 판단 등의 업무에 AI 어시스턴트가 보조 주체로 함께 연결되도록 흐름을 설계해, 사람과 AI가 각 단계에서 유연하게 맞물려 동작하는 운영 체계를 갖췄습니다.

AI 판단 결과는 사람이 한 번 더 검증하고, 개선이 필요한 경우 AI 로직 자체를 수정·재배포하는 로직 개선 사이클을 함께 마련해, 운영이 반복될수록 AI 판단의 정확도가 높아지는 구조로 설계했습니다.

방대한 가이드를 빠르게 찾아가기 위한 내비게이터,

2.0 가이드 요약본

가이드 요약본은 방대한 2.0의 가이드라인을 실무자들이 언제든 가볍게 펼쳐보고

원하는 곳으로 빠르게 찾아갈 수 있도록 만든 내비게이터입니다.

시스템을 기획, 디자인, 구현하고 운영하는 모든 이해관계자가 가이드라인의 무게에 압도되지 않도록, 기본 메뉴 구성부터 화면별 UI 패턴까지의 뼈대만 핵심적으로 추려 제공합니다.

임직원들이 요약본을 통해 원칙과 패턴의 전체 구조를 한눈에 파악한 뒤, 각 항목 하단에 연결된 링크를 클릭해 디테일한 상세 가이드와 예시를 바로 확인하는 것을 의도했습니다.

지속 가능한 표준을 위한

전사 거버넌스 체계

아무리 훌륭한 가이드라인을 만들더라도, 시스템을 둘러싼 실무자들의 역할 기준과 협업 흐름이 명확히 정의되지 않은 상태로 개선/유지보수가 진행된다면 가이드는 결국 일회성 배포로 끝나고 맙니다.

우리는 Guide 2.0이 실제로 적용될 다양한 미래 시나리오를 정의하고, 미적용 시스템을 위한 '신규 구축(Track A)'과 기존 시스템을 위한 '내재화 운영(Track B)' 등 각 상황에 맞는 역할 분담(R&R)과 업무 프로세스를 PI부서와 함께 긴밀히 수립했습니다.

거버넌스 체계 수립에 앞서 — 업무 Track 분리 및 시나리오 정의

거버넌스 체계 수립에 앞서, 먼저 시스템 구축 상황과 비즈니스 상황에 맞춰 업무 트랙을 분리하고 운영 시나리오를 정의했습니다.

가이드가 적용되는 현장의 상황은 저마다 다릅니다. 표준을 처음 도입하는 신규 구축 단계와 이미 배포된 표준을 상시 유지·고도화하는 운영 단계는 요구되는 R&R과 프로세스가 본질적으로 다릅니다. 이를 반영한 업무 시나리오를 두 가지 트랙으로 이원화하고, 현장의 다양한 시스템 상황에 맞게 기민하게 대응할 수 있는 기준점을 먼저 마련했습니다.

R&R과 협업 프로세스 — 

Track별 실무형 운영 기준 수립

표준 지침이 실제 일하는 현장에서 그대로 이어지도록 역할 분담부터 협업 흐름과 산출물까지 촘촘하게 맞춘 실무형 프로세스를 규정했습니다.

각 부서가 Guide 2.0의 표준을 중심으로 어떻게 움직여야 하는지 책임 관계(R&R)를 명확히 나누고 업무 단계별 역할표를 정립했습니다.

이해관계자별R&R

AI어시스턴트가 진행

이를 바탕으로 각 업무 단계가 진행되면서 담당 부서 간에 소통하는 전체 협업 프로세스를 상세히 정의하고, 각 단계마다 반드시 나와야 하는 산출물과 다음 단계로 넘어가도 좋은지 검증하는 체크포인트(Checkpoint)를 함께 마련해 시스템 구축 전 과정에서 표준 품질이 훼손되지 않는 관리 체계를 완성했습니다.

협업 프로세스

AI어시스턴트가 진행

아래 내용은 ‘AI어시스턴트 도입 프로젝트’

별도로 진행 완료한 상황을 전제로 함

Track B2.

신규 컴포넌트 ∙ UI 패턴 필요 시

AI 어시스턴트와 연결된 운영 체계

이 R&R과 프로세스는 사람 간의 협업에만 머무르지 않습니다. 요구사항을 반영한 화면설계 초안 생성, 디자인·퍼블리싱 검수, 패턴 적합성 판단 등의 업무에 AI 어시스턴트가 보조 주체로 함께 연결되도록 흐름을 설계해, 사람과 AI가 각 단계에서 유연하게 맞물려 동작하는 운영 체계를 갖췄습니다.

AI 판단 결과는 사람이 한 번 더 검증하고, 개선이 필요한 경우 AI 로직 자체를 수정·재배포하는 로직 개선 사이클을 함께 마련해, 운영이 반복될수록 AI 판단의 정확도가 높아지는 구조로 설계했습니다.

방대한 가이드를 빠르게

찾아가기 위한 내비게이터,

2.0 가이드 요약본

가이드 요약본은 방대한 2.0의 가이드라인을 실무자들이 언제든 가볍게 펼쳐보고 원하는 곳으로 빠르게 찾아갈 수 있도록 만든 내비게이터입니다.

시스템을 기획, 디자인, 구현하고 운영하는 모든 이해관계자가 가이드라인의 무게에 압도되지 않도록, 기본 메뉴 구성부터 화면별 UI 패턴까지의 뼈대만 핵심적으로 추려 제공합니다.

임직원들이 요약본을 통해 원칙과 패턴의 전체 구조를 한눈에 파악한 뒤, 각 항목 하단에 연결된 링크를 클릭해 디테일한 상세 가이드와 예시를 바로 확인하는 것을 의도했습니다.

지속 가능한 표준을 위한 전사 거버넌스 체계

아무리 훌륭한 가이드라인을 만들더라도, 시스템을 둘러싼 실무자들의 역할 기준과 협업 흐름이

명확히 정의되지 않은 상태로 개선/유지보수가 진행된다면 가이드는 결국 일회성 배포로 끝나고 맙니다.

우리는 Guide 2.0이 실제로 적용될 다양한 미래 시나리오를 정의하고, 미적용 시스템을 위한

'신규 구축(Track A)'과 기존 시스템을 위한 '내재화 운영(Track B)' 등 각 상황에 맞는

역할 분담(R&R)과 업무 프로세스를 PI부서와 함께 긴밀히 수립했습니다.

거버넌스 체계 수립에 앞서 —

업무 Track 분리 및 시나리오 정의

거버넌스 체계 수립에 앞서, 먼저 시스템 구축 상황과 비즈니스 상황에 맞춰 업무 트랙을 분리하고 운영 시나리오를 정의했습니다.

가이드가 적용되는 현장의 상황은 저마다 다릅니다. 표준을 처음 도입하는 신규 구축 단계와 이미 배포된 표준을 상시 유지·고도화하는

운영 단계는 요구되는 R&R과 프로세스가 본질적으로 다릅니다. 이를 반영한 업무 시나리오를 두 가지 트랙으로 이원화하고,

현장의 다양한 시스템 상황에 맞게 기민하게 대응할 수 있는 기준점을 먼저 마련했습니다.

R&R과 협업 프로세스 — 

Track별 실무형 운영 기준 수립

표준 지침이 실제 일하는 현장에서 그대로 이어지도록 역할 분담부터 협업 흐름과 산출물까지

촘촘하게 맞춘 실무형 프로세스를 규정했습니다. 각 부서가 Guide 2.0의 표준을 중심으로

어떻게 움직여야 하는지 책임 관계(R&R)를 명확히 나누고 업무 단계별 역할표를 정립했습니다.

이해관계자별R&R

AI어시스턴트가 진행

이를 바탕으로 각 업무 단계가 진행되면서 담당 부서 간에 소통하는 전체 협업 프로세스를 상세히 정의하고,

각 단계마다 반드시 나와야 하는 산출물과 다음 단계로 넘어가도 좋은지 검증하는 체크포인트(Checkpoint)

함께 마련해 시스템 구축 전 과정에서 표준 품질이 훼손되지 않는 관리 체계를 완성했습니다.

협업 프로세스

AI어시스턴트가 진행

아래 내용은 ‘AI어시스턴트 도입 프로젝트’를 별도로 진행 완료한 상황을 전제로 함

Track B2.

신규 컴포넌트 ∙ UI 패턴 필요 시

AI 어시스턴트와 연결된 운영 체계

이 R&R과 프로세스는 사람 간의 협업에만 머무르지 않습니다. 요구사항을 반영한 화면설계 초안 생성, 디자인·퍼블리싱 검수, 패턴 적합성 판단 등의 업무에 AI 어시스턴트가 보조 주체로 함께 연결되도록 흐름을 설계해, 사람과 AI가 각 단계에서 유연하게 맞물려 동작하는 운영 체계를 갖췄습니다.

AI 판단 결과는 사람이 한 번 더 검증하고, 개선이 필요한 경우 AI 로직 자체를 수정·재배포하는 로직 개선 사이클을 함께 마련해, 운영이 반복될수록 AI 판단의 정확도가 높아지는 구조로 설계했습니다.

방대한 가이드를 빠르게 찾아가기 위한 내비게이터,

2.0 가이드 요약본

가이드 요약본은 방대한 2.0의 가이드라인을 실무자들이 언제든 가볍게 펼쳐보고

원하는 곳으로 빠르게 찾아갈 수 있도록 만든 내비게이터입니다.

시스템을 기획, 디자인, 구현하고 운영하는 모든 이해관계자가 가이드라인의 무게에 압도되지 않도록,

기본 메뉴 구성부터 화면별 UI 패턴까지의 뼈대만 핵심적으로 추려 제공합니다.

임직원들이 요약본을 통해 원칙과 패턴의 전체 구조를 한눈에 파악한 뒤, 각 항목 하단에 연결된 링크를 클릭해

디테일한 상세 가이드와 예시를 바로 확인하는 것을 의도했습니다.

2.0 표준의 자체 품질 점검 도구 — 가이드 점검 체크리스트

2.0의 UX 지침과 UI 패턴이 시스템에 올바르게 적용되었는지 설계·디자인·개발·운영 단계에서 체계적으로 확인하기 위한 도구인 '체크리스트'를 함께 마련했습니다.

지켜야 할 필수 항목이 빠짐없이 적용되었는지 동일한 기준으로 검증할 수 있도록 항목별 점검 절차와 준수 기준을 정의하며, 가이드라인 기반의 개선체크리스트를 활용한 검증을 지속적으로 반복함으로써,

2.0 표준이 시스템 전반에 점진적으로 내재화되도록 돕는 것을 목적으로 했습니다. 누적된 체크리스트 점검 결과는 이후 AI 어시스턴트가 준수·미준수를 판단하는 학습 데이터로도 활용되어, 사람의 점검 기준이 AI의 자동 검수 능력으로 확장되는 기반이 됩니다.

2.0 표준의 자체 품질 점검 도구

— 가이드 점검 체크리스트

2.0의 UX 지침과 UI 패턴이 시스템에 올바르게 적용되었는지 설계·디자인·개발·운영 단계에서 체계적으로 확인하기 위한 도구인 ‘체크리스트’를 함께 마련했습니다.

지켜야 할 필수 항목이 빠짐없이 적용되었는지 동일한 기준으로 검증할 수 있도록 항목별 점검 절차와 준수 기준을 정의하며, 가이드라인 기반의 개선체크리스트를 활용한 검증을 지속적으로 반복함으로써,

2.0 표준이 시스템 전반에 점진적으로 내재화되도록 돕는 것을 목적으로 했습니다. 누적된 체크리스트 점검 결과는 이후 AI 어시스턴트가 준수·미준수를 판단하는 학습 데이터로도 활용되어, 사람의 점검 기준이 AI의 자동 검수 능력으로 확장되는 기반이 됩니다.

Visual Hierarchy

1

Information Architecture

3

Menu Structure

5

Component Consistency

2

Form Accessibility

4

User Feedback

6

2.0 표준의 자체 품질 점검 도구

— 가이드 점검 체크리스트

2.0의 UX 지침과 UI 패턴이 시스템에 올바르게 적용되었는지 설계·디자인·개발·운영 단계에서 체계적으로 확인하기 위한 도구인 ‘체크리스트’를 함께 마련했습니다.

지켜야 할 필수 항목이 빠짐없이 적용되었는지 동일한 기준으로 검증할 수 있도록 항목별 점검 절차와 준수 기준을 정의하며, 가이드라인 기반의 개선체크리스트를 활용한 검증을 지속적으로 반복함으로써,

2.0 표준이 시스템 전반에 점진적으로 내재화되도록 돕는 것을 목적으로 했습니다. 누적된 체크리스트 점검 결과는 이후 AI 어시스턴트가 준수·미준수를 판단하는 학습 데이터로도 활용되어, 사람의 점검 기준이 AI의 자동 검수 능력으로 확장되는 기반이 됩니다.

Visual Hierarchy

1

Information Architecture

3

Menu Structure

5

Component Consistency

2

Form Accessibility

4

User Feedback

6

2.0 표준의 자체 품질 점검 도구

— 가이드 점검 체크리스트

2.0의 UX 지침과 UI 패턴이 시스템에 올바르게 적용되었는지 설계·디자인·개발·운영 단계에서 체계적으로 확인하기 위한 도구인 ‘체크리스트’를 함께 마련했습니다.

지켜야 할 필수 항목이 빠짐없이 적용되었는지 동일한 기준으로 검증할 수 있도록 항목별 점검 절차와 준수 기준을 정의하며, 가이드라인 기반의 개선체크리스트를 활용한 검증을 지속적으로 반복함으로써,

2.0 표준이 시스템 전반에 점진적으로 내재화되도록 돕는 것을 목적으로 했습니다. 누적된 체크리스트 점검 결과는 이후 AI 어시스턴트가 준수·미준수를 판단하는 학습 데이터로도 활용되어, 사람의 점검 기준이 AI의 자동 검수 능력으로 확장되는 기반이 됩니다.

2.0 표준의 자체 품질 점검 도구

— 가이드 점검 체크리스트

2.0의 UX 지침과 UI 패턴이 시스템에 올바르게 적용되었는지 설계·디자인·개발·운영 단계에서 체계적으로 확인하기 위한 도구인 ‘체크리스트’를 함께 마련했습니다.

지켜야 할 필수 항목이 빠짐없이 적용되었는지 동일한 기준으로 검증할 수 있도록 항목별 점검 절차와 준수 기준을 정의하며, 가이드라인 기반의 개선체크리스트를 활용한 검증을 지속적으로 반복함으로써,

2.0 표준이 시스템 전반에 점진적으로 내재화되도록 돕는 것을 목적으로 했습니다. 누적된 체크리스트 점검 결과는 이후 AI 어시스턴트가 준수·미준수를 판단하는 학습 데이터로도 활용되어, 사람의 점검 기준이 AI의 자동 검수 능력으로 확장되는 기반이 됩니다.

화면설계와 기능정의에 필요한

모든 실무 자산을 집약한 설계 가이드

화면설계와 기능정의에 필요한 모든 실무 자산을 집약한 설계 가이드

화면 설계의 일관성과 완성도가 유지되도록, 화면 기획 및 기능 정의에 필요한 실무 자산을 집약해 제공합니다.

디스크립션 작성, 표기방법 등의 공통적인 규칙부터, 기본 정책/플로우 차트, 설계 템플릿,

그리고 입력·선택·그리드·버튼·피드백 등 주요 UI 컴포넌트, 설계 체크리스트까지 전수 수록했습니다.

화면 설계의 일관성과 완성도가 유지되도록, 화면 기획 및 기능 정의에 필요한 실무 자산을 집약해 제공합니다.

디스크립션 작성, 표기방법 등의 공통적인 규칙부터, 기본 정책/플로우 차트, 설계 템플릿, 그리고 입력·선택·그리드·버튼·피드백 등 주요 UI 컴포넌트, 설계 체크리스트까지 전수 수록했습니다.

권한과 데이터 조건에 따른 UI 노출·상태 정의 가이드나 정보구조와 데이터 상태별 케이스 정의 등

실제 참고할 수 있는 현장 사례까지 함께 담음으로써 설계자가 화면을 그릴 때 항목 누락을 원천적으로 예방하고,

실무에서 즉시 꺼내 쓸 수 있는 가장 현실적인 설계의 기준점이 되고자 했습니다.

권한과 데이터 조건에 따른 UI 노출·상태 정의 가이드나 정보구조와 데이터 상태별 케이스 정의 등 실제 참고할 수 있는 현장 사례까지 함께 담음으로써 설계자가 화면을 그릴 때 항목 누락을 원천적으로 예방하고, 실무에서 즉시 꺼내 쓸 수 있는 가장 현실적인 설계의 기준점이 되고자 했습니다.

[Proposals for the Next Step]

컨설팅 이후 내재화 로드맵

컨설팅 종료 이후, Guide 2.0 표준이 일회성 배포에 그치지 않고 살아있는 자산으로 동작할 수 있도록

시스템 적용 상황에 따라 맞춤형 트랙(Track A/B)이 가동되는 단계별 이행 로드맵을 제안하였습니다.

Chief Product Officer

Park Hanjun

Product Manager

Jian

Jo Yoolim

Lee Jieun

Product Designer

Kim Eun Hye

Jeong Euigeon

Kim Jun Ha

Publisher

Gong Insik

Hwang Chaewon

Oh Kyunghoon

SAMSUNG E&A

26.05

[Proposals for the Next Step]

컨설팅 이후 내재화 로드맵

컨설팅 종료 이후, Guide 2.0 표준이 일회성 배포에 그치지 않고 살아있는 자산으로 동작할 수 있도록 시스템 적용 상황에 따라 맞춤형 트랙(Track A/B)이 가동되는 단계별 이행 로드맵을 제안하였습니다.

Phase 01.

컨설팅 단계

UI/UX 원칙 및 표준 자산 수립

  • 전사 시스템의 UI/UX 대원칙과 가이드라인 정립 완료

  • 실무에 즉시 적용 가능한 디자인 가이드 및 퍼블리싱 소스 작업 완료

Phase 02.

전환 및 적용 단계

내재화 단계 이전 기반 마련

핵심 자산의 프레임워크화

  • 컨설팅 결과물을 내재화 즉시 시스템에 이식할 수 있도록, 공통 프레임워크 및 시스템 환경 구축

AI 어시스턴트 도입을 통한 업무 자동화

  • AI 설계 어시스턴트

    • 비즈니스 요구사항 입력 시 화면 레이아웃과 기능 설계 초안을 자동으로 생성하여 기획 공수 단축

  • AI 검수 어시스턴트

    • 퍼블리싱 소스의 표준 준수 여부(QA)를 자동 검증하고 이슈 리스트를 구조화해 반복적인 검수 작업 최소화

    • 운영 인력이 자체적으로 설계와 품질 검수를 수행할 수 있는 자립형 AI 기반 환경 마련

Phase 03.

운영 / 내재화 단계

거버넌스 정착 및 점진적 전사 확산

Guide 2.0 내재화 전담 운영 조직

  • 삼성E&A와 수행사 간 일관된 기준으로 거버넌스를 이끌고, 현장 맞춤형으로 일관된 협업 프로세스를 상시 개선할 조직 운영

  • 신규 시스템을 구축하는 Track A와 기존 시스템을 내재화 관리하는 Track B가 동시에 독립적으로 가동될 수 있도록 실질적인 전사 내재화 준비 완료

촘촘한 품질 게이트 가동 및 상시 검수

  • 기획·디자인·개발 전 과정에서 체크리스트 기반의 검수를 주도하고, 미비 사항 발생 시 즉각적인 수정·보완 진행

  • QA 주관 아래 전사 시스템의 품질이 표준 가이드라인에 완벽히 부합하는지 철저한 통제 체계 유지

가이드라인의 선순환 및 전사 확산

  • 전담 조직 중심의 일관된 거버넌스 운영을 통해, 현업 실무 사이클에서 발생하는 요구사항을 흡수하여 가이드를 지속적으로 업데이트

  • 안정화된 거버넌스 체계를 바탕으로 대상 시스템을 전사 전반으로 점진적으로 확대하여 궁극적인 통합 업무 경험 구현